Advertisement
  1. Code
  2. Ruby

Mit Sinatra singen: The Recall App

by
Read Time:14 minsLanguages:
This post is part of a series called Singing with Sinatra.
Singing with Sinatra
Singing with Sinatra - The Encore

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Willkommen zu Track 2 des Singens mit Sinatra. In Teil 1 haben wir Routen untersucht, wie man mit URI-Parametern arbeitet, mit Formularen arbeitet und wie Sinatra Routen anhand der HTTP-Methode unterscheidet, von der sie angefordert wurden. Heute werden wir unser Wissen über Sinatra erweitern, indem wir eine kleine datenbankgesteuerte App namens "Recall" erstellen, mit der Sie Notizen machen / eine Aufgabenliste erstellen können.

Wir werden eine SQLite-Datenbank verwenden, um die Notizen zu speichern, und wir werden den DataMapper RubyGem verwenden, um mit der Datenbank zu kommunizieren. Führen Sie Folgendes in einer Shell aus, um die entsprechenden Edelsteine zu installieren:

Abhängig davon, wie Sie RubyGems auf Ihrem System eingerichtet haben, müssen Sie der gem install möglicherweise sudo voranstellen.


Das Warm-up

Lassen Sie uns gleich loslegen, indem wir ein neues Verzeichnis für das Projekt erstellen und die Anwendungsdatei recall.rb erstellen. Beginnen Sie damit, indem Sie die entsprechenden Edelsteine benötigen:

Hinweis: Wenn Sie Ruby 1.9 ausführen (was Sie auch sein sollten), können Sie die Zeile "erfordern 'Rubygems'" löschen, da Ruby RubyGems ohnehin automatisch lädt.

Und richten Sie die Datenbank ein:

In der ersten Zeile richten wir im aktuellen Verzeichnis eine neue SQLite3-Datenbank mit dem Namen recall.db ein. Darunter richten wir tatsächlich eine "Notes" -Tabelle in der Datenbank ein.

Während wir die Klasse 'Note' aufrufen, erstellt DataMapper die Tabelle als 'Notes'. Dies steht im Einklang mit einer Konvention, der Ruby on Rails und anderen Frameworks und ORM-Modulen folgen.

Innerhalb der Klasse richten wir das Datenbankschema ein. Die Tabelle 'Notizen' enthält 5 Felder. Ein id-Feld, das ein ganzzahliger Primärschlüssel ist und automatisch inkrementiert wird (dies bedeutet "Seriell"). Ein content feld mit Text, einem booleschen complete Feld und zwei Datums- / Uhrzeitfeldern, created_at und updated_at.

Die allerletzte Zeile weist DataMapper an, die Datenbank automatisch zu aktualisieren, um die von uns festgelegten Tabellen und Felder zu enthalten, und dies erneut zu tun, wenn wir Änderungen am Schema vornehmen.


Die Homepage

Jetzt erstellen wir unsere Homepage:

Oben befindet sich ein Formular zum Hinzufügen einer neuen Notiz. Darunter befinden sich alle Notizen in der Datenbank. Fügen Sie der Anwendungsdatei recall.rb hinzu, um zu beginnen:

Wichtiger Hinweis: Entfernen Sie den Punkt ('.') In :.order. (WordPress stört das Codebeispiel.)

In der zweiten Zeile sehen Sie, wie wir alle Notizen aus der Datenbank abrufen. Wenn Sie zuvor ActiveRecord (das in Rails verwendete ORM) verwendet haben, ist die Syntax von DataMapper sehr vertraut. Die Notizen werden der Instanzvariablen @notes zugewiesen. Es ist wichtig, Instanzvariablen (dh Variablen, die mit einem @ beginnen) zu verwenden, damit auf sie in der Ansichtsdatei zugegriffen werden kann.

Wir setzen die Instanzvariable @title und laden die Ansichtsdatei views/home.erb über den ERB-Parser.

Erstellen Sie die Ansichtsdatei views/home.erb und starten Sie sie:

Wir haben ein einfaches Formular, das auf der Homepage ('/') veröffentlicht wird. Darunter befindet sich ein ERB-Code, der vorerst als Platzhalter dient.


Layouts

Das HTML-Standard-Los unter Ihnen hat möglicherweise einen kleinen Schlaganfall erlitten, nachdem festgestellt wurde, dass unsere Home-View-Datei keinen Doctype oder andere HTML-Tags enthält. Dafür gibt es einen Grund. Erstellen Sie eine layout.erb-Datei in Ihren views/ Ihrem Verzeichnis, die Folgendes enthält:

