Episode 2 : Views, Partials, Formulaires et DataMapper
Posted By: Hassane Moustapha On lundi 27 septembre 2010
Hello,
Nous continuons notre série avec l'épisode 2 où nous parlerons des vues, des vues partielles, des formulaires et de DataMapper.
Dans l'article précédent, nous avons appris à installer sinatra et à écrire notre première application :)
Aujourd'hui nous allons faire des trucs un peu plus intéressants. Nous allons :
- Créer un layout pour notre application
- Créer des vues spécifiques aux actions utilisées
- Apprendre à utiliser les vues partielles
- Créer des formulaires
- Envoyer les données du formulaire à notre application sinatra (multiple block parameters)
- Enregistrer ses données dans une base de données
Que des choses simples mais largement suffisantes pour créer une application web dynamique répondant aux besoins.
Nous allons créer une application AppEngine basée sur Sinatra !
1 - appcfg.rb generate_app serie
La génération de l'application prendra quelques secondes (environ 30 secondes).
Une fois notre application générée, nous pouvons passer au code et nous amuser.
Voici l'architecture de l'application générée.
Notons que le fichier "main.rb" que j'ai créé n'a pas été généré par "appcfg". Et c'est dans ce "main.rb" que nous aurons l'essentiel de notre application : traitements, routages etc.
Le fichier Gemfile contient l'ensemble des dépendances que notre application peut avoir.
Et now au boulot :
Remplissons notre "main.rb" avec ce code :
Pour répondre à la requête GET, l'application renvoie la vue 'index' en utilisant le moteur de template erb.
La vue "index" doit se trouver dans le repertoire "views" qui se trouve à la racine du projet et doit être enregistrée sous le nom "index.erb".
2- Création de la page d'accueil :
Jetons un coup d'oeil sur le contenu de la vue "index" :
Sur cette page, nous avons juste un message de bienvenue et un lien pour poster un nouveau message !
Cliquons sur ce lien et créons un message.
Nous devons préparer notre application pour qu'elle puisse répondre à cette requête.
Notre main.rb devient :
3 - Création d'un mécanisme pour l'ajout de nouveaux messages
Passons maintenant à la création de la vue 'nouveau.erb' qui nous permettra de poster de nouveaux messages.
Et surtout n'oublions pas que toutes les vues sont placées dans le répertoire VIEWS !
Notre vue nouveau.erb va ressembler à ça :
Je pense qu'il n'y a pas grand chose à dire sur cette vue! Elle contient un formulaire très simple.
Passons maintenant au "core" de notre application et voyons à quoi elle ressemble actuellement :
Beaucoup de nouvelles choses :) je sais !
Explications :
Nous avons des données qui proviennent d'une vue; ces données (le message en gros ) doivent être enregistrées. Et pour ce faire, nous allons utiliser une base de données et passer par une couche qui nous facilitera la communication avec cette base de données! Cette couche c'est DataMapper.
Je ne vais pas entrer dans les détails et dire comment fonctionne DM (visitez son site web ...).
Nous avons créé un MODEL (la classe message) pour notre entité Message avec les propriétés (id, nom, email et body) et inclus DataMapper::Resource pour lui permettre d'agir comme un 'document'.
Nous avons ensuite défini un point de sauvegarde que nous avons appelé 'default' pour dire à DataMapper où est ce qu'il doit stocker nos données; et dans cet exemple nous utilisons DataStore de Google AppEngine.
La dernière modification était l'ajout du bloc de code qui permet l'enregistrement du message et la redirection vers la vue index ( redirect '/' ).
4 - Affichage des messages créés
A ce stade nous pouvons afficher les messages enregistrés dans notre base de données et nous allons utiliser la vue "index.erb" pour le faire.
Alors modifions cette vue!
Nous vérifions que des messages existent déjà ! et les afficher !
PS: le test (if @messages do) n'est pas obligatoire ! il est là juste pour souci de clarté :)
Modifions aussi le bloc qui gére la vue "index.erb" :
Actuellement, nous pouvons créer des messages et les afficher.
Il serait cool de pouvoir commenter chacun des messages si l'on veut bien le faire ! Et pour le faire facilement on peut créer une vue partielle et l'utiliser quand on en a besoin. Le seul hic est que sinatra ne supporte pas les vues partielles (pas par défaut) :(
Aucun problème :) nous allons apprendre à Sinatra comment utiliser les vues partielles et ce grâce au langage ruby !
Nous allons rajouter une seule methode dans un bloc à l'intérieur de la classe MonApplication et avant toutes methodes :
helpers do
def partial (la_vue, locals = {})
erb(la_vue, :layout => false, :locals => locals)
end
end
Nous pouvons désormais utiliser les 'partials' depuis toutes nos vues.
Ex : <%= partial(:commentaire, :message => message.id) %>
Et now .... la fin de cet épisode!
Dans le prochain épisode, nous allons apprendre à créer des "composants" web et des widgets (Rack applications) et surtout comment intégrer d'autres services Google à notre application AppEngine...
Waiting for your feedback !
Nous continuons notre série avec l'épisode 2 où nous parlerons des vues, des vues partielles, des formulaires et de DataMapper.
Dans l'article précédent, nous avons appris à installer sinatra et à écrire notre première application :)
Aujourd'hui nous allons faire des trucs un peu plus intéressants. Nous allons :
- Créer un layout pour notre application
- Créer des vues spécifiques aux actions utilisées
- Apprendre à utiliser les vues partielles
- Créer des formulaires
- Envoyer les données du formulaire à notre application sinatra (multiple block parameters)
- Enregistrer ses données dans une base de données
Que des choses simples mais largement suffisantes pour créer une application web dynamique répondant aux besoins.
Nous allons créer une application AppEngine basée sur Sinatra !
1 - appcfg.rb generate_app serie
La génération de l'application prendra quelques secondes (environ 30 secondes).
Une fois notre application générée, nous pouvons passer au code et nous amuser.
Voici l'architecture de l'application générée.
Le fichier Gemfile contient l'ensemble des dépendances que notre application peut avoir.
Et now au boulot :
Remplissons notre "main.rb" avec ce code :
Pour répondre à la requête GET, l'application renvoie la vue 'index' en utilisant le moteur de template erb.
La vue "index" doit se trouver dans le repertoire "views" qui se trouve à la racine du projet et doit être enregistrée sous le nom "index.erb".
2- Création de la page d'accueil :
Jetons un coup d'oeil sur le contenu de la vue "index" :
Cliquons sur ce lien et créons un message.
Nous devons préparer notre application pour qu'elle puisse répondre à cette requête.
Notre main.rb devient :
Passons maintenant à la création de la vue 'nouveau.erb' qui nous permettra de poster de nouveaux messages.
Et surtout n'oublions pas que toutes les vues sont placées dans le répertoire VIEWS !
Notre vue nouveau.erb va ressembler à ça :
Je pense qu'il n'y a pas grand chose à dire sur cette vue! Elle contient un formulaire très simple.
Passons maintenant au "core" de notre application et voyons à quoi elle ressemble actuellement :
Beaucoup de nouvelles choses :) je sais !
Explications :
Nous avons des données qui proviennent d'une vue; ces données (le message en gros ) doivent être enregistrées. Et pour ce faire, nous allons utiliser une base de données et passer par une couche qui nous facilitera la communication avec cette base de données! Cette couche c'est DataMapper.
Je ne vais pas entrer dans les détails et dire comment fonctionne DM (visitez son site web ...).
Nous avons créé un MODEL (la classe message) pour notre entité Message avec les propriétés (id, nom, email et body) et inclus DataMapper::Resource pour lui permettre d'agir comme un 'document'.
Nous avons ensuite défini un point de sauvegarde que nous avons appelé 'default' pour dire à DataMapper où est ce qu'il doit stocker nos données; et dans cet exemple nous utilisons DataStore de Google AppEngine.
La dernière modification était l'ajout du bloc de code qui permet l'enregistrement du message et la redirection vers la vue index ( redirect '/' ).
4 - Affichage des messages créés
A ce stade nous pouvons afficher les messages enregistrés dans notre base de données et nous allons utiliser la vue "index.erb" pour le faire.
Alors modifions cette vue!
Nous vérifions que des messages existent déjà ! et les afficher !
PS: le test (if @messages do) n'est pas obligatoire ! il est là juste pour souci de clarté :)
Modifions aussi le bloc qui gére la vue "index.erb" :
Actuellement, nous pouvons créer des messages et les afficher.
Il serait cool de pouvoir commenter chacun des messages si l'on veut bien le faire ! Et pour le faire facilement on peut créer une vue partielle et l'utiliser quand on en a besoin. Le seul hic est que sinatra ne supporte pas les vues partielles (pas par défaut) :(
Aucun problème :) nous allons apprendre à Sinatra comment utiliser les vues partielles et ce grâce au langage ruby !
Nous allons rajouter une seule methode dans un bloc à l'intérieur de la classe MonApplication et avant toutes methodes :
helpers do
def partial (la_vue, locals = {})
erb(la_vue, :layout => false, :locals => locals)
end
end
Nous pouvons désormais utiliser les 'partials' depuis toutes nos vues.
Ex : <%= partial(:commentaire, :message => message.id) %>
Et now .... la fin de cet épisode!
Dans le prochain épisode, nous allons apprendre à créer des "composants" web et des widgets (Rack applications) et surtout comment intégrer d'autres services Google à notre application AppEngine...
Waiting for your feedback !