Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Nettuts +. Questo tutorial è stato pubblicato per la prima volta nell'ottobre 2010.
Questo tutorial introdurrà Haml e Sinatra. Haml è un linguaggio di markup che produce HTML pulito e ben strutturato. Sinatra è un semplice ma potente framework Ruby per la creazione di siti Web o servizi web. I due funzionano molto bene insieme e forniscono un potente strumento per lo sviluppo web rapido e semplice. Li trovo ideali per la prototipazione.
Alla fine di questo tutorial, avrai creato un sito web con due pagine che usano Sinatra e Haml. Lungo la strada, imparerai come sono strutturate le applicazioni di Sinatra e verrà presentato ad Haml. Imparerai anche come usare un file di layout per ridurre la quantità di codice duplicato e dare coerenza tra le pagine.
Puoi saltare questa sezione se hai già installato Ruby e stai lavorando sul tuo sistema.
Abbiamo bisogno di installare il linguaggio Ruby e le gemme Sinatra e Haml per iniziare.
Il metodo per farlo varia in base al tuo sistema operativo. Mi piace usare Ruby Version Manager (RVM) per gestire Ruby su OS X e Linux. (Gli utenti di Windows potrebbero voler guardare Pik come alternativa a RVM.)
Per quelli di voi che non hanno installato Ruby, scaricare e installare RVM.
Seguendo le istruzioni sulla pagina di installazione RVM, apri un terminale e inserisci quanto segue:
bash <<( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
Questo scaricherà e installerà RVM. Dobbiamo aggiungere una linea alla fine del nostro .bashrc file. Coloro che utilizzano un'alternativa alla shell su Bash dovranno modificare il profilo appropriato. Vedi la pagina di installazione di RVM per maggiori dettagli.
Vuoi saperne di più su come lavorare con RVM?
echo '[[-s "$ HOME / .rvm / scripts / rvm"]] && source "$ HOME / .rvm / scripts / rvm" # Carica la RVM in una sessione di shell.' >> ~ / .bashrc
Chiudi e riapri il tuo guscio e dovresti essere pronto!
Genere 'note di rvm'per verificare eventuali dipendenze che potrebbe essere necessario installare per il tuo sistema operativo. Esistono diverse versioni server di Ruby che RVM può gestire. Useremo la versione standard chiamata MRI. Quindi, nell'output di note di rvm cerca la sezione che dice 'Per MRI e REE? '. Quindi copia e incolla il comando indicato per 'rubino'.
Ad esempio, in una nuova installazione di Ubuntu, ho ottenuto il seguente output e avevo bisogno di installare le dipendenze elencate usando il attitudine comando dato nell'output. Vedi la schermata qui sotto.
Con un po 'di complicato, installare e usare diverse versioni e gemme di Ruby è ora facile. Installa la versione 1.9.2 di Ruby inserendo quanto segue:
rvm install 1.9.2
RVM dovrebbe ora scaricare e installare Ruby versione 1.9.2.
Lo stadio finale è l'installazione delle gemme Sinatra e Haml. Genere:
gemma installa sinatra
Dovresti vedere il seguente output nel terminale:
Installato con successo rack-1.2.1 Installato con successo sinatra-1.0 2 gems installati Installare la documentazione di ri per rack-1.2.1? Installare la documentazione di ri per sinatra-1.0? Installazione della documentazione RDoc per rack-1.2.1? Installazione della documentazione RDoc per sinatra-1.0?
Adesso scrivi gem install haml per installare la gemma Haml sul tuo sistema allo stesso modo.
Nuovo di zecca per Sinatra? Prendi il nostro corso gratuito!
Per iniziare a creare l'applicazione Sinatra, creare una cartella contenente un file Ruby per il codice dell'applicazione. Nel tuo terminale, digita:
mkdir sinatra-app cd sinatra-app touch website.rb
Apri il file "website.rb" appena creato nell'editor di testo e inserisci quanto segue:
richiedere 'rubygems' richiedono 'sinatra' get '/' do "Questa è sinatra" fine
Questa è un'applicazione di base di Sinatra. Le prime due righe portano nelRubyGems' e 'Sinatra'biblioteche per fare il lavoro pesante.
La prossima sezione dice a Sinatra come rispondere a un 'ottenere' richiesta. Nello specifico, dice cosa fare quando l'URL radice (il '/' percorso) è richiesto. In questo esempio, Sinatra restituisce semplicemente la stringa "This is Sinatra". Questo è ciò che apparirà nel browser quando viene richiesta l'url di root dell'applicazione.
Per vederlo in azione, torna al tuo terminale ed esegui l'applicazione Sinatra usando il seguente comando:
ruby website.rb
Dovrai riavviarlo
website.rbfile ogni volta che lo cambi. Quindi è una buona idea mantenere una shell separata in esecuzione in una propria finestra o scheda per avviarla e interromperla.
Dovresti ottenere la risposta:
== Sinatra / 1.0 ha preso il palcoscenico su 4567 per lo sviluppo con backup da 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-27 09:45:38] INFO WEBrick :: HTTPServer # start: pid = 14135 port = 4567
Questo ci dice che un server web (chiamato WEBrick) è stato avviato e ora sta servendo la tua applicazione sulla porta 4567.
Per visualizzarlo, apri il tuo browser e vai su "localhost: 4567". Dovresti vedere l'output dell'applicazione:
Congratulazioni! La tua applicazione Sinatra è funzionante!
Iniziamo con la creazione di pagine con Haml e alcune convenzioni di Sinatra predefinite per file speciali.
Costruiremo le nostre pagine con Haml. Il primo passo è dire alla nostra applicazione che useremo la gemma Haml.
Lo facciamo aggiungendo include 'Haml' verso la parte superiore del codice. Cambia il tuo 'website.rb'file per apparire come il seguente:
richiedere 'rubygems' richiedono 'sinatra' richiedono 'Haml get' / 'do "Questo è Sinatra" fine
La tua applicazione ora saprà di usare la gemma Haml che abbiamo installato in precedenza.
Haml è un modo semplice e pulito di descrivere l'HTML. Può anche gestire codice inline, come script PHP, ASP e Ruby.
Uno degli obiettivi di Haml è ridurre la quantità di duplicazioni e ripetizioni riscontrate nella creazione di pagine Web con HTML; un esempio di questo è la chiusura dei tag. Lo fa facendo affidamento sulla struttura dei rientri del codice: quando si scrive in Haml, è importante essere coerenti con i trattini mentre descrivono la struttura della pagina.
Il risultato è un markup logico e molto più facile da leggere rispetto all'HTML per tutti tranne i casi più banali.
Diamo un'occhiata ad alcuni markup Haml e mostriamo l'HTML che produce.
!!! % html% head% title Questo è il titolo in un tag title all'interno del tag head% body% h1 Questa è un'intestazione all'interno di un tag h1% p Questo è un testo in un paragrafo. Nota come non chiudiamo il tag? i trattini fanno così!
Il '!!!'all'inizio del codice dice ad Haml di produrre il file DOCTYPE etichetta. I tag HTML sono descritti con un '%' cartello. Così html% emette il etichetta, %capo crea il etichetta, % p crea il
tag e così via.
I trattini dicono ad Haml quali tag si trovano all'interno degli altri. Quindi il tag di intestazione prodotto dall 'h1%'markup è all'interno del tag creato dal '%corpo'markup. Il seguente tag di paragrafo contrassegnato dall '% pil tag è anche all'interno del tag del corpo. Seguendo i trattini, possiamo vedere che il testo si trova all'interno del paragrafo.
Quindi, il markup sopra dà il seguente output HTML:
Questo è il titolo all'interno del tag principale Questa è un'intestazione all'interno del tag del corpo
Questo è testo in un paragrafo. Nota come non chiudiamo il tag? i trattini fanno così!
Puoi vedere dove i tag di chiusura corrispondono al rientro nel markup Haml originale.
Con questa rapida introduzione a Haml, possiamo iniziare a usarlo nella nostra applicazione. Per impostazione predefinita, Sinatra cercherà i modelli di pagine Web in una cartella chiamata 'visualizzazioni'. Aggiungiamo ora quella cartella.
Apri un terminale, vai alla cartella sinatra_app che abbiamo creato in precedenza e inserisci quanto segue:
mkdir visualizza le visualizzazioni cd
Ora siamo dentro la cartella delle viste, creiamo un 'index.haml' pagina.
toccare index.haml
Aperto 'index.haml'nel tuo editor di testo e inserisci quanto segue:
!!! % html% head% title Il mio sito web di Sinatra% body% h1 Benvenuto% p Benvenuti nel mio sito web realizzato con Sinatra e HAML
Il passo successivo è dire a Sinatra di usare questo file per la home page. Apri il 'website.rb'file e cambia il codice nel file ottenere '/' blocca in modo che il file ora legga:
richiedere 'rubygems' richiedono 'sinatra' richiedono 'haml' get '/' do haml: index end
Questo ordina all'applicazione di inviare l'output del file Haml, chiamato index.haml (cercato automagicamente nella cartella 'views'), quando viene richiesto l'indirizzo di root.
Di nuovo nel terminale che esegue il webserver, digitare 'Ctrl-C'per fermare il server web e quindi richiamarlo utilizzando il rubino comando per riavviarlo:
[Ctrl-C] ruby website.rb
Aggiorna il tuo browser e dovresti vedere la pagina web risultante.
La visualizzazione dell'origine di questa pagina Web mostra il codice HTML generato da Haml:
Il mio sito web di Sinatra benvenuto
Benvenuti nel mio sito Web realizzato con Sinatra e HAML
Grande! Ora il nostro sito web funziona utilizzando i modelli Haml nella directory 'views'.
Ora lavoriamo la home page in qualcosa che segue una struttura tipica con un'intestazione, un piè di pagina, un'area di contenuto e una barra laterale. Aggiungiamo anche alcuni CSS di base per posizionare e modellare la pagina. Nel fare questo, vedremo come esprimere Torna al file 'index.haml' nel tuo editor di testo e cambialo come il seguente: Questo è un layout tipico con div header, content, side_bar e footer. Come potete vedere, Per dare un tag HTML a un ID, mettiamo semplicemente in catena Salva il file e aggiornalo nel browser. Dovresti vedere qualcosa di simile a questo: Sinatra utilizza un altro nome di directory speciale "pubblico" per archiviare risorse come file e immagini CSS. Crea una cartella chiamata "pubblica" nella cartella principale dell'applicazione. Cambiare in quella directory e crearne una chiamata 'css' per memorizzare i file css. Termina creando uno spazio vuoto Fai questo nel tuo terminale digitando: Apri il Non entrerò nei dettagli del Dobbiamo collegarci al file CSS dalla pagina dell'indice. Aggiungerò anche un collegamento al reset dei CSS di Yahoo per aiutare la coerenza tra i vari browser. Apri il Questo illustra come utilizzare le parentesi in Haml per ulteriori attributi di tag: Il tuo file finale dovrebbe assomigliare a questo: Aggiorna il browser e dovresti vedere la home page con lo stile e il Ora abbiamo il modello base per le nostre pagine Web che possiamo riutilizzare per creare pagine aggiuntive. Ora che abbiamo il nostro layout di pagina di base, possiamo vedere che gran parte del contenuto del nostro file index.html potrebbe essere lo stesso per altre pagine del sito. In questo esempio, manterremo l'intestazione, il piè di pagina e la barra laterale comuni a entrambe le pagine. Possiamo usare a Torna al Ora modificheremo il Cambia il file di layout in modo che assomigli: La chiave qui è l ' Ora possiamo modificare il nostro L'aggiornamento del browser dovrebbe fornire esattamente lo stesso risultato di prima. Ma questa volta, il Creare pagine aggiuntive che utilizzano questo modello ora è semplice. Crea un nuovo file nella cartella 'views' chiamata La directory e la struttura dei file per l'applicazione dovrebbero assomigliare a questa: Inserisci il seguente codice nel nuovo file: Come puoi vedere, questa è una pagina molto semplice con un'intestazione e una parte di testo all'interno di un tag di paragrafo. Al momento non abbiamo modo di vedere la pagina. Per fare ciò, dobbiamo modificare il Lo facciamo aggiungendo le seguenti linee al Il Riavvia il Dovresti vedere la seguente pagina quando navighi su ' Aggiungere più pagine sarebbe veloce e semplice. Ricorda che dovrai riavviare il Abbiamo bisogno di aggiungere un modo per navigare tra le pagine; quindi aggiungeremo un menu semplice nel layout. Apri il Qui, creiamo a Aggiorna il browser e dovresti visualizzare un menu che collega le due pagine: Cliccando sui collegamenti nel menu di navigazione dovrebbe portarti in ogni pagina. Puoi sperimentare con l'aggiunta di più pagine. Ricorda, i passaggi sono i seguenti: C'è sicuramente molto di più sia per Sinatra che per Haml di quanto non abbiamo visto qui. Sinatra è un'ottima scelta per siti web e servizi web, mentre un framework più pesante come Ruby on Rails potrebbe essere eccessivo. Inoltre, trovo che la semplicità e la chiarezza di Haml integri splendidamente Sinatra e crei un approccio di sviluppo molto produttivo.Crea la Home Page
!!! % html% head% title Il mio sito web di Sinatra% body #wrapper #header% h1 Il mio sito web di Sinatra% h2 Un sito semplice realizzato con Sinatra e HAML! #content% h1 Home Page% p Benvenuti nel mio sito Web realizzato con Sinatra e HAML. % p Questa è la home page e questo è un testo da compilare nella home page! #side_bar% h1 Barra laterale% p Questa è la barra laterale della pagina Web #footer% p Questo è il piè di pagina.
# cartello. L'intera pagina è racchiusa in a #wrapper'linea. # alla fine, così potremmo scrivere % Del corpo # my_id ottenere . Le classi sono segnate con un punto. Così % article.my_class darebbe .
Aggiungi alcuni stili CSS
css file in quella directory. mkdir pubblico cd pubblico mkdir css cd css touch styles.css
styles.css file nel tuo editor e copia e incolla quanto segue in: # wrapper width: 66%; margin: auto; #header background-color: #ade; #header> h1 font-size: 200%; h2 font-size: 130%; font-family: sans-serif; #content margin: 12px 0; float: sinistra; #side_bar margin: 12px 0; larghezza: 30%; float: right; chiara: nessuno; background-color: #ddd; h1 font-size: 150%; #footer clear: both; background-color: #ade; font-size: 75%; font-family: sans-serif; color: # 333; border-top: solido 1px # 69a; ol padding-top: 20px; background-color: #ade; blocco di visualizzazione; li colore: bianco; text-align: center; display: inline; imbottitura: 5px 10px 0 10px; margin-right: 2px; colore di sfondo: # 69a; a text-decoration: none;
css, in quanto è solo un modo rapido e sporco per rendere più evidenti gli elementi della pagina nel browser.index.haml pagina l'editor e aggiungi queste due righe al %capo sezione. % link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles css ")
rel e href in questo caso. !!! % html% head% title Il mio sito Web di Sinatra% 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 Il mio sito web di Sinatra% h2 Un sito semplice realizzato con Sinatra e HAML! #content% h1 Home Page% p Benvenuti nel mio sito Web realizzato con Sinatra e HAML. % p Questa è la home page e questo è un testo da compilare nella home page! #side_bar% h1 Barra laterale% p Questa è la barra laterale della pagina Web #footer% p Questo è il piè di pagina.
div posizionato.
Passaggio 4: creazione di un layout comune
disposizione file in Sinatra per raggiungere questo obiettivo.indice pagina nel tuo editor di testo; cambia il nome del file scegliendo 'Salva come' in layout.haml.disposizione file e introdurre alcuni markup di template usando il '='tag in Haml. !!! % html% head% title Il mio sito Web di Sinatra% 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 Il mio sito web di Sinatra% h2 Un sito semplice realizzato con Sinatra e HAML! #content = yield #side_bar% h1 Side Bar% p Questa è la barra laterale della pagina web #footer% p Questo è il piè di pagina.
= rendimento'comando. Il = il segno dice ad Haml di elaborare un codice Ruby e di mettere l'output nel browser. Qui stiamo semplicemente chiamando Ruby dare la precedenza funzione che restituirà il contenuto della pagina.index.haml pagina per eliminare tutto il codice duplicato in disposizione file. Cambiarlo per assomigliare: % h1 Home page% p Benvenuti nel mio sito Web realizzato con Sinatra e HAML. % p Questa è la pagina iniziale e questo è un testo per compilare la pagina iniziale!
disposizione il file viene automaticamente raccolto da Sinatra e il indice pagina viene resa come risultato del dare la precedenza funzione.Crea la pagina Informazioni
about.haml 
% h1 Informazioni su% p Questa è una semplice applicazione che utilizza Sinatra e HAML.
website.rb file per dire a Sinatra di gestire una richiesta per/di'e per restituire il about.haml modello come risultato.website.rb file: richiedere 'rubygems' richiede 'sinatra' require 'haml' get '/' do haml: index end get '/ about' do haml: about end
ottenere circa' block simple dice a Sinatra di restituire il modello "about" Haml in risposta a un Get HTTP per '/di'. WEBrick server web premendo Ctrl-C nel terminale in cui è in esecuzione, come abbiamo fatto prima, e chiamando ruby website.rb.localhost: 4567 / su'nel tuo browser.
WEBrick server se si modifica il file dell'applicazione.
Passaggio 5: aggiunta di un meny (e riordino)
layout.haml file e aggiungere la navigazione div e i collegamenti come questo: !!! % html% head% title Il mio sito Web di Sinatra% 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 Il mio sito web di Sinatra% h2 Un sito semplice realizzato con Sinatra e HAML! #nav% ol% a (href = "/")% li Home% a (href = "about")% li Informazioni su #content = yield #side_bar% h1 Barra laterale% p Questa è la barra laterale della pagina Web #footer % p Questo è il piè di pagina.
div con l'ID di nav. Questo div contiene una lista con ancora tag a '/' e 'di'. Notare come il testo collegato è rientrato nella riga seguente per circondarlo nel HTML tag di ancoraggio.
website.rb file per il nuovo percorso allo stesso modo del/di' itinerario.
Conclusione
Accentsconagua