Erstes Scaffold mit dem b4um Generator erstellen

Nachdem unsere Rails-Anwendung eingerichtet ist und die grundlegende Seitenstruktur steht, gehen wir einen Schritt weiter.

Bisher haben wir hauptsächlich mit statischen Seiten gearbeitet. Jetzt möchten wir Daten erstellen, bearbeiten, anzeigen und wieder löschen können.

Dafür verwenden wir den Scaffold-Generator von b4um.

In diesem Tutorial erstellen wir eine einfache Produktverwaltung mit:

Name
Beschreibung
Preis
Status

Dabei lernen wir gleichzeitig das standardmäßige Bento-/Card-Layout von b4um kennen.

Für dieses Tutorial verwenden wir:

b4um_generators 0.1.0

Was ist ein Scaffold?

Ein Rails-Scaffold erstellt die grundlegenden Bestandteile, die wir für die Verwaltung eines Datensatzes benötigen.

Dazu gehören unter anderem:

Model
Controller
Views
Formular
Routes
Migration

Mit einem Scaffold können wir anschließend Datensätze:

anzeigen
anlegen
bearbeiten
löschen

Der b4um Generator baut auf diesem Prinzip auf und ergänzt die erzeugten Seiten um das b4um Layout und die entsprechenden Komponenten.

Unser Beispiel: Produkte

Für dieses Tutorial erstellen wir eine kleine Produktverwaltung.

Ein Produkt soll vier Eigenschaften besitzen:

name          Name des Produkts
description   Beschreibung
price         Preis
status        Status

Dafür verwenden wir folgende Rails-Datentypen:

name:string
description:text
price:decimal
status:string

Damit ist unser erstes Datenmodell bewusst überschaubar.

Später können wir genau dieses Modell weiterverwenden und beispielsweise Suche, Pagination oder Infinite Scroll ergänzen.

Product-Scaffold erzeugen

Öffne das Terminal im Verzeichnis deiner Rails-Anwendung.

Jetzt führen wir aus:

bin/rails generate b4um:scaffold Product name:string description:text price:decimal status:string

Die Kurzform funktioniert ebenfalls:

bin/rails g b4um:scaffold Product name:string description:text price:decimal status:string

Für das Tutorial verwenden wir zunächst die ausgeschriebene Variante.

Der b4um Generator erstellt nun die benötigten Dateien für unsere Produktverwaltung.

Dazu gehören unter anderem das Model, der Controller, die Views, das Formular und die Datenbankmigration.

Zusätzlich werden die erzeugten Seiten an das b4um Layout angepasst.

Mit b4um:scaffold erstellen wir eine vollständige Produktverwaltung mit Name, Beschreibung, Preis und Status.

Datenbankmigration ausführen

Der Generator hat zwar unser Product-Modell und die dazugehörige Migration angelegt, die Datenbank selbst wurde dadurch aber noch nicht geändert.

Deshalb führen wir als Nächstes die Migration aus:

bin/rails db:migrate

Rails legt damit die entsprechende Tabelle in unserer Datenbank an.

Unsere Produktverwaltung kann anschließend tatsächlich Datensätze speichern.

Sollte bei der Migration ein Fehler auftreten, muss dieser natürlich zuerst behoben werden.

Rails-Server starten

Falls unser Rails-Server noch nicht läuft, starten wir ihn:

bin/rails server

Unsere Anwendung erreichen wir anschließend wie gewohnt unter:

http://localhost:3000

Durch das Scaffold wurde außerdem eine Route für unsere Produkte angelegt.

Wir können deshalb direkt aufrufen:

http://localhost:3000/products

Die leere Produktübersicht

Beim ersten Aufruf haben wir natürlich noch keine Produkte angelegt.

Genau deshalb lohnt sich ein kurzer Blick auf die leere Index-Seite.

Der b4um Scaffold-Generator verwendet auch für diesen Zustand die passenden b4um Komponenten.

Die vom b4um Scaffold-Generator erzeugte Produktübersicht direkt nach der Erstellung – noch ohne gespeicherte Produkte.

