Ruby on Rails - Vues

Une vue Rails est un programme ERb qui partage des données avec les contrôleurs via des variables accessibles mutuellement.

Si vous regardez dans le répertoire app / views de l'application de la bibliothèque, vous verrez un sous-répertoire pour chacun des contrôleurs, nous avons créé: book. Chacun de ces sous-répertoires a été créé automatiquement lorsque le contrôleur du même nom a été créé avec le script de génération.

Les rails vous indiquent que vous devez créer le fichier de vue pour chaque nouvelle méthode. Chaque méthode que vous définissez dans le contrôleur doit avoir unerb fichier, portant le même nom que la méthode, pour afficher les données collectées par la méthode.

Créons donc des fichiers de vue pour toutes les méthodes que nous avons définies dans le book_controller.rb. Lors de l'exécution de ces vues, vérifiez simultanément que ces actions sont applicables ou non dans la base de données.

Création d'un fichier de vue pour la méthode de liste

Créez un fichier appelé list.html.erben utilisant votre éditeur de texte préféré et enregistrez-le dans l'application / vues / livre. Après avoir créé et enregistré le fichier, actualisez votre navigateur Web. Vous devriez voir une page vierge; si vous ne le faites pas, vérifiez l'orthographe de votre fichier et assurez-vous qu'il correspond exactement à la méthode de votre contrôleur.

Maintenant, affichez le contenu réel. Mettons le code suivant dans list.html.erb.

<% if @books.blank? %>
<p>There are not any books currently in the system.</p>
<% else %>
<p>These are the current books in our system</p>

<ul id = "books">
   <% @books.each do |c| %>
   <li><%= link_to c.title, {:action => 'show', :id => c.id} -%></li>
   <% end %>
</ul>

<% end %>
<p><%= link_to "Add new Book", {:action => 'new' }%></p>

Le code à exécuter consiste à vérifier si le tableau @books contient des objets. le.blank?La méthode retourne true si le tableau est vide et false s'il contient des objets. Cet objet @books a été créé dans le contrôleur à l'intérieur de la méthode list.

Le code entre les balises <% =%> est un link_toappel de méthode. Le premier paramètre de link_to est le texte à afficher entre les balises <a>. Le deuxième paramètre est quelle action est appelée lorsque le lien est cliqué. Dans ce cas, c'est la méthode show. Le paramètre final est l'id du livre qui est passé via l'objet params.

Maintenant, essayez d'actualiser votre navigateur et vous devriez obtenir l'écran suivant car nous n'avons aucun livre dans notre bibliothèque.

Création d'un fichier de vue pour une nouvelle méthode

Jusqu'à présent, nous n'avons aucun livre dans notre bibliothèque. Nous devons créer peu de livres dans le système. Alors, concevons une vue correspondant à lanew méthode définie dans le book_controller.rb.

Créez un fichier appelé new.html.erb à l'aide de votre éditeur de texte préféré et enregistrez-le dans app / views / book. Ajoutez le code suivant au fichier new.html.erb.

<h1>Add new book</h1>

<%= form_tag :action => 'create' do %>
<p><label for = "book_title">Title</label>:

<%= text_field 'books', 'title' %></p>
<p><label for = "book_price">Price</label>:

<%= text_field 'books', 'price' %></p>
<p><label for = "book_subject_id">Subject</label>:

<%= collection_select(:books, :subject_id, @subjects, :id, :name, prompt: true) %></p>
<p><label for = "book_description">Description</label><br/>

<%= text_area 'books', 'description' %></p>
<%= submit_tag "Create" %>

<% end -%>
<%= link_to 'Back', {:action => 'list'} %>

Ici form_tagLa méthode interprète le code Ruby dans une balise HTML <form> régulière en utilisant toutes les informations qui lui sont fournies. Cette balise, par exemple, génère le code HTML suivant -

<form action = "/book/create" method = "post">

