Sujet de TP noté de vanier pascal

Si vous n'êtes pas vanier pascal vérifiez de bien avoir fourni le bon numéro étudiant.
Le TP noté est fini, vous ne pouvez plus rendre votre devoir.

Voici une archive contenant les fichiers nécessaires pour faire le TP :

Télécharger les fichiers du TP

PHP

Le code pour cet exercice est dans le répertoire exo1. Il s'agit du code final pour l'exercice des couleurs. Le but sera d'implémenter une api permettant de récupérer les données sur les couleurs en JSON.

Ajoutez une méthode allColorsJSON() au contrôleur qui renverra un JSON contenant la liste de toutes les couleurs. Le JSON aura donc cette forme :
[{ 
  id: id de la couleur,
  hex: la couleur en hexadecimal,
  nom: le nom de la couleur
},
...
]
Vous pouvez utiliser la fonction json_encode pour cela.
Faites en sorte que le routeur appelle cette fonction lorsque action a comme valeur api.
Ajoutez une méthode colorJSON($id) au contrôleur qui renverra un JSON contenant toutes les informations affichées sur la page "Couleurs" correspondant à la couleur d'id $id. Celui-ci aura donc la forme suivante :
{ 
  id: id de la couleur,
  hex: la couleur en hexadecimal,
  nom: le nom de la couleur,
  rouge : % de rouge,
  vert : % de vert,
  bleu : % de bleu,
  teinte : teinte,
  saturation : saturation,
  luminosite : luminosité,
  creation : date de création,
  modification : date de modification
}
Ajoutez du code pour faire en sorte que si l'api a été appelée avec un paramêtre GET id alors on renverra la couleur avec cet id. On ne se soucie pour l'instant pas du cas où la couleur n'existe pas.
Faites en sorte que l'entête de la réponse indique que le type des données est du JSON lorsque les données renvoyées sont du JSON.
Si la couleur n'existe pas, on veut que l'api renvoie comme code HTTP 400 au lieu du 200 habituel lorsque la page fonctionne.
Faites en sorte de renvoyer du JSON quand on accède à la liste ou au détail d'une couleur avec la méthode POST. Par exemple, lorsque l'on accède à la page d'adresse ?couleur=c4ee9c9e2972a431 avec la méthode POST, on devra renvoyer le même résultat que si on avait accedé à la page d'adresse ?action=api&id=c4ee9c9e2972a431.

Javascript

Les fichiers pour cet exercice sont dans le repertoire exo2/ de l'archive que vous avez téléchargé. Le seul fichier que vous avez le droit de modifier est liste.js.

Modification du DOM

Le fichier liste.js contient un tableau javascript liste contenant une liste d'objets. Chaque objet a deux propriétés, un identifiant pour l'objet object_id et le nom/titre de l'annonce nom. En javascript uniquement, ajoutez la liste des objets dans le div dont l'id est liste_statique.

Dans la question précedente nous avons obtenu une liste d'objets et leurs identifiants associés, on veut maintenant que lorsque l'on clique sur un élément de la liste l'élément d'id description_statique contienne les détails de l'objet cliqué. Ces informations sont dans le tableau associatif details qui associe à object_id un objet javascript avec les champs suivants :

object_id:      identifiant de l'objet
nom:            nom de l'objet
desc:           description de l'objet
img:            adresse de l'image
alt_img:        texte alternatif pour l'image
prix:           prix de l'objet
timestamp:      heure de mise en ligne
mail:           email du vendeur
tel:            numéro de téléphone du vendeur

Les images se trouvent dans le répertoire suivant :

https://ensweb.users.info.unicaen.fr/eval/L3/20-21/images/

Requêtes AJAX

L'api à l'adresse
https://ensweb.users.info.unicaen.fr/eval/L3/20-21/?etudiant=12&action=jsapi
renvoie du json contenant une liste sous la même forme que précédemment. Modifiez votre code de manière à récupérer la liste grâce à l'API au lieu de la variable et vous l'insèrerez de la même manière que précedemment dans l'élément liste_ajax.

Au lieu de récupérer la description de l'objet dans la variable details on veut maintenant la récupérer via l'api. Pour cela, on peut lui passer un parametre POST object_id contenant l'identifiant de l'objet. On obtient alors un JSON avec les champs suivants :

object_id:      identifiant de l'objet
nom:            nom de l'objet
desc:           description de l'objet
img:            adresse de l'image
alt_img:        texte alternatif pour l'image
prix:           prix de l'objet
timestamp:      heure de mise en ligne
mail:           email du vendeur
tel:            numéro de téléphone du vendeur

Faites en sorte que lorsque l'on clique sur un élément de la liste, les détails de celui-ci s'affichent dans l'élément description_ajax.