Accentsconagua

Une introduction à Haml et Sinatra

Code
Share

Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs au cours de l'histoire de Nettuts +. Ce tutoriel a été publié pour la première fois en octobre 2010.

Ce tutoriel présentera Haml et Sinatra. Haml est un langage de balisage qui produit du code HTML propre et bien structuré. Sinatra est un framework Ruby simple mais puissant pour la création de sites Web ou de services Web. Les deux fonctionnent très bien ensemble et constituent un puissant outil de développement Web simple et rapide. Je les trouve idéales pour le prototypage.

À la fin de ce didacticiel, vous aurez créé un site Web de deux pages utilisant Sinatra et Haml. En cours de route, vous apprendrez comment les applications Sinatra sont structurées et seront présentées à Haml. Vous apprendrez également à utiliser un fichier de présentation pour réduire la quantité de code dupliqué et assurer la cohérence entre les pages..

Étape 1: Installez Ruby et les pierres précieuses

Vous pouvez ignorer cette section si Ruby est déjà installé et fonctionne sur votre système..

Nous devons installer le langage Ruby et les joyaux Sinatra et Haml pour commencer.

La méthode à suivre varie en fonction de votre système d'exploitation. J'aime utiliser Ruby Version Manager (RVM) pour gérer Ruby sous OS X et Linux. (Les utilisateurs de Windows voudront peut-être envisager Pik comme une alternative à RVM.)

Installer RVM pour gérer notre environnement Ruby

Pour ceux d’entre vous qui n’ont pas installé Ruby, téléchargez et installez RVM..

En suivant les instructions de la page d’installation du RVM, ouvrez un terminal et entrez les informations suivantes:

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

Cela téléchargera et installera RVM. Nous devons ajouter une ligne à la fin de notre .bashrc fichier. Ceux d’entre vous qui utilisent une alternative au shell de Bash devront modifier le profil approprié. Voir la page d'installation du RVM pour plus de détails.

Vous voulez en savoir plus sur le travail avec RVM?

 echo '[[-s "$ HOME / .rvm / scripts / rvm"]] && source "$ HOME / .rvm / scripts / rvm" # Ceci charge RVM dans une session shell.' >> ~ / .bashrc

Fermez et rouvrez votre coque et vous devriez être prêt à partir!

Installer des dépendances et le langage Ruby

Type 'notes rvm'pour vérifier les dépendances que vous devrez peut-être installer pour votre système d'exploitation. Il existe différentes versions de Ruby que RVM peut gérer. Nous allons utiliser la version standard appelée IRM. Par conséquent, dans la sortie de notes rvm Cherchez la section qui dit:Pour IRM et REE? '. Ensuite, copiez et collez la commande indiquée pour 'rubis'.

Par exemple, lors d’une nouvelle installation d’Ubuntu, j’ai obtenu le résultat suivant et j’ai eu besoin d’installer les dépendances répertoriées à l’aide de la touche aptitude commande donnée dans la sortie. Voir la capture d'écran ci-dessous.

Une fois le problème posé, installer et utiliser différentes versions et gemmes de Ruby est désormais simple. Installez la version 1.9.2 de Ruby en entrant les éléments suivants:

 rvm installer 1.9.2

RVM devrait maintenant télécharger et installer Ruby version 1.9.2.

La dernière étape consiste à installer les gemmes Sinatra et Haml. Type:

 bijou installer sinatra

Vous devriez voir la sortie suivante dans le terminal:

 Installation réussie de rack-1.2.1 Installation réussie de sinatra-1.0 2 gemmes installés Installation de la documentation de ri pour rack-1.2.1? Installation de la documentation de ri pour sinatra-1.0? Installation de la documentation RDoc pour rack-1.2.1? Installation de la documentation RDoc pour sinatra-1.0?

Maintenant tapez bijou installer haml installer la gem Haml sur votre système de la même manière.

Étape 2: Créer l'application Sinatra

Tout nouveau à Sinatra? Suivez notre cours gratuit!

