How to Build a Blog with Ruby on Rails

Das Gleiche können wir für die Beschreibung tun…

class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend

Und es verhindert, dass Sie einen Artikel ohne Beschreibung erstellen, auch wenn er einen Titel hat… (auch hier müssen Sie die Rails-Konsole neu starten, nachdem Sie das Modell aktualisiert haben.)

Sie können Ihre Fehler mit diesen Befehlen überprüfen…

article.errors.any?
article.errors.full_messages

Als nächstes fügen wir Längenüberprüfungen hinzu…

Cool.

Als Nächstes wollen wir, dass die Benutzer die gleichen Aktionen im Browser durchführen können, also müssen wir Routen, Controller und Ansichten für das Erstellen und Speichern von Artikeln einrichten!

Schritt 9: Hinzufügen der Möglichkeit, Artikel vom Browser aus zu erstellen

Der Lebenszyklus eines neuen Artikels…

Schauen Sie sich die ersten 2 Minuten des Udemy-Kurses in Abschnitt 4, Vorlesung 63 an, um einen vollständigen Überblick zu erhalten…

Zuerst nehmen wir unsere Routen in Angriff…

In der routes.rb fügen Sie diese Zeile ein …

resources :articles

Damit erhalten wir alle möglichen Pfade zum Aktualisieren, Löschen, Erstellen, Anzeigen usw.

Prüfe die neuen Pfade mit… ABER WARTE, bevor du die Pfade prüfst, stelle sicher, dass du wieder aus der Rails-Konsole heraus bist, indem du eingibst:

exit

dann,

$ rake routes

Cool.

Nun brauchen wir einen neuen Controller… Erstelle diese Datei unter app/controllers.

touch articles_controller.rb#or just create the file using the visual text editor 

Und dann innerhalb der neuen Controller-Datei…

class ArticlesController < ApplicationControllerend

Nun müssen wir einen neuen Ordner unter den Ansichten erstellen, um unsere Artikel-Ansichtsdateien zu speichern… Der Ordner sollte ‚articles‘

<<< UPDATE VOM AUTOR >>>

Versuchen Sie, die Befehlszeile statt des visuellen Texteditors zu verwenden:

cd views
mkdir articles
cd articles

<<< END UPDATE >>>

Nun werden wir eine neue Datei unter ‚articles‘ erstellen mit dem Namen…

touch new.html.erb# or create using the visual text editor

Und dann müssen wir unseren articles_controller aktualisieren.rb:

class ArticlesController < ApplicationController
def new
end
end

Speichern.

Innerhalb dieser new.html.erb Seite werden wir unser Formular zur Erfassung von Titel und Beschreibung speichern.

Aber zuerst müssen wir sicherstellen, dass die Seite funktioniert… Hinzufügen:

<h1>Create an article</h1>

Und dann den Server laden…

Gibt uns…

Gut. Es funktioniert.

Lassen Sie uns nun das modellgestützte Formular erstellen. Rails bietet hier Formular-Hilfsmethoden an.

In der Datei new.html.erb…

<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>

Und wir haben eine Instanzvariable initiiert, also müssen wir jetzt die Variable in unserem Controller erstellen…

class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend

Gut. Alles funktioniert gut…

Jetzt wollen wir ein paar Daten sammeln…

<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>

Und die Seite laden, um zu sehen, was wir gemacht haben…

Gut. Es funktioniert…

Nun, lass uns das Formular fertigstellen…

Gut. Alles, was wir brauchen…

Nun müssen wir eine ‚create‘-Aktion im Controller erstellen…

class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend

Wenn Sie das Formular ausfüllen und dann abschicken, werden Sie diese Daten sehen:

Aber wir wollen, dass diese Daten in der Datenbank gespeichert werden…

Aber das ist nicht genug… Wir wollen auch den Artikel anzeigen…

