Ruby on Rails - Ansichten

Eine Rails-Ansicht ist ein ERb-Programm, das Daten über über beide Seiten zugängliche Variablen mit Controllern teilt.

Wenn Sie im Verzeichnis app / views der Bibliotheksanwendung nachsehen, sehen Sie für jeden von uns erstellten Controller ein Unterverzeichnis: book. Jedes dieser Unterverzeichnisse wurde automatisch erstellt, wenn der gleichnamige Controller mit dem Generierungsskript erstellt wurde.

Rails teilt Ihnen mit, dass Sie die Ansichtsdatei für jede neue Methode erstellen müssen. Jede Methode, die Sie im Controller definieren, muss eine entsprechende habenerb Datei mit demselben Namen wie die Methode, um die Daten anzuzeigen, die die Methode sammelt.

Erstellen wir also Ansichtsdateien für alle Methoden, die wir in der Datei book_controller.rb definiert haben. Überprüfen Sie beim Ausführen dieser Ansichten gleichzeitig, ob diese Aktionen in der Datenbank anwendbar sind oder nicht.

Erstellen einer Ansichtsdatei für die Listenmethode

Erstellen Sie eine Datei mit dem Namen list.html.erbVerwenden Sie Ihren bevorzugten Texteditor und speichern Sie ihn in App / Ansichten / Buch. Aktualisieren Sie nach dem Erstellen und Speichern der Datei Ihren Webbrowser. Sie sollten eine leere Seite sehen; Wenn Sie dies nicht tun, überprüfen Sie die Rechtschreibung Ihrer Datei und stellen Sie sicher, dass sie genau der Methode Ihres Controllers entspricht.

Zeigen Sie nun den tatsächlichen Inhalt an. Lassen Sie uns den folgenden Code in list.html.erb einfügen.

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

Der auszuführende Code dient zur Überprüfung, ob das @ books-Array Objekte enthält. Das.blank?Die Methode gibt true zurück, wenn das Array leer ist, und false, wenn es Objekte enthält. Dieses @ books-Objekt wurde im Controller innerhalb der Listenmethode erstellt.

Der Code zwischen den <% =%> -Tags lautet a link_toMethodenaufruf. Der erste Parameter von link_to ist der Text, der zwischen den <a> -Tags angezeigt werden soll. Der zweite Parameter ist, welche Aktion aufgerufen wird, wenn auf den Link geklickt wird. In diesem Fall ist es die Show-Methode. Der letzte Parameter ist die ID des Buches, das über das params-Objekt übergeben wird.

Versuchen Sie nun, Ihren Browser zu aktualisieren, und Sie sollten den folgenden Bildschirm erhalten, da wir kein Buch in unserer Bibliothek haben.

Ansichtsdatei für neue Methode erstellen

Bis jetzt haben wir kein Buch in unserer Bibliothek. Wir müssen nur wenige Bücher im System erstellen. Lassen Sie uns also eine Ansicht entwerfen, die der entsprichtnew Methode definiert in der book_controller.rb.

Erstellen Sie mit Ihrem bevorzugten Texteditor eine Datei mit dem Namen new.html.erb und speichern Sie sie in app / views / book. Fügen Sie der Datei new.html.erb den folgenden Code hinzu.

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

Hier form_tagDie Methode interpretiert den Ruby-Code unter Verwendung aller ihm bereitgestellten Informationen in ein reguläres HTML-Tag <form>. Dieses Tag gibt beispielsweise den folgenden HTML-Code aus:

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

Die nächste Methode ist text_fielddas gibt ein <input> -Textfeld aus. Die Parameter für text_field sind Objekt- und Feldname. In diesem Fall ist das Objekt Buch und der Name ist Titel .

Rails-Methode aufgerufen collection_select, erstellt ein HTML-Auswahlmenü, das aus einem Array wie dem von @books erstellt wurde. Es gibt fünf Parameter, die wie folgt lauten:

• :book- Das Objekt, das Sie bearbeiten. In diesem Fall handelt es sich um ein Buchobjekt.

• :subject_id - Das Feld, das beim Speichern des Buches ausgefüllt wird.

• @books - Das Array, mit dem Sie arbeiten.

• :id- Der Wert, der in der Datenbank gespeichert ist. In Bezug auf HTML ist dies der Wertparameter des <option> -Tags.

• :name- Die Ausgabe, die der Benutzer im Pulldown-Menü sieht. Dies ist der Wert zwischen den <option> -Tags.

Der nächste verwendete ist submit_tag, die eine <Eingabe> -Schaltfläche ausgibt, die das Formular sendet. Endlich gibt es dieend Methode, die einfach in </ form> übersetzt wird.

Gehen Sie zu Ihrem Browser und besuchen Sie http://localhost:3000/book/new. Dies gibt Ihnen den folgenden Bildschirm.

Geben Sie einige Daten in dieses Formular ein und klicken Sie dann auf die Schaltfläche Erstellen. Hier habe ich die folgenden Details in die Felder eingefügt -

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

Wenn Sie auf die klicken Create Taste wird die aufgerufen create Methode, die keine Ansicht benötigt, da diese Methode auch verwendet list oder newMethoden zum Anzeigen der Ergebnisse. Wenn Sie also auf die Schaltfläche Erstellen klicken, sollten die Daten erfolgreich gesendet und Sie zur Listenseite weitergeleitet werden, auf der Sie jetzt ein einzelnes Element wie folgt aufgelistet haben:

