Eigenen Blog erstellen mit Ruby On Rails

Blog erstellen mit Ruby On Rails

Level: Einsteiger
Rails Version: 4.2.5
GitHub: https://github.com/hurr1star/blog
Theme: http://startbootstrap.com/template-overviews/clean-blog/
YouTube-Playlist: https://www.youtube.com/playlist?list=PLVGTm2ujeFKQyTGoq4UiPznyGKI9uxpyS


Übersicht

  • #00 – Trailer
  • #01 – Projekt anlegen
  • #02 – Model der Blog Beiträge
  • #03 – Routing
  • #04 – und action!
  • #05 – Einträge erstellen
  • #06 – Formulare
  • #07 – Beiträge editieren
  • #08 – Beiträge löschen
  • #09 – Dateneingabe überprüfen
  • #10 – Design
  • #11 – Navigation
  • #12 – weitere Seiten
  • #13 – Seiteninhalt
  • #14 – SEO freundliche Links

Hallo und willkommen zu einer neuen Ruby On Rails Tutorialreihe – dieses mal „Wie erstelle ich meinen eigenen Blog“. Wir werden dazu ein Template von „Start Bootstrap“ verwenden, damit wir uns um das Design des Frontends keine Sorgen machen brauchen. Der Fokus liegt hier also auf dem Backend und somit in der Erstellung von Logik und Mechanik mit Ruby On Rails.


Am Ende unserer Reihe werden wir dann eine solche Seite haben. Hier können wir Artikel erstellen, editieren und auch löschen. Diese einzelnen Artikel sind auf einer Übersichtsseite klickbar und werden auf einer extra Seite detailliertt angezeigt. Zusätzlich erstellen wir noch eine „Über uns“ und eine „Kontakt“ Seite mit einem Kontaktformular. Freu dich also auf die kommenden Episoden mit mir gemeinsam deinen eigenen Blog zu erstellen.

Teil 01 – Projekt anlegen

Zu aller erst öffnen wir die Konsole und erstellen eine neue Applikation mit dem Befehl

rails new blog

danach wechseln wir in das Verzeichnis mit

cd blog

und starten unseren Server mit

rails server

Nachdem der Server gestartet ist, öffnen wir den Browser und steuern unsere App über

http://localhost:3000

an. Sehr gut, die App ist erfolgreich erstellt! Den Server können wir nun wieder beenden mit der Tastenkombination STRG + C.

Um die Seitenstruktur des Blogs anzulegen erstellen wir uns einen Controller.

rails g controller posts

und mit der Entertaste bestätigen. Das „g“ ist eine Kurzschreibweise des Befehls generate.

Sehen wir uns doch einmal an was für im Detail generiert wurde. Wir öffnen unsere App im Texteditor. Ich habe Atom installiert also kann ich über den Befehl

atom .

diesen öffnen. Wir begeben uns in das Verzeichnis app/controllers/posts_controller Dieser Controller ist nun aber komplett leer und ohne jegliche Aktion. Wir erstellen mit

def index
end

eine Aktion namens index und zusätzlich zur Aktion benötigen wir noch die „View“. Diese erstellen wir im Pfad views/posts/index.html.erb mit der Beispielmeldung

<h1>Hallo und willkommen auf der Index-Seite</h1>

Danach ändern wir das Routing der Applikation, um automatisch auf unser eben erstellten Index Seite zu landen. In der routes.rb fügen wir den Befehl

resources :posts

hinzu. Wir speichern nun unsere Änderungen, starten den Server und begeben uns mit Hilfe des Pfads http://localhost:3000/posts auf die Startseite unserer Applikation.

Wir haben nun in dieser Folge unsere Applikation erstellt, den ersten Kontroller und die weiterleitung des Routings. In der nächsten Folge erstellen wir die Struktur für unsere Blogbeiträge.

TEIL 02 – Model für unsere Blog Beiträge

Zum Erstellen der eigentlichen Blogartikel benötigen wir eine Titelzeile und ein Feld/Bereich für den Inhalt.