Wir verwenden einen Pfad, den wir bereits erstellt haben, und übergeben die Instanzvariable für den neuen Artikel…

redirect_to articles_show(@article)

Der ganze Code…

Aber das ist nicht gut genug, oder? Wir wollen diesen Code so umgestalten, dass er eine Meldung ausgibt, wenn der Artikel erfolgreich erstellt wurde:

Und jetzt sorgen wir dafür, dass unsere Flash-Meldungen auf allen Seiten zu sehen sind…

Im Body der Datei application.html.erb…

<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>

Und jetzt wollen wir dafür sorgen, dass auch Fehler angezeigt werden…

In der Datei new.html.erb…

Gut. Jetzt werden uns die Fehler in der Artikel/neuen URL angezeigt:

Nun stellen Sie sicher, dass show action erstellt wurde…

def show
@article = Article.find(params)
end

Nun müssen wir eine Seite erstellen, auf der die Informationen angezeigt werden…

Wir werden diese Datei aufrufen…

show.html.erb

Innerhalb dieser Seite…

<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>

Und das wird gerendert…

(Sie haben einen Fehler? Hier ist die Lösung für einen häufigen Fehler: die Datei show.html.erb wurde an der falschen Stelle erstellt)

Hurra. Als nächstes werden wir uns mit der Bearbeitung von Artikeln beschäftigen…

Schritt 10: Artikel bearbeiten

Wir müssen die Bearbeitungsaktion in einem Controller erstellen… Welcher Controller? Dem Artikel-Controller natürlich!

def edit
end

Und wir müssen die Bearbeitungsvorlage in den Ansichten erstellen… In welchem Ordner? Natürlich im Ordner der Artikelansicht!

edit.html.erb

Jetzt müssen wir ein Formular zum Bearbeiten erstellen…

Wir können das Formular new.html.erb kopieren und einfügen. Wir werden dasselbe Formular zum Aktualisieren eines aktuellen Artikels verwenden, das wir zum Erstellen eines neuen Artikels verwendet haben.

Nun vervollständigen wir unsere Bearbeitungsaktion im Controller…

def edit
@article = Article.find(params)
end

Nun müssen wir eine Aktualisierungsaktion hinzufügen…

Schritt 11: Indexauflistung der Artikel hinzufügen und Links zum Bearbeiten/Anzeigen hinzufügen

Indexaktion in articles_controller.rb…

def index
@articles = Article.all
end

Dann müssen wir die Vorlage erstellen…

index.html.erb

In welchem Views-Verzeichnis platzieren wir diese Datei?

index.html.erb

Und innerhalb dieser Datei…

Das gibt uns…

Cool. Jetzt fügen wir die Links zum Bearbeiten und Anzeigen für jeden Artikel hinzu…

<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>

Der Code sieht wie folgt aus…

Das gibt uns…

Lassen Sie uns nun einige „Zurück“-Links zu den Seiten „Bearbeiten“, „Anzeigen“ und „Neu“ hinzufügen… Gehen Sie auf die entsprechenden Seiten und fügen Sie die neuen Links wie folgt hinzu:

<%= link_to 'Back', articles_path %>

Ich habe meine ganz unten in jeder Datei hinzugefügt.

Und fügen wir einen Link zum Bearbeiten auf der Show-Seite hinzu…

<%= link_to "Edit", edit_article_path(@article) %>

Schritt 12: Formulare zu einem einzigen Teil umstrukturieren

Erstellen Sie direkt eine neue Datei in den Ansichten/Artikeln.

_form.html.erb

Kopieren Sie die Formulardaten und fügen Sie sie in diese Datei ein…

Dann rendern Sie das Formular auf der neuen und der Bearbeitungsseite…

<%= render 'form' %>

Sie sollten alle alten Formulardaten entfernt und den Codeschnipsel auf der neuen und der Bearbeitungsseite hinzugefügt haben, so dass die beiden Seiten etwa so aussehen:

<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>

