TP noté de Programmation Web (2ième version)

Exercice 1 - TP noté

La partie visuelle de l'application est composée de deux parties

• un en tête qui contient 3 champs textes (pour le texte, le temps et avec qui) ainsi qu'un bouton pour ajouter une note
• une table des notes stockées sur le serveur.

1. Dans un premier temps, fait un requète AJAX en utilisant la fonction JavaScript fetch pour obtenir tous les notes et afficher le contenu du JSON dans la console.
2. Modifier le code pour que chaque ligne du JSON corresponde à une ligne de la table HTML et afficher le texte de la note, l'information de temps de la note, ainsi que les personnes impliqués de chaque note.
   Faite attention de garantir que le fichier HTML a bien été complètement chargé au moment où vous remplissez la table.
3. Faite en sorte que lorsque l'on clique sur le bouton Add, cela ajoute une note créer en utilisant les valeurs des champs texte.
   Note: pour envoyer une requète POST avec un contenu JSON, on utilise le second paramètre de fetch pour indiquer la méthode HTTP à utiliser, le type de contenu et le contenu lui-même.

          fetch(???, {
            method: "post",
            headers: { "Content-Type": "application/json" },
            body: noteAuFormatJSON
          })
        

   Dans ce exemple, noteAuFormatJSON est une variable qui contient la chaine de caractère au format JSON correspondant à une note.
   Note 2: onclick permet de s'enregistrer pour être averti d'un clique sur un bouton.
   Note 3: on ne vous demande pas de rafraichir la table (c'est la question suivante).
4. Faite en sorte de rafraichir la table des notes une fois que la réponse du serveur envoyé suite à l'ajout de la note.
   Note: pas de copier-coller SVP, vous avez déjà écrit le code qui affiche les notes en table.
5. Ajouter un bouton "delete" à la fin de chaque ligne de la table et faite une requète DELETE pour supprimer la note si un utilisateur appuis sur le bouton "delete".
   Note: c'est là que vous rendez compte que pour la question 2, au lieu d'utiliser innerHTML pour créer toute la table, il fallait utiliser Document.createElement, Document.createTextElement pour le texte et Element.appendChild pour ajouter les noeuds dans les parents. Comme cela vous pouvez enregistrer un "onclick" sur le bouton "delete".
   Note2: en fait, il faut quand même utiliser innerHTML = "" pour vider la table avant de la remplir.
   Note3: pour envoyer une requète DELETE au server, indiquer la méthode HTTP "delete" en second paramètre de fetch est suffisant.

          fetch(???, {
            method: "delete"
          })
        

6. On veut faire un peu de validation et interdire de pouvoir créer des notes dont le texte, l'information de date ou l'information des personnes impliquées est vide, pour cela on va désactiver le bouton "add" si un des champs texte est vide.
   Note: onkeyup permet de savoir si le contenu d'un champs texte a changé et la propriété value correspond au texte entré par un utilisateur.
   Note2: les boutons en JavaScript ont une propriété disabled que l'on peut mettre à false ou true.
   Note3: éviter le copier-coller, utiliser plutôt une boucle sur un tableau !
7. Faite en sorte qu'une fois que le serveur à bien ajouté une note, les 3 champs texte soit vide. En bien sûr, comme les champs son vide, le bouton "add" devra être désactivé.
8. L'ajout d'une note au serveur est une opération lente, c'est fait exprès j'ai ajouter un sleep artificiellement dans le code Java. Dans la vrai vie, on a une astuce pour faire croire à l'utilisateur que tous la note a été ajouté avant d'avoir la confirmation du serveur. On ajoute visuellement la note dans la table, avant de faire la requête AJAX, dans tout les cas, que la requète marche ou pas, à la fin, on ré-actualise la table en fonction des données du serveur, donc au pire, l'utilisateur va voir la note ajoutée à la table avant de la voir disparaitre si il y a un problème.
   On espère bien-sûr que la requète va échouée que rarement et donc on confirme visuellement plus tôt pour faire semblant que le serveur et le réseau vont vite.
   Note: pour ajouter un élement en premier fils d'un noeud du DOM on utilise la méthode insertBefore qui dans l'exemple ci-dessous insère monNouveauNoeud avant le premier fils.

          noeudDeLaTable.insertBefore(monNouveauNoeud, noeudDeLaTable.firstChild); 
        

9. Enfin, on peut appliquer la même astuce lorsque l'on supprime une note de la table, on peut supprimer la ligne avant que le serveur est recu et traiter la requète.
   Note: pour supprimer un noeud on utilise la méthode removeChild.

          noeudDeLaTable.removeChild(monNoeudASupprimer);