Projet : site web de gestion de jeu

Transcription

1 Projet : site web de gestion de jeu Partie 1 (modélisation et architecture du site) UCBL - Département Informatique de Lyon 1 LIF4 - automne Description générale du projet Le projet est à réaliser en binôme ou individuellement (pas de trinôme). Un binôme signifie deux étudiant-e-s du même groupe de TD. Il porte sur la création d un site Web permettant de gérer des parties de jeu de société. Partie 1 (TP5) Modélisation de la BD, architecture du site Partie 2 (TP6) Ajout de données dans la BD via un formulaire Web Partie 3 (TP7) Générateur aléatoire de parties Partie 4 (TP8) Fonctionnalités supplémentaires Partie 5 (TP9) Cette séance est réservée à une soutenance de 15 à 20 minutes pour évaluer chaque binôme (déroulement d un scénario, explication de code, etc.). Le projet sera à rendre sur Spiral le jour même de votre soutenance (avant minuit) 2 Rendu et notation du projet 2.1 Rendu du projet Ce projet est à rendre avec les consignes de rendu suivantes : Le fichier rendu (un seul par binôme) aura une extension zip et il doit inclure votre/vos noms à la fois dans le nom de fichier et à l intérieur des fichiers Ce fichier zip contiendra 3 fichiers : le répertoire contenant les pages de votre site (code commenté et indenté). Le projet sera évalué avec le navigateur Mozilla Firefox, donc vérifiez le rendu de votre site avec ce navigateur! un fichier.txt qui contiendra le script SQL "exécutable de création de votre base de données un rapport au format pdf, et dont le nom de fichier inclut votre/vos numéros étudiant Ce fichier zip est à rendre le jour de la séance de TP9 avant minuit dans la zone de dépôt Spiral. Tout binôme ne respectant pas ces consignes se verra attribuer la note 0 au rapport, au code et/ou à l ensemble du projet. 2.2 Notation Le projet compte pour 30% dans la note de l UE, et la note de projet se calcule ainsi : note_projet = 1 3 soutenance code rapport De plus, les conditions suivantes s appliquent : Concernant la soutenance : au sein du binôme, la note de soutenance peut être différente pour les 2 étudiant-e-s (contrairement aux notes de code et rapport qui sont identiques) Concernant le code : toute ressemblance trop importante entre des projets sera sanctionnée par un 0 pour la note de code et ce pour chacun des protagonistes Concernant le rapport : il doit être au format PDF, de 8 pages maximum (annexes inclues), organisé, clair, au format A4 et en police de taille 12, et l orthographe sera prise en compte. Il détaillera l état d avancement du projet, les problèmes rencontrés aussi bien au niveau organisationnel (travail en équipe) qu au niveau technique, des réponses argumentées et pertinentes aux questions, et toute information que vous jugerez pertinente de préciser. Le contenu doit nous être instructif, par exemple pour nous permettre de comprendre des choix de conception/programmation, d évaluer des problèmes organisationnels, ou 1