Ein Model erstellen

Wir erstellen also ein Model mit dem Befehl

rails generate model post title:string content:text

und bestätigen dies mit der Entertaste. Das Model ist quasi die Struktur eines Blogbeitrags. Wir schreiben “post” im Singular, da wir von einem einzigen Post sprechen. Der Titel ist eine Zeichenkette und somit ein String. Der Content ist der eigentlich Inhalt des Blogbeitrags und ist vom Datentyp Text.

Migration der Daten

Danach haben wir unter db/migrate/ eine Migration angelegt und sehen hier genauere Informationen welche Datensätze in der Datenbank angelegt werden. Wir finden in unserer Migration also exakt die Daten wieder, die wir in unsere Konsole eingegeben und zawr den Titel in Form eines Strings und den Inhalt als Text. Der Zeitstempel wird automatisch von Rails erzeugt. Mit dem Befehl

rake db:migrate

migrieren wir nun die Daten. Es wird eine neue Tabelle erstellt und die Migration ist abgeschlossen. Dadurch wird der Inhalt der schema.rb hinzugefügt. In dieser Datei finden wir alle Informationen zur Datenbank.

Einen Blogpost über die Konsole erstellen

Zuerst öffnen wir mit

rails c

die Ruby Console. Diese wird auch “irb” genannt und diese Abkürzung steht für “interactive ruby”. Mit dem Befehl

Post.count

können wir uns anzeigen lassen wieviele Beiträge es aktuell gibt. Die Datenbank selektiert dann alle einzelnen Objekte und gibt die Antwort zurück an uns. Über den Befehl

post = Post.create(:title => "Unser erster Beitrag", :content => "Inhalt für ersten Post")

erstellen wir den ersten Post. Um diesen nun in unsere Datenbank zu speichern verwenden wir die Methode “.save”, also quasi

post.save

und wie wir sehen wird der Inhalt in die Datenbank geschrieben. Mit Hilfe der “.count” Methode können wir die aktuelle Anzahl der gespeicherten Posts prüfen.

Post.count

Wir erstellen nun einen zweiten Beitrag mit

post = Post.create(:title => "Unser zweiter  Beitrag", :content => "Inhalt für zweiten Post")

post.save nicht vergessen und nun fragen wir erneut die Anzahl der Posts ab.

Oberfläche – Ausblick

Natürlich möchten wir bei unserer fertigen Applikation die Blogeinträge nicht alle über die Konsole erstellen, sondern dies über eine schöne Oberfläche tun. Dazu werden wir in den nächsten Videos kommen.

TEIL 03 – Routing

In der ersten Folge haben wir bereits das Routing ein wenig angepasst. Zur Erinnerung die Routing Datei finden wir im Ordner config/routes.rb. Um die Standardmäßigen Aktionen eines Kontrollers zu sehen, also das direkte Routing kann mit:

rake routes

angezeigt werden. Und hier finden wir einen Überblick über die Struktur des Kontrollers.

def show - Post mit den Einzelheiten anzeigen lassen
def new - neuen Post über ein Formular anlegen
def create - Post in die Datenbank speichern
def edit - Post über ein Formular editieren
def update - Post über das Editieren-Formular aktualisieren
def destroy - Post löschen

Nicht jede dieser Aktionen benötigt eine View. Index, New, Edit und Show haben eine View. Create, Update und Destroy sind Aktionen welche für interne Prozesse zuständig sind und somit keine visuelle Darstellung benötigen.

index.html.erb
new.html.erb
edit.html.erb
show.html.erb

TEIL 04 – und action!

Teil 05 – Einträge erstellen

Teil 06 – Formulare

Teil 07 – Beiträge editieren

Teil 08 – Beiträge löschen

Teil 09 – Dateneingabe überprüfen

TEIL 10 – Design

TEIL 11 – Navigation

TEIL 12 – weitere Seiten

TEIL 13 – Seiteninhalt