[RUBY] Faites une liste de choses à faire en famille avec Sinatra

Faites une liste de choses à faire en famille avec Sinatra

Je l'ai créé en essayant de créer une application avec Sinatra. Cependant, la fonction de base est mentionnée ici.

Introduction à Sinatra (17 fois au total) --Dot install pour la programmation

Cette fois, nous allons ajouter une fonction pour que ce soit une liste de tâches pouvant être utilisée par la famille. Les principales fonctions à ajouter sont les quatre points suivants.

--Affichage de l'heure de publication

• Cochez la case pour sélectionner l'utilisateur --Todo affichage correspondant à l'utilisateur --Enregistrement d'un nouvel utilisateur

Je pense que ce sera un bon sujet comme une étape de l'introduction à sinatra. Tout d'abord, c'est l'écran de l'application complétée.

Ce qui suit est une description du code.

Affichage de l'heure de publication

Chargez la classe Date dans le fichier rb.

tlist.rb

require ‘date’

Ajoutez created_at à la table créée dans le fichier SQL (il obtiendra automatiquement l'heure de génération de l'enregistrement).

table.sql

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

Ajout d'un bloc qui décrit l'heure de publication dans le bloc qui affiche les éléments du corps dans l'ordre avec chaque méthode pour la variable d'instance @todos. Passez à la classe Time avec la méthode To_time et formatez-la pour une visualisation facile avec la méthode strftimeme.

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 de la boîte de sélection pour spécifier l'utilisateur

Créez la table des utilisateurs dans le fichier SQL.

table.sql

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

Stockez les informations de table dans la classe Users avec la méthode ActiveRecord :: Base.

tlist.rb

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

Passez la classe Users à la variable d'instance.

tlist.rb

get ‘/‘ do
  @title ="Liste de choses à faire"
  @todos = Todos.all
  @users = Users.all
  erb :index
end

En affichant les valeurs dans la zone de sélection de manière séquentielle avec chaque méthode, l'utilisateur peut être sélectionné dans la zone de sélection.

index.erb

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

Affichage des todo items correspondant à l'utilisateur

Comme je ne savais pas comment implémenter en utilisant des tables un-à-plusieurs, j'ai ajouté le résultat lorsque l'id correspond à l'instruction if. La valeur envoyée par select plus tôt est l'identifiant de la table users, et elle est définie pour être transmise à user_id de la table todos.

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 %>

Nouvelle fonction d'enregistrement des utilisateurs

Créez un formulaire similaire au formulaire d'entrée de la liste Todo et définissez-le pour renvoyer la valeur entrée sous la forme userName.

index.erb

<div class=“user_form”>
  <form action=“/create_user” method = “post”>
    <%= Rack::Csrf.csrf_tag(env)%>
    <span>Nouveau nom d'utilisateur:</span>
    <input type=“text” name=“userName” class=“user_input_box”>
    <input type=“submit” value=Classe «Nouvelle inscription»= ‘btn btn_user’>
  </form>
</div>

Générez des données dans la table des utilisateurs.

tlist.rb

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

La plupart de ce qui précède est terminé. Les autres fonctions de traitement des jetons et de suppression des utilisateurs sont omises ici. Veuillez consulter github pour les produits.

Autres notes

À propos des mesures Csrf (Request Compulsion) ※(CSRF：Cross-site Request Forgery) Il est prévu pour empêcher l'envoi de la demande contre l'intention de l'utilisateur. Vous pouvez vérifier si la demande a été envoyée à partir de la page légitime sur la page de destination de la demande. En tant que processus, un jeton est facturé dans les données d'entrée avec un élément masqué et la destination de la demande confirme si le jeton est formel.

Référence: mesures CSRF résumées par l'ingénieur poussin (mise à jour prévue à tout moment) | Chronodrive