2 d obtenir des critiques constructives sur le sujet de projet. En résumé, il vaut mieux un rapport de 4 pages avec des informations pertinentes plutôt qu un rapport de 8 pages truffé d évidences ou de copier-coller Utilisation d un framework 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 Vous devez vous assurer que votre site fonctionnera sous XAMPP (sans configuration ni installation, excepté la création de la BD) 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. 3 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) : Documentation de PHP et index des fonctions de PHP : Description de la partie "modélisation et architecture" Dans cette première partie du projet, vous allez concevoir la base de données. Ensuite, vous créerez l architecture de votre site Web et deux premières pages (accueil et à propos). 4.1 Conception de la base de données Objectifs de cette étape : Produire le modèle conceptuel (schéma entité/association) à partir des spécifications Produire le modèle logique (modèle Relationnel) Produire le script de création de la base (SQL) Importer ce script dans MySQL (avec l interface PhpMyAdmin) Produire le schéma entité/association Vous êtes libre(s) d utiliser le logiciel de votre choix pour concevoir le schéma entité association, avec le formalisme Merise. Les spécifications de l application Web à réaliser sont les suivantes : Le site Web a pour objectif principal la gestion de parties de jeux de société. En particulier, le site doit permettre de saisir une nouvelle partie, de générer des parties aléatoires, de visualiser des salles de jeux ou joueuses sur une carte et de suggérer des recommandations de jeux. Décrivons tout d abord les joueuses. Celles-ci possèdent un pseudo, un nom, un prénom et une date de naissance. Le pseudo est unique et ne peut plus être modifié une fois choisi. Chaque joueuse possède également une adresse postale, qui inclut la rue, le code postal, la ville, la région. Éventuellement, une adresse postale peut être rattachée à un lieu, qui se définit comme une entité géographique avec un nom et des coordonnées géographiques (latitude et longitude, e.g., et pour la Basilique de Fourvière). Une équipe, qui possède un nom, une date de création et une devise, permet de regrouper au moins deux joueuses pour des jeux en équipe. Il n y a pas de restriction sur le nombre d équipes qu une joueuse peut rejoindre, et on enregistre sa dernière date d arrivée dans l équipe. Une notion cruciale dans ce projet est celle de jeu au sens large, bien que l application doit permettre de gérer obligatoirement les jeux de société (et éventuellement des jeux vidéos, des évènements sportifs). Chaque jeu a un nom, une date de sortie et il est créé par des auteurs. Par contre, c est un éditeur, et un seul, qui se charge de concevoir le jeu. Les jeux sont souvent réservés à un public (selon l âge, e.g., "à partir de 10 ans"). Le jeu 2

3 est également prévu pour un nombre de joueurs donné (e.g., "de 2 à 6 joueurs") et fait partie d une ou plusieurs catégories (e.g., "jeu de plateau", "jeu de rôle", "jeu de dés"). Dans l application, il sera nécessaire de filtrer les jeux, par exemple "liste des jeux de cartes à partir de 7 ans et pour 3 joueurs". Enfin, un jeu peut proposer des extensions (e.g., le jeu "les aventuriers du rail" se déroule initialement aux États-Unis, mais possède une extension pour la Scandinavie, Bretagne, etc.). Chaque nouvelle extension s identifie par un numéro équivalent à son ordre d apparition parmi les extensions de ce jeu. Comme pour un jeu, une extension comporte un nom et une date de sortie. L un des buts de cette application est de stocker des parties, c est à dire les résultats d une joueuse ou équipe à un jeu donné. Une partie possède donc un score, une durée et une valeur indiquant si la joueuse/équipe a gagné. À noter que l on connait aussi la durée moyenne d une partie d un jeu. Une partie se déroule à une date précise et dans un lieu donné, ce qui permettra de rechercher des joueuses par zone géographique. Une même joueuse/équipe peut évidemment jouer au même jeu plusieurs fois par jour. Enfin, des statistiques seront produites sur les parties et les joueuses Produire le modèle Relationnel Selon l outil de modélisation choisi à l étape précédente, il est possible de générer le modèle Relationnel automatiquement, mais il est recommandé de bien vérifier le résultat obtenu et de le modifier si nécessaire. Sinon, la dérivation du MCD vers le MLD se fait à partir des règles énoncées en cours Produire le script SQL de création de la base Selon l outil de modélisation choisi à l étape précédente, il est possible de générer le script de création des tables automatiquement (mais il est recommandé de bien vérifier le résultat obtenu et de le modifier si nécessaire). Sinon, écrivez les requêtes de création de vos tables. Vous inclurez une exportation de votre base de données dans le fichier zip de rendu. Finalement, importez votre script dans la base de données MySQL. 4.2 Architecture du site Objectifs de cette étape : Créer la hiérarchie de fichiers de votre site Structurer les différentes parties d une page (menu, contenu principal, etc.) Personnaliser la page d accueil Personnaliser la page "à propos" Créer la hiérarchie de fichiers Dans le répertoire de XAMPP sur votre clé USB, vous trouverez un sous-répertoire htdocs/. Ce sousrépertoire contient les différents sites qui sont hébergés par votre ordinateur. Pour accéder à l un de ces sites, par exemple, celui dans le sous-répertoire repertoire_de_votre_site, il suffit de taper dans un navigateur (numéro de port variable selon votre configuration) : En tapant cette URL, le navigateur cherche alors à afficher un fichier index.* présent à la racine du sous-répertoire repertoire_de_votre_site. En général, c est le fichier index.html, index.php ou index.asp 1. Créez un nouveau répertoire à l intérieur du répertoire htdocs de XAMPP. C est ici que vous allez stocker les fichiers de votre site. Pour illustrer un exemple, on considère que vous avez créé un répertoire qui a pour nom repertoire_de_votre_site. Pour créer la hiérarchie de fichiers pour votre site, vous pouvez vous référer à la Figure 1. Sur cette figure, les répertoires sont en gras. À la racine de ce répertoire repertoire_de_votre_site, on trouve un fichier index.php, la page d accueil de votre site. On trouve également d autres fichiers PHP qui représentent soit une fonctionnalité proposée par votre application (e.g., ajout avec un formulaire, intégration, recherche) soit une information générale sur l application (e.g., à propos). Vous pouvez dès à présent Figure 1 Hiérarchie du site créer ces fichiers. Concernant les sous-répertoires images et includes, le premier contiendra toutes vos images 1. L extension des fichiers (php, asp, etc.) dépend de la technologie utilisée. 3

