Accentsconagua

Een inleiding tot Haml en Sinatra

Code
Share

Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Nettuts +. Deze tutorial werd voor het eerst gepubliceerd in oktober 2010.

Deze tutorial zal Haml en Sinatra introduceren. Haml is een opmaaktaal die schone, goed gestructureerde HTML produceert. Sinatra is een eenvoudig maar krachtig Ruby-raamwerk voor het maken van websites of webservices. De twee werken heel goed samen en bieden een krachtig hulpmiddel voor snelle en eenvoudige webontwikkeling. Ik vind ze ideaal voor prototyping.

Tegen het einde van deze tutorial, heb je een website gemaakt met twee pagina's met Sinatra en Haml. Onderweg leer je hoe de applicaties van Sinatra zijn gestructureerd en aan Haml worden voorgesteld. U leert ook hoe u een lay-outbestand gebruikt om de hoeveelheid gedupliceerde code te verminderen en consistentie tussen de pagina's te geven.

Stap 1: installeer Ruby en de edelstenen

U kunt deze sectie overslaan als u Ruby al hebt geïnstalleerd en op uw systeem hebt gewerkt.

We moeten de Ruby-taal en de edelstenen Sinatra en Haml installeren om aan de slag te gaan.

De methode hiervoor is afhankelijk van uw besturingssysteem. Ik gebruik graag de Ruby Version Manager (RVM) om Ruby onder OS X en Linux te beheren. (Windows-gebruikers willen mogelijk Pik als alternatief voor RVM bekijken.)

Installeer RVM om onze Ruby-omgeving te beheren

Voor degenen onder u die geen Ruby hebben geïnstalleerd, download en installeer RVM.