Pour commencer à créer l’application Sinatra, créez un dossier contenant un fichier Ruby pour le code de l’application. Dans votre terminal, tapez:

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

Ouvrez le fichier 'website.rb' nouvellement créé dans votre éditeur de texte et entrez les informations suivantes:

 nécessite 'rubygems' nécessite 'sinatra' get '/' do "This is Sinatra" end

Ceci est une application de base Sinatra. Les deux premières lignes apportent le 'rubygems' et 'sinatra«bibliothèques pour faire le travail lourd.

La section suivante explique à Sinatra comment réagir à uneobtenir' demande. Plus précisément, il lui dit quoi faire lorsque la racine de l’URL (le '/' chemin) est demandé. Dans cet exemple, Sinatra renvoie simplement la chaîne "This is Sinatra". C’est ce qui apparaîtra dans le navigateur lorsque l’URL racine de l’application sera demandée..

Pour le voir en action, retournez sur votre terminal et exécutez l'application Sinatra à l'aide de la commande suivante:

 ruby website.rb

Vous devrez redémarrer ce site.rb déposer à chaque fois que vous le changez. Par conséquent, il est judicieux de laisser un shell séparé s'exécuter dans sa propre fenêtre ou onglet pour le démarrer et l'arrêter.

Vous devriez obtenir la réponse:

 == Sinatra / 1.0 a pris la scène sur 4567 pour le développement avec sauvegarde de 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

Cela nous indique qu'un serveur Web (appelé WEBrick) a démarré et sert maintenant votre application sur le port 4567..

Pour le voir, ouvrez votre navigateur et allez à "localhost: 4567". Vous devriez voir la sortie de l'application:

Toutes nos félicitations! Votre application Sinatra est en marche!

Commençons par construire des pages avec Haml et quelques conventions par défaut de Sinatra pour les fichiers spéciaux..

Étape 3: Présentation de Haml

Nous allons construire nos pages avec Haml. La première étape consiste à dire à notre application que nous utiliserons la gemme Haml.

Nous faisons cela en ajoutant include "Haml" en haut de votre code. Change ton 'site.rbLe fichier ressemble à ce qui suit:

 nécessite 'rubygems' nécessite 'Sinatra' nécessite 'Haml get' / 'do "This is Sinatra" end

Votre application saura maintenant utiliser la gemme Haml que nous avons installée précédemment.

Le langage de balisage Haml

Haml est une manière simple et propre de décrire le HTML. Il peut également gérer du code en ligne, tel que PHP, ASP et Ruby..

L'un des objectifs de Haml est de réduire le nombre de duplications et de répétitions dans la création de pages Web avec HTML; un exemple de ceci est la fermeture des balises. Pour ce faire, il s’appuie sur la structure des tirets dans le code: lorsqu’il écrit en Haml, il est important d’être cohérent avec les tirets car ils décrivent la structure de la page..

Le résultat est un balisage logique et beaucoup plus facile à lire que le HTML pour tous les cas, sauf le plus trivial..

Regardons quelques balises Haml et montrons le code HTML qu'il produit.

 !!! % html% head% title Ceci est le titre d'une balise de titre dans la balise head% body% h1 Ceci est un titre dans une balise h1% p Ceci est un texte dans un paragraphe. Remarquez comment nous ne fermons pas la balise? les retraits font ça!

Le '!!!'au début du code, il demande à Haml de sortir le DOCTYPE étiquette. Les balises HTML sont décrites avec un '%' signe. Alors % html sort le étiquette, %tête crée le étiquette, % p crée le

tag et ainsi de suite.

Les retraits indiquent à Haml quelles étiquettes se trouvent parmi les autres. Donc, la balise de titre

produit par le '% h1Le balisage est dans la tag créé par le '%corps'balisage. La balise de paragraphe suivante marquée par le '% pLa balise est également dans la balise body. Après les tirets, on peut voir que le texte se trouve dans le paragraphe.

