Advertisement
  1. Code
  2. Ruby

Eine Einführung in Haml und Sinatra

by
Read Time:15 minsLanguages:

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

Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Nettuts+. Dieses Tutorial wurde erstmals im Oktober 2010 veröffentlicht.

In diesem Tutorial werden Haml und Sinatra vorgestellt. Haml ist eine Auszeichnungssprache, die sauberes, gut strukturiertes HTML erzeugt. Sinatra ist ein einfaches, aber leistungsstarkes Ruby-Framework zum Erstellen von Websites oder Webdiensten. Die beiden arbeiten sehr gut zusammen und bieten ein leistungsstarkes Tool für die schnelle und einfache Webentwicklung. Ich finde sie ideal für das Prototyping.

Am Ende dieses Tutorials haben Sie mit Sinatra und Haml eine Website mit zwei Seiten erstellt. Unterwegs erfahren Sie, wie Sinatra-Anwendungen strukturiert sind, und werden in Haml eingeführt. Sie erfahren auch, wie Sie eine Layoutdatei verwenden, um die Menge an dupliziertem Code zu reduzieren und die Konsistenz zwischen den Seiten zu gewährleisten.


Schritt 1: Installieren Sie Ruby and the Gems

Sie können diesen Abschnitt überspringen, wenn Sie Ruby bereits installiert haben und auf Ihrem System arbeiten.

Wir müssen die Ruby-Sprache und die Edelsteine Sinatra und Haml installieren, um loszulegen.

Die Methode hierfür hängt von Ihrem Betriebssystem ab. Ich verwende gerne den Ruby Version Manager(RVM), um Ruby unter OS X und Linux zu verwalten. (Windows-Benutzer möchten möglicherweise Pik als Alternative zu RVM betrachten.)

Installieren Sie RVM, um unsere Ruby-Umgebung zu verwalten

Für diejenigen unter Ihnen, auf denen Ruby nicht installiert ist, laden Sie RVM herunter und installieren Sie es.

Öffnen Sie gemäß den Anweisungen auf der RVM-Installationsseite ein Terminal und geben Sie Folgendes ein:

Dadurch wird RVM heruntergeladen und installiert. Wir müssen am Ende unserer .bashrc-Datei eine Zeile einfügen. Diejenigen unter Ihnen, die eine Alternative zu Shell zu Bash verwenden, müssen das entsprechende Profil ändern. Weitere Informationen finden Sie auf der RVM-Installationsseite.

Möchten Sie mehr über die Arbeit mit RVM erfahren?

Schließen und öffnen Sie Ihre Hülle wieder und Sie sollten bereit sein zu gehen!

Installieren Sie Abhängigkeiten und die Ruby-Sprache

Geben Sie 'rvm notes' ein, um alle Abhängigkeiten zu überprüfen, die Sie möglicherweise für Ihr Betriebssystem installieren müssen. Es gibt mehrere verschiedene Versionen von Ruby, die RVM verwalten kann. Wir werden die Standardversion namens MRI verwenden. Suchen Sie daher in der Ausgabe von rvm notes nach dem Abschnitt "For MRI und REE...". Kopieren Sie dann den für "ruby" angegebenen Befehl und fügen Sie ihn ein.

Bei einer Neuinstallation von Ubuntu erhielt ich beispielsweise die folgende Ausgabe und musste die aufgeführten Abhängigkeiten mithilfe des in der Ausgabe angegebenen Befehls aptitude installieren. Siehe Screenshot unten.

Nachdem das knifflige Problem gelöst ist, ist die Installation und Verwendung verschiedener Ruby-Versionen und -Edelsteine jetzt einfach. Installieren Sie Version 1.9.2 von Ruby, indem Sie Folgendes eingeben:

RVM sollte jetzt Ruby Version 1.9.2 herunterladen und installieren.

Die letzte Phase besteht darin, die Edelsteine Sinatra und Haml zu installieren. Art:

Sie sollten die folgende Ausgabe im Terminal sehen:

Geben Sie nun gem install haml ein, um den Haml gem auf die gleiche Weise auf Ihrem System zu installieren.


Schritt 2: Erstellen Sie die Sinatra-Anwendung

Ganz neu in Sinatra? Nehmen Sie an unserem kostenlosen Kurs teil!

Erstellen Sie einen Ordner mit einer Ruby-Datei für den Anwendungscode, um mit der Erstellung der Sinatra-Anwendung zu beginnen. Geben Sie in Ihrem Terminal Folgendes ein:

Öffnen Sie die neu erstellte Datei "website.rb" in Ihrem Texteditor und geben Sie Folgendes ein:

