[RUBY] 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. view90%.png

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.


Add the data sent by post to the todos table.

tlist.rb


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

View todo list for each user. Display users in order at @ users.esch Next, if the id of the given users table and the users_id of the todos table match, specify to display the todo list.

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

Recommended Posts

Make a family todo list with Sinatra
Make a family todo list with Sinatra
Make a list map with LazyMap
Let's make a LINE Bot with Ruby + Sinatra --Part 2
Let's make a LINE Bot with Ruby + Sinatra --Part 1
I want to make a list with kotlin and java!
Make a digging maze with Ruby2D
Make a slideshow tool with JavaFX
Make a Christmas tree with swift
Make a typing game with ruby
Let's make a Christmas card with Processing!
Draw a graph with Sinatra and Chartkick
Let's make a smart home with Ruby!
Make a login function with Rails anyway
[docker] [nginx] Make a simple ALB with nginx
Make a site template easily with Rails
Create Scala Seq from Java, make Scala Seq a Java List
Let's make a search function with Rails (ransack)
[Android] I tried to make a material list screen with ListView + Bottom Sheet
Make System.out a Mock with Spock Test Framework
Run Scala with GraalVM & make it a native image
Practice making a simple chat app with Docker + Sinatra
[Java basics] Let's make a triangle with a for statement
[Personal application work memo] Make a calendar with simple_calendar
Make a reflection utility ②
Make a reflection utility ③
Make a reflection utility ①
[Beginner] Try to make a simple RPG game with Java ①
I want to make a function with kotlin and java!
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ① ~ Hello World ~
Learning Ruby with AtCoder 13 How to make a two-dimensional array
Let's make a simple API with EC2 + RDS + Spring boot ①
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ⑤ ~ Template standardization ~