TP noté

Première partie : JavaScript

On met à votre disposition un service messages.php de messages au format HTML. 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).

Par défaut, le service renvoie une page HTML contenant les derniers messages ajoutés, dans l'ordre chronologique inverse. Chaque message est dans un élément li avec un attribut data-msg-id qui contient son identifiant.

On peut paramétrer dans l'URL du service quels messages sont affichés :

• avec after=123, le service renvoie tous les messages d'identifiant strictement supérieur à 123 (donc plus récents que le 123e message) ;
• on peut récupérer les messages d'identifiants compris entre 456 (inclus) et 789 (exclus) en précisant les deux paramètres start=456 et end=789.

Tester un peu le service à la main (en modifiant l'URL) pour vérifier que vous avez bien compris. Notez que les identifiants commencent à 1, mais que les paramètres d'URL acceptent des identifiants négatifs ou trop grands sans erreur.

Dans la deuxième partie, vous coderez votre propre service messages.php, mais pour l'instant on ne s'intéresse qu'à la partie client. Parmi les fichiers du répertoire exo2 se trouvent index.html, screen.css et client.js ; on ne modifiera que le JS dans cette partie.

1. Faire en sorte que dès l'affichage de index.html, le script appelle le service et insère les derniers messages dans la page (dans le ul d'identifiant discu). Remarque : si vous récupérez un Document en Ajax, il possède les mêmes méthodes que la variable document habituelle.
2. Ajouter un bouton « Afficher plus de messages » sous la liste, et faire en sorte qu'un clic dessus fasse appel au service pour ajouter à la liste les 5 messages qui précèdent le plus ancien.
3. En utilisant la fonction setInterval (qui permet d'appeler une fonction à intervalles réguliers) faire en sorte que la page vérifie à chaque seconde s'il y a des nouveaux messages sur le serveur, et les affiche en haut de la liste (en respectant toujours l'ordre chronologique inverse).

Deuxième partie : PHP

Dans cette partie, on implémente le service messages.php qui vous était fourni dans la partie précédente, et on permet aux internautes d'ajouter leurs propres messages. Un code propre et bien organisé sera évidemment préféré, 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).

On vous donne (dans le répertoire exo2) la classe Message, qui représente un message, et la classe MessageStorage, qui utilise un fichier pour stocker les messages de façon (quasi-)persistante. Regardez un peu quelles méthodes sont disponibles (vous n'avez pas besoin de comprendre comment la classe fonctionne). Si le fichier de stockage n'existe pas, il sera créé et rempli avec quelques messages.

Dans cette partie, on ne modifiera que les fichiers (vides) messages.php et ajout.php.

1. Dans messages.php, afficher les 5 derniers messages de la base (il n'y en a que 2 initialement, c'est normal !) comme des items d'un ul d'identifiant discu. Chaque message devra avoir un attribut data-msg-id contenant l'identifiant du message. (Pour le HTML, vous pouvez vous inspirer de ce que renvoie le service fourni.)
2. Assurez-vous que les messages sont affichés dans l'ordre chronologique inverse (le plus récent en premier).
3. Dans ajout.php, afficher un formulaire d'ajout de message avec un champ pour le nom et un champ pour le message. L'URL de récupération doit être le script ajout.php lui-même.
4. Modifier ajout.php pour que lorsqu'il reçoit un message, il l'ajoute à la base.
5. Ajouter une dizaine de messages pour faciliter les tests, puis implémenter l'API du service (paramètres after et start/end, voir partie précédente).