Make a family todo list with Sinatra

Make a family todo list with Sinatra

I created it by trying to make one app with Sinatra. However, the function as a base is referred to here.

Introduction to Sinatra (17 times in total) --Dot installation for programming

This time, we will add a function so that it will be a todo list that can be used by the family. The main functions to be added are the following four points.

--Display of posting time --Select box to select user --Todo display corresponding to the user --New user registration

I think it will be a good subject as a step up from the introduction to sinatra. First of all, it is the screen of the completed application.

The following is a description of the code.

Posting time display

Load Date class into rb file.

tlist.rb

require ‘date’

Add created_at to the table created in SQL file (record generation time is automatically acquired).

table.sql

create table todos
(
  id integer PRIMARY key,
  users_id integer,
  body text,
  created_at
);

Added a block that describes the posting time in the block that displays the body elements in order with each method for the instance variable @todos. Change to Time class with To_time method and format it for easy viewing with strftimeme method.

index.erb

<div class=“time”>
  <%= todo.created_at.to_time.strftime(“%Y/%m/%d %H:%M:%S”)%>
  <span class=“delete delete_todo”>[x]</span>
</div>

Installation of select box to specify user

Create users table in SQL file.

table.sql

create table users
(
  id integer primary key,
  userName text
);

Store table information in Users class with ActiveRecord :: Base method.

tlist.rb

class Users < ActiveRecord::Base
  validates :userName, presence: true
end

Pass the Users class to an instance variable.

tlist.rb

get ‘/‘ do
  @title =“To-do list”
  @todos = Todos.all
  @users = Users.all
  erb :index
end

By displaying the values in the select box sequentially with each method, the user can be selected in the select box.

index.erb

<select name=“users_id” >
  <% @users.each do |user|%>
    <option value=“<%= user.id%>”><%= user.userName%></option>
  <% end %>
</select>

Display of todo items corresponding to the user

Since I didn't know how to implement using one-to-many of tables, I added the result when id matches in the if statement. The value sent by select earlier is the id of the users table, and it is set to be passed to the users_id of the todos table.

tlist.rb

post ‘/create_todo’ do
  Todos.create(body: params[:body],users_id: params[:users_id])
  redirect to(‘/‘)
end

index.erb

  <% @users.each do |user| %>
    <div class=“user_box” data-user_id = “<%=user.id%>” data-token = “<%= Rack::Csrf.csrf_token(env)%>”>
        <div class=“user_name”>
          <%= Rack::Utils.escape_html(user.userName)%>
          <span class=“delete delete_user”>[x]</span>
        </div>
        <ul>
          <% @todos.each do |todo|%>
            <%if user.id == todo.users_id%>
              <li data-id = “<%= todo.id%>” data-token = “<%= Rack::Csrf.csrf_token(env)%>”>
                <div class=“todo_body”>
                  <%= Rack::Utils.escape_html(todo.body)%>
                </div>
              </li>
          <% end%>
        </ul>
      <% end %>
    </div>
  <% end %>

New user registration function

Create a form similar to the input form of the todo list, and set to return the entered value as userName.

index.erb

<div class=“user_form”>
  <form action=“/create_user” method = “post”>
    <%= Rack::Csrf.csrf_tag(env)%>
    <span>New user name:</span>
    <input type=“text” name=“userName” class=“user_input_box”>
    <input type=“submit” value=“New registration” class= ‘btn btn_user’>
  </form>
</div>

Generate data in the users table.

tlist.rb

post ‘/create_user’ do
  Users.create(userName: params[:userName])
  redirect to(‘/‘)
end

Most of the above is complete. Other token processing and user deletion functions are omitted here. Please see github for the products.

Other notes

About Csrf (request forcing) measures ※(CSRF：Cross-site Request Forgery) It is provided to prevent the request from being sent against the intention of the user. You can check if the request was sent from the legitimate page on the request destination page. As a process, a token is charged in the input data with a hidden element, and the request destination confirms whether the token is formal.

Reference: Hiyokko engineer summarized CSRF measures (will be updated at any time) | Chronodrive