Die beiden interessanten Teile hier sind die Zeilen 5 und 18. In Zeile 5 sehen Sie die erste Verwendung der ERB-Tags <% = … %>. <%= unterscheidet sich von den normalen <%, da es druckt, was sich darin befindet. Hier zeigen wir also das Was auch immer in der Instanzvariablen @title an, gefolgt von | Recall Sie das <title>-Tag der Seite auf.

In Zeile 18 steht <%= yield %>. Sinatra zeigt diese layout.erb-Datei auf allen Routen an. Und der eigentliche Inhalt für diese Route wird eingefügt, wo immer der yield ist. yield ist ein Begriff, der im Wesentlichen bedeutet: "Hier anhalten, was auch immer wartet, dann weitermachen".

Starten Sie den Server mit der shotgun recall.rb in der Shell und sehen Sie sich die Homepage im Browser an. Sie sollten den Inhalt aus der Layoutdatei und das Formular aus der tatsächlichen Ansicht home.erb sehen.


CSS

In die Layoutdatei haben wir zwei CSS-Dateien aufgenommen. Sinatra kann statische Dateien (z. B. CSS, JS, Bilder usw.) aus einem Ordner mit dem Namen public/ im Stammverzeichnis laden. Erstellen Sie also dieses Verzeichnis und darin zwei Dateien: reset.css und style.css. Der Reset enthält den HTML5 Boilerplate CSS Reset:

Und style.css enthält einige grundlegende Stile, damit die App hübsch aussieht:

Aktualisieren Sie die Seite in Ihrem Browser und alles sollte gestylt sein. Sorgen Sie sich nicht zu sehr um dieses CSS. Das macht die Dinge nur ein bisschen hübscher!


Hinzufügung einer Notiz zur Datenbank

Wenn Sie jetzt versuchen, das Formular auf der Startseite zu senden, wird ein Routenfehler angezeigt. Erstellen wir jetzt die POST-Route für die Homepage:

Wenn also eine Post-Anfrage auf der Homepage gestellt wird, erstellen wir ein neues Note-Objekt in n (dank des DataMapper-ORM repräsentiert Note.new eine neue Zeile in der notes-Tabelle in der Datenbank). Das content-Feld wird auf die übermittelten Daten aus dem Textbereich gesetzt, und die Datums- / Uhrzeitfelder created_at und updated_at werden auf den aktuellen Zeitstempel gesetzt.

Die neue Notiz wird dann gespeichert und der Benutzer wird zurück zur Startseite weitergeleitet, auf der die neue Notiz angezeigt wird.


Anzeigen der Notizen

Wir haben also eine neue Notiz hinzugefügt, aber wir können sie noch nicht auf der Homepage sehen, da wir den Code dafür nicht geschrieben haben. Ersetzen Sie in der Ansichtsdatei views/home.erb die Zeile <%# display notes %> durch:

In der ersten Zeile beginnen wir eine Schleife durch die einzelnen @notes (alternativ hätten for note in @notes  schreiben können, aber die Verwendung eines Blocks, wie wir hier sind, ist eine bessere Vorgehensweise). In Zeile 2 geben wir dem <article> eine Klasse von complete, wenn die aktuelle Note auf complete gesetzt ist. Der Rest sollte ziemlich einfach sein.


Notiz bearbeiten

So können wir Notizen hinzufügen und anzeigen. Jetzt brauchen wir nur noch die Möglichkeit, sie zu bearbeiten und zu löschen.

Möglicherweise haben Sie bemerkt, dass wir in unserer home.erb-Ansicht für jede Notiz einen [edit]-Link auf das setzen, was im Wesentlichen /:id ist. Erstellen wir also jetzt diese Route:

Wir rufen die angeforderte Notiz mit der angegebenen ID aus der Datenbank ab, richten eine @title-Variable ein und laden die Ansichtsdatei views/edit.erb über den ERB-Parser.

Geben Sie für die Ansicht views/edit.erb Folgendes ein:

Das ist eine ziemlich einfache Ansicht. Ein Formular, das auf die aktuelle Seite verweist, ein Textbereich mit dem Inhalt der Notiz und ein Kontrollkästchen, das aktiviert wird, wenn die Notiz complete ausgefüllt werden soll.

Aber schauen Sie sich die dritte Zeile an. Geheimnisvoll. Um dies zu erklären, müssen wir ein wenig zur Seite gehen.

RESTful Services