4 tandis que le second stockera des fichiers destinés à être utilisés par les fichiers situés à la racine de repertoire_de_votre_site. Parmi ces fichiers utilisés, il y aura un fichier entête, un fichier pied de page, un fichier statistiques et un fichier de style CSS. Créez les répertoires images/ et includes/ ainsi que les fichiers qu ils contiennent. Vous pouvez ajouter d autres répertoires ou fichiers si besoin. Maintenant que la hiérarchie de votre site est réalisée 2, vous allez éditer certains des fichiers créés Structurer les parties d une page La Figure 2 présente deux exemples de maquette 3 pour votre site. Vous pouvez adapter la mise en page/mise en forme, mais on doit retrouver les cinq zones décrites ci-dessous. Les couleurs vives de cette maquette sont utilisées pour faciliter la compréhension, mais ne reflètent en aucun cas les critères esthétiques de vos enseignante-s! Figure 2 Des exemples de maquette pour votre site On distingue cinq zones sur cette maquette : Une entête (fond vert) Un menu (fond vert pour la maquette de gauche ou fond rose pour la maquette de droite) Des statistiques (fond rose ou fond gris selon la maquette) Le contenu de la page (fond jaune) Un pied de page (fond bleu) Les zones entête, menu, pied de page et statistiques sont identiques sur chaque page, aussi leur contenu doit être factorisé dans des fichiers séparés et placés dans le répertoire includes. Ces fichiers seront appelés ensuite dans vos autres pages (recherche, ajout, etc.) en utilisant la commande PHP require ou include. Concernant la mise en forme (couleurs, polices, etc.), vous êtes libre(s) de la personnaliser, sauf indication spécifique. Il est évident que cette mise en forme se fera avec des feuilles CSS. L esthétique est prise en compte lors de la notation, aussi soignez votre site. Détails sur l entête (fond vert) : cette zone contient deux éléments : Le logo (image) de votre site, situé sur la gauche. Vous êtes libres de mettre le logo qui vous convient. Ce logo sert également de lien hypertexte vers la page d accueil de votre site. Au centre, le nom de votre application Web, également libre de choix. Détails sur le menu (fond vert ou fond rose) : la navigation sur votre site se fait au moyen de liens hypertexte. Les libellés de ces liens seront explicites (ne pas mettre "menu1", "menu2"!). Détails sur les statistiques (fond rose ou fond gris) : comme son nom l indique, ce panel contient des statistiques sur la BD. On souhaite des statistiques sur le nombre total de joueuses et de parties selon plusieurs critères : l année, le lieu. Ainsi, si le critère année est choisi, il faudra détailler le nombre de joueuses pour chaque année, et le nombre de parties pour chaque année. L utilisatrice peut changer le critère grâce à une liste 2. Vous pouvez évidemment ajouter de nouveaux fichiers ou de nouveaux répertoires plus tard. 3. Maquettes réalisées avec Pencil, 4

