Développement d'applications web : séance 9 - TP noté
Objectif du TP (durée : 1h30)
L’objectif du TP est de produire un frontend en ionic s’appuyant sur Angular 19 pour un site de e-commerce contenant une page d’accueil ainsi qu’une page détaillant les achats d’un produit donné. Les exercices ci-dessous précisent comment construire ces deux pages.
Règle
Pour soumettre votre TP, vous devez créer une archive ZIP ou TGZ (une archive tar gz) contenant le backend. Comme pour les séances notées précédentes, déplacez le répertoire node_modules en dehors de votre backend avant de l’archiver.
Exercice 1 : La page d'accueil 
La page d’accueil a l’aspect ci-dessous, c’est-à-dire qu’elle affiche dans des <ion-card> les produits du site. Afin que ceux-ci s’affichent sur plusieurs colonnes, chaque <ion-card> est placée à l’intérieur d’un <ion-col></ion-col> et tous ces <ion-col> sont contenus dans une unique <ion-row>, elle-même contenue dans une <ion-grid> (cf. la documentation de Ionic).
La liste des produits est téléchargée via un post à partir de l’URL ci-dessous (sans passer d’information au $_POST) :
https://christophe-gonzales.pedaweb.univ-amu.fr/extranet/backend/getProduits.php
Le message retourné par ce backend est au format PhpData vu en TP. Utilisez postman
pour voir à quoi il ressemble.
Chaque <ion-card> possède deux boutons : « Détails » et « Voir achats ». Dans cet exercice, on se content de les afficher mais ceux-ci ne font rien.
Développez un frontend Ionic qui répond à l’énoncé ci-dessus. Celui-ci s’appuiera sur la version 19 d’Angular.
Le code permettant d’afficher un produit, c’est-à-dire la <ion-card> et
tout ce qu’elle contient, doit se trouver, non pas dans la page d’accueil, mais dans
un composant ProductComponent.
Exercice 2 : Le bouton « détails »
Lorsque l’on clique sur le bouton « Détails », cela ouvre une alerte qui indique le stock du produit correspondant, comme le montre l’image ci-dessous :
Écrivez le code permettant d’afficher cette alerte.
Exercice 3 : Le bouton « Voir achats »
Lorsque l’on clique sur le bouton « Voir achats », cela redirige l’utilisateur vers une page dédiée aux achats, qui a l’aspect suivant :
Ces informations sont affichées dans une <ion-list>. Lorsqu’aucun produit n’a été acheté, la page n’affiche que le message « Aucun produit acheté ». Les informations concernant les achats sont récupérées via un post à partir de l’url ci-dessous, en passant au format FormData un couple (clef,valeur) dont la clef est reference et la valeur la référence du produit.
https://christophe-gonzales.pedaweb.univ-amu.fr/extranet/backend/getAchats.php
En haut à droite de la page, vous noterez qu’il y a un bouton permettant de
revenir à la page précédente (la page d’accueil).
Écrivez en Ionic la page des achats de cette application de e-commerce.