Unser erstes Produkt anlegen

Jetzt legen wir den ersten Datensatz an.

Klicke auf den entsprechenden Button zum Erstellen eines neuen Produkts.

Das Formular enthält die vier Felder, die wir beim Generator angegeben haben:

Name
Description
Price
Status

Für unser erstes Testprodukt können wir beispielsweise folgende Werte verwenden:

Name:
MacBook Pro

Description:
Leistungsstarkes Notebook für Entwicklung und kreative Projekte.

Price:
2499.00

Status:
Verfügbar

Anschließend speichern wir das Produkt.

Das von b4um:scaffold erzeugte Formular verwendet automatisch die passenden b4um Form-Komponenten.

Das erste Produkt speichern

Speichere anschließend den Datensatz.

Rails legt nun unser erstes Product in der Datenbank an.

Nach erfolgreichem Speichern können wir uns die erzeugte Detailansicht ansehen.

Hier wird der vollständige Inhalt des Produkts dargestellt.

Die Show-Seite stellt die vollständigen Informationen eines Produkts im b4um Layout dar.

Weitere Produkte anlegen

Mit nur einem Produkt lässt sich das Bento-Layout noch nicht besonders gut beurteilen.

Deshalb legen wir jetzt einige weitere Testprodukte an.

Du kannst beispielsweise diese Produkte verwenden:

iPad Pro

Name:
iPad Pro

Description:
Vielseitiges Tablet für kreative Arbeit, Medien und unterwegs.

Price:
1299.00

Status:
Verfügbar

Studio Display

Name:
Studio Display

Description:
Hochauflösendes Display für einen modernen Arbeitsplatz.

Price:
1749.00

Status:
Verfügbar

Mac mini

Name:
Mac mini

Description:
Kompakter Desktop-Computer für Büro, Entwicklung und Alltag.

Price:
699.00

Status:
Neu

Magic Keyboard

Name:
Magic Keyboard

Description:
Kabellose Tastatur für einen aufgeräumten Arbeitsplatz.

Price:
119.00

Status:
Verfügbar

Damit besitzen wir insgesamt fünf Produkte.

Das ist für unser Beispiel besonders praktisch.

Das Bento-Layout

Öffnen wir jetzt wieder:

http://localhost:3000/products

sehen wir einen deutlichen Unterschied zur zuvor leeren Produktübersicht.

Der b4um Scaffold-Generator verwendet standardmäßig das responsive Bento-/Card-System für die Index-Seite.

Die Karten folgen dabei einem wiederkehrenden Layoutmuster:

1 → wide
2 → soft
3 → normal
4 → large
5 → normal

Dadurch besteht die Übersicht nicht einfach aus einer Reihe identischer Kästen.

Die unterschiedlichen Kartengrößen sorgen für eine abwechslungsreichere Darstellung.

Bei mehr als fünf Produkten beginnt dieses Muster anschließend erneut.

Lange Texte auf der Übersicht

Unser Feld

description:text

kann theoretisch sehr lange Inhalte enthalten.

Auf einer Übersichtsseite wäre es jedoch ungünstig, wenn eine einzige lange Beschreibung eine komplette Karte ausfüllt.

Deshalb kürzt das b4um Scaffold längere Textinhalte auf der Index-Seite.

Die vollständige Beschreibung bleibt auf der jeweiligen Show-Seite erhalten.

Damit erfüllen Index und Show zwei unterschiedliche Aufgaben:

Index
→ kompakter Überblick

Show
→ vollständiger Inhalt

Der b4um Scaffold-Generator verwendet standardmäßig ein responsives Bento-Layout. Unterschiedliche Kartengrößen sorgen automatisch für eine abwechslungsreiche Produktübersicht.

Einen Datensatz bearbeiten

Unsere Produkte lassen sich natürlich auch nachträglich ändern.

Öffne eines der Produkte und wähle die Bearbeiten-Funktion.

Ändere beispielsweise beim Mac mini:

Status:
Neu

in:

Status:
Verfügbar

und speichere die Änderung.