5 déroulante. Bien que la fonction de connexion à la BD ne soit pas encore implémentée, vous pouvez déjà écrire les requêtes SQL nécessaires à la production de ces statistiques. Détails sur la zone pied de page (fond bleu) : cette zone contient trois informations, à savoir un lien vers le site de l université, un second lien vers la page de l UE de LIF4 et enfin l année courante. Détails sur la zone de contenu (fond jaune) : c est à cet endroit que s affichera le contenu. Par exemple, si l utilisatrice demande la page ajout.php, le formulaire d ajout sera affiché dans cette zone de contenu. Les contenus de ces pages spécifiques seront à réaliser lors des prochaines séances de projet. Par défaut, c est la page d accueil (index.php) qui est affichée, et vous allez maintenant y mettre du contenu. 4.3 Personnaliser la page d accueil (index.php) Lorsqu une utilisatrice arrive sur le site par la page index.php, la zone de contenu ne peut pas rester vide : vous allez donc personnaliser cette page. Voici les éléments que l on doit trouver dans sa zone de contenu (fond jaune), libre à vous d en ajouter : Une courte description de l utilité du site Les activités récentes sur le site, par exemple les derniers ajouts ou mises à jour dans la base de données. Ceci requiert une connexion à la BD, que l on verra dans la partie 2, mais vous pouvez déjà écrire les requêtes. 4.4 Personnaliser la page "à propos (apropos.php) Comme pour la page d accueil, la page apropos.php est assez sommaire. Voici les éléments que doit contenir sa zone de contenu (fond jaune), mais vous êtes libres d en ajouter d autres : Vos/votre nom(s) et prénom(s) Une courte explication sur le choix du logo et du nom de votre application Une image de votre MCD Des remerciements ou liens externes si vous avez par exemple utilisé des images ne vous appartenant pas 5 Questions (répondre dans le rapport) Question 0 (optionnelle) : Pour vous détendre (en cas de blocage sur un bug, d engueulade avec votre binôme, etc.), deux concours sont organisés, celui du meilleur nom d application et celui du plus beau logo. Vous insérerez dans le rapport votre nom et/ou votre logo, avec éventuellement une explication. Les deux binômes gagnants remporteront un paquet de chamallows. Soyez créatifs/ves! Question 1 : Insérez votre schéma entité/association ainsi que votre modèle Relationnel (avec une qualité correcte niveau lisibilité!). Décrivez les modifications apportées au schéma E/A lors de la transformation vers le modèle Relationnel (uniquement des modifications non triviales, pas la peine d expliquer les règles de transformation!). Question 2 : Insérez une capture d écran de la page d accueil de votre site. En plus d une description et des activités récentes, quelles autres informations pourriez-vous afficher pour donner envie aux utilisatrices d explorer votre site? Question 3 : Dans les spécifications, il n est pas demandé de modéliser la notion "d adversaire". Autrement dit, on sait qu une joueuse ou une équipe a gagné ou perdu une partie, mais on ignore contre qui. Est-ce tout de même possible de connaître les participantes d une partie? Que faudrait-il modifier dans votre schéma E/A pour modéliser correctement cette notion d adversaire? 5