Sie haben von den beiden Begriffen GET und POST gehört.

  • GET: Am häufigsten. Es dient im Allgemeinen zum Anfordern einer Seite und kann mit einem Lesezeichen versehen werden.
  • POST: Wird zum Übermitteln von Daten verwendet und kann nicht mit Lesezeichen versehen werden.

Aber GET und POST sind nicht die einzigen "HTTP-Verben" - es gibt zwei weitere, die Sie kennen sollten: PUT und DELETE.

Technisch gesehen sollte POST nur zum Erstellen von Objekten verwendet werden - beispielsweise zum Erstellen einer neuen Notiz in Ihrer fantastischen neuen Web-App.

PUT ist das Verb zum Ändern von etwas. Und DELETE, Sie haben es erraten, dient zum Löschen von etwas.

Diese vier Verben sind eine großartige Möglichkeit, eine App zu trennen. Es ist logisch. Leider unterstützen Webbrowser PUT- oder DELETE-Anforderungen nicht, weshalb Sie wahrscheinlich noch nie davon gehört haben.

Wenn wir also hier wieder auf Kurs kommen und unsere App logisch aufteilen möchten (was Sinatra empfiehlt), müssen wir diese PUT- und DELETE-Anforderungen fälschen. Sie werden sehen, dass die action unseres Formulars auf post eingestellt ist. Das put Eingabefeld _method, das wir in die dritte Zeile gesetzt haben, ermöglicht es Sinatra, diese PUT-Anforderung zu fälschen, während tatsächlich ein POST verwendet wird. Rails machen unter anderem ähnliche Dinge.


Lassen Sie uns setzen

Nachdem wir unsere PUT-Anfrage gefälscht haben, können wir eine Route dafür erstellen:

Es ist alles ziemlich einfach. Wir erhalten den entsprechenden Hinweis anhand der ID im URI, setzen die Felder auf die neuen Werte, speichern und leiten die Startseite um. Beachten Sie, dass wir in der vierten Zeile einen ternären Operator verwenden, um n.complete auf 1 zu setzen, wenn params[:complete] vorhanden ist, oder auf andere Weise auf 0. Dies liegt daran, dass der Wert eines Kontrollkästchens nur dann mit einem Formular gesendet wird, wenn es aktiviert ist. Daher überprüfen wir einfach, ob es vorhanden ist.


Notiz löschen

In unserer edit.erb-Ansicht haben wir einen Link 'Löschen' zu dem Pfad /:id/delete hinzugefügt. Fügen Sie dies Ihrer Anwendungsdatei hinzu:

Auf dieser Seite erhalten wir vom Benutzer eine Bestätigung, dass er diese Notiz tatsächlich löschen möchte. Erstellen Sie die Ansichtsdatei unter views/delete.erb wie folgt:

Beachten Sie, dass wir genau wie beim Eingeben eines versteckten _method-Eingabefelds eine PUT-Anforderung gefälscht haben und jetzt eine DELETE-Anforderung vortäuschen.


Die DELETE Route

Ich bin mir sicher, dass Sie jetzt den Dreh raus haben. Die Löschroute lautet:

Versuchen Sie es! Sie sollten jetzt in der Lage sein, Notizen anzuzeigen, hinzuzufügen, zu bearbeiten und zu entfernen. Es gibt nur noch eine Sache...


Markieren einer Notiz als "Vollständig"

Wenn Sie jetzt eine Notiz als complete festlegen möchten, müssen Sie in die Ansicht Bearbeiten gehen und das Kontrollkästchen auf dieser Seite aktivieren. Lassen Sie uns diesen Prozess etwas einfacher machen.

Als wir die Haupt-Homepage eingerichtet haben, haben wir jeder Notiz einen /:id/complete-Link hinzugefügt. Lassen Sie uns jetzt diese Route erstellen, die einfach eine Notiz als vollständig (oder unvollständig, wenn sie bereits als vollständig festgelegt wurde) festlegt:


Abschluss

Sie und Sinatra schaffen ein tolles Duett! Sie haben sehr schnell eine einfache Web-App geschrieben, die alle CRUD-Operationen ausführt, die Sie von einer App erwarten. Es ist in super-sexy-sauberem Ruby-Code geschrieben und in seine logischen Teile unterteilt.

Im letzten Teil von Singing with Sinatra, dem Encore, werden wir die Fehlerbehandlung verbessern, die App vor XSS sichern und einen RSS-Feed für die Notizen erstellen.

Hinweis: Sie können die endgültigen Projektdateien für dieses Tutorial bei GitHub durchsuchen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.