Dies ist eine grundlegende Sinatra-Anwendung. Die ersten beiden Zeilen bringen die Bibliotheken "rubygems" und "sinatra", um die schwere Arbeit zu erledigen.

Im nächsten Abschnitt erfahren Sie, wie Sie auf eine 'get'-Anfrage antworten können. Insbesondere wird angegeben, was zu tun ist, wenn die Root-URL (der Pfad '/') angefordert wird. In diesem Beispiel gibt Sinatra nur die Zeichenfolge "This is Sinatra" zurück. Dies wird im Browser angezeigt, wenn die Stamm-URL der Anwendung angefordert wird.

Um es in Aktion zu sehen, kehren Sie zu Ihrem Terminal zurück und führen Sie die Sinatra-Anwendung mit dem folgenden Befehl aus:

Sie müssen diese Datei website.rb jedes Mal neu starten, wenn Sie sie ändern. Daher ist es eine gute Idee, eine separate Shell in einem eigenen Fenster oder einer eigenen Registerkarte laufen zu lassen, um sie zu starten und zu stoppen.

Sie sollten die Antwort erhalten:

Dies sagt uns, dass ein Webserver (WEBrick genannt) gestartet wurde und jetzt Ihre Anwendung auf Port 4567 bereitstellt.

Um es anzuzeigen, öffnen Sie Ihren Browser und gehen Sie zu "localhost:4567". Sie sollten die Ausgabe der Anwendung sehen:

Herzliche Glückwünsche! Ihre Sinatra-Anwendung ist betriebsbereit!

Beginnen wir mit dem Erstellen von Seiten mit Haml und einigen Standardkonventionen von Sinatra für spezielle Dateien.


Schritt 3: Einführung in Haml

Wir werden unsere Seiten mit Haml erstellen. Der erste Schritt besteht darin, unserer Anwendung mitzuteilen, dass wir den Haml-Edelstein verwenden werden.

Dazu fügen wir am oberen Rand Ihres Codes include 'Haml' hinzu. Ändern Sie Ihre "website.rb"-Datei so, dass sie wie folgt aussieht:

Ihre Anwendung kann jetzt das zuvor installierte Haml-Juwel verwenden.

Die Haml Markup Sprache

Haml ist eine einfache und übersichtliche Art, HTML zu beschreiben. Es kann auch Inline-Code wie PHP-, ASP- und Ruby-Skripte verarbeiten.

Eines der Ziele von Haml ist es, die Anzahl der Duplikate und Wiederholungen beim Erstellen von Webseiten mit HTML zu verringern. Ein Beispiel hierfür ist das Schließen von Tags. Dazu wird auf die Struktur der Einrückungen im Code zurückgegriffen: Beim Schreiben in Haml ist es wichtig, mit den Einrückungen übereinzustimmen, da diese die Struktur der Seite beschreiben.

Das Ergebnis ist ein Markup, das logisch und für alle außer den trivialsten Fällen viel einfacher zu lesen ist als HTML.

Schauen wir uns ein Haml-Markup an und zeigen den HTML-Code, den es erzeugt.

Das "!!!" Zu Beginn des Codes weist Haml an, das DOCTYPE-Tag auszugeben. HTML-Tags werden mit einem "%"-Zeichen beschrieben. %html gibt also das <html>-Tag aus, %head erstellt das <head>-Tag, %p erstellt das <p>-Tag und so weiter.

Die Einrückungen sagen Haml, welche Tags in anderen liegen. Das durch das Markup "%h1" erzeugte Überschriften-Tag <h1> befindet sich also innerhalb des durch das Markup "%body" erstellten Tags <body>. Das folgende Absatz-Tag, das durch das Tag "%p" gekennzeichnet ist, befindet sich ebenfalls im Body-Tag. Wenn wir den Einrückungen folgen, können wir sehen, dass der Text innerhalb des Absatzes liegt.

Daher gibt das obige Markup die folgende HTML-Ausgabe:

Sie können sehen, wo die schließenden Tags der Einrückung im ursprünglichen Haml-Markup entsprechen.

Hinzufügen von Haml-Vorlagen zur Sinatra-Anwendung

Mit dieser kurzen Einführung in Haml können wir beginnen, sie in unserer Anwendung zu verwenden. Standardmäßig sucht Sinatra in einem Ordner namens "views" nach Webseitenvorlagen. Fügen wir diesen Ordner jetzt hinzu.

Öffnen Sie ein Terminal, navigieren Sie zu dem zuvor erstellten Ordner sinatra_app und geben Sie Folgendes ein:

Jetzt befinden wir uns im Ordner "views". Erstellen wir eine Seite "index.haml".

Öffnen Sie "index.haml" in Ihrem Texteditor und geben Sie Folgendes ein:

Der nächste Schritt besteht darin, Sinatra anzuweisen, diese Datei für die Homepage zu verwenden. Öffnen Sie die Datei "website.rb" und ändern Sie den Code im Block get '/', sodass die Datei jetzt lautet:

Dadurch wird die Anwendung angewiesen, die Ausgabe der Haml-Datei mit dem Namen index.haml (automatisch im Ordner "views" gesucht) zu senden, wenn die Stammadresse angefordert wird.

Geben Sie im Terminal, auf dem der Webserver ausgeführt wird, "Strg-C" ein, um den Webserver zu stoppen, und rufen Sie ihn dann erneut mit dem Befehl ruby auf, um ihn neu zu starten:

Aktualisieren Sie Ihren Browser und Sie sollten die resultierende Webseite sehen.

Wenn Sie die Quelle dieser Webseite anzeigen, wird der von Haml generierte HTML-Code angezeigt:

Großartig! Wir haben jetzt unsere Website unter Verwendung der Haml-Vorlagen im Verzeichnis "views".

Lassen Sie uns nun die Homepage in etwas einarbeiten, das einer typischen Struktur mit einer Kopf-, Fuß-, Inhalts- und Seitenleiste folgt. Wir werden auch einige grundlegende CSS hinzufügen, um die Seite zu positionieren und zu gestalten. Auf diese Weise erfahren Sie, wie Sie <div>-Tags in Haml ausdrücken und wie Sie Links zu CSS-Dateien erstellen.

Erstellen Sie die Homepage

Kehren Sie in Ihrem Texteditor zur Datei "index.haml" zurück und ändern Sie sie wie folgt:

Dies ist ein typisches Layout mit Kopf-, Inhalts-, Seitenleisten- und Fußzeilendivs. Wie Sie sehen können, werden <div>-Tags mit dem #-Zeichen erstellt. Die gesamte Seite wird in ein <div id="wrapper">-Tag eingeschlossen, das von der Zeile "#wrapper" erstellt wird.

Um einem HTML-Tag eine ID zu geben, verketten wir einfach das # am Ende, damit wir %body#my_ID schreiben können, um <body id="my_ID"> zu erhalten. Klassen sind mit einem Punkt markiert. %article.my_class würde also <article class="my_class"> geben.

Speichern Sie die Datei und aktualisieren Sie sie in Ihrem Browser. Sie sollten so etwas sehen:

Fügen Sie etwas CSS-Styling hinzu

Sinatra verwendet einen anderen speziellen Verzeichnisnamen 'public', um Assets wie CSS-Dateien und Bilder zu speichern. Erstellen Sie einen Ordner mit dem Namen "public" im Stammordner Ihrer Anwendung. Wechseln Sie in dieses Verzeichnis und erstellen Sie ein Verzeichnis mit dem Namen "css", um die CSS-Dateien zu speichern. Erstellen Sie zum Abschluss eine leere css-Datei in diesem Verzeichnis.

Tun Sie dies in Ihrem Terminal, indem Sie Folgendes eingeben:

Öffnen Sie die Datei styles.css in Ihrem Editor und kopieren Sie Folgendes und fügen Sie es ein:

Ich werde nicht auf die Details des css eingehen, da dies nur eine schnelle und schmutzige Methode ist, um die Seitenelemente im Browser deutlicher zu machen.

Wir müssen von der Indexseite aus auf die CSS-Datei verlinken. Ich werde auch einen Link zum Zurücksetzen von Yahoo CSS hinzufügen, um die Konsistenz zwischen den Browsern zu verbessern. Öffnen Sie die Seite index.haml des Editors und fügen Sie diese beiden Zeilen zum Abschnitt %head hinzu.

Dies zeigt, wie wir in Haml Klammern für zusätzliche Tag-Attribute verwenden können: in diesem Fall rel und href.

Ihre endgültige Datei sollte folgendermaßen aussehen:

Aktualisieren Sie Ihren Browser, und Sie sollten die Startseite mit dem Styling und den positionierten div sehen.

Wir haben jetzt die grundlegende Vorlage für unsere Webseiten, die wir zum Erstellen zusätzlicher Seiten wiederverwenden können.


Schritt 4: Erstellen eines gemeinsamen Layouts

Nachdem wir nun unser grundlegendes Seitenlayout haben, können wir sehen, dass ein Großteil des Inhalts in unserer index.html-Datei für andere Seiten auf der Site möglicherweise identisch ist. In diesem Beispiel behalten wir die Kopf-, Fuß- und Seitenleiste beider Seiten bei. Wir können eine layout-Datei in Sinatra verwenden, um dies zu erreichen.