Nun fügen wir die Zerstörungsaktion hinzu…

Schritt 13: Hinzufügen der Zerstörungsaktion

Im Controller…

Welcher Controller? Das wissen Sie bereits.

Nun müssen wir die Links zu den Seiten hinzufügen, von denen aus wir löschen wollen. Mit dem Link unten…

<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>

…fügen Sie zu den Seiten hinzu, auf denen Sie möchten, dass der Benutzer löschen kann.

Wenn ich zu unserer Index-Seite hinzufüge, sieht es so aus…

Wenn wir zu unserer Show-Seite hinzufügen, müssen wir den Zerstörungs-Link leicht ändern, um die Struktur des Bearbeitungs-Links nachzuahmen. Verstehen Sie, was ich meine?

So:

<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>

Anstatt so:

<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>

Schritt 14: Refactor Articles Controller

Einer der Grundsätze der Entwicklung ist DRY.

Sie wissen vielleicht schon, was das bedeutet: „DON’T REPEAT YOURSELF“

Wir wiederholen uns ziemlich oft, also lasst uns ein wenig Refactoring betreiben.

Diese Codezeile taucht in allen unseren Aktionen auf…

@article = Article.find(params)

So, wir werden eine private Methode erstellen und diese Zeile dort speichern…

def set_article
@article = Article.find(params)
end

Dann löschen wir die Codezeile aus den Aktionen…

Sie ist in „destroy“, „show“, „update“, „edit“ enthalten…

Direkt unter der ersten Zeile des Controllers…

before_action :set_article, only: 

Die aktualisierte Controller-Datei wird wie folgt aussehen:

Schritt 15: Bootstrap installieren

Gemfile von der Github-Seite hinzufügen…

gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

Dann in der Befehlszeile, sicherstellen, dass man sich im App-Verzeichnis befindet und nicht in einem der Unterverzeichnisse, installieren…

$ bundle install

Sie müssen auch eine neue CSS-Datei erstellen… Der Dateiname könnte wie folgt aussehen, und Sie erstellen sie unter app/assets/stylesheets

custom.css.scss

Und fügen Sie…

Dann in der Datei application.js-Datei unter app/assets/javascripts…

//= require jquery
//= require bootstrap-sprockets

Und, wenn Sie Rails 5 verwenden, installieren Sie das jQuery-Gem…

gem 'jquery-rails'

Sind Sie nicht sicher, welche Version Sie verwenden? Führen Sie das Folgende im Terminal aus:

$ rails -v

Jetzt wissen Sie es. Wenn Sie jquery installieren müssen, fügen Sie den obigen Edelstein zur Gem-Datei hinzu und bündeln Sie die Installation.

$ bundle install

Schritt 16: Installieren Sie die Navigationsleiste

Erstellen Sie einen Teilbereich im Ordner layouts…

_navigation.html.erb

Gehen Sie nun zur Homepage von bootstrap…

Grabben Sie den Standardcode der Navigationsleiste… Es ist das erste Beispiel und sieht ungefähr so aus:

Und füge ihn in deinen _navigation Teil ein… Speichern.

Nun rendern Sie das Partial innerhalb der <head> </head> der application.html.erb-Datei…

<%= render 'layouts/navigation' %>

Die gesamte Datei sieht jetzt etwa so aus:

Starten Sie den Server neu (auf einem Mac: Strg + c), da Sie kürzlich einige neue Edelsteine hinzugefügt haben, und starten Sie ihn dann erneut:

$ rails s

Und wenn du dann deinen lokalen Server aktualisierst, wirst du sehen:

Niiiiiiice…. Sieht gut aus, oder?

Nun, lasst uns mit dem Styling beginnen! Oder besser gesagt, lass uns das Styling schnell hinter uns bringen, damit wir uns auf die Entwicklung der App konzentrieren können und nicht auf das Styling der App 🙂

