Kommentare mit dem b4um Generator hinzufügen
Dabei wird ein polymorphes Comment-System eingerichtet. Dadurch kann dieselbe Kommentar-Infrastruktur später auch für weitere Models verwendet werden.
In diesem Beispiel erweitern wir ein bestehendes Product-Resource.
Voraussetzung
Für dieses Tutorial muss bereits ein Product-Resource vorhanden sein.
Zum Beispiel kann es mit dem b4um Scaffold Generator erstellt worden sein:
bin/rails generate b4um:scaffold Product name:string description:text price:decimal status:string
Die Anwendung besitzt damit unter anderem:
app/models/product.rb app/controllers/products_controller.rb app/views/products/
Jetzt ergänzen wir dieses Resource um Kommentare.
Comments Generator ausführen
Der Generator wird mit dem Namen des Models aufgerufen:
bin/rails generate b4um:comments Product
Der Generator erstellt beziehungsweise erweitert automatisch die benötigten Dateien.
Die Ausgabe sieht beispielsweise so aus:
create app/models/comment.rb insert app/models/product.rb create db/migrate/..._create_comments.rb create app/controllers/comments_controller.rb create app/views/comments/_comments.html.erb gsub config/routes.rb append app/views/products/show.html.erb
Damit ist die Kommentarfunktion bereits in das bestehende Product-Resource integriert.
Datenbank aktualisieren
Der Generator erstellt eine Migration für die Kommentare.
Diese muss anschließend ausgeführt werden:
bin/rails db:migrate
Rails erstellt dabei die neue comments-Tabelle.
Eine erfolgreiche Migration sieht beispielsweise so aus:
CreateComments: migrating create_table(:comments) CreateComments: migrated
Danach kann die Kommentarfunktion verwendet werden.
Der neue Kommentarbereich
Öffnen wir jetzt ein Produkt, erscheint unterhalb der Produktinformationen automatisch der neue Kommentarbereich.
Solange noch kein Kommentar vorhanden ist, zeigt b4um:
No comments yet.
Darunter befindet sich bereits das Formular zum Erstellen eines neuen Kommentars.
Einen Kommentar erstellen
In das Feld Comment kann jetzt direkt ein neuer Kommentar eingegeben werden.
Zum Beispiel:
Das ist mein erster Testkommentar.
Anschließend klicken wir auf:
Add comment
Der Kommentar wird gespeichert und anschließend direkt auf der Product-Seite angezeigt.
Zusätzlich zeigt Rails die Erfolgsmeldung:
Comment was successfully created.
Der Kommentar enthält außerdem den Zeitpunkt der Erstellung und einen Button zum Löschen.
Auf diesem Screenshot sind gleichzeitig mehrere Funktionen des Generators zu sehen:
- der gespeicherte Kommentar
- Datum und Uhrzeit
- der Delete-Button
- das Formular für weitere Kommentare
Kommentare löschen
Ein vorhandener Kommentar kann über den Delete-Button wieder entfernt werden.
Vor dem Löschen verwendet b4um eine Turbo-Bestätigung:
Are you sure?
Erst nach der Bestätigung wird der Kommentar gelöscht.
Danach erscheint die Meldung:
Comment was successfully destroyed.
Sind keine weiteren Kommentare vorhanden, zeigt die Seite anschließend wieder:
No comments yet.
Was hat der Generator eingerichtet?
Der Comments Generator erstellt nicht nur das Formular.
Er richtet das komplette Grundsystem für Kommentare ein.
Das neue Comment-Model befindet sich unter:
app/models/comment.rb
Es verwendet eine polymorphe Beziehung:
class Comment < ApplicationRecord belongs_to :commentable, polymorphic: true validates :body, presence: true end
commentable ist dabei bewusst nicht fest mit Product verbunden.
Dadurch kann das Kommentarsystem später auch mit anderen Models verwendet werden.
Product erhält die Kommentar-Beziehung
Das bestehende Product-Model wird automatisch erweitert:
has_many :comments,
as: :commentable,
dependent: :destroyDamit besitzt jedes Product seine eigenen Kommentare.
Wird ein Product gelöscht, werden auch die zugehörigen Kommentare entfernt.
Verschachtelte Routes
Der Generator ergänzt außerdem die benötigten Routes:
resources :products do resources :comments, only: %i[create destroy] end
Kommentare können dadurch innerhalb eines Products erstellt und gelöscht werden.
Der Generator benötigt dafür keine eigenen Seiten für Kommentare.
Die Kommentarfunktion bleibt direkt beim jeweiligen Resource.
Comments Controller
Der erzeugte CommentsController übernimmt das Erstellen und Löschen der Kommentare.
Beim Erstellen wird der Kommentar direkt dem aktuellen Product zugeordnet.
Vereinfacht sieht das so aus:
@comment = @commentable.comments.build(comment_params)
Nach erfolgreichem Speichern wird wieder zur Product-Seite zurückgeleitet.
Auch beim Löschen bleibt der Benutzer auf derselben Resource-Seite.
Kommentare in der Show-Seite
Der Generator erweitert automatisch:
app/views/products/show.html.erb
und fügt dort den Kommentarbereich ein:
<%= render "comments/comments", commentable: @product %>Die eigentliche Darstellung befindet sich in einem wiederverwendbaren Partial:
app/views/comments/_comments.html.erb
Dadurch muss die komplette Kommentaroberfläche nicht für jedes Resource neu geschrieben werden.
Kommentare für weitere Models verwenden
Das Comment-System ist polymorph aufgebaut.
Dadurch kann später beispielsweise auch ein Article Kommentare erhalten.
Voraussetzung ist, dass das entsprechende Model bereits existiert.
Anschließend genügt:
bin/rails generate b4um:comments Article
Der Generator erweitert dann das vorhandene Kommentarsystem um Article.
Das bedeutet:
Product └── Comments Article └── Comments
Beide verwenden dasselbe Comment-Model und denselben Comments Controller.
Es wird kein zweites Kommentarsystem benötigt.
Generator erneut ausführen
Der b4um Comments Generator ist für wiederholte Aufrufe ausgelegt.
Wird er für ein bereits eingerichtetes Model erneut ausgeführt, sollen bestehende Komponenten nicht unnötig dupliziert werden.
Auch beim Hinzufügen weiterer Models wird das vorhandene Kommentarsystem erweitert, statt ein zweites System anzulegen.
Zusammenfassung
Mit einem einzigen Befehl:
bin/rails generate b4um:comments Product
erweitert b4um ein bestehendes Resource um ein vollständiges Kommentar-Grundsystem.
Der Generator übernimmt:
- polymorphes Comment-Model
- Datenbankmigration
- Beziehung zum bestehenden Model
- Comments Controller
- verschachtelte Routes
- Kommentarformular
- Kommentarliste
- Löschen mit Bestätigung
- Flash-Meldungen
- b4um Form- und Card-Styling
- Unterstützung weiterer commentable Models
- sichere wiederholte Generator-Aufrufe
Nach dem Generator muss lediglich noch die Migration ausgeführt werden:
bin/rails db:migrate
Danach können Kommentare direkt auf der Show-Seite des Resources erstellt und gelöscht werden.
Verwendete Befehle
Comments Generator:
bin/rails generate b4um:comments Product
Migration ausführen:
bin/rails db:migrate
Später ein weiteres vorhandenes Model ergänzen:
bin/rails generate b4um:comments Article
Damit lässt sich eine gemeinsame Kommentarfunktion mit wenigen Befehlen auf mehrere Resources einer Rails-Anwendung erweitern.