Module 303 Projet Pratique Jeu de pronostiques

Transcription

1 Module 303 Projet Pratique Jeu de pronostiques Version [1]

2 1. Sommaire 2. Cahier des charges... 3 a. Fonctionnalités... 3 b. Architecture technique La base de données Checkout du projet a. Vaadin : pour débuter [2]

3 2. Cahier des charges C est bientôt la coupe du monde de foot Vous allez donc réaliser un petit jeu/concours de pronostics que vous pourrez peut-être réutiliser pour jouer avec vos collègues ou amis. Voici le cahier des charges. a. Fonctionnalités Le chef de projet fonctionnel a préparé les maquettes d écrans suivantes : A faire : Figure 1 Login - Créer le formulaire de login - Validation : aucun appel à la base de données ne doit être fait si les champs ne sont pas remplis. - Si login KO => afficher un message d erreur - Si login OK => conserver les données du joueur dans la session et naviguer vers la page de classement. - La première page affichée doit être la page de login - Il ne doit pas être possible d aller sur une autre page, tant que le joueur n est pas logué. - Il doit y avoir un lien vers la page de création d un nouveau compte. - Une fois logué, il doit y avoir un lien pour faire un logout [3]

4 Figure 2 Création d'un nouveau compte A faire : - La page de création d un nouveau compte doit contenir les champs suivants : nom complet (à utiliser pour affichage, par exemple dans le classement), username (utilisé pour se loguer), , mot de passe et confirmation de mot de passe. - Tous les champs sont obligatoires. - Le mot de passe et la confirmation doivent être identiques - Le format de l adresse doit être contrôlé. - Des messages d erreur doivent être affichés pour ces différents cas. - Il doit y avoir un lien pour retourner à la page de login. - Lorsque le compte est créé, effectuer un login automatique et ouvrir la page du classement. Si vous avez tout terminé: - : le username doit être unique, il ne doit pas y avoir déjà un joueur enregistré avec ce username [4]

5 Figure 3 Page de classement A faire : - Une fois logué : un menu doit permettre de naviguer entre les pages «classement», «pronostic» et «admin» seulement si le joueur logué est un administrateur. - Une fois logué : il doit y avoir un lien pour se déloguer. - Le classement est une table de trois colonnes : rang, nom complet du joueur, score total - Les joueurs du classement doivent être triés dans l ordre décroissant du score total (déjà fait par la méthode qui lit les joueurs en base de données). Si vous avez tout terminé: - Le nom du joueur doit être un lien permettant de consulter les pronostics effectués par le joueur en question. Cela ouvre donc la page «pronostic», mais avec les données du joueur en question, plutôt que les données du joueur logué [5]

6 Figure 4 : Page de pronostics A faire : - La page de pronostics est utilisée pour afficher et saisir les pronostics du joueur logué. - Il s agit d un tableau avec : o Date et heure de début du match o Lieu et libellé du match o Le nom des deux équipes. o Le score pronostiqué pour chacune des équipes. Si le match n a pas encore commencé le score du pronostic peut être saisi ou modifié, si le match a déjà commencé alors le score ne peut pas être saisi et les champs doivent être en lecture seule. o Bouton «Save» sur chaque ligne pour enregistrer le pronostic. Il n y a pas de bouton si le match a déjà commencé. o Le score final et le nombre de points attribués à ce pronostic, affichés uniquement si le match est terminé ET que l administrateur a saisi le score final du match. o Le score total est affiché dans le pied de page du tableau. Si vous avez tout terminé: Utiliser le même écran pour afficher les pronostics d un autre joueur. Dans ce cas, l écran entier doit être en lecture seule. Afficher les drapeaux des équipes [6]

7 A faire : - La page d administration est disponible uniquement pour l administrateur. - Il s agit d un tableau avec : o Date et heure de début du match o Lieu et libellé du match o Noms des équipes. o Le score final doit pouvoir être enregistré/modifié. - La sauvegarde d un match doit déclencher le calcul ou re-calcul des scores pour chaque pronostic joué pour ce match, ainsi que la mise à jour des scores totaux de chaque joueur. Si vous avez tout terminé: - Permettre de modifier le nom des équipes pour les matchs du second tour [7]

