TP 2 : Etat de lexistant

et poursuite du projet

TP 2 : Etat de lexistant et poursuite du projet

MBDS Hati
16/02/2016

Prsentation Gnrale
Lobjectif de ce TP est de stabiliser votre base de projet et dajouter de nouvelles fonctionnalits pour arriver une
version finale.

Objectifs
1/ Cration du projet
Si vous tiez en avance sur le TP1 il se peut que vous ayez dj attaqu cette tape, nous allons donc reprendre ici les
objectifs fixs :
-

Vous avez au moins un projet vide que vous avez cr

Faites le tour de tous les fichiers de configuration, regardez les valeurs par dfaut renseignes, certaines sont
dfinir, ne passez pas ct. (grails-app/conf)
Dfinissez le modle de donnes qui vous permettra de mener votre projet bien. (grails-app/domain)
Gnrez les contrleurs et les vues sur les lments que vous avez prcdemment crs. (dans le fichier du
modle)
Alimentez votre projet avec des donnes dinitialisation (conf/Bootstrap.groovy)

La fin du cours contient tous les lments qui vous permettront de boucler lintgralit de ces demandes.
Une fois cette partie termine, je vais vous demander daller observer ce quil sest pass ct base de donnes.
Pour cela, nous allons faire en sorte dutiliser une base de donne type MySQL pour avoir un PhpMyAdmin nous
permettant davoir une vue claire de notre base de donne et du modle cr.
Si vous utilisez un autre SGBD peu importe, la procdure est la mme, seul le driver et la chaine de connexion
changent.

TP 2 : Etat de lexistant et poursuite du projet

Rappel du sujet :
Nous allons crer une plateforme de gestion de points dintrts (au sens large, si vous voulez la ddier votre
passion, faites-vous plaisir!).
Ces points dintrts pourraient tre des lieux, personnes, objets, ce que vous souhaitez de matriel.
Voici la liste des contraintes pour la ralisation de votre projet :
-

Votre POI aura, au minimum, un nom, un emplacement (physique, golocalisation), une ou plusieurs
images dillustration et une description.

Vos POIs seront rpartis dans des groupes, ces groupes seront eux aussi nomms et illustrs.

Au sein dun groupe, les POIs ne peuvent apparaitre quune seule fois, et y sont seront ordonns, un POI
pourra appartenir un nombre illimit de groupes.

Un utilisateur pourra noter et commenter chacun des POIs et la fiche dun utilisateur permettra daccder
tous les commentaires quil a saisis.

Votre plateforme sera compose de 3 parties

o

Un backend dadministration, qui permettra de crer / modifier / supprimer des

Utilisateurs

Groupes de POIs

POIs

Un frontend simple, qui prsentera toutes ces donnes de la manire dont vous le souhaitez (le bon
gout nest pas un critre de notation contrairement au bon sens et aux rgles lmentaires
dergonomie) et qui vous permettra de naviguer simplement dune entit lautre.

Une couche de web services REST rendant du JSON qui pourra tre exploit, par exemple, par une
application mobile

TP 2 : Etat de lexistant et poursuite du projet

2/ Utilisation dune base de donne type MySQL (optionnel)

Je vais vous donner ici les lments pour accomplir cette tche.
Si vous prfrez utiliser un autre SGBD, libre vous !
1) Installer MySQL
2) Tlcharger le plugin Grails qui contient le connecteur MySQL
- Allez sur cette page : http://grails.org/plugin/mysql-connectorj
- Rcuprez la commande en tte de page pour ajouter cette dpendance votre BuildConfig.groovy,
validez la configuration dans le tooltip qui apparait
- Excutez un compile de votre projet afin de tlcharger la nouvelle dpendance
3) Editez votre fichier DataSource.groovy pour le faire pointer sur votre nouvelle base de donnes :

4) Crez votre base de donnes, Grails cre les tables mais pas la base.
5) Relancez votre projet. Si vous voyez vos tables se crer, tout est bon !

TP 2 : Etat de lexistant et poursuite du projet

3/ Ajout de donnes
Modifiez le BootStrap.groovy afin davoir au lancement de votre projet au moins :
-

5 utilisateurs diffrents
3 groupes diffrents
5 POIs pour chacun des groupes crs
Au moins un commentaire sur chaque POI

Il y a de nombreuses faons darriver au mme rsultat, voici un exemple :

// On cre le groupe et on garde une rfrence sur ce dernier
def groupeAlpha = new Groupe(name: "Groupe Alpha", img: "mon_image.png"
[...]).save(flush:true, failOnError:true)
// Puis on ajoute les POIs dans ce dernier
groupeAlpha.addToPois(new POI(name: "POI Alpha", lat: 17.12, lng: 7.14 [...]))
// On sauvegarde le parent, qui s'occupera de sauvegarder ses fils
groupeAlpha.save(flush:true, failOnError:true)