Par conséquent, le balisage ci-dessus donne la sortie HTML suivante:

    C'est le titre dans la balise head    
Ceci est un titre dans la balise body 
 
 Ceci est un texte dans un paragraphe. Remarquez comment nous ne fermons pas la balise? les retraits font ça!

Vous pouvez voir où les balises de fermeture correspondent à l'indentation dans le balisage Haml d'origine.

Ajout de modèles Haml à l'application Sinatra

Avec cette introduction rapide sur Haml, nous pouvons commencer à l’utiliser dans notre application. Par défaut, Sinatra recherchera les modèles de pages Web dans un dossier appelé 'vues'. Ajoutons maintenant ce dossier.

Ouvrez un terminal, accédez au dossier sinatra_app que nous avons créé précédemment et entrez les informations suivantes:

 mkdir views cd views

Maintenant que nous sommes dans le dossier des vues, créons un 'index.haml'page.

 touchez index.haml

Ouvert 'index.haml'dans votre éditeur de texte et remplissez les champs suivants:

 !!! % html% head% title Mon site Sinatra% body% h1 Bienvenue% p Bienvenue sur mon site réalisé avec Sinatra et HAML

L'étape suivante consiste à dire à Sinatra d'utiliser ce fichier pour la page d'accueil. Ouvrez le 'site.rb'fichier et changer le code dans le obtenir '/' bloquer pour que le fichier se lise maintenant:

 nécessite 'rubygems' nécessite 'sinatra' nécessite 'haml' get '/' do haml: index end

Ceci ordonne à l'application d'envoyer la sortie du fichier Haml, appelé index.haml (recherché automatiquement dans le dossier "views"), lorsque l'adresse racine est demandée.

De retour dans le terminal exécutant le serveur Web, tapez 'Ctrl-C'arrêter le serveur Web, puis le rappeler à l'aide du bouton rubis commande pour le redémarrer:

 [Ctrl-C] ruby ​​website.rb

Actualisez votre navigateur et vous devriez voir la page Web résultante.

Le fait de voir la source de cette page Web montre le code HTML généré par Haml:

    Mon site web Sinatra   
Bienvenue
 
 Bienvenue sur mon site réalisé avec Sinatra et HAML

Génial! Nous avons maintenant notre site Web en utilisant les modèles Haml dans le répertoire 'views'.

Travaillons maintenant la page d'accueil en quelque chose qui suit une structure typique avec un en-tête, un pied de page, une zone de contenu et une barre latérale. Nous allons également ajouter des CSS de base pour positionner et styliser la page. Ce faisant, nous verrons comment exprimer

balises dans Haml et comment amener un lien vers des fichiers CSS.

Créer la page d'accueil

Retournez dans le fichier 'index.haml' dans votre éditeur de texte et changez-le comme suit:

 !!! % html% head% title Mon site Web Sinatra% body #wrapper #header% h1 Mon site Web Sinatra% h2 Un site simple composé de Sinatra et de HAML! #content% h1 La page d'accueil% p Bienvenue sur mon site Web créé avec Sinatra et HAML. % p Ceci est la page d'accueil et voici du texte pour remplir la page d'accueil! #side_bar% h1 Barre latérale% p Ceci est la barre latérale de la page Web #footer% p Ceci est le pied de page.

Ceci est une mise en page typique avec les entêtes div, header, content, side_bar et footer. Comme vous pouvez le voir,

les tags sont créés avec le # signe. La page entière est enveloppée dans un
tag créé par le '#wrapper' ligne.

Pour donner un identifiant à une balise HTML, il suffit de lier le # à la fin, nous pourrions donc écrire % body # my_ID obtenir . Les classes sont marquées d'un point. Alors % article.my_class donnerait

.

Enregistrez le fichier et actualisez-le dans votre navigateur. Vous devriez voir quelque chose comme ça:

Ajouter du style CSS

