TP06 : Enigmes et XML

TP06 : Enigmes et XML Le but de ce TP est d’apprendre à utiliser XML avec PHP. Il est composé de 4 parties. La première partie est à effectuer en premier, les parties 2 et 3 sont indépendantes, la partie 4 est à faire en dernier. 1. Classes Enigme* Dans le fichier enigme.inc, vous devez créer une classe Enigme, qui sera utilisé dans tout votre code. Une énigme est composée d’une question, de plusieurs propositions, d’une solution, d’une explication et d’un ID. Les propositions sont elles-­‐mêmes composées d’une clef et d’une valeur, et la solution est une de ces clefs. L’ID n’est pas forcement un nombre. Vous devez donner une méthode de modification et d’accès pour chacun de ces champs. Vous pouvez définir maintenant la classe EngimeParseur qui sert à la lecture et écriture de fichier d’énigmes. Cette classe comporte un constructeur prenant en argument l’url du fichier, et un Bool indiquant si le fichier est local ou distant. La classe possède aussi les champs $dom qui contient l’objet DOMDocument et $web qui contient le Bool du constructeur. Le constructeur de la classe EngimeParseur a le comportement suivant : Si le fichier est distant, alors on l’ouvre. Sinon, si il n’existe pas, on le créé avec son contenu minimal, puis on l’ouvre. Le contenu minimal d’un fichier d’énigmes est le suivant: "<!DOCTYPE enigmes SYSTEM \"enigme.dtd\">\n<enigmes>\n</enigmes>"
Nous définissons maintenant la classe EnigmeAfficheur qui sert à l’affichage des énigmes ainsi que des formulaires de création. Cette classe ne contient aucune méthode, pour le moment. Durant la suite du TP, vos énigmes seront placées dans un fichier « enigme.xml ». Dans le dossier « ~vous/TP5/ », la DTD des fichiers d’énigme est disponible à l’adresse : http://sesame-­‐mips.unice.fr/~pg900439/cours/PWA14/enigme.dtd Vous trouverez un fichier d’énigme minimal au besoin à l’adresse suivante : http://sesame-­‐mips.unice.fr/~pg900439/cours/PWA14/enigmes.xml Un fichier d’énigme est définit de la manière suivante : •
•
•
Une balise <enigmes> qui contient des balises <enigme>. Une balise <enigme> qui contient les balises <question>, <prop>, <explication> et <solution>. Elle contient aussi un attribut id. Une balise <question> contient le texte de la question. •
•
•
Une balise <prop> contient le texte de la proposition, mais aussi un attribut id qui servira à tester si elle est la solution. Une énigme contient 4 propositions. Une balise <explication> qui contient une explication qui sera affiché une fois la réponse donnée. Une balise <solution> qui contient l’id de la bonne proposition. 2. Affichage des énigmes L’affichage d’une énigme se fait en deux étapes : 1. La lecture de l’énigme par la classe EngimeParseur 2. L’affichage de l’énigme par la classe EnigmeAfficheur 2.1.Lecture du fichier enigme.xml La lecture d’un fichier XML se fait par la classe DOMDocument vue en cours. L’objectif de cette question est de créer une méthode getEnigmes(), qui renvoi un tableau contenant toutes les énigmes du fichier. Une énigme est une instance de la classe Enigme. getEnigmes() Cette méthode parcours le document XML, et pour chaque nœud <enigme> elle appelle la fonction : getEngimeForNode($node) Cette méthode renvoi une instance de la classe Enigme, correspondant aux valeurs du nœud donné en argument. 2.2.Affichage d’une énigme La totalité du code d’affichage sera dans une méthode statique affiche($enigme,$reponse=false), dans la classe EnigmeAfficheur. L’affichage a deux états, avant réponse et après réponse. Pour afficher une énigme avant réponse, nous affichons d’abord la question, puis les 4 propositions. Les propositions sont des liens, qui définissent la variable sol en utilisant l’url avec l’id de leur proposition et ils seront contenus dans un container. Le container utilisera CSS 3 et les propriétés de type flex. Le rendu est le suivant : Pour afficher une énigme après réponse, la bonne réponse sera différenciée des autres propositions. Et nous affichons l’explication au dessous. Le rendu est le suivant : Finalement, vos énigmes doivent être affichable dans un block de taille quelconque, et s’afficher en fonction de la taille de celui-­‐ci. 3. Création des énigmes La création d’une énigme se fait en deux étapes : 1. L’affichage du formulaire de l’énigme par la classe EnigmeAfficheur 2. La sauvegarde de l’énigme par la classe EngimeParseur 3.1.Formulaire d’ajout Pour l’affichage du formulaire nous créons une méthode statique afficheFormulaire() dans la classe EnigmeAfficheur. Le formulaire d’ajout doit permettre de remplir la totalité des champs d’une énigme. Vous allez afficher à l’utilisateur un formulaire assez semblable au rendu d’une énigme. Pour cela vous appliquerez les mêmes classes CSS à vos balises de formulaire que celle de l’affichage d’une énigme. Vous rajouterez aussi le bouton valider. Le rendu est le suivant : 3.2.Sauvegarde d’une énigme Le but de cette question et de créer une méthode addEnigme($enigme) à la classe EngimeParseur, qui rajoute une énigme au fichier XML d’énigmes courant. Pour cela vous utiliserez les méthodes createElement, appendChild et setAttribute de la classe DOMElement : http://php.net/manual/fr/class.domelement.php Lors de la sauvegarde, la bonne réponse étant toujours la première proposition, vous devrez mélanger les propositions ainsi que leur générer un id unique. Faites attention à ne pas toujours avoir le même id pour la solution ! De plus, vous devrez vous occuper la gestion du fichier de sauvegarde de l’énigme, et donc générer le bon id pour qu’il soit unique dans le fichier d’énigme. 4. Gestion des parties Vous savez maintenant récupérer des énigmes, les afficher et les sauvegarder. Le but de cette dernière section et de gérer une partie. Pour cela vous allez définir les règles suivantes. •
•
•
•
•
•
La réponse est affichée uniquement dans le cas d’une réponse fausse. Les réponses qui doivent être affichées le sont à la fin de la partie. Une fois la partie finie, le score doit être affiché. Le nombre d’énigmes total, ainsi que le nombre de réponse données doit être indiqué durant la partie. Chaque partie finie sauvegarde son score, l’url de son flux, ainsi que la date de fin. La page d’accueil affiche les scores des anciennes parties, ainsi que la possibilité de rejouer des flux, et d’en jouer de nouveau. Pour réaliser ces fonctionnalités vous utiliserez les méthodes vues en cours et durant ce TP. Vous devez créer une page partie.php qui permet à un utilisateur de choisir un flux d’énigmes et d’y jouer. Le flux par défaut est le flux local. Pour la sauvegarde des scores, justifiez votre choix. Donnez les avantages et inconvénients de celui-­‐ci.