Wenn Sie auf den Link klicken, sollte ein Fehler in einer anderen Vorlage fehlen, da Sie die Vorlagendatei für die Show-Methode noch nicht erstellt haben.

Erstellen einer Ansichtsdatei für die Show-Methode

Diese Methode zeigt die vollständigen Details aller in der Bibliothek verfügbaren Bücher an. Erstellen Sie eine show.html.erb-Datei unter app / views / book und füllen Sie sie mit dem folgenden Code:

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

Dies ist das erste Mal, dass Sie die Vorteile von Assoziationen voll ausnutzen, mit denen Sie problemlos Daten von verwandten Objekten abrufen können.

Das verwendete Format ist @variable.relatedObject.column. In diesem Fall können Sie den Namenswert des Betreffs mithilfe der Variablen @book über die Variable @book abrufenbelongs_toVerbände. Wenn Sie auf einen aufgelisteten Datensatz klicken, wird der folgende Bildschirm angezeigt.

Erstellen einer Ansichtsdatei für die Bearbeitungsmethode

Erstellen Sie eine neue Datei mit dem Namen edit.html.erb und speichern Sie sie in app / views / book. Füllen Sie es mit dem folgenden Code -

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

Dieser Code ist dem sehr ähnlich new Methode mit Ausnahme der zu aktualisierenden Aktion, anstatt eine ID zu erstellen und zu definieren.

In diesem Szenario haben wir verwendet form_forTag für die Formularaktion. Es wird besser alsform_tag. Warum, weil dadurch leicht eine Interaktion mit dem Modell entsteht? Daher ist es besser, das Tag form_for zu verwenden, wenn Sie eine Interaktion zwischen dem Modell und den Formularfeldern benötigen.

An dieser Stelle müssen wir einige Änderungen in der list method'sDatei ansehen. Gehen Sie zum Element <li> </ li> und ändern Sie es so, dass es wie folgt aussieht:

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

Versuchen Sie nun, Bücher mit dem zu durchsuchen http://localhost:3000/book/list. Es gibt Ihnen die Liste aller Bücher zusammen mit EditMöglichkeit. Wenn Sie auf die Option Bearbeiten klicken, wird der nächste Bildschirm wie folgt angezeigt:

Jetzt bearbeiten Sie diese Informationen und klicken dann auf die Schaltfläche Änderungen speichern . Dies führt zu einem Anruf beiupdateMethode in der Controller-Datei verfügbar und aktualisiert alle geänderten Attribute. Beachten Sie, dass dieupdate Die Methode benötigt keine Ansichtsdatei, da sie auch verwendet wird show oder edit Methoden, um seine Ergebnisse zu zeigen.

Erstellen einer Ansichtsdatei zum Löschen

Das Entfernen von Informationen aus einer Datenbank mit Ruby on Rails ist fast zu einfach. Sie müssen keinen Ansichtscode für die Löschmethode schreiben, da diese Methode verwendet wirdlistMethode zur Anzeige des Ergebnisses. Ändern Sie also einfach list.html.erb erneut und fügen Sie einen Löschlink hinzu.

Gehen Sie zum Element <li> </ li> und ändern Sie es so, dass es wie folgt aussieht:

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

Das :confirmDer Parameter zeigt ein JavaScript-Bestätigungsfeld an, in dem Sie gefragt werden, ob Sie die Aktion wirklich ausführen möchten. Wenn der Benutzer auf OK klickt, wird die Aktion fortgesetzt und das Element gelöscht.

Versuchen Sie nun, Bücher mit zu durchsuchen http://localhost:3000/book/list. Sie erhalten eine Auflistung aller Bücher zusammen mit Edit und Delete Optionen wie folgt -

Mit der Option Löschen können Sie jetzt jeden aufgelisteten Datensatz löschen.

Erstellen einer Ansichtsdatei für die Methode show_subjects

Erstellen Sie eine neue Datei, show_subjects.html.erb, im Verzeichnis app / views / book und fügen Sie den folgenden Code hinzu:

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

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

Sie nutzen Assoziationen, indem Sie die vielen Bücher eines einzelnen Themas durchlaufen.

Ändern Sie nun die Betreffzeile: show.html.erb so, dass in der Betreffliste ein Link angezeigt wird.

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

Dadurch wird eine Liste mit Themen auf der Indexseite ausgegeben, sodass Benutzer direkt darauf zugreifen können.

Ändern list.html.erb um Folgendes oben in die Datei einzufügen -

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

Versuchen Sie nun, Bücher mit http: // localhost: 3000 / book / list zu durchsuchen. Es werden alle Themen mit Links angezeigt, sodass Sie alle Bücher zu diesem Thema durchsuchen können.

Was kommt als nächstes?

Ich hoffe, Sie fühlen sich jetzt mit allen Operationen von Rails wohl.

Im nächsten Kapitel wird die Verwendung erläutert Layoutsum Ihre Daten besser zu platzieren. Wir zeigen Ihnen, wie Sie CSS in Ihren Rails-Anwendungen verwenden.