.. ================================================== .. FOR YOUR INFORMATION .. -------------------------------------------------- .. -*- coding: utf-8 -*- with BOM. ======================================= Fil rouge - Surnom dans les jeux vidéos ======================================= Il s’agit de mettre en place une petite application permettant de recenser les surnoms dans les jeux vidéos. Les entités à gérer (de manière simple) sont : * Les jeux vidéos * Les pseudos * Les utilisateurs (pour la connexion) Un jeu vidéo (groupe dont dépend les pseudos) a un nom pour seule information. Un-e pseudo a les informations suivantes : * un pseudo * un genre pour indiquer s’il s’agit d’une femme, d’un homme (valeurs possibles w (woman), m (man), o (other)) * une origine (texte qui définit pourquoi il a choisi ce pseudo) * une date (qui permet de revoir depuis combien de temps, il utilise ce pseudo) Un-e utilisateur-trice a les informations suivantes : * un login * un mot de passe * un droit administrateur **Base de données** =================== La première étape consiste à réaliser la base de données. Le modèle vous est fourni, il faut contrôler qu'il réponde aux exigences du dessus et aux normes du CPNV. :download:`Téléchargement du fichier SQL ` La base de données sera accessible pour l'utilisateur suivant: * Utilisateur: dbPseudoUser * Mot de passe : ******* (fourni par votre enseignant) Donc, vous devez créer dans phpMyAdmin un utilisateur pour la base de données. Cette dernière se nommera **db_pseudo_**. Remplacer le par votre prénom. Créer votre base de données et y ajouter 2 pseudos et 2 jeux vidéos. **Arborescence** ---------------- Mettre en place l'arborescence du site des pseudos en utilisant le modèle MVC. **Convention** -------------- Les normes de codage du CPNV doivent être utilisée. **Page d'accueil** =================== Créer la première page du site en la plaçant correctement dans l’arborescence. Elle se nommera index.php. .. image:: Images/index.png :height: 527px :width: 898px :scale: 90% :alt: Page d'accueil de l'application des pseudos :align: center Cette page est faite avec du html et doit être validée W3C. L'utilisation du CSS est optionnel. Pour l'instant, les données sont insérées de manière statique. Données dynamiques ------------------ Une fois que la page est prête, l'étape suivante consiste à récupérer les données de la base de données MySQL et de les insérer à la place des textes statiques. Création d'une classe pour gérer la BD -------------------------------------- Pour l'instant, les données sont traitées et affichées directement dans la page d'accueil. Mais, nous allons créer plusieurs pages avec des liaisons à la BD. A terme, nous ne voulons pas recopier toujours les mêmes instructions. De ce fait, nous allons créer une classe afin de regrouper les méthodes nécessaires à nos requêtes. :download:`Téléchargement du fichier Database ` Nom de la classe : Database Méthodes contenues : * __construct() : créer un nouvel objet PDO et se connecter à la BD * querySimpleExecute($query) : permet de préparer et d'exécuter une requête de type simple (sans where) * queryPrepareExecute($query, $binds) : permet de préparer, de binder et d'exécuter une requête (select avec where ou insert, update et delete) * formatData($req) : traiter les données pour les retourner par exemple en tableau associatif (avec PDO::FETCH_ASSOC) * unsetData($req) : vide le jeu d'enregistrement * getAllPseudos() : récupère la liste de tous les pseudos de la BD * getOnePseudo($id) : récupère la liste des informations pour 1 pseudo * ... + tous les autres méthodes dont vous aurez besoin pour la suite (insertPseudo ... etc) Externalisation des informations de la BD ----------------------------------------- Vous avez stocké les accès à la BD en "dur" dans la classe. Cette pratique implique que celui qui veut l'utiliser devra changer les informations d'accès. Normalement, une classe ne doit pas être modifiée par celui qui l'utilise. De ce fait, vous allez créer un fichier de configuration qui contiendra les données d'accès à la BD. Ce fichier se nomme config.php. **Page de détail d'un pseudo** ================================== Depuis la page d'accueil, en cliquant sur la loupe (détail) d'un pseudo, un lien nous amène sur la fiche détaillée du pseudo. Dans un premier temps, sur la page d'accueil, le lien doit être ajouté pour chaque pseudo avec l'information de son id. Exemple si le pseudo a l'ID 17, mon lien sera : .. code-block:: html Détail Ensuite, il faut créer la page detail.php et récupérer l'id du pseudo, en utilisant $_GET, puis d'afficher les informations selon le mockup fourni. .. image:: Images/detail.png :height: 527px :width: 898px :scale: 90% :alt: Détail d'un pseudo :align: center **Insertion d'un pseudo** ============================= Créer une page addPseudo.php qui contiendra un formulaire avec les mêmes champs que sur la maquette. .. image:: Images/insertion.png :height: 562px :width: 898px :scale: 90% :alt: Insertion d'un pseudo :align: center Un lien "Retour à la page d'accueil" doit être présent et fonctionnel. Le bouton "Annuler" permet de vider tous les champs. Le bouton "Ajouter" permet de contrôler les champs et si tout est ok, une insertion du pseudo dans la BD est effectuée. Ensuite, on retourne sur la page d'accueil. **Modification d'un pseudo** ================================ Créer une page updatePseudo.php qui contiendra un formulaire avec les mêmes champs que sur la maquette. Les champs sont remplis avec les informations de la BD. Afin de reprendre le bon pseudo, il faut passer l'id du pseudo via URL. .. image:: Images/modifier.png :height: 562px :width: 898px :scale: 90% :alt: Modification d'un pseudo :align: center Un lien "Retour à la page d'accueil" doit être présent et fonctionnel. Le bouton "Modifier" permet de contrôler les champs et si tout est ok, une modification du pseudo dans la BD est effectuée. Ensuite, on retourne sur la page d'accueil. **Suppression d'un pseudo** =============================== En cliquant sur la corbeille, il est possible de supprimer le pseudo voulu, mais seulement après confirmation. A quoi faut-il faire attention lors de la suppression ? Pour la confirmation, utiliser JavaScript et la méthode confirm(). .. image:: Images/suppression.png :height: 527px :width: 898px :scale: 90% :alt: Suppression d'un pseudo :align: center **Ajout de la connexion** ========================= Ajouter les champs nécessaires pour la connexion (Login, Mot de passe et Se connecter). En cas de non-connexion, rien n'est visible sauf la page d'accueil. .. image:: Images/connexion.png :height: 527px :width: 898px :scale: 90% :alt: Connexion :align: center Si on se connecte avec un droit utilisateur, il est possible de visualiser la page d'accueil et la page de détail d'un pseudo uniquement. Les autres pages ne sont pas accessibles. .. image:: Images/connecteruser.png :height: 527px :width: 898px :scale: 90% :alt: Connecté en tant que User :align: center Si on se connecte avec un droit admin, il est possible de tout visualiser et d'utiliser les fonctionnalités. .. image:: Images/connecteradmin.png :height: 527px :width: 898px :scale: 90% :alt: Connecté en tant que Admin :align: center