Examen sur machine — Session 1.1

Exercice 1: PHP

Exercice noté sur 13

Le répertoire exo1 contient l'architecture d'un site très simple : il s'agit d'un pseudo-forum. On peut le voir en action ici. Il suit les principes présentés en cours, sauf que la « base de données » est un simple tableau stocké en session (c'est-à-dire que chaque internaute ne voit que ses propres commentaires !). Au démarrage, le tableau contient deux commentaires (toujours les mêmes).

Une partie du code a été enlevée (des exceptions « not yet implemented » sont lancées à la place) : il manque la méthode de la vue permettant d'afficher le fil des commentaires, et les méthodes du contrôleur et de la vue qui concernent l'ajout d'un nouveau commentaire. NB : rien n'a été supprimé dans le routeur, vous n'avez pas besoin de le modifier a priori (mais ce n'est pas interdit). NB² : vous disposez d'une classe CommBuilder, dont rien n'a été supprimé non plus.

1. Regarder les classes fournies et s'assurer de comprendre comment ça marche. (NB : il n'y a pas d'action permettant d'afficher un commentaire seul.)
2. Implémenter la méthode makeListPage de la vue pour qu'elle affiche la liste des commentaires (optionnel : on la fera s'afficher de bas en haut), ainsi qu'un lien vers la page d'ajout de commentaire.
3. Faire en sorte que le contrôleur appelle la méthode makeCommCreationPage de la vue lorsque l'utilisateur veut ajouter un nouveau commentaire.
4. Implémenter l'enregistrement d'un nouveau commentaire dans la base.
5. Si ce n'est déjà fait, gérer les données invalides : l'auteur ne doit pas être vide, et on obligera chaque commentaire à avoir une longueur minimale de 10 caractères.
6. Si ce n'est déjà fait, gérer la redirection après une requête POST, et le feedback associé.
7. Si ce n'est déjà fait, faire en sorte que soumettre un commentaire invalide ne remette pas les champs du formulaire à zéro, mais les laisse en l'état.

Exercice 2 : JavaScript

Exercice noté sur 7

On vous fournit un service qui renvoie une URL aléatoire d'image :

Essayez-le : en copiant l'URL fournie par le service dans la barre d'adresse du navigateur, vous devriez voir une image. Les images sont utilisables librement, elles proviennent du site PublicDomainPictures.net.

Dans cet exercice, on utilise ce service pour construire une galerie d'images aléatoire, dont les images changent au survol de la souris.

Le répertoire exo2 de l'archive contient un fichier HTML, et un fichier JS (presque) vide. Vous ne devez modifier que le fichier JS.

1. Faire en sorte qu'au clic sur le bouton, une requête soit faite vers le service. Dans un premier temps, afficher simplement l'URL reçue dans la console.
2. Modifier le code pour que suite à la requête, l'image correspondant à l'URL reçue soit ajoutée dans la galerie (il suffit de créer un élément img et l'ajouter comme fils de l'élément d'identifiant galerie). Le résultat devrait ressembler à la figure suivante.

   

3. Rendons maintenant la galerie dynamique ! Faire en sorte que lorsque la souris sort d'une image, son URL change aléatoirement (il faudra faire une nouvelle requête au service). NB : il ne se passe rien lorsque la souris survole l'image — seulement lorsqu'elle en sort.
4. Rendons maintenant la galerie moins dynamique ! Faire en sorte que lorsqu'on clique sur une image, elle devienne fixée, c'est-à-dire que son URL ne change plus. On utilisera la classe fixed prévue dans le CSS, pour qu'on puisse repérer quelles images sont fixées (leur opacité est réduite).