Sinatra utilise un autre nom de répertoire spécial, "public", pour stocker des actifs tels que des fichiers CSS et des images. Créez un dossier appelé "public" dans le dossier racine de votre application. Allez dans ce répertoire et créez-en un nommé "css" pour stocker les fichiers css. Terminez en créant un blanc css fichier dans ce répertoire.

Faites cela dans votre terminal en tapant:

 mkdir public cd public mkdir css cd css touch styles.css

Ouvrez le styles.css déposer dans votre éditeur et copier-coller ce qui suit dans:

 #wrapper width: 66%; marge: auto;  #header background-color: #ade;  #header> h1 font-size: 200%;  h2 taille de la police: 130%; famille de polices: sans-serif;  #content margin: 12px 0; float: gauche;  #side_bar margin: 12px 0; largeur: 30%; Flotter à droite; clair: aucun; couleur de fond: #ddd;  h1 taille de la police: 150%;  #footer clear: both; couleur de fond: #ade; taille de police: 75%; famille de polices: sans-serif; couleur: # 333; bord supérieur: solide 1 px # 69a;  ol padding-top: 20px; couleur de fond: #ade; bloc de visualisation;  li couleur: blanc; text-align: center; affichage: en ligne; remplissage: 5px 10px 0 10px; marge droite: 2px; couleur de fond: # 69a;  a text-decoration: none;

Je ne vais pas entrer dans les détails de la css, comme c'est juste un moyen rapide et sale de rendre les éléments de page plus évidents dans le navigateur.

Nous devons créer un lien vers le fichier CSS à partir de la page d'index. Je vais également ajouter un lien vers la réinitialisation CSS de Yahoo pour améliorer la cohérence entre les navigateurs. Ouvrez le index.haml la page de l'éditeur et ajouter ces deux lignes à la %tête section.

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

Ceci illustre comment nous pouvons utiliser des crochets dans Haml pour des attributs de balises supplémentaires: rel et href dans ce cas.

Votre fichier final devrait ressembler à ceci:

 !!! % html% head% title Mon site Web 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 Mon site Web Sinatra% h2 Un site simple composé de Sinatra et de HAML! #content% h1 La page d'accueil% p Bienvenue sur mon site Web créé avec Sinatra et HAML. % p Ceci est la page d'accueil et voici du texte pour remplir la page d'accueil! #side_bar% h1 Barre latérale% p Ceci est la barre latérale de la page Web #footer% p Ceci est le pied de page.

Actualisez votre navigateur. La page d’accueil contenant le style et la divs positionné.

Nous avons maintenant le modèle de base pour nos pages Web que nous pouvons réutiliser pour créer des pages supplémentaires..

Étape 4: Création d'une mise en page commune

Maintenant que nous avons notre mise en page de base, nous pouvons constater qu'une grande partie du contenu de notre fichier index.html pourrait être identique pour les autres pages du site. Dans cet exemple, nous allons garder l’en-tête, le pied de page et la barre latérale communs aux deux pages. Nous pouvons utiliser un disposition déposer dans Sinatra pour y parvenir.

Retourner à la indice page dans votre éditeur de texte; changer le nom du fichier en choisissant "Enregistrer sous" dans layout.haml.

Nous allons maintenant éditer le disposition déposer et introduire des balises de template en utilisant le '='tag à Haml.

Modifiez le fichier de présentation de la manière suivante:

 !!! % html% head% title Mon site Web 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 Mon site Web Sinatra% h2 Un site simple composé de Sinatra et de HAML! #content = yield #side_bar% h1 Barre latérale% p Ceci est la barre latérale de la page Web #footer% p Ceci est le pied de page.

La clé ici est la= rendement'commande. le = signe indique à Haml de traiter du code Ruby et de placer la sortie dans le navigateur. Ici, nous appelons simplement Ruby rendement fonction qui retournera le contenu de la page.

Nous pouvons maintenant éditer notre index.haml page pour extraire tout le code qui est dupliqué dans le disposition fichier. Changez-le pour qu'il ressemble à:

 % h1 La page d'accueil% p Bienvenue sur mon site réalisé avec Sinatra et HAML. % p Ceci est la page d'accueil et voici du texte pour remplir la page d'accueil!

