Magic Store
Le but de ce TP va être de créer un "magasin" (store) de carte Magic permettant aux visiteurs de regarder
(browse) les cartes disponibles, et aux clients (connectés) de sélectionner des cartes pour les mettre dans
leur panier (cart).
Version 1
Dans cette 1ère version, vous allez vous focaliser sur les bases du site avec une page d'accueil (index)
et une page de "visite" simple (browse) des cartes du magasin.
Magic Store V1 :
cliquez sur "agrandir" pour mieux voir ---------------------->
Version 2
La 2ème version du site permet à un utilisateur de se logger/dé-logger.
Pour simplifier nous n'aurons ici qu'un seul utilisateur dont les informations de connexion
seront inscrites en dur dans le code PHP
(login: gandalf, pwd: youshallnotpass).
-
Créez une page
login.php à laquelle on accède en cliquant sur login.
La page login.php utilise la classe magic\Logger
(une adaptation du
JarvisLogger).
-
La page
login.php s'appelle en boucle tant que le login/pwd n'est pas
bon.
(en affichant un message d'erreur au besoin).
-
Lorsque l'utilisateur (gandalf) est correctement authentifié :
-
login.php stocke les informations de session (le 'login') et
redirige automatiquement
l'utilisateur vers index.php dans lequel le message a évolué
(on affiche maintenant en plus le "Hi login")
-
Le bouton Browse est remplacé par un bouton Shop qui mène à la page
shop.php (très simple pour l'instant).
-
le bouton login est remplacé par un menu
(Bootstrap)
qui affiche le login, et qui permet de se déconnecter avec
logout : appelle le script
logout.php.
-
Le script
logout.php détruit la session de l'utilisateur et le
redirige automatiquement
vers index.php.
Magic Store V2 :
cliquez sur "agrandir" pour mieux voir ---------------------->
Version 3
La 3ème version du site n'est "visible" que lorsque l'utilisateur est connecté.
Dans cette version, on rend fonctionnel le magasin et on ajoute un panier permettant à l'utilisateur
de voir la liste des cartes qu'il a sélectionnées.
-
Étoffez
shop.php avec la classe
magic\Shop
(similaire à magic\Browser) qui possède :
-
un constructeur qui charge
data/cards.json
-
la méthode
generateShop() qui génère le form de sélection des
cartes (chaque carte est associée à un input de type checkbox,
la value de chaque input correspond à l'id de la
carte associée)
-
Le formulaire est soumis (méthode POST) en cliquant sur Add to Cart ce qui déclenche
l'action
add_to_cart.php
-
L'action
add_to_cart.php utilise
la classe magic\Cart (cf. ci-dessous) en faisant appel à sa méthode add(array $selection)
(la selection correspond aux cartes reçues du formulaire dans $_POST),
puis
redirige automatiquement
l'utilisateur vers la page cart.php.
-
La page
cart.php utilise la classe magic\Cart en faisant appel à sa
méthode render pour afficher le contenu du panier. La page cart.php
peut (aussi)
être affichée en cliquant sur le nouvel icône ajouté à gauche du login.
-
La classe
magic\Cart possède :
-
un attribut
$content qui représente le contenu du panier sous la forme d'un
array avec des paires clé/valeur : les clés correspondent
aux id des cartes qui ont été ajoutées au panier,
les valeurs correspondent au nombre de fois où une carte a été ajoutée au panier.
-
la méthode
add(array $selection): void (appelée dans l'action
add_to_cart.php)
qui stocke les cartes des la $selection
dans $content, et enregistre $content dans les informations
de session (dans la variable $_SESSION['cart']).
- un constructeur qui charge le contenu de
$_SESSION['cart'] dans
l'attribut $content (ré-initialise le panier avec la session).
-
la méthode
render():void qui génère une représentation du panier : chaque
carte apparait avec son 'total'. Le coût du panier est calculé dynamiquement
par un Javascript en considérant que chaque carte vaut 0,25$.
Magic Store V3 :
cliquez sur "agrandir" pour mieux voir ---------------------->
Version 4
La 4ème version du site permet d'éditer le panier.
-
Le panier généré par
render est maintenant un form avec une méthode POST
qui appelle l'action update_cart.php.
-
Le nombre associé à chaque carte du panier est un
input.
Pour avoir les bonnes informations dans $_POST,
le name de chaque input correspond à l'id de la carte,
et la value au nombre d'exemplaires de cette carte.
-
Quand l'utilisateur change
un des
input, le montant total du panier est mis à jour et le bouton
(submit du formulaire) nommé UPDATE CART apparait : le tout en Javascript.
-
L'action
update_cart.php appelle une nouvelle méthode de magic\Cart nommée
update(array $cart): void qui met à jour son attribut $content
et la variable de session $_SESSION['cart']cart.php.
Magic Store V4 :
cliquez sur "agrandir" pour mieux voir ---------------------->
Corrections
Les corrections se trouvent
ICI
Pour tester une version, je vous conseille d'utiliser une console,
de vous mettre dans le dossier de la version que vous voulez tester,
et de lancer un serveur Web local avec php -S localhost:8080.