8 b. Architecture technique Le chef de projet technique a préparé un environnement technique ainsi qu une base de données. Vous devez réaliser cette application en séparant clairement les différentes couches selon le modèle 3-tiers. Navigateur Internet User Interface - Vaadin Business Service Data Access [8]

9 3. La base de données Votre chef de projet technique a déjà préparé une base de données MySQL pour vous. Voici le schéma : La table «matchs» est déjà remplie avec la liste des matchs de la prochaine coupe du monde. La table «joueur» contient déjà un compte administrateur : username = admin, mot de passe = password. Les informations de connexion sont les suivantes : URL USER PWD 1 jdbc:mysql://ec compute-1.amazonaws.com:3306/cours-gri-1 cours-gri-1 cours-gri-1 2 jdbc:mysql://ec compute-1.amazonaws.com:3306/cours-gri-2 cours-gri-2 cours-gri-2 3 jdbc:mysql://ec compute-1.amazonaws.com:3306/cours-gri-3 cours-gri-3 cours-gri-3 4 jdbc:mysql://ec compute-1.amazonaws.com:3306/cours-gri-4 cours-gri-4 cours-gri-4 5 jdbc:mysql://ec compute-1.amazonaws.com:3306/cours-gri-5 cours-gri-5 cours-gri-5 6 jdbc:mysql://ec eu-west-1.compute.amazonaws.com:3306/cours-gri-6 cours-gri-6 cours-gri-6 7 jdbc:mysql://ec eu-west-1.compute.amazonaws.com:3306/cours-gri-7 cours-gri-7 cours-gri-7 8 jdbc:mysql://ec eu-west-1.compute.amazonaws.com:3306/cours-gri-8 cours-gri-8 cours-gri-8 9 jdbc:mysql://ec eu-west-1.compute.amazonaws.com:3306/cours-gri-9 cours-gri-9 cours-gri-9 10 jdbc:mysql://ec eu-west-1.compute.amazonaws.com:3306/cours-gri-10 cours-gri-10 cours-gri jdbc:mysql://ec eu-west-1.compute.amazonaws.com:3306/cours-gri-11 cours-gri-11 cours-gri [9]

10 Vous pouvez utiliser la perspective «Database Devlopment» de Eclipse pour consulter votre base de données. Pour créer une nouvelle connexion [10]

11 4. Checkout du projet Vous pouvez débuter à partir du template de projet mis à votre disposition sur SVN. Pour cela, vous allez faire un SVN checkout en tant que nouveau projet dans votre workspace eclipse. Voilà, vous avez maintenant un projet «Pronostic» dans votre workspace Eclipse. Il faut maintenant le déconnecter de SVN, car vous ne voulez pas modifier le template qui vous est donné, mais vous voulez travailler sur votre propre projet. Donc : - Click droit sur le projet > Team > Disconnect - Puis, Team > Share Project Sélectionner le repository subversion, puis suivant. Cliquez sur le bouton select afin de sélectionner le répertoire qui porte votre nom. Finish! [11]

12 - Puis pour terminer. Click droit sur le projet > Team > Commit. Et commiter tout le projet sur SVN. Configuration : Le projet utilise «maven» pour la gestion des dépendances (librairies). Nous devons donc convertir le projet en un projet maven. - Click droit sur le projet > Configure > Convert to maven projet Ajouter un serveur tomcat et déployer le projet sur tomcat. Démarrer le serveur. Ouvrer un navigateur à l adresse : pour tester le déploiement. Eventuellement remplacez «/pronostic» par le nom qui convient pour votre projet [12]

13 Resources : a. Vaadin : pour débuter - Site Internet de Vaadin : minutes tutorial : - Sampler pour Vaadin 7 : - Sampler pour Vaadin 6 : - je le trouve plus pratique que le nouveau sampler pour Vaadin 7 seulement certains exemples ne sont plus valables. - Book of Vaadin (documentation officielle) : [13]