of 10/10
BDW1 - Projet PHP/MySQL croque légumes UCBL - Département Informatique de Lyon 1 – 2018- V1.0.1 Table des matières 1 Informations organisationnelles 1 1.1 Description générale du projet ................................ 1 1.2 Déroulement du projet .................................... 2 1.2.1 Les livrables sur TOMUSS ............................. 2 1.3 La soutenance ......................................... 2 1.4 Notation ............................................ 2 1.4.1 Grille d’évaluation des fonctionnalités du projet .................. 2 1.4.2 Ressources supplémentaires pour le projet ..................... 3 1.5 Utilisation d’un framework et javascript .......................... 3 2 Spécification de la version de base de l’application (Version 1) 3 2.1 Règles et principes ...................................... 4 2.2 Modélisation de la base de données ............................. 5 2.3 Les pages Web ........................................ 6 3 Jalons 8 4 Spécification de la version avancée de l’application (Version 2) 8 4.1 Invitation à rejoindre la partie ............................... 9 4.2 Synchronisation des pages .................................. 9 5 Annexe 9 5.1 Documentation MySQL et PHP ............................... 9 5.2 Gestion d’une session. .................................... 9 5.3 Tirage aléatoire dans une table ............................... 10 5.4 Gestion de la synchronisation ................................ 10 1 Informations organisationnelles 1.1 Description générale du projet Ce semestre, le projet porte sur la création d’un site Web permettant de jouer à un jeu inspiré du jeu pour enfant ’Croque carotte’. L’objectif du jeu est d’être le premier à atteindre le bout d’un chemin en spirale, et ce malgré les embûches (trous) qui peuvent apparaître. L’application permet à plusieurs participants de se connec- ter, de configurer une partie et de jouer. L’application permet de mémoriser des informations sur les parties en cours (pour gérer les interruptions inopinées ou pauses) et les parties précédentes (pour fournir des statistiques). Le projet est à réaliser en binôme (les monômes sont acceptés sous réserve de validation par le respon- sable de l’UE mais les trinômes ne sont pas autorisés). La réalisation de ce projet nécessite un travail assidu durant les séances de TP mais aussi un travail personnel en dehors des séances de TP. Il est important de vous organiser pour pouvoir vous répartir les tâches et/ou de trouver des créneaux 1

BDW1 - Projet PHP/MySQL croque légumes · 2.1 Règlesetprincipes Le jeu ’Croque Légumes’ est un jeu dans lequel au plus quatre joueurs peuvent jouer. Chaque joueur dispose initialement

  • View
    7

  • Download
    0

Embed Size (px)

