- 
Commencer son projet en Rails
- Catégories:
- Ruby On Rails
Vous venez de créer votre tout premier site HTML/CSS, mais vous vous rendez compte que ce n'est pas suffisant : le code, pour un menu par exemple, se répète dans chaque page, et au moindre changement, c'est tout qu'il faut modifier à la main. Vraiment pas pratique ! Cet article va vous permettre de faire vos tous premiers pas avec le framework Ruby on Rails.
Créer son projet Rails
Tout d'abord, commençons par créer un dossier réservé à l'ensemble de vos projets Rails, que je vais pour ma part appeler "Railsworkspace". Libre à vous de le nommer comme vous le souhaitez, bien évidemment. :)Rendez-vous sur votre dossier consacré à Rails via votre terminal. Normalement, vous devriez savoir comment faire, mais voici un rappel:
$ cd RailsWorkSpace
Pour créer votre projet rails "Mon_Site", tapez la commande suivante :
$ rails new Mon_Site
Vous verrez apparaître une liste des dossiers, répertoires & co créés par Ruby On Rails. En effet, en bon Framework, Rails va créer de lui-même les différents dossiers nécessaires au déploiement de votre nouveau projet "Mon_Site".
Une fois la commande exécutée, jetez un œil dans votre dossier : vous voilà face à l'architecture de votre tout nouveau projet. Et celui-ci contient déjà quelques petites choses utiles et préprogrammées, que nous verrons par la suite.
Pour le moment, revenons à nos moutons, et toujours sur votre terminal, exécutez ensuite la commande suivante:
$ rails server
Cette commande vous permet de lancer un serveur Rails. Celui-ci est lancé dans l'environnement de développement par défaut et prend donc en compte tous les fichiers et éléments de configuration en environnement de développement.
Pour accéder à votre site en local (c'est-à-dire uniquement sur votre ordinateur afin que vous puissiez tester que tout fonctionne bien avant de le lancer sur Internet !), c'est simple (et Rails le dit lorsque vous lancez le serveur). Il vous suffit de taper l'adresse suivante dans la barre de navigation de votre navigateur préféré :
3000 est le port écouté par le serveur Rails par défaut. Si vous rentrez cette adresse, vous devriez tomber sur la page "index.html" alors que vous n'avez encore rien programmé. C'est normal, cette page est créée pour chaque nouveau projet et peut vous fournir des informations utiles, alors lisez-la attentivement ! On verra comment la remplacer plus tard par votre page d'accueil. :)
En attendant, je vous conseille quand même d'ajouter cette page ("http://localhost:3000/") dans les favoris de votre navigateur, car vous allez devoir y accéder très souvent pour tester vos différents sites Rails. ;)
Passer du site statique à un site dynamique avec Rails
Que la multitude de dossiers ne vous effraie pas ! Au final, on ne s'en servira vraiment que de quelques uns... Du moins, pour commencer. Pour passer du site HTML/CSS, commençons par ce qui n'a pas tellement à être changé, à savoir les images et le CSS.Les images et le CSS sont rangés dans le dossier "app/assets". Mettez vos images dans le dossier "images" et le CSS dans "stylesheets".
Maintenant, qu'en est-il des pages HTML?
Concrètement, elles se retrouveront dans le dossier "app/views"... Mais c'est un peu plus compliqué que cela !
Rails est construit sur un modèle que l'on appelle le modèle MVC. Autrement dit, le modèle "model view controller". Ce modèle distingue: - les "model", ou bases de données (telles que les utilisateurs), - les "views", ou les vues (autrement dit: vos pages html), - et les "controllers", qui sont les fonctions derrière tout ça (elles s'occupent entre autres d'afficher les pages html, de gérer le contenu dynamique, etc.)
Pourquoi est-ce un "peu plus compliqué que cela" alors, me demanderez-vous? Hé bien tout simplement parce que chaque page HTML que vous créerez devra avoir "un controller" qui va s'occuper de l'afficher. :)
Passons à la pratique, et créons une première page HTML pour tester. Allez dans le dossier de votre projet via votre terminal, et tapez la commande suivante:
$ rails generate controller Pages accueil
où "Pages" sera le nom de votre dossier (il est très important de mettre une majuscule car Rails est un langage de convention, et les controller doivent être en majuscule afin qu'il s'y retrouve) et où "accueil" sera le nom de votre page.
Allez dans votre dossier "app/views". Un nouveau dossier s'est créé: "pages", avec en prime votre page "accueil" que vous avez créée. Si vous l'ouvrez avec votre éditeur de code, vous devriez voir ce bout de code HTML généré automatiquement:
Find me in app/views...
Vous pouvez bien évidemment le changer à votre guise: c'est du HTML comme vous le connaissez déjà.
Attention toutefois: prenez garde à ne pas copier/coller les en-têtes car celles-ci se trouvent déjà dans: "app/views/layouts/application". ;)Bref ! Revenons-en à nos moutons, et voyons où se trouve le controller de votre page d'accueil, qui va se charger d'afficher votre page sur le navigateur. Il se trouve ici: "app/controllers/pages_controllers"
En l'ouvrant, vous devriez voir notamment ceci:
def accueil
end
Cela va vous paraître fou, mais il s'agit là du controller dont je vous parle depuis tout à l'heure... Sans lui, votre page "accueil" ne pourrait s'afficher.
Si vous souhaitez ajouter une autre page HTML "à la main", vous devrez donc penser à également ajouter son controller. Vous l'aurez sans doute compris: le controller pour afficher une page s'écrit de la manière suivante:
def nom_de_page
end
Pour les images, le CSS et le controller, c'est bon ! Maintenant, il ne reste plus qu'à créer la route...
Les routes Rails
En HTML, une balise < a > < /a > avec les différents attributs dont elle a besoin aurait suffit pour rediriger l'utilisateur sur la page désirée. En Rails, c'est une syntaxe différente que la simple écriture de balises, mais au final cela vous optimise grandement le code tout en vous facilitant la tâche.
Voyons voir cela d'un peu plus près...
Tout d'abord, ouvrez avec votre éditeur de code le fichier "config/route.rb". Gardez-bien en mémoire ce fichier, car vous aurez très souvent besoin de l'éditer. Comme l'indique l’extension .rb du fichier, il s'agit là d'un fichier Ruby. On y code donc en... hé bien oui, en Ruby ! :)
Que tout le texte déjà présent ne vous effraie pas: les lignes commençant par des # sont des commentaires Ruby, et sont donc pas exécutées. Vous remarquerez d'ailleurs qu'il s'agit là de différents textes d'explications qui pourront vous servir plus tard. ;)
Commencez simplement par ajouter le code suivant:
get 'accueil', :to => 'pages#accueil'
Lancez votre serveur virtuel, et rendez-vous sur la page "www.localhost:3000/accueil". Super ! Votre page d'accueil s'affiche !
Maintenant, tentons de créer un premier lien HTML pour mieux comprendre comment fonctionnent les routes. Si vous n'avez pas encore d'autre page web que votre page "accueil", créez une nouvelle page avec pour extension de fichier ".html.erb" dans le dossier 'app/views', sans oublier d'ajouter le controller qui lui correspond. (Pour ceux qui ont déjà une page .html, n'oubliez pas de lui ajouter l'extension .erb !)
Pour ma part, je vais appeler cette page "contact". Dans votre fichier routes.rb, ajoutez le code suivant, juste avant la première ligne de commentaire:
get 'test', :to => 'pages#contact'
Éditez ensuite votre page d'accueil.html.erb, et transformez vos liens < a > < /a > en utilisant la fonction Rails spécialement conçue pour gérer les liens:
<%= link_to "Contact", test_path %>
Sur votre site, allez sur votre page d'accueil et cliquez sur le lien que vous avez créé. Magique ! La page "contact" que vous avez créée s'affiche ! Maintenant, jetez un oeil sur l'url... Normalement, l'URL affichée est: "www.localhost:3000/test". Que peut-on en déduire ?
1 - Dans les routes, le "get 'nom_du_chemin'" va correspondre dans l'URL, au chemin que vous voulez spécifier pour votre page. C'est celui que l'utilisateur devra taper pour accéder à telle ou telle page. Ensuite, get 'test' crée automatiquement plusieurs variables rails accessibles n'importe où dont test_path contenant l'URL relative de votre page. Rails étant un langage de convention, il ajoute, "par convention" _path à la fin du nom de votre URL pour stocker le chemin relatif et _url pour stocker le chemin absolu.
Par exemple, si vous souhaitez que l'URL affiche "/me_contacter" plutôt que "/test", vous devrez écrire:
get'me_contacter', :to => 'pages#contact'
Sans oublier de remplacer dans votre lien rails le chemin "test_path" par "me_contacter_path".
2 - 'pages#contact' est le couple "Controller#Action". Par ce biais, vous spécifiez à Rails que lorsqu'un utilisateur désire accéder à la page d'URL "/me_contacter", il doit exécuter l'action "contact" du controller "PagesController". Il exécute ensuite tout le code présent dans cette action. Lorsqu'il arrive à la fin de l'action (instruction end), il va chercher la page correspondante dans le bon dossier. Le dossier doit toujours avoir le même nom que le Controller, en l'occurrence, ici, "pages". De même la page associée à l'action doit avoir le même nom, en l'occurrence "contact.html.erb". Autrement, vous récupérerez une belle erreur "missing template contact".
3- Enfin, :to => permet d'associer les deux morceaux vus précédemment (pour faire très simple). On retrouvera très souvent ce type d'association et on aura l'occasion d'en reparler dans un billet consacré aux "hash" ! ;)
Bien évidemment, tout cela est valable pour la première route que nous avions créée (pour la page d'accueil), et il ne vous reste plus qu'à suivre la même méthode pour toutes vos pages ! ;)
A présent, vous devriez savoir "convertir" votre site statique en utilisant Rails. Bien sûr, comme il ne sert strictement à rien d'utiliser à un site purement statique pour ne rien faire avec, il vous sera indispensable d'approfondir tout ça pour que Ruby on Rails vous serve réellement à quelque chose. Je vous conseille de suivre la formation de Régis sur HelloMentor, il saura vous apprendre les bases et les bonnes pratiques sur Ruby on Rails. ;)
Personnaliser ma page d'accueil
On a vu comment afficher votre page d'accueil, mais comment faire pour tomber dessus directement lorsque vous ouvrez votre page http://localhost:3000 ? Par défaut, l'adresse http://localhost:3000 s'ouvre sur une page automatiquement créée par Rails, "index.html". Vous trouverez cette page dans le dossier "public" de votre projet. Allez la chercher, et puisque nous n'en aurons plus besoin et qu'elle va empêcher d'afficher votre belle page d'accueil, supprimez-la.Allez ensuite dans votre fichier des routes, "config/routes.rb", et inscrivez-y le code suivant:
root :to => "pages#accueil"
Vous l'aurez sans doute reconnu: ce qui se trouve entre guillemets est le controller de la page sur laquelle vous souhaitez atterrir lorsque vous tapez "localhost:3000" dans votre navigateur.
Ce petit bout de code, qui est d'ailleurs inséré dans les commentaires du fichier (vers le bas), va vous permettre de mettre la page spécifiée en tant que racine de votre site web.
Pas d'autres manipulations à faire: il ne vous reste plus qu'à vous connecter sur votre adresse favorite http://localhost:3000 pour constater que c'est bien votre jolie page d'accueil que Rails affiche ! ;)
Afficher une image et l'associer à un lien
Ici, nous allons très simplement apprendre à afficher une image à la façon "Rails", et apprendre à lui associer un lien. Afficher une image à la Rails, c'est très simple. Il suffit juste de connaître le nom de la balise dédiée: image_tag.<%= image_tag("nom_de_mon_image.png", :alt => "Mon texte alternatif" %>Pour que tout fonctionne bien, vous devez au préalable avoir placé votre image dans le dossier "app/assets/images" si vous êtes en Rails 3.1 ou dans "public/images" si vous êtes dans une version ultérieure. Associer un lien à une image n'a rien de plus compliqué. La méthode consiste à mettre l'image dans une variable et d'appeler cette variable dans notre balise <%= link_to %>.
<% ma_variable = image_tag("nom_de_mon_image.png", :alt => "Mon texte alternatif" %>
<%= link_to ma_variable, mon_lien_path %>
A retenir : Le "=" juste après un <% permet en fait d'afficher un rendu sur votre page HTML. Ici, il s'agit d'une image, mais ça aurait tout aussi bien pu être un layout, un lien, un texte, et bien d'autres choses encore. :) Si vous ne mettez pas le =, rien ne s'affichera !
Les partials, quésako ?
Vous en avez marre de répéter votre menu dans toutes vos pages HTML ? Avec Rails, il vous suffira de créer un "partial" qui contiendra votre menu et l'afficher dans vos pages HTML qui l'utilisent. L'avantage, c'est que votre menu se retrouve à un seul endroit et que si vous avez besoin de le modifier, vous n'aurez qu'à le changer une fois pour que cela se répercute dans vos autres pages. Bien sûr, quand je dis "menu", c'est exhaustif, et les partialsTout d'abord, créons notre partial qui contiendra le menu : "_menu.html.erb" dans le dossier "app/views/". Pour signaler à Rails qu'il s'agit d'un partial (i.e que cette page n'est pas associée à un controller ou une action et qu'elle va être réutilisée dans différentes pages), on doit la nommer avec un underscore _ avant. :)
Mettez-y ensuite votre code HTML. Pour l'heure, votre partial n'est affiché nulle part. Mettez-le dans votre page d'accueil avec la ligne de code suivante :
<%= render "menu" %>Il ne vous reste plus qu'à recharger la page pour voir le résultat: votre menu apparaît !
Vous avez là quelques petites bases pour démarrer avec Ruby on Rails. Pour approfondir tout ça, il existe de nombreux sites et liens qui pourront vous aider : CodeSchool, le livre de Michael Hartl... Découvrez notre pearltrees Ruby on Rails. :) Et si vous n'avez pas le temps ou le courage de lire toute la documentation, Régis, aka Kulgar, peut vous proposer une [img]http://www.hellomentor.co/annonce/179-Maitrisez-Ruby-On-Rails-et-creez-vos-sites-Web-sans-effort[/img]. ;) Bon courage pour la suite !
Index
--
Article précédent: Installer Ruby on Rails sous Windows
--
Article suivant: Créer un petit éditeur de texte pour forums - Etape 1
Aucun commentaire - Soyez le premier !