Diese Erstellung von Webseiten ist gleichzeitig sehr einfach und komplex, da Sinatra beim Erstellen keinerlei Muster auferlegt. Der Grad der Komplexität hängt also von der Art und Weise ab, wie wir arbeiten Sehr positiv, wenn wir eine bereits etablierte Arbeitsweise haben.
Anforderungen
– Para poder ejecutar los ejemplos de este tutorial vamos a necesitar una instalación del lenguaje Ruby al menos en su versión 1.9 en adelante. 1 – Um die Beispiele dieses Tutorials ausführen zu können, benötigen wir eine Ruby- Installation mindestens in der Version 1.9 .
– Necesitamos también haber instalado la gema Sinatra y que esta esté configurada de forma adecuada. 2 – Wir müssen auch das Sinatra- Juwel installiert haben und dass es richtig konfiguriert ist. Im Zweifelsfall können wir das folgende Tutorial konsultieren.
– Debemos tener permisos en una carpeta para ejecutar Ruby , crear y manipular archivos. 3 – Wir benötigen Berechtigungen für einen Ordner, um Ruby ausführen, Dateien erstellen und bearbeiten zu können.
– Debemos tener un editor de texto para poder escribir el contenido de los ejemplos, este puede ser cualquier tipo de editor de texto plano que nos permita guardar un archivo .rb como Sublime Text o incluso NotePad ++. 4 – Wir benötigen einen Texteditor, um den Inhalt der Beispiele schreiben zu können. Dies kann ein beliebiger Texteditor sein, mit dem wir eine .rb- Datei als Sublime Text oder sogar als NotePad ++ speichern können.
– Por último necesitamos un navegador web como Google Chrome o Firefox donde podamos ejecutar nuestro ejemplo y realizar la navegación por el mismo. 5 – Schließlich benötigen wir einen Webbrowser wie Google Chrome oder Firefox, in dem wir unser Beispiel ausführen und darin navigieren können.
Was wird unsere Website beinhalten?
Um überhaupt eine Website zu erstellen, müssen wir eine Vision haben, ein Ziel, das uns anleitet und das wir als Referenz bei der Entwicklung verwenden können. Dies ist normalerweise dann der Fall, wenn wir wissen, dass unser Projekt erfolgreich sein wird.
Im Falle der Website werden wir das Ziel erstellen, drei Seiten zu erstellen, wir werden sie auflisten:
- Zuhause
- Über mich
- Kontakt
Dies führt uns zu einer Referenz-Website oder einem persönlichen Blog. Auf diese Weise müssen wir einige Techniken beherrschen, die wir in Zukunft auf andere Projekte anwenden können. Um unsere Fortschritte schneller verfolgen zu können, werden wir sie während des Aufbaus unserer Website iterieren und korrigieren.
Erstellen Sie unsere erste Ansicht
Zu Beginn müssen wir eine Datei mit dem Namen home.rb erstellen. Diese Datei enthält die gesamte Logik der Ansichten und Routen unserer Website. Der ursprüngliche Inhalt ist der folgende:
Benötige 'Sinatra' get '/' do erb: start ende
Im Prinzip sieht es ein bisschen selten aus, dass wir gerade geschrieben haben, aber mal sehen, was die Funktionalität ist; Zunächst wird Sinatra mit der Anforderung eingeschlossen . Dies bedeutet, dass wir bereits über alle Tools verfügen können, die dieses Framework zur Verfügung stellt.
Dann haben wir den get- Block, in dem wir definieren, dass der Inhalt im Root-Pfad ausgeführt werden muss. Der Inhalt ist ein Aufrufer erb a : start , in dem wir pausieren müssen, um zu sehen, was ERB ist und warum wir es verwenden. mal sehen:
Die erste Vorlage erstellen
Da wir uns über das neue Konzept im Klaren sind, das wir jetzt einführen, werden wir unsere erste Vorlage in derselben Datei, home.rb , die wir erstellen, erstellen und am Ende den folgenden Code einfügen:
__END__ @@ nach Hause <! doctype html> <html lang = "en"> <head> <title> Meine eigene Website </ title> <meta charset = "utf-8"> </ head> <body> <header> <h1> Meine eigene Website </ h1> <nav> <ul> <li> <a href="/" title="Home"> Startseite </a> </ li> <li> <a href="/about" title="Sobre Mi"> Über mich </a> </ li> <li> <a href="/contact" title="Contact"> Kontakt </a> </ li> </ ul> </ nav> </ header> <section> <p> Willkommen in meinem Web. Hier werde ich meine Kenntnisse in Ruby und Sinatra demonstrieren. </ p> </ section> </ body> </ html>
Hier haben wir einige Dinge, die wir analysieren können. Zuerst haben wir Sinatra mitgeteilt , dass dies das Ende der Ruby- Verarbeitung ist. Dafür verwenden wir __END__. Dann geben wir mit einem Doppel @@ an, wie der Abschnitt heißt, in diesem Fall der Anfang, wenn wir so aussehen Name unseres Symbols.
Schließlich schreiben wir alle unsere HTML ohne Probleme. Dann gehen wir zur Konsole, positionieren uns in dem Ordner, in dem wir unsere Datei home.rb erstellen, und gehen wie folgt vor:
ruby inicio.rb
Wir können den Sinatra- Entwicklungsserver anheben und sehen Folgendes, wenn wir zu localhost gehen: 4567 oder die Portnummer, die wir für unseren Server angehoben haben:
Wie wir bemerkt haben, haben wir den HTML-Code , den wir in der Root-Route erstellt haben, die wir unserer Anwendung von Sinatra angegeben haben .
Erstellen Sie ein Layout
Eines der Dinge, die wir immer vermeiden müssen, ist zu wiederholen, was wir einmal tun können, und dass es für mehrere Dinge funktioniert. Im Fall unserer Seite ist das grundlegende HTML etwas, das wir nur einmal erstellen können, wenn wir dem letzten Beispiel folgen Wenn wir die Abschnitte ” Über mich” und ” Kontakt” erstellen, müssten wir den gesamten HTML- Code wiederholen und nur den Inhaltsteil ändern. Dies würde uns eine lange, sehr lange Datei ” home.rb” hinterlassen.
Um dieser Art von ineffektivem Verhalten entgegenzuwirken, können wir mit Sinatra das Layout verwenden. Auf diese Weise können wir eine Basis erstellen, auf der wir einfach die Änderungen oder den von uns generierten dynamischen Code drucken.
Um unserem Layout eine Form zu geben, werden wir zuerst unsere Datei home.rb modifizieren und ein paar andere Routen hinzufügen:
Benötige 'Sinatra' get '/' do erb: start ende get '/ about' do erb: über ende get '/ contact' do erb: kontakt ende
Jetzt haben wir die Routen, die wir im zuvor erstellten HTML- Menü erwähnt haben. Dies ist nur der Anfang, und Sinatra weiß, worauf zu achten ist, wenn wir diese Routen aufrufen. Der nächste Schritt besteht darin, unser Layout und den Inhalt zu definieren, der beim Aufrufen angezeigt wird jede Route.
Dazu müssen wir zuerst eine Vorlage erstellen und sie mit dem Namen @@ layout identifizieren. Dann definieren wir mit Ruby Embedded mit den <%%> -Tags einen einzelnen Titel und mit den <& = &> -Tags drucken wir den Inhalt, in dem er sich befindet erforderlich sein. An der Stelle, an der sich unser Inhalt ändert, platzieren wir <% = yield%>. Dies ist ein Dienstprogramm, mit dem Sie Sinatra mitteilen können, dass es sich an der Stelle befindet, an der Sie den Inhalt der Route drucken sollten.
Schließlich definieren wir jede unserer Routen und den Inhalt, den sie nehmen werden, und zwar in logischer Reihenfolge @@ route und dann den Inhalt, wobei Sinatra bereits weiß, was bei jedem Aufruf anzuzeigen ist . Sehen wir uns an, wie der vollständige Code unserer home.rb- Datei einschließlich des Layouts aussieht :
Benötige 'Sinatra' get '/' do erb: start ende get '/ about' do erb: über ende get '/ contact' do erb: kontakt ende __END__ @@ layout <% title = "Mein eigenes Web"%> <! doctype html> <html lang = "en"> <head> <title> <% = title%> </ title> <meta charset = "utf-8"> </ head> <body> <header> <h1> <% = title%> </ h1> <nav> <ul> <li> <a href="/" title="Home"> Startseite </a> </ li> <li> <a href="/sobre" title="Sobre Mi"> Über mich </a> </ li> <li> <a href="/contacto" title="Contact"> Kontakt </a> </ li> </ ul> </ nav> </ header> <section> <% = Ausbeute%> </ section> </ body> </ html> @@ nach Hause <p> Willkommen in meinem Web. Hier werde ich meine Kenntnisse in Ruby und Sinatra demonstrieren. </ p> @@ about <p> Hallo, ich bin der Schöpfer dieses <b> Webs </ b>. Ich habe meine Fähigkeiten genutzt, um Ruby und Sinatra zum Laufen zu bringen. </ P> @@ kontakt <p> Wenn Sie mehr über mich erfahren möchten, besuchen Sie <a href="http:/ / solvency.com"> TechnoWikis </a> </ p>
Wie wir sehen, haben wir nur einen einzigen HTML-Code geschrieben, und der Rest des Inhalts ist zusammenfassender, daher viel übersichtlicher und einfacher zu warten. Sehen wir uns an, wie er in unserem Browser aussieht, wenn wir von Anfang an zu einer anderen Route navigieren:
Wir haben bereits eine kleine, aber funktionale Website mit mehreren Links und dynamischem Inhalt erstellt. Wir verwenden nur ein Layout, um die Struktur zu erstellen. Natürlich fehlen uns noch CSS- Stile und Bilder, aber das ist das Thema eines anderen Tutorials. Natürlich ist dieser Stil nicht sehr nützlich, wenn wir Verbindungen mit Datenbanken oder Funktionen mit vielen Ansichten haben wollen, da unsere einzige Datei dann sehr komplex zu verwalten und zu warten wäre.
Nachdem wir dieses Tutorial abgeschlossen haben, haben wir unsere erste Website mit Ruby und Sinatra erstellt . Wir nutzen die Tatsache, dass wir jede Methode verwenden können, die angemessen erscheint, und haben eine sogenannte Einzeldateianwendung erstellt. Diese Art von Anwendungen ist nützlich, wenn wir sehr viel haben einfach und dass wir nicht unnötig dispergiert werden wollen, wie zum Beispiel das aus dem Beispiel resultierende Web.