Volg de instructies op de RVM-installatiepagina, open een terminal en voer het volgende in:

 bash <<( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

Hiermee wordt RVM gedownload en geïnstalleerd. We moeten een regel toevoegen aan het einde van onze .bashrc het dossier. Degenen onder u die een alternatief voor shell gebruiken voor Bash zullen het juiste profiel moeten aanpassen. Zie de RVM-installatiepagina voor meer informatie.

Wilt u meer weten over werken met RVM?

 echo '[[-s "$ HOME / .rvm / scripts / rvm"]] && source "$ HOME / .rvm / scripts / rvm" # Dit laadt RVM in een shell-sessie.' >> ~ / .bashrc

Sluit en open je schaal opnieuw en je moet goed zijn om te gaan!

Installeer afhankelijkheden en de Ruby-taal

Type 'rvm-notities'om eventuele afhankelijkheden te bekijken die u mogelijk voor uw besturingssysteem moet installeren. Er zijn verschillende versies van Ruby die RVM kan beheren. We zullen de standaardversie genaamd MRI gebruiken. Vandaar, in de output van rvm-notities zoek naar het gedeelte dat zegt:Voor MRI en REE? '. Kopieer en plak vervolgens de opdracht die wordt vermeld voor 'robijn'.

Bijvoorbeeld, op een nieuwe installatie van Ubuntu, kreeg ik de volgende uitvoer en moest ik de afhankelijkheden opgesomd met behulp van de bekwaamheid commando gegeven in de uitvoer. Zie screenshot hieronder.

Met het lastige bit over, is het installeren en gebruiken van verschillende Ruby-versies en edelstenen nu eenvoudig. Installeer versie 1.9.2 van Ruby door het volgende in te voeren:

 rvm installeren 1.9.2

RVM zou nu Ruby versie 1.9.2 moeten downloaden en installeren.

De laatste stap is het instaleren van de juwelen van Sinatra en Haml. Type:

 gem installeer sinatra

U zou de volgende uitvoer in de terminal moeten zien:

 Succesvol geïnstalleerd rack-1.2.1 succesvol geïnstalleerd sinatra-1.0 2 edelstenen geïnstalleerd Ri-documentatie installeren voor rack-1.2.1? Installatie van ri-documentatie voor sinatra-1.0? RDoc-documentatie voor rack 1.2.1 installeren? RDoc-documentatie voor sinatra-1.0 installeren?

Typ nu gem install haml om de Haml-edelsteen op uw systeem op dezelfde manier te installeren.

Stap 2: Maak de Sinatra-applicatie

Gloednieuw voor Sinatra? Neem onze gratis cursus!

Om te beginnen met het maken van de Sinatra-applicatie, maakt u een map met een Ruby-bestand voor de applicatiecode. Typ in uw terminal:

 mkdir sinatra-app cd sinatra-app touch website.rb

Open het nieuw gemaakte 'website.rb'-bestand in uw teksteditor en voer het volgende in:

 vereisen 'rubygems' vereisen 'sinatra' get '/' do "Dit is Sinatra" einde

Dit is een standaard applicatie van Sinatra. De eerste twee regels brengen de 'rubygems'en'sinatra'bibliotheken om het zware werk te doen.

Het volgende deel vertelt Sinatra hoe te reageren op een 'krijgen' verzoek. In het bijzonder, het vertelt het wat te doen wanneer de root-URL (de '/' pad) wordt gevraagd. In dit voorbeeld geeft Sinatra gewoon de string "This is Sinatra". Dit is wat in de browser verschijnt wanneer de root-URL van de toepassing wordt aangevraagd.

Om het in actie te zien, ga terug naar je terminal en voer de Sinatra-applicatie uit met de volgende opdracht:

 ruby website.rb

U moet dit opnieuw starten website.rb bestand elke keer dat je het verandert. Daarom is het een goed idee om een ​​afzonderlijke shell in zijn eigen venster of tabblad te laten starten en stoppen.

U zou het antwoord moeten krijgen:

 == Sinatra / 1.0 is in 4567 op gang gekomen voor ontwikkeling met back-up van WEBrick [2010-09-27 09:45:37] INFO WEBrick 1.3.1 [2010-09-27 09:45:37] INFO ruby ​​1.8. 7 (2010-08-16) [i686-darwin10.4.0] [2010-09-29 09:45:38] INFO WEBrick :: HTTPServer # start: pid = 14135 poort = 4567

Dit vertelt ons dat een webserver (genaamd WEBrick) is gestart en nu uw applicatie aanbiedt op poort 4567.

Om het te bekijken, open je je browser en ga je naar "localhost: 4567". U zou de uitvoer van de toepassing moeten zien:

Gefeliciteerd! Uw Sinatra-toepassing is actief!

Laten we beginnen met het bouwen van pagina's met Haml en een aantal standaard Sinatra-conventies voor speciale bestanden.

Stap 3: Introductie van Haml

We gaan onze pagina's samenstellen met Haml. De eerste stap is om onze applicatie te vertellen dat we de Haml-edelsteen zullen gebruiken.

We doen dit door 'Haml' toe te voegen aan de bovenkant van uw code. Verander jouw 'website.rb'bestand om er als volgt uit te zien:

 vereisen 'rubygems' vereisen 'sinatra' vereisen 'Haml get' / 'do' Dit is het einde van Sinatra

Uw toepassing weet nu welk Haml-juweel we eerder hebben geïnstalleerd.

De Haml Markup-taal

Haml is een eenvoudige en schone manier om HTML te beschrijven. Het kan ook inline-code verwerken, zoals PHP, ASP en Ruby-script.

Een van de doelen van Haml is het verminderen van de hoeveelheid duplicatie en herhaling die wordt gevonden bij het maken van webpagina's met HTML; een voorbeeld hiervan is het sluiten van tags. Dit doet het door te vertrouwen op de structuur van de inspringingen in de code: Bij het schrijven in Haml is het belangrijk om consistent te zijn met inspringingen omdat ze de structuur van de pagina beschrijven.

Het resultaat is markup die logisch is en veel gemakkelijker te lezen dan HTML voor alle, maar de meest triviale gevallen.

Laten we eens naar enkele Haml-markeringen kijken en de HTML weergeven die deze produceert.

 !!! % html% head% title Dit is de titel in een title-tag in de head-tag% body% h1 Dit is een kop binnen een h1-tag% p Dit is tekst in een alinea. Merk op hoe we de tag niet sluiten? de streepjes doen dat!

De '!!!'aan het begin van de code vertelt Haml om de DOCTYPE label. HTML-tags worden beschreven met een '%' teken. Zo % html geeft de label, %hoofd maakt de label, % p maakt de

tag enzovoort.

De streepjes vertellen Haml welke tags in anderen liggen. Dus de heading-tag

geproduceerd door de '% h1'markup is binnen de tag gemaakt door de '%lichaam'markup. De volgende alinea-tag gemarkeerd door de '% p'tag bevindt zich ook binnen de body-tag. Na de streepjes kunnen we zien dat de tekst binnen de alinea valt.

Daarom geeft de bovenstaande markup de volgende HTML-uitvoer:

    Dit is de titel binnen de head-tag    
Dit is een kop binnen de body-tag 
 
 Dit is tekst in een alinea. Merk op hoe we de tag niet sluiten? de streepjes doen dat!

U kunt zien waar de afsluitende tags overeenkomen met de inspringing in de oorspronkelijke Haml-markup.

Haml-sjablonen toevoegen aan de Sinatra-applicatie

Met die snelle introductie van Haml uit de weg, kunnen we hem gebruiken in onze applicatie. Sinatra zoekt standaard naar webpagina-sjablonen in een map met de naam 'keer bekeken'. Laten we die map nu toevoegen.

Open een terminal, navigeer naar de sinatra_app-map die we eerder hebben gemaakt en voer het volgende in:

 mkdir bekijkt cd-weergaven

Nu bevinden we ons in de weergavemap, laten we een 'index.haml'pagina.

 raak index.haml aan

Open 'index.hamlin je teksteditor en vul het volgende in:

 !!! % html% head% title Mijn Sinatra Website% body% h1 Welkom% p Welkom op mijn website gemaakt met Sinatra en HAML

De volgende stap is om Sinatra te vertellen dit bestand te gebruiken voor de startpagina. Open de 'website.rb'bestand en verander de code in de krijg '/' blok zodat het bestand nu luidt:

 vereisen 'rubygems' vereisen 'sinatra' vereisen 'haml' get '/' do haml: index einde

Hiermee wordt de toepassing opgedragen de uitvoer van het Haml-bestand te verzenden, genaamd index.haml (automatisch gezocht in de map 'views'), wanneer het root-adres wordt aangevraagd.

Terug in de terminal met de webserver typt u 'Ctrl-C'om de webserver te stoppen en opnieuw te bellen met behulp van de robijn opdracht om het opnieuw te starten:

 [Ctrl-C] ruby ​​website.rb

Ververs je browser en je zou de resulterende webpagina moeten zien.

Als u de bron van deze webpagina bekijkt, wordt de HTML weergegeven die door Haml is gegenereerd:

    My Sinatra Website   
Welkom
 
 Welkom op mijn website gemaakt met Sinatra en HAML

Super goed! We werken nu met onze website door de Haml-sjablonen te gebruiken in de map 'views'.

Laten we de startpagina nu bewerken tot iets dat een typische structuur volgt met een koptekst, voettekst, inhoudsgebied en een zijbalk. We voegen ook wat standaard CSS toe om de pagina te positioneren en vorm te geven. Als we dit doen, zullen we zien hoe we het kunnen uitdrukken

tags in Haml en hoe u een koppeling naar CSS-bestanden kunt brengen.

Maak de startpagina

Ga terug naar het bestand 'index.haml' in je teksteditor en wijzig het als het volgende:

 !!! % html% head% title Mijn Sinatra Website% body #wrapper #header% h1 My Sinatra Website% h2 Een eenvoudige site gemaakt met Sinatra en HAML! #content% h1 De startpagina% p Welkom op mijn website gemaakt met Sinatra en HAML. % p Dit is de startpagina en dit is wat tekst om de startpagina in te vullen! #side_bar% h1 Zijbalk% p Dit is de zijbalk van de webpagina #footer% p Dit is de voettekst.

Dit is een typische lay-out met header, content, side_bar en footer divs. Zoals je kunt zien,

tags worden gemaakt met de # teken. De hele pagina is ingepakt in een
tag gemaakt door de '#wikkelregel.

Om een ​​HTML-tag een id te geven, ketenen we de # aan het einde, zodat we kunnen schrijven % Lichaam # my_id te krijgen . Klassen zijn gemarkeerd met een punt. Zo % article.my_class zou geven

.

Sla het bestand op en ververs het in uw browser. Je zou zoiets als dit moeten zien:

Voeg wat CSS-styling toe

Sinatra gebruikt een andere speciale mapnamen 'publiek' om items zoals CSS-bestanden en afbeeldingen op te slaan. Maak een map met de naam 'public' in de hoofdmap van uw toepassing. Ga naar die map en maak er een genaamd 'css' om de CSS-bestanden op te slaan. Eindig door een blanco te maken css bestand in die map.

Doe dit in uw terminal door te typen:

 mkdir openbare cd publieke mkdir css cd c touch stijlen.css

Open de styles.css bestand in je editor en kopieer en plak het volgende in:

 #wrapper width: 66%; margin: auto;  #header background-color: #ade;  #header> h1 font-size: 200%;  h2 font-size: 130%; font-family: sans-serif;  #content marge: 12px 0; float: left;  #side_bar margin: 12px 0; breedte: 30%; float: right; clear: none; background-color: #ddd;  h1 font-size: 150%;  #footer clear: beide; background-color: #ade; font-size: 75%; font-family: sans-serif; color: # 333; border-top: vast 1px # 69a;  ol padding-top: 20px; background-color: #ade; display: block;  li kleur: wit; text-align: center; weergave: inline; opvulling: 5px 10px 0 10px; margin-right: 2px; achtergrondkleur: # 69a;  een text-decoration: none;

Ik zal niet ingaan op de details van de css, omdat het gewoon een snelle en vuile manier is om de pagina-elementen duidelijker te maken in de browser.

We moeten vanuit de indexpagina linken naar het CSS-bestand. Ik ga ook een link toevoegen naar de Yahoo CSS-reset om consistentie tussen browsers te helpen. Open de index.haml blader door de editor en voeg deze twee regels toe aan de %hoofd sectie.

 % link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles .css ")

Dit illustreert hoe we haakjes in Haml kunnen gebruiken voor extra tagattributen: rel en href in dit geval.

Je uiteindelijke bestand zou er als volgt uit moeten zien:

 !!! % html% head% title Mijn Sinatra Website% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 My Sinatra Website% h2 Een eenvoudige site gemaakt met Sinatra en HAML! #content% h1 De startpagina% p Welkom op mijn website gemaakt met Sinatra en HAML. % p Dit is de startpagina en dit is wat tekst om de startpagina in te vullen! #side_bar% h1 Zijbalk% p Dit is de zijbalk van de webpagina #footer% p Dit is de voettekst.

Ververs je browser en je zou de startpagina met styling en de divs gepositioneerd.

We hebben nu de basissjabloon voor onze webpagina's die we opnieuw kunnen gebruiken om extra pagina's te maken.

Stap 4: Een algemene lay-out maken

Nu we onze basispagina-indeling hebben, kunnen we zien dat veel van de inhoud in ons index.html-bestand hetzelfde is voor andere pagina's op de site. In dit voorbeeld houden we de kop-, voettekst- en zijbalk gemeenschappelijk voor beide pagina's. We kunnen een gebruiken lay-out bestand in Sinatra om dit te bereiken.

Ga terug naar de inhoudsopgave pagina in uw teksteditor; verander de bestandsnaam door 'Opslaan als' te kiezen layout.haml.

We zullen nu het lay-out bestand en introduceer een aantal templating markup met behulp van de '='tag in Haml.

Verander het lay-outbestand om er als volgt uit te zien:

 !!! % html% head% title Mijn Sinatra Website% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 My Sinatra Website% h2 Een eenvoudige site gemaakt met Sinatra en HAML! #content = opbrengst #side_bar% h1 Zijbalk% p Dit is de zijbalk van de webpagina #footer% p Dit is het voettekst.

De sleutel hier is de '= rendement'commando. De = sign vertelt Haml om wat Ruby-code te verwerken en de uitvoer in de browser te plaatsen. Hier noemen we gewoon Ruby's opbrengst functie die de inhoud van de pagina retourneert.

We kunnen ons nu bewerken index.haml pagina om alle code te verwijderen die wordt gedupliceerd in de lay-out het dossier. Verander het om er als volgt uit te zien:

 % h1 De startpagina% p Welkom op mijn website gemaakt met Sinatra en HAML. % p Dit is de startpagina en dit is wat tekst om de startpagina in te vullen!

Vernieuwen van de browser zou exact hetzelfde resultaat moeten geven als eerder. Maar deze keer, de lay-out bestand wordt automatisch opgehaald door Sinatra en de inhoudsopgave pagina wordt gerenderd als gevolg van de opbrengst functie.

Maak de Over-pagina

Het maken van extra pagina's met deze sjabloon is nu eenvoudig. Maak een nieuw bestand in de map 'views' genaamd about.haml

Uw map- en bestandsstructuur voor de applicatie zou er als volgt uit moeten zien:

Voer de volgende code in het nieuwe bestand in:

 % h1 Over% p Dit is een eenvoudige toepassing met Sinatra en HAML.

Zoals u kunt zien, is dit een heel eenvoudige pagina met een kop en een stuk tekst binnen een alinealabel.

We kunnen de pagina op dit moment niet bekijken. Om dat te doen, moeten we het website.rb bestand om Sinatra te vertellen dat ze een verzoek om/wat betreften om de about.haml sjabloon als resultaat.

We doen dat door de volgende regels toe te voegen aan de website.rb het dossier:

 vereisen 'rubygems' vereisen 'sinatra' vereisen 'haml' get '/' do haml: index end get '/ about' do haml: about end

De ga 'over' block simple vertelt Sinatra om de 'about'-Haml-template als reactie op een HTTP krijg voor '/wat betreft'.

Start de WEBrick webserver door op te drukken Ctrl-C in de terminal waarin het draait, zoals we eerder deden en belden ruby website.rb.

Je zou de volgende pagina moeten zien als je navigeert naar 'localhost: 4567 / over'in je browser.

Meer pagina's toevoegen zou net zo snel en eenvoudig zijn als dat. Onthoud alleen dat u het opnieuw moet opstarten WEBrick server als u het toepassingsbestand wijzigt.

Stap 5: Een meny toevoegen (en opruimen)

We moeten een manier toevoegen om tussen de pagina's te navigeren; dus we zullen een eenvoudig menu toevoegen in de lay-out. Open de layout.haml bestand en voeg de navigatie toe div en de links zoals deze:

 !!! % html% head% title Mijn Sinatra Website% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 My Sinatra Website% h2 Een eenvoudige site gemaakt met Sinatra en HAML! #nav% ol% a (href = "/")% li Startpagina% a (href = "about")% li Over #content = opbrengst #side_bar% h1 Zijbalk% p Dit is de zijbalk van de webpagina #footer % p Dit is het voetnoot.

Hier creëren we een div met de id van nav. Deze div bevat een lijst met anker tags voor '/' en 'wat betreft'. Let op hoe de gelinkte tekst op de volgende regel wordt ingesprongen om deze in de te omringen HTML ankertag.

Vernieuw uw browser en u zou een menu moeten zien dat de twee pagina's met elkaar verbindt:

Klik op de links in het navigatiemenu om naar elke pagina te gaan. Je kunt experimenteren met het toevoegen van meer pagina's. Vergeet niet dat de stappen als volgt zijn:

  • Voeg een nieuw .haml-bestand toe aan de weergavemap.
  • Beschrijf de weergave met Haml in dat bestand.
  • Voeg de navigatie toe aan de nieuwe pagina in het menuonderdeel van het lay-outbestand.
  • Bewerk de website.rb bestand voor de nieuwe route op dezelfde manier als de '/wat betreft'route.
  • Vergeet niet het bestand website.rb opnieuw te starten!

Conclusie

Er is zeker meer voor zowel Sinatra als Haml dan we hier hebben gezien. Sinatra is een geweldige keuze voor website- en webservices, terwijl een zwaarder kader zoals Ruby on Rails misschien te gek is. Verder vind ik de eenvoud en duidelijkheid van Haml een mooie aanvulling op Sinatra en zorgen voor een zeer productieve ontwikkelingsbenadering.

Code
×