La méthode suivante est text_fieldqui génère un champ de texte <input>. Les paramètres de text_field sont l'objet et le nom du champ. Dans ce cas, l'objet est livre et le nom est titre .

Méthode Rails appelée collection_select, crée un menu de sélection HTML construit à partir d'un tableau, tel que celui de @books. Il y a cinq paramètres, qui sont les suivants -

  • :book- L'objet que vous manipulez. Dans ce cas, c'est un objet livre.

  • :subject_id - Le champ qui est rempli lorsque le livre est enregistré.

  • @books - La baie avec laquelle vous travaillez.

  • :id- La valeur stockée dans la base de données. En termes de HTML, il s'agit du paramètre de valeur de la balise <option>.

  • :name- La sortie que l'utilisateur voit dans le menu déroulant. Il s'agit de la valeur entre les balises <option>.

Le prochain utilisé est submit_tag, qui génère un bouton <input> qui soumet le formulaire. Enfin, il y a leend méthode qui se traduit simplement par </form>.

Accédez à votre navigateur et visitez http://localhost:3000/book/new. Cela vous donnera l'écran suivant.

Entrez des données dans ce formulaire, puis cliquez sur le bouton Créer. Ici, j'ai ajouté les détails suivants dans les champs -

Title: Advance Physics
Price: 390
Subject: Physics
Description: This is test to create new book

Lorsque vous cliquez sur le Create bouton, il appellera le create méthode, qui n'a besoin d'aucune vue car cette méthode utilise soit list ou newméthodes pour afficher les résultats. Ainsi, lorsque vous cliquez sur le bouton Créer, les données doivent être soumises avec succès et vous rediriger vers la page de liste, dans laquelle vous avez maintenant un seul élément répertorié comme suit -

Si vous cliquez sur le lien, vous devriez voir une autre erreur de modèle manquant, car vous n'avez pas encore créé le fichier de modèle pour la méthode show.

Création d'un fichier de vue pour la méthode show

Cette méthode affichera le détail complet de tout livre disponible dans la bibliothèque. Créez un fichier show.html.erb sous app / views / book et remplissez-le avec le code suivant -

<h1><%= @book.title %></h1>

<p>
   <strong>Price: </strong> $<%= @book.price %><br />
   <strong>Subject :</strong> <%= @book.subject.name %><br />
   <strong>Created Date:</strong> <%= @book.created_at %><br />
</p>

<p><%= @book.description %></p>

<hr />

<%= link_to 'Back', {:action => 'list'} %>

C'est la première fois que vous tirez pleinement parti des associations, qui vous permettent d'extraire facilement des données d'objets associés.

Le format utilisé est @variable.relatedObject.column. Dans ce cas, vous pouvez extraire la valeur du nom du sujet via la variable @book à l'aide dubelongs_toles associations. Si vous cliquez sur un enregistrement répertorié, l'écran suivant s'affiche.

Création d'un fichier de vue pour la méthode d'édition

Créez un nouveau fichier appelé edit.html.erb et enregistrez-le dans app / views / book. Remplissez-le avec le code suivant -

<h1>Edit Book Detail</h1>

<%= form_for @book, :url =>{:action => "update", :id =>@book} do |f| %>

<p>Title: <%= f.text_field 'title' %></p>
<p>Price: <%= f.text_field  'price' %></p>
<p>Subject: <%= f.collection_select :subject_id, Subject.all, :id, :name %></p>
<p>Description<br/>

<%= f.text_area 'description' %></p>
<%= f.submit "Save changes" %>
<% end %>

<%= link_to 'Back', {:action => 'list' } %>

Ce code est très similaire au new méthode sauf action à mettre à jour au lieu de créer et de définir un identifiant.

Dans ce scénario, nous avons utilisé form_forbalise pour l'action de formulaire. Il fonctionnera mieux queform_tag. Pourquoi parce qu'il créera facilement une interaction avec le modèle. Par conséquent, il est préférable d'utiliser la balise form_for chaque fois que vous avez besoin d'une interaction entre le modèle et les champs du formulaire.