Text of BDW1 - Projet PHP/MySQL croque légumes · 2.1 Règlesetprincipes Le jeu ’Croque Légumes’ est...

  • BDW1 - Projet PHP/MySQLcroque légumes

    UCBL - Département Informatique de Lyon 1 – 2018- V1.0.1

    Table des matières1 Informations organisationnelles 1

    1.1 Description générale du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Déroulement du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

    1.2.1 Les livrables sur TOMUSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 La soutenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

    1.4.1 Grille d’évaluation des fonctionnalités du projet . . . . . . . . . . . . . . . . . . 21.4.2 Ressources supplémentaires pour le projet . . . . . . . . . . . . . . . . . . . . . 3

    1.5 Utilisation d’un framework et javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 3

    2 Spécification de la version de base de l’application (Version 1) 32.1 Règles et principes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Modélisation de la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.3 Les pages Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

    3 Jalons 8

    4 Spécification de la version avancée de l’application (Version 2) 84.1 Invitation à rejoindre la partie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94.2 Synchronisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

    5 Annexe 95.1 Documentation MySQL et PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95.2 Gestion d’une session. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95.3 Tirage aléatoire dans une table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105.4 Gestion de la synchronisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

    1 Informations organisationnelles

    1.1 Description générale du projet

    Ce semestre, le projet porte sur la création d’un site Web permettant de jouer à un jeu inspiré dujeu pour enfant ’Croque carotte’.L’objectif du jeu est d’être le premier à atteindre le bout d’un chemin en spirale, et ce malgré lesembûches (trous) qui peuvent apparaître. L’application permet à plusieurs participants de se connec-ter, de configurer une partie et de jouer. L’application permet de mémoriser des informations sur lesparties en cours (pour gérer les interruptions inopinées ou pauses) et les parties précédentes (pourfournir des statistiques).Le projet est à réaliser en binôme (les monômes sont acceptés sous réserve de validation par le respon-sable de l’UE mais les trinômes ne sont pas autorisés). La réalisation de ce projet nécessite untravail assidu durant les séances de TP mais aussi un travail personnel en dehors des séances de TP.Il est important de vous organiser pour pouvoir vous répartir les tâches et/ou de trouver des créneaux

    1

    https://www.ravensburger.com/ca-fr/produits/jeux/jeux-enfants/croque-carotte-21566/index.html

  • supplémentaires pour travailler ensemble.

    1.2 Déroulement du projet

    1.2.1 Les livrables sur TOMUSS

    L’évaluation du projet repose sur une soutenance et des livrables qui sont à rendre la veille du jourde la soutenance, avant midi, (Date limite de dépôt : 03/05/2018 à 12h) sur Tomuss. Les livrablessont les suivants :— Une archive (.zip ou .rar) contenant votre site Web : (colonne TOMUSS : Projet_Code). Cette

    archive qui sera déposée par un seul des binômes et devra contenir les pages de votre site (codecommenté et indenté).

    — Les transparents de soutenance (.pdf) : (colonne TOMUSS : Projet_Slide).— L’URL de votre site, sur le serveur bdw1.univ-lyon1.fr (colonne TOMUSS Projet_URL). L’URL

    saisie dans TOMUSS doit pointer vers la page d’accueil de votre site (e.g., http ://bdw1.univ-lyon1.fr/p1234567/mon_site/).

    1.3 La soutenance

    La soutenance dure 20 minutes par binôme et se décompose en deux parties :— une présentation avec des transparents et une démonstration (8 minutes).— une séance de questions (12 minutes).

    A noter que les membres du binôme sont évalués individuellement et pourront se voir attribuer desnotes différentes.

    1.4 Notation

    Votre projet sera sanctionné par 3 notes :— l’évaluation intermédiaire (en début de TP9) : 10%— la soutenance (TP 11) : 60%— l’évaluation post-soutenance (effectuée par l’encadrant une fois les soutenances faites) : 30%

    1.4.1 Grille d’évaluation des fonctionnalités du projet

    Nous vous proposons à titre indicatif le barème suivant :

    2

  • Points Réalisation1.5 Schéma entité/association0.5 Inscription0.5 Connexion0.5 Afficher page ’A propos’1 Configurer une partie (sélection joueur + affectation couleur)1.5 Démarrer une partie (affichage des différentes zones)1.5 Tirer une carte et mettre à jour l’interface1 Activer l’action associée à la carte1 Passer au joueur suivant1.5 Implémentation des cartes avancements (règle + affichage)1.5 Implémentation des cartes légumes (règle + affichage)1 Fin de partie et notification du gagnant0.5 Arrêt prématuré de la partie1 Définition des requêtes liées aux statistiques1 Affichage des statistiques pour au moins 10 parties1.5 Rendu/ergonomie/esthétisme de l’application1 Qualité et quantité des commentaires dans le code0.5 Implémentation de cartes supplémentaires (règle + affichage)1.5 Implémentation de la version 2 avec connexions multiples

    1.4.2 Ressources supplémentaires pour le projet

    Pour réaliser ce projet, vous disposez :— de l’archive à l’adresse :

    https://perso.liris.cnrs.fr/nicolas.lumineau/teaching/LIFBDW1/ressources/ressourcesProjet.zipqui contient une proposition d’architecture pour votre application ainsi que des ressources gra-phiques (pions, dalles, cartes) dans le répertoire images.

    — du TP4 ’une mini messagerie instantanée en PHP’ pour la partie inscription et connexion.— du TD6 pour la construction dynamique du chemin.— du TD7 pour l’affichage des cartes.

    1.5 Utilisation d’un framework et javascriptBDW1 est une UE vous formant à PHP, il est donc important que votre application contienne du

    PHP. Cependant, il est tout de même autorisé d’utiliser du Javascript pour améliorer la gestion desinteractions utilisateur/application.

    Il est possible d’utiliser un framework PHP ou CSS de votre choix, sous les conditions suivantes :— Vous êtes autonome(s) : les chargé(e)s de TP ne sauront pas forcément vous aider en cas de

    problème avec le framework— L’aide que procure le framework sera compensée par une plus grande exigence au niveau des

    résultats, en terme de fonctionnalités, qualité du code, etc.

    2 Spécification de la version de base de l’application (Version 1)Remarque importante : La spécification qui suit va vous permettre de développer

    une application en supposant que tous les joueurs jouent sur le même ordinateur. L’ap-plication qui permettra à plusieurs joueurs différents de se connecter et de jouer surdifférents ordinateurs sera spécifiée dans la section "Spécification de la version avancéede l’application (Version 2)"

    3

    https://perso.liris.cnrs.fr/nicolas.lumineau/teaching/LIFBDW1/ressources/ressourcesProjet.zip

  • 2.1 Règles et principes

    Le jeu ’Croque Légumes’ est un jeu dans lequel au plus quatre joueurs peuvent jouer. Chaquejoueur dispose initialement de 4 pions de même couleur ayant chacun un numéro allant de 1 à 4.L’espace de jeu correspond à un chemin dont chaque cellule correspond à une place possible pour unpion. A l’extrémité du parcours se trouve une salade qui représente l’objectif. Un cellule peut êtreassociée à une dalle sur laquelle le pion peut tenir, ou un trou dans lequel le pion peut tomber. L’étatdes cellules évolue durant la partie. Le joueur qui atteint la salade le premier a gagné.

    Figure 1 – Plateau de jeu

    Un joueur peut avoir plusieurs pions en même temps sur le parcours. Dans l’état initial, le cheminne comporte aucun trou.

    Une partie peut être momentanément interrompue (fermeture inopinée du navigateur suite à l’ar-rivée d’un enseignant alors que vous n’êtes pas en TP BDW1 ;-) et la partie pourra être reprise là oùelle s’était arrêtée.

    Figure 2 – Cartes possibles

    Les joueurs jouent à tour de rôle. Un joueur tire une carte. Il y a alors 2 possibilités :— la carte tirée est une carte d’avancement : le joueur peut avancer un de ses pions du nombre de

    cases indiqué sur la carte. Si la case destination est déjà occupée par un autre pion, le pion seraplacé sur la première case libre se trouvant juste devant la case destination. S’il s’agit d’un trou,le pion tombe alors dans le trou. A noter que pour les déplacements de 2 ou 3 cases, si un trouest franchi lors du déplacement, le saut au-dessus du trou compte pour une case.

    — la carte tirée est une carte légume : le joueur applique les transformations du parcours associéesau légume se trouvant sur la carte. Parmi les cartes légumes, les joueurs peuvent tirer les cartes

    4

  • ’carotte’, ’chou’, ’poireau’ qui permettent de faire apparaître des trous dans le parcours selon lesrègles suivantes :— Pour la carte ’carotte’, deux trous apparaissent aléatoirement sur le parcours.— Pour la carte ’chou’, deux trous apparaissent sous les pions des adversaires choisis aléatoi-

    rement.— Pour la carte ’poireau’, des trous apparaissent sous les pions de tous les adversaires.

    A noter que les trous qui apparaissent du fait d’une carte légume restent en place tant qu’uneautre carte légume n’est pas tirée.

    Les cartes sont distribuées dans la pioche selon les probabilités suivantes :— un joueur a 20 chances sur 100 de tirer une carte d’avancement d’une case.— un joueur a 20 chances sur 100 de tirer une carte d’avancement de deux cases.— un joueur a 20 chances sur 100 de tirer une carte d’avancement de trois cases.— un joueur a 25 chances sur 100 de tirer une carte ’carotte’— un joueur a 10 chances sur 100 de tirer une carte ’chou’— un joueur a 5 chances sur 100 de tirer une carte ’poireau’

    Remarque : Bien évidemment, vous êtes libre de proposer des cartes bonus supplémentaires enlaissant libre cours à votre imagination (la carte passe son tour, la carte recul de n casses, la carte’good switch’ où vous permutez avec le premier si ce n’est pas vous, la carte ’bad switch’ où vouspermutez avec le dernier si ce n’est pas vous, la carte lévitation que l’on peut conserver pour éviterde tomber dans un trou ...).

    A noter que si un joueur perd tous ses pions, la partie continue sans lui.

    2.2 Modélisation de la base de données

    Pour pouvoir modéliser votre base de données et définir votre schéma entité/Association, nousvous proposons la spécification suivante :

    Le jeu ’Croque Légume’ permet à des joueurs d’effectuer des parties durant lesquelles des actionspermettent de faire avancer des pions sur des dalles ou de modifier l’état de certaines dalles pour yfaire apparaître des trous.

    Un joueur dispose d’un pseudonyme comme identifiant. Nous stockons également son nom, sonprénom. Pour chaque joueur, nous stockons la valeur de hachage de son mot de passe 1.

    Un joueur dispose de plusieurs pions. Un pion est identifié par un code constitué de sa couleurconcaténée à un numéro. Pour le joueur associé à la couleur rouge, ses 4 pions ont pour code ’Rouge1’,’Rouge2’, ’Rouge3’ et ’Rouge4’. Nous stockons pour chaque pion le nom du fichier .png ou .jpg repré-sentant le pion. Pour chaque pion utilisé dans une partie, nous stockons un état (’actif’ s’il est surle chemin, ’passif’ s’il n’est pas encore sur le chemin et ’perdu’ s’il est tombé dans un trou) et uneposition (numéro de case du chemin).

    Une partie est identifiée par un entier auto-incrémenté. Une partie a un nom composé de la chaînede caractères ’Partie’ concaténée à l’identifiant de la partie. Nous stockons la date de création de lapartie. Une partie est initiée par un joueur et un joueur a le droit d’initier plusieurs parties. Une partiedispose également d’un état : "En cours" (dès que la partie est lancée), "Clôturée" (dès que la partieest finie avec un gagnant) et "Abandonnée" (si la partie est terminée de manière prématurée). Unepartie permet à au moins 2 joueurs de jouer. Une partie est limitée à au plus 4 joueurs. L’initiateurd’une partie fait forcément partie des participants à ladite partie.

    1. L’idée est de ne jamais stocker en clair le mot de passe d’un joueur mais seulement le résultat du hachage de sonmot de passe. cf http://php.net/manual/fr/function.password-hash.php

    5

    http://php.net/manual/fr/function.password-hash.php

  • Une partie se décompose en tours. Un tour est défini relativement à une partie par un entier corres-pondant au numéro du tour de la partie. Un tour est complet quand tous les joueurs engagés dans lapartie ont tiré une carte. Pour chaque tour, nous stockons l’action réalisée par un joueur. Une actionest identifiée par un entier auto-incrémenté. Une action est associée à une carte et concerne un ouplusieurs pions ou une action modifie l’état de plusieurs dalles. En effet, dans le cas où l’action estassociée à une carte de déplacement, un seul pion est concerné (celui qui est déplacé). Dans le casoù l’action est associée à une carte légume, plusieurs pions peuvent être concernés (ceux qui tombentdans un trou). Dans le second cas, l’état des dalles concernées est également impacté. A noter qu’unedalle est identifiée relativement à un chemin par un numéro correspondant à sa place dans le chemin.Un chemin est quant à lui associé à une partie, et une partie ne peut contenir qu’un seul chemin. Pourchaque chemin, nous stockons sa taille (i.e., le nombre de dalles).

    Le jeu comprend des cartes. Une carte est identifiée par son type ’déplacement 1 case’, ’déplacement2 cases’, ’déplacement 3 cases’, ’carotte’, ’chou’ ou ’poireau’. Pour chaque carte, on dispose d’une imagequi permettra de l’afficher dans l’interface graphique. Afin de choisir une carte aléatoirement avec uneprobabilité (fixée précédemment), une pioche est définie et elle est composée de cartes en nombrecorrespondant à leur probabilité.

    2.3 Les pages Web

    L’application est composée de différentes pages dont l’architecture vous est donnée dans l’archive’ressourcesProjet.zip’. Toutes les pages ont en commun d’avoir :— un entête contenant le logo de votre application, le nom de l’application, le nom/prénom ou

    pseudo du joueur s’il est connecté.— un menu contenant les liens hypertextes qui permettent au joueur de naviguer parmi les diffé-

    rentes pages du site.— un pied de page contenant le nom des auteurs de l’application, la licence ’Creative Commons’ et

    un lien hypertexte vers la page Web du site de l’Université Claude Bernard.

    La page ’Accueil’

    Le contenu de cette page s’adapte selon que le joueur soit connecté ou non.

    Dans le cas où le joueur n’est pas connecté, la page permet d’afficher :— un texte (et une image) décrivant brièvement le jeu— un tableau répertoriant le nombre total de personnes inscrites à la plateforme et le nombre de

    parties effectuées depuis un mois.— un formulaire pour pouvoir saisir identifiant et mot de passe pour se connecter.Dans le cas où le joueur est connecté, la page permet d’afficher :

    — un tableau répertoriant le nombre de parties faites depuis un mois et la date de la dernière partie.— la liste des noms de partie en cours sous forme de liens hypertexte sur lequel l’utilisateur peut

    cliquer pour revenir sur une partie interrompue.— un bouton permettant de créer une nouvelle partie.— un message de mise en garde rappelant les risques liés à l’abus de jeu pour la santé (Photosen-

    sibilité/Crises d’épilepsie) et pour sa vie sociale (caractère addictif et isolement).

    La page ’A propos’

    Le contenu de cette page permet d’afficher la règle du jeu, un récapitulatif des cartes qu’il estpossible de tirer, les probabilités associées à chacune des cartes et un descriptif des auteurs...

    6

  • La page ’Statistiques’

    Le contenu de cette page permet d’afficher des statistiques sur les différentes parties réalisées. Cesstatistiques doivent contenir au moins les informations suivantes :

    • Nombre total de personnes inscrites sur la plateforme ;• Nombre total de parties réalisées par le joueur connecté sur les 3 derniers mois ;• Nombre moyen de parties par mois sur les 3 derniers mois qui ont été réalisées par le joueurconnecté ;

    • Nombre de parties gagnées et nombre de parties perdues par le joueur connecté sur les 30 derniersjours

    • Nom et prénom du joueur ayant gagné le plus de parties sur les derniers 30 jours ;• Nombre de joueurs ayant tiré une carte poireau durant le dernier mois ;• Nombre moyen de tours pour les parties terminées ;• La couleur des pions avec lesquels il y a eu le plus de victoires dans le dernier mois ;• Le nombre moyen de pions perdus par partie ;• Les joueurs invaincus qui n’ont jamais perdu une partie ;

    La page ’Partie’

    Le contenu de cette page permet de lister les joueurs inscrits sur la plateforme et de sélectionnerau plus 3 joueurs pour participer à la partie avec l’initiateur de la partie. Une couleur est affectée àchacun des participants. Si aucune couleur n’est affectée manuellement par l’initiateur, l’affectationde la couleur se fait de manière aléatoire par l’application. La validation des membres de la partiepermet d’accéder à la page Jeu.

    La page ’Jeu’

    Figure 3 – Zones

    Le contenu central de la page est décomposé en 8 zones comme représenté sur la figure 3.Les zones J1, J2, J3 et J4 sont réservées pour chacun des joueurs. Si moins de 4 joueurs sont engagésdans la partie, les zones correspondantes sont alors laissées vides. Quand la zone Ji est associée à unjoueur, l’identifiant de celui-ci est alors affiché ainsi que les images des jetons qui ne sont ni sur lechemin ni perdu.La zone E correspond à l’espace de jeu tel que représenté sur la figure 1.

    7

  • La zone P contient la pioche avec une carte retournée (ou une pile de cartes retournées) et une cartedécouverte. La carte découverte correspond à la dernière carte tirée de la pioche. A côté de la carteretournée, le nom ou la couleur du joueur qui a tiré la carte est affiché.La zone S contient les statistiques courantes de la partie. Le classement des joueurs est affiché ainsique le numéro du tour courant. De plus, pour chacune des cartes (’avancement 1 case’, ’avancement 2cases’, ’avancement 3 cases’, ’carotte’, ’chou’, ’poireau’) on affiche le nombre de fois où elle a été tiréedans la partie.La zone C contient les commandes permettant de jouer. La zone contient le nom du joueur courantqui doit jouer. La zone contient un bouton pour tirer une carte. En cliquant sur le bouton ’Tirer’,le joueur affiche une nouvelle carte dans la zone P . La zone C est également modifiée. Un bouton’Activer’ apparaît si la carte tirée est une carte légume. S’il s’agit d’une carte ’avancement’, la zoneaffiche autant de boutons qu’il y a de pions encore disponibles (ceux qui ne sont pas tombés dans untrou). Chaque bouton est nommé ’Avancer Pion i’ pour i = 1, 2, 3, 4 (au fur et à mesure que des pionstomberont dans des trous, leur bouton sera désactivé ou supprimé ). Par exemple, en cliquant sur lebouton ’Avancer Pion 2’, le joueur souhaite que la carte déplacement soit appliquée à son pion 2. S’iln’était pas actif, le pion 2 fait alors son entrée sur le chemin et devient actif. Pour finir, la zone contientégalement un bouton ’Finir Partie’ qui permet de stopper la partie de manière prématurément. Dansce cas, la partie n’a pas de vainqueur.La zone A permet d’afficher les messages informatifs liés au déroulement de la partie. Cette zonepermet d’informer qu’un ou plusieurs joueurs ont perdu un pion suite à l’activation de la carte légume.Dans ce cas, le message " Le joueur a perdu un pion !" s’affiche dans la zone. Dèsqu’un pion arrive au bout du chemin (case salade), la partie est finie (de manière normale et nonprématurée). Dans ce cas, le message " Bravo ! Le joueur a gagné la partie ! "s’affiche dans la zone A. Dès qu’un joueur clique sur le bouton ’Finir Partie’ de la zone C, le message"La partie a été stoppée par apparaît dans la zone A."

    3 JalonsAfin de vous organiser pour réaliser la version de base de ce projet, vous trouverez ci-dessous un

    échéancier des différents jalons que l’on est en droit d’attendre de vous à chaque séance de TP.— TP6 : Modélisation de la base de données. Prise en main des ressources mises à disposition. Mise

    à jour de l’entête et du pied de page. Création de la page ’A propos’— Jalon 1 (début de séance TP7) : Schéma E/A réalisé sous JMerise (ou autre) et arborescence

    des fichiers complétée.— TP7 : Création de la base de données. Implémentation des pions et des cartes. Intégration des

    fonctionnalités d’inscription et de connexion. Création de la page d’accueil en mode déconnectéet connecté.— Jalon 2 (début de séance TP8) : Un joueur doit pouvoir s’inscrire, se connecter et accéder

    à la page partie. Les requêtes liées aux statistiques doivent être définies (sur papier).— TP8 : Configuration d’une partie : sélection des joueurs, affectation d’une couleur, lancement de

    la partie. Affichage des différentes zones de la page Jeu— Jalon 3 (début de séance TP9 - après les vacances de printemps) : Les règles pour chacune

    des cartes doivent être implémentées.— TP9 : (Évaluation intermédiaire) Affichage d’une partie et mise à jour du chemin (au moins

    pour l’avancement des pions).— Jalon 4 : (début de séance TP10) : Mise à jour du chemin pour les cartes légumes tirées.

    Gestion de la fin d’une partie (normale ou abandonnée).— TP10 : Affichage des statistiques. Amélioration du rendu (CSS). Tests et validation du code.

    — Jalon 5 : (Avant le dépôt du projet sur TOMUSS) Ajout de commentaires dans le code(s’il n’y en avait pas suffisamment) et contrôle de leur pertinence. Réalisation des slides deprésentation.

    — TP11 : SOUTENANCE. Vous êtes prêt.e.s pour la soutenance.

    8

  • 4 Spécification de la version avancée de l’application (Version 2)Nous nous plaçons dans le contexte où cette fois les joueurs sont chacun derrière leur ordinateur.

    Cette spécification reprend globalement la spécification précédente avec quelques modifications.

    4.1 Invitation à rejoindre la partie

    Une étape intermédiaire avant de pouvoir lancer la partie est nécessaire. En effet, il est nécessaireque l’utilisateur qui initie la partie invite les joueurs connectés à rejoindre la partie. Il faut donc définirune page qui liste les utilisateurs connectés et non impliqués actuellement dans une partie, qui permetde sélectionner 1 à 3 joueurs pour leur envoyer une invitation et qui permet à l’initiateur de valider lesretours d’invitation. Il faut également permettre aux utilisateurs invités de répondre favorablementou non à l’invitation.

    4.2 Synchronisation des pages

    Comme chaque joueur aura sa propre interface, il est nécessaire de mettre en place des actions desynchronisation des différentes pages à chaque action (tirer carte, activer déplacement, activer recon-figuration du chemin) réalisée par un joueur. Idem pour l’affichage des messages de notification.

    5 Annexe

    5.1 Documentation MySQL et PHP

    Rien de tel que la consultation des docs officielles pour répondre à vos questions !— Documentation de MySQL (et les commandes SQL implémentées dans ce SGBD) :

    — http://dev.mysql.com/doc/refman/5.0/fr/index.html— Documentation de HTML et CSS :

    — https://www.w3schools.com/— Documentation de PHP et index des fonctions de PHP :

    — http://www.php.net/manual/fr/— http://www.php.net/manual/fr/funcref.php

    5.2 Gestion d’une session.

    Afin de garder les informations relatives aux joueurs de la partie en cours il est nécessaire de passerpar des variables de session pour pouvoir conserver les informations d’une page à la page rafraîchie.

    Pour utiliser les sessions, il faut exécuter l’instruction suivante avant d’afficher la moindre chosedans la page PHP, même pas un espace ou un retour à la ligne :

    En fait, l’exécution de cette instruction crée le tableau associatif $_SESSION dont le contenu estsauvé à chaque fin d’exécution d’une page PHP avec session et restauré au moment de l’exécution desession_start().

    Vous pouvez ainsi stocker les informations que vous souhaitez dans $_SESSION. Par exemple,pour stocker la valeur d’un identifiant ’id’ soumis dans un formulaire utilisant la méthode ’POST’dans la variable de session ’idJ1’, il suffit d’écrire :

    Rappel : pour supprimer une session, il faut faire :

    9

    http://dev.mysql.com/doc/refman/5.0/fr/index.htmlhttps://www.w3schools.com/http://www.php.net/manual/fr/http://www.php.net/manual/fr/funcref.php

  • 5.3 Tirage aléatoire dans une table

    Pour le tirage aléatoire d’un tuple dans une table MySQL dont le schéma est P(A,B,C), vouspouvez utiliser la requête suivante :

    SELECT ∗ FROM P ORDER BY RAND() LIMIT 1 ;

    5.4 Gestion de la synchronisation

    Pour pouvoir tenir compte des modifications, les interfaces de chacun des participants vont devoirse rafraîchir pour se synchroniser. Or, il n’est pas possible qu’un joueur déclenche le rafraîchissementdes navigateurs des autres joueurs 2.

    Une solution possible est de lancer périodiquement et automatiquement le rafraîchissement de lapage des participants. Ceci peut se faire par l’ajout dans les méta-données de la page de la balise :

    où NS correspond au nombre de secondes entre deux rafraîchissements.

    Cependant, si vous affectez une valeur trop petite pour NS, votre page se rechargera trop souventet il risque d’y avoir un effet de clignotement désagréable. D’un autre côté, si vous mettez une valeurtrop grande pour NS, la partie risque d’être un peu laborieuse. Il est donc important de bien calibrerla valeur de NS.

    Pour éviter les rafraîchissements intempestifs, il serait nécessaire de déclencher le rafraîchissementdes pages uniquement quand celui-ci est nécessaire. Pour cela, vous pouvez créer une table pour lasynchronisation qui contiendra la liste des participants ainsi que l’état de synchronisation associé.Dans un premier temps, l’état peut être un booléen qui vaudra 1, si la page du participant doit êtrerafraîchie et 0 sinon. Le principe est donc le suivant : pour chaque participant, l’application interrogela table de synchronisation pour savoir s’il doit se rafraîchir. La consultation de la table se fera vial’utilisation de code javascript issu de la librairie JQuery http://jquery.com/

    2. Plus tard, en Master 1 vous verrez l’utilisation de WebSockets qui permettrait de le faire mais ceci dépasse le cadredes enseignements BDW1

    10

    http://jquery.com/

    Informations organisationnellesDescription générale du projetDéroulement du projetLes livrables sur TOMUSS

    La soutenanceNotationGrille d'évaluation des fonctionnalités du projetRessources supplémentaires pour le projet

    Utilisation d'un framework et javascript

    Spécification de la version de base de l'application (Version 1)Règles et principesModélisation de la base de donnéesLes pages Web

    JalonsSpécification de la version avancée de l'application (Version 2)Invitation à rejoindre la partieSynchronisation des pages

    AnnexeDocumentation MySQL et PHPGestion d'une session.Tirage aléatoire dans une tableGestion de la synchronisation