Voici une archive contenant les fichiers nécessaires pour faire le 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.
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.
action
a comme valeur api
.
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.
?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
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
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
.