- Télécharger et extrait le fichier DWC_XML_VE.zip (Ce ficher est placé en dehors du dossier projetweb)
- On va commencer par travailler avec 2 fichiers
dwc_xml_ve.html et bdd_xml.js.
Ils se trouvent dans le dossier DWC_XML_VE.
- L'objectif est de récupérer le fichier
book_catalog.xml
(https://phobos.univ-brest.fr/media/edu/kx07kar7/book_catalog.xml)
et l'afficher dans un tableau
- Dans le code HTML, on a un button
"My book collection" et un tableau avec
id="data"
-
Button "My book collection" appele la fonction loadXMLDoc() lorsque l'utilisateur click sur ce button
<button type="button" onclick="loadXMLDoc()">My book collection</button>
-
Dans votre code JS, ajouter la fonction loadXMLDoc().
Rappel : voir cours 1 pour explication des éléments :
onreadystatechange,
readyState,
status, et
XMLHttpRequest.
let xmlhttp = new XMLHttpRequest();
function loadXMLDoc() {
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
fetchData();
}
};
xmlhttp.open("GET", "https://phobos.univ-brest.fr/media/edu/kx07kar7/book_catalog.xml", true);
xmlhttp.send();
}
-
Dans votre code JS, ajouter la fonction
fetchData().
Dans cette fonction, la boucle for est utilisée pour créer le contenu HTML du tableau
data.
(Rappel : utilisation du propriété innerHTML dans cours 1 et 2)
- Explication
let xmlDoc = xmlhttp.responseXML; : la propriété en lecture seule renvoie un
document contenant le
code XML récupéré par la requêtelet x = xmlDoc.getElementsByTagName("BOOK"); : récupérer tous les éléments avec
nom de balise == "BOOK",
x est un tableau.
x[i].getElementsByTagName("TITLE")[0].textContent; :
récupérer la valeur de la balise TITLE du livre à l'indice i.
x[i] : le livre à l'indice i dans le tableau
x.getElementsByTagName("TITLE") : récupérer tous les balises TITLE (ici
on a un tableau).getElementsByTagName("TITLE")[0] : élément à l'indice 0 (on n'a qu'un
seule TITLE pour un livre).textContent : récupérer le contenu text
- Le tableau est généré avec 2 colonnes
function fetchData() {
let i;
let xmlDoc = xmlhttp.responseXML;
let table = "<tr><th>Book</th><th>Authors</th></tr>";
let x = xmlDoc.getElementsByTagName("BOOK");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].textContent +
"</td><td>" +
x[i].getElementsByTagName("AUTHOR")[0].textContent +
"</td>" +
"</tr>";
}
document.getElementById("data").innerHTML = table;
}
- Adapter le code HTML/CS dans le dossier projetweb pour afficher votre BDD.
-
L'objectif est d'afficher le contenu de votre BDD (
bdd.xml) dans la page
index.html sous forme de tableau HTML.
- Le code JS doit être placé dans le fichier
script.js de votre projet (ce fichier est
dans le dossier projetweb/script)
- Dans le code JS, l'URL
"
https://phobos.univ-brest.fr/media/edu/kx07kar7/book_catalog.xml" doit être remplacé
par
l'URL vers votre fichier XML. Il y a deux méthodes
-
Déployer la nouvelle version du fichier
bdd.xml sur le serveur obiwan et utiliser l'URL
correspondante. L'URL est dans le format https://obiwan.univ-brest.fr/~nom_utilisateur/data/bdd.xml.
- Vous pouvez refaire un deployment (voir l'exercice 2)
ou
-
Modifier et adapter la commande
scp (avec des bons paramètres bien sûr) pour deployer votre bdd au bon endroit
(dans ce cas, il n'y a qu'une seule commande à exécuter lorsque vous voulez mettre à jour la BDD, mais, il faut savoir faire...)
- Utiliser un fichier XML local et suivre les instructions ci-dessous.
Dans ce cas, vous devez mettre le chemin relatif (par rapport au fichier .html) vers la BDD dans l'appel de
xmlhttp.open()
- Mettre à jour la fonction
fetchData() en prenant en compte les attributes des items
dans votre BDD
- Dans votre code HTML du fichier
index.html, vous devez avoir un tableau avec
id=data et un button permettant l'affichage des items
- Pour travailler avec un fichier xml local :
- Solution 1 : Installer l'extension Live Server de Visual Studio Code :
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
-
Solution 2 :
Lancer le navigateur web avec le "CORS" déactivé
(Ref : https://developer.mozilla.org/fr/docs/Web/HTTP/CORS).
Vous trouverez ci-dessous les instructions pour Chromium :
- Executer la commande :
chromium --disable-web-security --user-data-dir="CHEMIN_VERS_VOTRE_DWC" CHEMIN_VERS_VOTRE_DWC
- Remplacer CHEMIN_VERS_VOTRE_DWC par le chemin vers votre dossier DWC
- Après avoir executé la commande, vous avez une fênetre Chromium avec les options de sécurité
déactivés.
Vous utiliserez cette fênetre pour visualier et tester votre projetweb en clickant sur le
dossier
projetweb et ensuite le fichier
index.html
- Note : il est normal que plusieurs dossiers et fichiers
apparaissent dans le dossier DWC