In die Datei custom.css.scss kopieren/einfügen und dann speichern:

Schritt 17: Links zur Navigationsleiste hinzufügen

Nun lass uns die Navigationsleiste in Angriff nehmen und sicherstellen, dass die Links der Navigationsleiste auf die Stellen zeigen, auf die wir sie zeigen lassen wollen!

Das…

<a class="navbar-brand" href="#">Alpha Blog</a>

wird so:

<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>

Laden Sie Ihre Seite neu und sehen Sie:

Und jetzt können Sie auf jeder Seite zum Root-Pfad (der Indexseite) navigieren, indem Sie auf ALPHA BLOG klicken.

Als Nächstes fügen wir einen Link zur Artikel-Indexseite hinzu:

Anstelle des ersten „Links“ in der Navbar:

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

Hinzufügen:

<li><%= link_to "Articles", articles_path %></li>

Und anstelle des zweiten „Links“ in der Navbar:

<li><a href="#">Link</a></li>

Hinzufügen:

<li><%= link_to "Create Article", new_article_path %></li>

Jetzt können wir den anderen Link zu „Artikel erstellen“ in der index.html.erb Datei entfernen. Spüren Sie ihn einfach auf und löschen Sie ihn.

Ich werde auch die Suchleiste löschen. Wir werden sie nicht benutzen.

Löschen Sie alles darunter:

Das erste Dropdown-Menü brauchen wir auch nicht, also raus damit. Suchen Sie einfach das hier und löschen Sie es:

Speichern Sie die Datei. Aktualisieren Sie Ihren Localhost-Server und Sie werden sehen:

Schritt 18: Gestalten Sie die Formularvorlage

Sie können den Code auf Bootstrap hier finden.

Wir werden eingebettetes Ruby mit Bootstrap mischen, um das gewünschte Ergebnis zu erhalten.

Innerhalb der _form.html.erb partial, Change this…

Into this…

Beachten Sie eine wichtige Änderung, die wir am Anfang der do-Anweisung des Formulars vorgenommen haben…

<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>

Und beachten Sie die Syntax innerhalb der Formularelemente…

<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>

Schritt 19: Gestalten Sie die Meldungen & Refactor into Partials

Nun aktualisieren wir auch das Styling für die Fehlermeldungen. Aktualisieren Sie das Styling von…

auf:

Das ändert die Fehlermeldungen auf:

Nun werden wir in einen Teil extrahieren..

Erstelle einen neuen Ordner unter den Ansichten namens ’shared’…

Erstelle eine neue Datei namens _errors.html.erb…

Kopieren Sie die Fehlermeldung in diese Datei…

Entfernen Sie nun die Fehlermeldung aus _form.html.erb und ersetzen Sie den Code durch:

<%= render 'shared/errors' %>

Erstellen Sie außerdem eine Datei _messages.html.erb und speichern Sie sie im gemeinsamen Ordner. Fügen Sie in diese Datei den Code für die Flash-Nachrichten ein:

<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>

Speichern Sie diese Datei. Ersetzen Sie den Code in der Datei layouts/application.html.erb durch:

<%= render 'shared/errors' %>

Die gesamte Datei sieht derzeit wie folgt aus:

Als Nächstes gestalten wir die Flash-Nachrichten…

In der Datei _messages.html.erb ändern Sie dies…

<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>

in dies:

Um diesen Schritt abzuschließen, müssen wir auch das gesamte Flash in der Datei articles_controller.rb in Flash ändern.

Schritt 20: Update Article Instance Variables To Work For Users

Dies ist ein bisschen verfrüht, da wir noch keine Benutzer oder Benutzeraktionen für unseren Blog erstellt haben, aber wir werden Benutzer erstellen und wir wollen, dass unsere Fehlermeldungen für Benutzer genauso funktionieren wie für Artikel. Verstehen Sie, was ich meine?

