Devoir/projet/TP fil rouge

2023-2024

La moitié de la note pour le module « Programmation d'applications web avancées » est un DM/projet commencé lors des TP 09 et 10. (L'autre moitié est un TP noté qui aura lieu le 4 décembre.)

Il est question de construire incrémentalement un site web conformément à l'architecture présentée en cours. Le résultat de ce « TP fil rouge », auquel on vous demandera d'ajouter des compléments (voir plus bas), constituera votre DM/projet, et est à faire en binôme. Sauf cas exceptionnels, les binômes sont à former au sein des groupes de TP (notamment car les oraux sont organisés par groupe, et les corrections sont faites par les chargé·es de TP).

Le travail correspondant à l'énoncé des TP est à faire en binôme. On vous demande également un complément par étudiant·e, à faire individuellement. (NB: si vous n'avez pas de binôme, il n'est pas attendu que vous rendiez deux compléments.)

Votre rendu fera l'objet d'un oral obligatoire très court (une dizaine de minutes), visant à nous assurer que vous avez compris ce que vous avez rendu. Chaque étudiant·e sera interrogé·e en particulier sur « son » complément.

Compléments

Voilà les deux compléments que chaque binôme doit réaliser. Attention, encore une fois, chaque complément doit être réalisé individuellement : il faut donc s'accorder sur qui fait quoi au sein du binôme, et la répartition devra être explicitée dans le README sur le dépôt Git. Cependant il doit bien y avoir un seul rendu final, dans lequel les deux compléments devront être présents ensemble. NB: si vous n'avez pas de binôme, on attend un seul complément.

NB: le 2e complément est plus long à décrire mais pas plus long ou difficile que le premier. Les deux compléments se veulent équilibrés.

[Complément 1] Implémenter la modification et la suppression d'un animal

Une fois qu'on a fait la création, la modification est assez directe. Il est bien sûr attendu que soient suivis les principes utilisés pour la création (utilisation d'un AnimalBuilder, redirection après POST, feedback). On utilisera des actions modifier et sauverModification dans l'URL. (Attention, contrairement à la création, l'URL devra aussi contenir l'identifiant de l'animal en question.)

Pour la suppression, comme expliqué en cours, il faut faire une page de confirmation de suppression, accessible en GET (action supprimer), contenant un bouton de confirmation qui envoie une requête POST (action confirmerSuppression). Il faudra prendre soin d'implémenter correctement une redirection après POST avec un feedback.

NB: on ajoutera des liens « modifier » et « supprimer » sur la page de chaque animal.

[Complément 2] Ajax-ifier la liste des animaux

On voudrait rendre la page avec la liste des animaux un peu plus interactive : à côté de chaque nom d'animal, il devra y avoir un bouton « Détails », qui fait apparaître plus de détails sur l'animal sans changer de page. Oui, cette fonctionnalité fait complètement doublon avec la « vraie » page de chaque animal. Ce n'est qu'un exercice. Vous pouvez imaginer que la page complète contient beaucoup plus d'informations.

Plus précisément, pour implémenter cela, on vous demande les choses suivantes.

Première étape : mini-API

Le routeur doit reconnaître les URL de la forme site.php?action=json&id=42 (avec 42 remplacé par un identifiant d'animal).
La méthode correspondante du contrôleur doit préparer une vue qui renvoie une représentation JSON de l'animal de la forme suivante :
```
{
 "nom": "Médor",
 "espece": "chien",
 "age": 23
}
```
Cette représentation JSON doit être généré par une nouvelle classe de vue (notre classe View est spécialisée pour générer du HTML, or ce n'est pas ce qu'on veut ici). Il faudra donc que le contrôleur choisisse quelle vue instancier en fonction de l'URL.

Deuxième étape : Ajax

Il faut ensuite ajouter du JavaScript au site, afin que la liste se comporte comme suit :

À côté de chaque nom d'animal, il faut qu'il y ait un bouton « Détails ».
Cliquer sur le bouton doit lancer une requête XHR vers l'URL site.php?action=json&id=42 (avec 42 remplacé par l'identifiant de l'animal en question).
La page doit utiliser ce JSON pour afficher l'espèce et l'âge de l'animal sous son nom.
Par ailleurs, après le clic, le texte du bouton doit être « Cacher les détails », et cliquer dessus à nouveau doit revenir à l'état initial (les détails doivent être cachés, le bouton doit afficher « Détails » et réagir à nouveau au clic par une requête XHR).

Barème indicatif

TP 09 : 6 points
TP 10 : 7 points
Complément : 7 points (note individuelle)

Vous pouvez avoir un bonus jusqu'à 2 points si vous implémentez (proprement) les URL avec PATH_INFO (partie optionnelle à la fin du TP09).

Contraintes techniques

Le non-respect des contraintes ci-dessous entraînera des pénalités pouvant aller jusqu'à annuler la note.

Les pages générées devront être valides HTML5 selon le validateur du W3C (« Validate by URI » devrait fonctionner).
Le site devra être sécurisé contre les attaques de type XSS (cross-site scripting), comme expliqué en cours.
Les contraintes de rendu ci-dessous doivent être respectées.

Rendu

Pour que votre travail soit considéré comme rendu, vous devez remplir les trois conditions suivantes :

Vous devez avoir pushé tout votre travail sur le dépôt Git créé pour votre binôme sur le gitlab unicaen
Votre site doit être déployé sur le serveur dev-LOGIN.users.info.unicaen.fr d'un des membres du binôme ; l'URL doit être présente dans le README sur le dépôt Git.
Un·e des membres du binôme doit déposer une archive .zip contenant le répertoire exoMVCR sur ecampus, au plus tard une heure avant le début des oraux de votre groupe de TP. Cette archive fera foi en cas de doute. Le nom de la personne ayant effectué le dépôt doit être précisé dans le README sur le dépôt Git.

Précisions sur le dépôt Git

Les énoncés des TP 09 et 10 indiquaient de faire des commits à plusieurs endroits. On s'attend à retrouver ces commits dans l'historique de votre dépôt. Dans le cas contraire vous serez pénalisé·es. NB: si vous avez déjà suivi l'unité l'an passé, vous devez refaire l'exercice.

Par ailleurs, il faudra au minimum un commit par complément. N'oubliez pas de pusher vos modifications vers le dépôt distant, et de puller régulièrement.

Récapitulatif du contenu du README sur le dépôt Git :

les noms, numéros étudiants et logins des membres du binôme, avec la répartition des compléments (qui a fait quoi)
l'URL du site déployé sur le serveur d'un·e des membres
le nom de l'étudiant·e qui a déposé le .zip sur ecampus

Planning des oraux

Groupes 1A et 1B : vendredi 1er décembre 9h en S1-128
Groupes 2A et 2B : jeudi 30 novembre après-midi (à préciser)
Groupe 3A : jeudi 30 novembre après-midi (à préciser)
Groupe 3B : mercredi 29 novembre après-midi (à préciser)
Groupe 4A : vendredi 1er décembre 14h en S1-127
Groupe 4B : mercredi 29 novembre après-midi (à préciser)