L'actualisation du navigateur devrait fournir exactement le même résultat que précédemment. Mais cette fois, le disposition fichier est automatiquement récupéré par Sinatra et le indice la page est rendue à la suite de la rendement une fonction.

Créer la page à propos

La création de pages supplémentaires utilisant ce modèle est désormais simple. Créez un nouveau fichier dans le dossier 'views' appelé à propos de.haml

Votre structure de répertoires et de fichiers pour l'application devrait ressembler à ceci:

Entrez le code suivant dans le nouveau fichier:

 % h1 À propos de% p Ceci est une application simple utilisant Sinatra et HAML.

Comme vous pouvez le constater, cette page est très simple et comporte un en-tête et un morceau de texte dans une balise de paragraphe..

Nous n'avons aucun moyen de voir la page pour le moment. Pour ce faire, nous devons modifier le site.rb fichier pour dire à Sinatra de gérer une demande de '/sur'et pour retourner le à propos de.haml modèle à la suite.

Nous faisons cela en ajoutant les lignes suivantes au site.rb fichier:

 nécessite 'rubygems' nécessite 'sinatra' nécessite 'haml' get '/' do haml: index end get '/ about' do 'haml: about ha

le se déplacer' block simple indique à Sinatra de renvoyer le modèle Haml "à propos de" en réponse à une HTTP obtenir pour '/sur'.

Redémarrez le WEBrick serveur Web en appuyant sur Ctrl-C dans le terminal dans lequel il fonctionne, comme nous l'avons fait auparavant, et en appelant ruby website.rb.

Vous devriez voir la page suivante lorsque vous naviguez vers 'localhost: 4567 / à propos'dans votre navigateur.

Ajouter plus de pages serait aussi simple et rapide que cela. Rappelez-vous simplement que vous devrez redémarrer le WEBrick serveur si vous modifiez le fichier d'application.

Étape 5: Ajouter un meny (et ranger)

Nous devons ajouter un moyen de naviguer entre les pages; Nous allons donc ajouter un menu simple dans la mise en page. Ouvrez le layout.haml déposer et ajouter la navigation div et les liens comme ceci:

 !!! % html% head% title Mon site Web 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 Mon site Web Sinatra% h2 Un site simple composé de Sinatra et de HAML! #nav% ol% a (href = "/")% li Accueil% a (href = "environ")% li À propos de #content = rendement #side_bar% h1 Barre latérale% p Ceci est la barre latérale de la page Web #footer % p Ceci est le pied de page.

Ici, nous créons un div avec l'id de nav. Ce div contient une liste avec ancre balises à '/' et 'sur'. Notez que le texte lié est mis en retrait sur la ligne suivante pour l’entourer de la HTML balise d'ancrage.

Actualisez votre navigateur et vous devriez voir un menu qui relie les deux pages:

En cliquant sur les liens dans le menu de navigation devrait vous emmener à chaque page. Vous pouvez essayer d'ajouter plus de pages. Rappelez-vous, les étapes sont les suivantes:

  • Ajouter un nouveau fichier .haml au répertoire views.
  • Décrire la vue en utilisant Haml dans ce fichier.
  • Ajouter la navigation à la nouvelle page dans la partie menu du fichier de disposition.
  • Modifier le site.rb fichier pour le nouvel itinéraire de la même manière que le '/sur'itinéraire.
  • N'oubliez pas de redémarrer le fichier website.rb!

Conclusion

Sinatra et Haml ont certainement beaucoup plus à offrir que ce que nous avons vu ici. Sinatra est un excellent choix pour les sites Web et les services Web, alors qu’un cadre plus lourd tel que Ruby on Rails pourrait être excessif. En outre, je trouve que la simplicité et la clarté de Haml complètent à merveille Sinatra et constituent une approche de développement très productive..

Code
×