Wir haben all diese Funktionen, die für Artikel funktionieren: das Erstellen neuer Artikel, das Bearbeiten alter Artikel und die Flash-Fehlermeldungen, die uns mitteilen, was schief gelaufen ist… Wir möchten, dass diese Flash-Fehlermeldungen uns mitteilen, wenn wir versuchen, einen neuen Benutzer zu erstellen oder einen aktuellen Benutzer zu bearbeiten.

Wir erreichen dies, indem wir die Instanzvariable @article in eine Variable aktualisieren, die für Artikel oder Benutzer funktioniert…

In der Datei shared/_errors.html.erb die Instanzvariable @article in eine Instanzvariable @obj aktualisieren…

Nun müssen wir die partielle Rendering-Anweisung aktualisieren… Diejenige in articles/_form.html.erb

Sie lautete…

<%= render 'shared/errors' %>

und muss jetzt lauten…

<%= render 'shared/errors', obj: @article %>

Als Nächstes arbeiten wir an der „show“-Ansicht…

Schritt 21: Stil der Seite „Show Article“

Aktualisieren Sie die Seite views/articles/show.html.erb Seite zu…

Dies wird gerendert:

Als nächstes fügen wir etwas ’simple_format‘ hinzu…

Ändern Sie dies…

<%= @article.description %>

Dazu…

<%= simple_format(@article.description) %>

Dann noch etwas Stil für die Schaltflächen…

<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>

Damit erhalten wir einige schöne kleine Schaltflächen…

Dann füge eine Löschtaste hinzu…

Eine schöne bunte Löschtaste…

Der ganze Codeblock sieht jetzt so aus:

Schritt 22: Style Article Listing Index Page

Wir werden diese furchtbar schäbig aussehende Seite aktualisieren…

Die index.html.erb Seite sollte durch folgenden Code ersetzt werden:

Styling für den Artikelbody:

.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}

Styling für den Artikeltitel:

.article-title {
font-weight: bold;
font-size: 1.5em;
}

Deine Seite sieht jetzt so aus:

Liebe.

Schritt 23: Benutzer anlegen + einen Feature Branch in Github erstellen

Als Nächstes werden wir Benutzer anlegen! Cool! Unser Modell für Benutzer wird „User“ heißen. Unten ist eine hilfreiche Tabelle, die erklärt, wie die Benutzertabelle formatiert sein wird und wie die verschiedenen Namensstrukturen für die Dateien aussehen werden:

Wir haben bereits Artikel erstellt. Wir können Artikel erstellen, lesen, bearbeiten und löschen.

Aber im Moment kann jeder, der auf den Blog zugreift, jeden anderen Artikel lesen, bearbeiten und löschen.

Wir wollen, dass nur Benutzer, die sich angemeldet haben, diese Funktionen ausführen können, und wir wollen, dass sie nur Artikel bearbeiten und löschen können, die sie erstellt haben.

So brauchen wir natürlich Benutzer, und wir brauchen auch eine Möglichkeit, Benutzer zu verfolgen, die Artikel erstellen. Dies kann dadurch geschehen, dass die Benutzerkennung des Benutzers, der den Artikel erstellt, in der Artikeltabelle in der Artikelzeile gespeichert wird. Dies ist eine Fremdschlüssel-Assoziation:

Durch Hinzufügen der Spalte „user_id“ zur Tabelle „articles“ erhalten wir die Möglichkeit, „v-lookup“ auf den Rest der Benutzerinformationen anzuwenden.

Ein Artikel, an dem mehrere Personen arbeiten, wäre eine Many-to-many-Assoziation…

Ein Artikel, an dem eine Person arbeitet, wobei eine Person viele Artikel erstellen kann, ist eine Eins-zu-viele-Assoziation…

Artikelkategorien, sollten wir sie erstellen, wären eine Viele-zu-viele-Assoziation.

Ok, genug geschwafelt, erstellen wir die Tabelle „Benutzer“…