Die Datenbank wird aktualisiert und der neue Wert anschließend in der Anwendung angezeigt.

Einen Datensatz löschen

Auch das Löschen gehört zu einem vollständigen CRUD-Ablauf.

CRUD steht für:

Create
Read
Update
Delete

Mit unserem Scaffold können wir damit Produkte:

Create → erstellen
Read   → anzeigen
Update → bearbeiten
Delete → löschen

Zum Testen kannst du ein Produkt löschen und anschließend kontrollieren, ob es aus der Übersicht verschwunden ist.

Wenn du die fünf Produkte für den nächsten Teil unserer Tutorial-Reihe behalten möchtest, kannst du diesen Schritt natürlich nur nachvollziehen, ohne einen der Testdatensätze dauerhaft zu entfernen.

Status als Badge

Unser Scaffold enthält bewusst ein Feld mit dem Namen:

status

b4um kann Statusinformationen in seinen Komponenten entsprechend hervorheben.

Dadurch eignet sich ein Status beispielsweise für Werte wie:

Neu
Verfügbar
Ausverkauft
Archiviert

Das macht solche Informationen auf einer Übersicht schneller erfassbar als normalen Fließtext.

Was hat b4um:scaffold für uns übernommen?

Mit einem einzigen Generator-Aufruf:

bin/rails generate b4um:scaffold Product name:string description:text price:decimal status:string

haben wir die Grundlage einer vollständigen Produktverwaltung erhalten.

Dazu gehören:

Product Model
Datenbankmigration
Controller
Routes
Index
Show
New
Edit
Formular
b4um Styling
Bento-Index
Navigation
Flash Messages
Validierungsdarstellung

Wir mussten also nicht jede einzelne View und Komponente von Hand erstellen.

Warum haben wir zunächst keine Tabelle verwendet?

Der b4um Scaffold-Generator kann die Index-Seite auch als Tabelle erzeugen.

Dafür gibt es die Option:

--layout=table

Beispielsweise:

bin/rails generate b4um:scaffold Product name:string description:text price:decimal status:string --layout=table

Das verwenden wir in diesem Tutorial aber bewusst noch nicht.

Der Standard des b4um Scaffolds ist das Bento-/Card-Layout. Deshalb lernen wir zunächst genau diesen Standard kennen.

Eine Tabellenansicht schauen wir uns später separat an.

Unser Product-Modell bleibt bestehen

Die eben erstellte Produktverwaltung ist nicht nur ein Wegwerfbeispiel.

Wir verwenden sie in den nächsten Tutorials weiter.

Damit können wir Schritt für Schritt zeigen, wie eine bestehende b4um Anwendung erweitert wird.

Beispielsweise können wir anschließend eine Suche hinzufügen:

bin/rails generate b4um:search Product

Danach können wir Pagination ergänzen:

bin/rails generate b4um:pagination Product

oder alternativ automatisches Nachladen beim Scrollen:

bin/rails generate b4um:infinite_scroll Product

Später können wir außerdem Bilder mit Active Storage, Kommentare oder Rich Text mit Trix ergänzen.

So wächst unsere kleine Produktverwaltung Tutorial für Tutorial weiter.

Das haben wir gelernt

In diesem Tutorial haben wir zum ersten Mal mit dynamischen Daten gearbeitet.

Aus:

bin/rails generate b4um:scaffold Product name:string description:text price:decimal status:string

ist eine vollständige Produktverwaltung entstanden.

Anschließend haben wir:

bin/rails db:migrate

ausgeführt, mehrere Produkte angelegt und das automatisch erzeugte Bento-Layout kennengelernt.

Unsere Anwendung kann jetzt:

Produkte erstellen
Produkte anzeigen
Produkte bearbeiten
Produkte löschen

Damit haben wir eine gute Grundlage für die nächsten Funktionen des b4um Generators geschaffen.

Im nächsten Tutorial

Als Nächstes können wir unsere Produktverwaltung anders gestalten mit bento.

Dafür genügt später:

bin/rails generate b4um:bento Product --layout=grid

Meld dich an und schreibe ein Kommentar