Examen sur machine — Session 1.2

Exercice 1: PHP

Exercice noté sur 13

Le répertoire exo1 contient un fichier formulaire.frg.html avec un formulaire HTML listant des produits qu'il est possible d'ajouter à son panier. Vous devez utiliser ce fichier, mais vous ne devez pas le modifier. Attention, cet exercice doit être fait sans JavaScript.

L'exercice consiste à créer la page qui utilise ce formulaire et à implémenter la gestion du panier. Rendre un code propre et bien organisé est évidemment important, mais la priorité est que ça fonctionne. NB : ce n'est pas un exercice d'application de l'architecture MVCR. Noter aussi que la validation des données est facultative (mais des efforts en ce sens seront appréciés).

1. Effacer le contenu actuel du script index.php après vous être assuré·e que le serveur fonctionne. Écrire à la place le code permettant d'afficher une page HTML très simple contenant un titre, un message type « Bienvenue », et le formulaire.
2. Lorsque l'internaute clique sur le bouton d'ajout (pas avant), la page résultante ne doit plus afficher le message initial, mais à la place un message du type « Dernier produit ajouté au panier : Brosse à dents ». Ce message doit bien sûr être actualisé à chaque nouvel ajout de l'internaute.
3. Faire en sorte que le site affiche en permanence le panier de l'internaute, c'est-à-dire la liste de tous les produits ajoutés au panier lors de cette session de navigation, avec leurs quantités.
4. Implémenter le bouton « Vider le panier », qui remet tout à zéro. Attention, le message affiché devra à nouveau être le message de bienvenue.
5. Renvoyer du contenu suite à une requête POST n'est pas très propre (actualiser la page provoque un message d'avertissement du navigateur). Mettre en place un POST-redirect-GET comme expliqué dans le cours, c'est-à-dire que suite à une requête POST le site ne renvoie pas de HTML, mais une redirection « 303 See Other » vers la page elle-même. (Rappel : $_SERVER['REQUEST_METHOD'] contient la méthode HTTP utilisée dans la requête.) Vérifier ensuite que l'actualisation de la page après avoir cliqué sur un bouton ne provoque plus de message d'avertissement.
6. Ajouter un feedback du genre « Produit bien ajouté » et « Panier vidé » lors des actions. Ce feedback doit uniquement être affiché juste après l'action concernée : en particulier, il doit disparaître si on actualise la page.

Exercice 2 : JavaScript

Exercice noté sur 7

Cet exercice vise à implémenter un fil de discussion.

On met à votre disposition un service qui renvoie des messages au format JSON :

https://ensweb.users.info.unicaen.fr/messages/

Les messages sont générés aléatoirement de temps en temps, pour simuler une discussion entre internautes. Chaque message est identifié par son numéro : les messages plus récents ont donc un identifiant plus grand).

Le service renvoie un tableau contenant les derniers messages ajoutés. Les messages sont des objets ayant les attributs suivants : author, text, id (un entier qui est le numéro du message), et timestamp (un entier qui est le timestamp unix en millisecondes, c'est-à-dire le nombre de millisecondes écoulées depuis le 1er janvier 1970).

NB : les nouveaux messages sont ajoutés aléatoirement. Il se peut tout à fait qu'entre deux appels au service, aucun nouveau message ne soit arrivé, auquel cas vous récupérerez le même résultat.

Parmi les fichiers du répertoire exo2 se trouvent index.html, screen.css et client.js ; on ne modifiera que le JS.

1. Faire en sorte que lorsqu'on clique sur le bouton, le script fasse un appel au service, et affiche le résultat dans la console (pour l'instant).
2. Au lieu d'afficher les messages dans la console, faire en sorte que cliquer sur le bouton insère dans la page les noms des auteurs des messages récupérés, sous forme de li dans le ul d'identifiant discu.
3. Ajouter dans chaque li la date du message (grâce à la fonction timestamp_to_date fournie), ainsi que le texte. On utilisera les classes author, date et text pour la mise en forme. NB : cliquer plusieurs fois sur le bouton peut générer des doublons : on ne s'en préoccupe pas pour l'instant.
4. Faire en sorte que le texte des messages soit initialement caché, en ajoutant la classe folded à tous les items de la liste.
5. Faire en sorte que passer la souris sur un message fasse apparaître son texte. Attention, le texte ne doit pas disparaître ensuite lorsque la souris sort du message.
6. Faire en sorte qu'un appui sur le caractère F du clavier referme tous les messages.
7. Gérer maintenant les doublons lors du clic sur le bouton de récupération : seuls les messages vraiment nouveaux doivent être ajoutés dans la page. Pour rappel, les identifiants des messages sont chronologiques.
8. Optionnel : faire en sorte que les nouveaux messages soient ajoutés automatiquement à la page, sans clic sur le bouton, toutes les 10 secondes.