À ce stade, nous avons besoin de quelques modifications dans le list method'sVoir la fiche. Accédez à l'élément <li> </li> et modifiez-le pour qu'il ressemble à ce qui suit -

<li>
   <%= link_to c.title, {:action => "show", :id => c.id} -%>
   <b> <%= link_to 'Edit', {:action => "edit",
   :id => c.id} %></b>
</li>

Maintenant, essayez de parcourir les livres en utilisant le http://localhost:3000/book/list. Il vous donnera la liste de tous les livres avec Editoption. Lorsque vous cliquez sur l'option Modifier, vous aurez l'écran suivant comme suit -

Maintenant, vous modifiez ces informations, puis cliquez sur le bouton Enregistrer les modifications . Cela entraînera un appel àupdateméthode disponible dans le fichier du contrôleur et il mettra à jour tous les attributs modifiés. Notez que leupdate n'a pas besoin de fichier de vue car elle utilise soit show ou edit méthodes pour montrer ses résultats.

Création d'un fichier de vue pour la méthode de suppression

Supprimer des informations d'une base de données à l'aide de Ruby on Rails est presque trop facile. Vous n'avez pas besoin d'écrire de code de vue pour la méthode de suppression car cette méthode utiliselistméthode pour afficher le résultat. Alors, modifions à nouveau list.html.erb et ajoutons un lien de suppression.

Accédez à l'élément <li> </li> et modifiez-le pour qu'il ressemble à ce qui suit -

<li>
   <%= link_to c.title, {:action => 'show', :id => c.id} -%>
   <b> <%= link_to 'Edit', {:action => 'edit', :id => c.id} %></b>
   <b> <%= link_to "Delete", {:action => 'delete', :id => c.id},
      :confirm => "Are you sure you want to delete this item?" %></b>
</li>

le :confirmLe paramètre présente une boîte de confirmation JavaScript vous demandant si vous voulez vraiment exécuter l'action. Si l'utilisateur clique sur OK, l'action se poursuit et l'élément est supprimé.

Maintenant, essayez de parcourir les livres en utilisant http://localhost:3000/book/list. Il vous donnera la liste de tous les livres avec Edit et Delete options comme suit -

Maintenant, en utilisant l'option Supprimer, vous pouvez supprimer n'importe quel enregistrement répertorié.

Création d'un fichier de vue pour la méthode show_subjects

Créez un nouveau fichier, show_subjects.html.erb, dans le répertoire app / views / book et ajoutez-y le code suivant -

<h1><%= @subject.name -%></h1>

<ul>
   <% @subject.books.each do |c| %>
   <li><%= link_to c.title, :action => "show", :id => c.id -%></li>
   <% end %>
</ul>

Vous tirez parti des associations en parcourant les nombreuses listes de livres d'un seul sujet.

Modifiez maintenant la ligne Subject: de show.html.erb afin que la liste des sujets affiche un lien.

<strong>Subject: </strong> <%= link_to @book.subject.name,
:action => "show_subjects", :id => @book.subject.id %><br />

Cela affichera une liste de sujets sur la page d'index, afin que les utilisateurs puissent y accéder directement.

Modifier list.html.erb pour ajouter ce qui suit en haut du fichier -

<ul id = "subjects">
   <% Subject.find(:all).each do |c| %>
   <li><%= link_to c.name, :action => "show_subjects", :id => c.id %></li>
   <% end %>
</ul>

Maintenant, essayez de parcourir les livres en utilisant http: // localhost: 3000 / book / list. Il affichera tous les sujets avec des liens afin que vous puissiez parcourir tous les livres liés à ce sujet.

Quelle est la prochaine?

J'espère maintenant que vous vous sentez à l'aise avec toutes les opérations de Rails.

Le chapitre suivant explique comment utiliser Layoutspour mettre vos données d'une meilleure manière. Nous allons vous montrer comment utiliser CSS dans vos applications Rails.