Kehren Sie in Ihrem Texteditor zur index-Seite zurück. Ändern Sie den Dateinamen, indem Sie "Speichern unter" in layout.haml wählen.

Wir werden nun die layout-Datei bearbeiten und einige Vorlagen-Markups mit dem Tag "=" in Haml einführen.

Ändern Sie die Layoutdatei so, dass sie wie folgt aussieht:

Der Schlüssel hier ist der Befehl "=yield". Das =-Zeichen weist Haml an, Ruby-Code zu verarbeiten und die Ausgabe in den Browser zu stellen. Hier rufen wir einfach Rubys yield-Funktion auf, die den Inhalt der Seite zurückgibt.

Wir können jetzt unsere index.haml-Seite bearbeiten, um den gesamten Code zu entfernen, der in der layout-Datei dupliziert ist. Ändern Sie es so, dass es aussieht wie:

Das Aktualisieren des Browsers sollte genau das gleiche Ergebnis wie zuvor liefern. Dieses Mal wird die layout-Datei jedoch automatisch von Sinatra übernommen und die index-Seite wird als Ergebnis der yield-Funktion gerendert.

Erstellen Sie die Info-Seite

Das Erstellen zusätzlicher Seiten, die diese Vorlage verwenden, ist jetzt unkompliziert. Erstellen Sie eine neue Datei im Ordner "views" mit dem Namen about.haml

Ihr Verzeichnis und Ihre Dateistruktur für die Anwendung sollten folgendermaßen aussehen:

Geben Sie den folgenden Code in die neue Datei ein:

Wie Sie sehen können, ist dies eine sehr einfache Seite mit einer Überschrift und einem Textstück innerhalb eines Absatz-Tags.

Wir haben momentan keine Möglichkeit, die Seite zu sehen. Dazu müssen wir die Datei website.rb ändern, um Sinatra anzuweisen, eine Anfrage nach "/about" zu bearbeiten und als Ergebnis die Vorlage about.haml zurückzugeben.

Dazu fügen wir der Datei website.rb die folgenden Zeilen hinzu:

Der einfache get '/ about'-Block weist Sinatra an, die' about'-Haml-Vorlage als Antwort auf ein HTTP get für '/ about' zurückzugeben.

Starten Sie den WEBrick-Webserver neu, indem Sie in dem Terminal, in dem er ausgeführt wird, wie zuvor Strg-C drücken und ruby website.rb aufrufen.

Sie sollten die folgende Seite sehen, wenn Sie in Ihrem Browser zu 'localhost:4567/about' navigieren.

Das Hinzufügen weiterer Seiten wäre so schnell und einfach. Denken Sie daran, dass Sie den WEBrick-Server neu starten müssen, wenn Sie die Anwendungsdatei ändern.


Schritt 5: Hinzufügen eines Meny (und Aufräumen)

Wir müssen eine Möglichkeit hinzufügen, zwischen den Seiten zu navigieren. Deshalb fügen wir dem Layout ein einfaches Menü hinzu. Öffnen Sie die Datei layout.haml und fügen Sie das Navigations-div und die folgenden Links hinzu:

Hier erstellen wir ein div mit der ID von nav. Dieses div enthält eine Liste mit anchor-Tag für '/' und 'about'. Beachten Sie, wie der verknüpfte Text in der folgenden Zeile eingerückt wird, um ihn im HTML-Ankertag zu umgeben.

Aktualisieren Sie Ihren Browser und Sie sollten ein Menü sehen, das die beiden Seiten verbindet:

Durch Klicken auf die Links im Navigationsmenü gelangen Sie zu jeder Seite. Sie können mit dem Hinzufügen weiterer Seiten experimentieren. Denken Sie daran, die Schritte sind wie folgt:

  • Fügen Sie dem Ansichtsverzeichnis eine neue .haml-Datei hinzu.
  • Beschreiben Sie die Ansicht mit Haml in dieser Datei.
  • Fügen Sie die Navigation zur neuen Seite im Menüteil der Layoutdatei hinzu.
  • Bearbeiten Sie die Datei website.rb für die neue Route auf die gleiche Weise wie die Route '/about'.
  • Vergessen Sie nicht, die Datei website.rb neu zu starten!

Abschluss

Sowohl Sinatra als auch Haml haben sicherlich viel mehr zu bieten, als wir hier gesehen haben. Sinatra ist eine gute Wahl für Websites und Webdienste, während ein schwereres Framework wie Ruby on Rails möglicherweise übertrieben ist. Außerdem finde ich, dass die Einfachheit und Klarheit von Haml Sinatra wunderbar ergänzt und für einen sehr produktiven Entwicklungsansatz sorgt.

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.