Sommaire Sommaire... 2 1. Objectif de l'application... 3 2. Structure de la base de données... 3 2.1. MCD... 3 2.2. MLD... 4 3. Fonctionnalités implémentées... 5 3.1. Infinite Scroller... 5 3.2. Inscription... 6 3.3. Connexion... 8 3.4. Déconnexion... 8 3.5. Consulter les cartes... 8 3.6. Visualiser les détails d'une carte... 9 3.7. Ajouter une carte au panier... 10 3.8. Modifier les quantités du panier... 11 3.9. Supprimer une carte du panier... 11 3.10. Vider le panier... 11 3.11. Confirmer l'achat et facture... 11 3.12. Erreur 404... 13 1. Objectif de l'application Le but du projet était de créer un site de ventes de cartes pour le jeu de cartes à jouer Hearthstone. Le projet utilise le framework Zend Framework 2 dans lequel se trouve jquery, Ajax et Bootstrap
3.0.3, ainsi qu'une base de données PostgreSQL. L'application a aussi pour rôle de générer un PDF lors de l'achat de cartes. 2. Structure de la base de données 2.1. MCD 2.2. MLD 2
Toutes les tables présentes dans le MLD sont présentes dans la base de données. Toutefois, seule les tables suivantes sont utilisées dans les différentes fonctionnalités du projet : 3
edition classe type_carte rarete carte membre statut reservation_carte achete 3. Fonctionnalités implémentées 3.1. Infinite Scroller Sur la page d'accueil, le membre n'aura que les 8 cartes les plus récemment ajoutées en DB qui seront affichées. Lorsqu'il arrivera en bas de page, une requête Ajax sera appelée pour charger les 8 cartes suivantes, et ce jusqu'à ce que toutes les cartes de la DB soient affichées. Sur les écrans PC, 4 cartes sont affichées par rangée. Sur les écrans tablettes, 2 cartes sont affichées par rangée. Les écrans pour téléphones mobiles ont un affichage différent. Voici les screenshots de ces affichages : 4
Dans le cas où certains utilisateurs n'auraient pas JavaScript activé, un test effectué au début de la page d'accueil permettra de le détecter et donc de les rediriger vers une autre page d'accueil, utilisant un système de pagination pour remplacer l'infinite Scroller : 3.2. Inscription Comme vous avez pu le voir sur les screenshots précédents, un formulaire est affiché en haut à gauche, sous le menu. Sous ce formulaire se trouve un lien «Créer un compte». En cliquant dessus, l'utilisateur est ramené vers une nouvelle page (URL : /utilisateur/signin). Sur cette page se trouve un formulaire d'inscription : 5
Chacun de ces champs possèdent plusieurs critères de validité gérés par les classes de Zend. Le SGBD, quant à lui, permet de vérifier l'unicité du login, du pseudo et de l'adresse e-mail de l'utilisateur. Le login et le pseudo doivent également être différents l'un de l'autre. Si certains champs sont erronés ou manquants, les lignes erronées seront mises en rouge et un message d'erreur sera affiché sur la droite : Une fois l'inscription réussie, un message est affiché à l'utilisateur l'invitant à se connecter : Remarque : le mot de passe est stocké dans la base de données en étant chiffré avec SHA-1. 6
3.3. Connexion Comme dit précédemment, l'utilisateur peut se connecter après son inscription. Toutefois, le formulaire se trouvant en haut de page lui permet de rentrer ses identifiants pour se connecter. Si ses identifiants sont incorrects, il est redirigé vers une nouvelle page contenant un formulaire de connexion et lui affichant un message d'erreur (URL : /utilisateur/connexion) : Une fois connecté, l'utilisateur est redirigé vers la page d'accueil. On peut cette fois constater que le formulaire de connexion n'est plus disponible, et qu'il est remplacé par le pseudo du membre ainsi que son statut (Membre ou Administrateur). Remarque : une fois connecté, si l'utilisateur essaie d'accéder au formulaire d'inscription ou au formulaire de connexion via l'url, il sera automatiquement redirigé vers la page d'accueil. De même, un membre non connecté ne pourra accéder au panier. Toutefois, une fois qu'il sera connecté, l'onglet «Panier» sera ajouté au menu : 3.4. Déconnexion Sous l'affichage de ce pseudonyme, on peut retrouver un lien «Se déconnecter» qui détruira la session de l'utilisateur et réaffichera le formulaire de connexion. 3.5. Consulter les cartes En cliquant sur l'onglet Cartes du menu, on accède à une page similaire à la page d'accueil des utilisateur sans JavaScript activé (notez que l'url n'est pas celle de ce faux accueil!) : 7
Toutefois, si l'on se connecte avec un compte Administrateur, un lien s'affichera sous les numéros de page : Toutefois, ce lien n'est pas utilisable car la fonctionnalité «Ajouter une carte» n'a pas eu le temps d'être implémentée dans le projet. Remarque : l'affichage des cartes, comme pour l'accueil, sera adapté au format de l'écran. 3.6. Visualiser les détails d'une carte Les cartes affichées sur l'accueil ou dans l'index de l'onglet «Cartes» sont toutes cliquables. Cliquer sur l'une d'entre-elles vous ramènera vers une page présentant la carte en détails : Sur PC/Tablette : 8
Sur téléphone: Si l'on y accède en tant qu'administrateur, deux autres boutons seront affichés en bas de la page : Toutefois les fonctionnalités liées à ces boutons n'ont pas eu le temps d'être implémentées. 3.7. Ajouter une carte au panier En cliquant sur le bouton «Ajouter au panier», la carte sera ajoutée au panier et un message s'affichera en base de page : En cliquant sur l'onglet «Panier», on constate que la carte a bien été ajoutée : 9
3.8. Modifier les quantités du panier Après avoir cliqué sur l'onglet «Panier», on peut voir que le champ situé dans la colonne quantité peut être modifié. L'utilisateur peut en effet modifier la quantité de cartes qu'il souhaite acheter. Remarque : il ne peut pas mettre une valeur inférieure ou égale à 0. Une fois qu'il a effectué une modification, il peut la sauvegarder en cliquant le bouton «V» situé juste à droite du champ. Vous constaterez également que le montant total a été recalculé en conséquence : 3.9. Supprimer une carte du panier En cliquant sur la croix situé en fin de ligne, la carte sera supprimée du panier et ne sera plus affichée sur cette page. 3.10. Vider le panier Si l'utilisateur souhaite supprimer toutes les cartes de son panier, il ne doit pas cliquer sur toutes les croix une à une. Il a la possibilité de cliquer sur le bouton «Vider le panier» qui appellera une fonction permettant de supprimer toutes ces cartes de son panier. Remarque : lorsque le panier est vide, l'affichage est le suivant : Vous constaterez que plus aucun bouton n'est disponible sous le tableau récapitulatif. 3.11. Confirmer l'achat et facture Une fois que l'utilisateur est satisfait de son choix, il peut cliquer sur le bouton «Acheter». 10
Remarque : le glyphicon du cochon-tirelire est le glyphicon piggy-bank. La particularité de ce glyphicon dans ce projet est qu'il n'est disponible qu'à partir de la version 3.3 de Bootstrap. Or Zend utilise la version 3.0.3. Il m'aura donc fallu aller modifier les fichiers sources de Bootstrap pour l'ajouter. Une fois que l'on a cliqué sur ce bouton, le panier sera vidé et une nouvelle page s'affichera, récapitulant la facture à l'utilisateur : Le bouton «Imprimer» en bas de page permet de générer un PDF pouvant être enregistré sur la machine de l'utilisateur : 11
3.12. Erreur 404 Lorsque l'utilisateur tentera d'accéder à une URL inexistante, il sera bien entendu redirigé vers une page d'erreur 404, personnalisée en faisant allusion au personnage Link de la saga «The Legend of Zelda» : 12