Vous avez aussi la possibilit si vous le souhaitez afin de rendre le code plus lisible et garder une rfrence sur le POI,
de dcomposer la deuxime ligne de code en deux, ce qui pourra donner :
// On cre le groupe et on garde une rfrence sur ce dernier
def groupeAlpha = new Groupe(name: "Groupe Alpha", img: "mon_image.png"
[...]).save(flush:true, failOnError:true)
// On cre un POI sans le persister et on garder une rfrence dessus
def poiAlpha = new POI(name: "POI Alpha", lat: 17.12, lng: 7.14 [...])
// Puis on ajoute le POI prcdemment cr dans le groupe
groupeAlpha.addToPois(poiAlpha)
// On sauvegarde le parent, qui s'occupera de sauvegarder ses fils
groupeAlpha.save(flush:true, failOnError:true)

Bonus (+2 point sur la partie projet) : Une fois votre Bootstrap valid, vous crerez des Services ou mthodes au sein dun mme
service afin de centraliser toutes vos crations dentits hors du Bootstrap. Vous pourrez ensuite rutiliser ces Services lorsque vous
aurez besoin de crer des entits pour le Frontend

TP 2 : Etat de lexistant et poursuite du projet

4/ Construction de pages
1) Backend
Il sera simplement gnr en utilisant le scaffolding propos par Grails, vous devrez peut tre le modifier afin quil soit
parfaitement fonctionnel.
Il devra videmment permettre de crer / modifier toutes les entits existantes, vous pouvez pour cette partie
conserver le design gnr par Grails.
Pensez tout de mme modifier la page daccueil de votre site pour la faire pointer sur un index avec un menu
permettant de naviguer dune entit lautre.
Bonus (+2 points sur la partie projet) : Pour les parties relatives lajout / modification de fichiers image, mettez en place sans
utiliser dextensions ou de librairies spcifiques, la possibilit duploader les fichiers en Ajax en faisant un simple dragndrop du
fichier sur le champ en question.

2) Frontend
a. Page de login
Crez une page de login pour vous identifier en tant quutilisateur, cette donne devra tre conserve lors de la
navigation
-

url daccs pour la page : /projet/login

Il va sans dire quavant de faire ceci, il faudra vous assurer que votre entit User possde les attributs ncessaires,
savoir un identifiant (qui pourrait tre un mail / un identifiant part) et un mot de passe.
Cest une question de bon sens mais les mots de passe doivent tre au minimum hashs (MD5 / une autre
mthode de votre choix) avant dtre persists et ce afin quon ne puisse pas lire ces derniers dans votre base de
donnes.
Bonus (+2 point sur la partie projet) : Mettez en place un systme de Remember me sur la page de login
b. Page dutilisateur
Construisez une page en vous inspirant des contrleurs et vues gnres respectant les contraintes suivantes :
-

url daccs pour la page : /projet/user/id_user

Diffrents bloc qui prsenteront
Les informations personnelles de lutilisateur
Les diffrents commentaires crits par lutilisateur ainsi quun lien vers le POI en question
Si lutilisateur en question est lutilisateur courant (identifi), vous devrez pouvoir diter toutes les
informations de ce dernier

TP 2 : Etat de lexistant et poursuite du projet

c. Les Groupes et POIs

Construisez des pages permettant de crer (new), visualiser (show) et diter (edit) les Groupes et les POIs, tous les
attributs de ces derniers devront tre modifiables
-

url daccs pour les pages :

o /projet/group/id_group (show)
o /projet/group/id_group/edit (edit)
o /projet/group/id_group/create (new)
o /projet/poi/id_poi (show)
o /projet/poi/id_poi/edit (edit)
o /projet/poi/id_poi/create (new)

Un utilisateur connect pourra commenter un POI depuis sa page de consultation (show)

Bonus (+2 point sur la partie projet) : Faites en sorte que la liste de POIs au sein dun Groupe soit modifiable directement en
dragndrop Ajax :
-

Prsentez deux listes, lune reprsentant les POIs du Groupe, lautre reprsentant la liste des POIs qui peuvent y tre
ajout
Les POIs pourront tre rorganiss (ordre) au sein dun groupe aussi en dragndrop

Bonus (+2 point sur la partie projet) : Mettez en place au niveau de la gestion des Groupes et Pois une Google Map, cette dernire
vous permettra :
-

Au niveau dun POI de le visualiser sur la carte et de le dplacer directement depuis la carte, ce qui modifiera les
coordonnes du point
Au niveau dun Groupe, de visualiser lintgralit des POI quil contient sur la carte

Bonus
Dans ce TP vous verrez un certain nombre de parties Bonus , chacune de ces parties, si ralises, vous accordera
des points en plus pour la partie Projet de votre notation (je compte au-del de 20) qui reprsente 50% de votre
moyenne dans cette matire.

Rendu
Ce projet sera not la fin des 5 sances et constituera une part importante de votre notation dans ce module.
Si vous avez des questions, adressez-moi un mail ladresse greg.galli@tokidev.fr, je ferai de mon mieux pour revenir
vers vous le plus rapidement possible.
Des bonus seront accords aux groupes qui feront le choix dimplmenter des parties Bonus / a ceux qui
sappliqueront particulirement sur la propret du code
Un design soign et une bonne ergonomie sont des petits plus qui seront pris en compte dans la notation de votre
projet sans limpacter de manire dramatique.

TP 2 : Etat de lexistant et poursuite du projet