Utiliser les données d'un fichier xml sur un site internet

Bonjour, je travail sur un projet dans le cadre de mon stage de fin d'étude.
Je dois réaliser un annuaire professionnel à partir de données récupérées via Talend sur une appli pro.
Pour l'instant mes deux hypothèses de travail sont de récupérer les données :
- 1 en fichier xml,
- 2 dans une petite base de données.
Et je cherche un moyen simple mais efficace d'utiliser ces données pour créer mon annuaire en ligne.
Concernant la solution 1 je sèche encore, je cherche des solutions mais rien de concret pour l'instant mais je sens que c'est possible. Quelqu'un aurait il une méthode? Je trouve quelques tutos par-ci, par-là mais souvent datés et les choses évoluent tellement vite en web ... J'ai cru comprendre que je pouvais transformer mon xml en sxml puis en html , mais donc en site static. Je pense qu'un site où l'on peut faire une recherche soit par ordre alphabétique, soit par fonction, soit par ville serait intéressant.
Concernant la méthode 2, cela me parait plus sérieux, mais aussi beaucoup plus long à mettre en oeuvre : un site avec mise à jour en fonction de la constitution de la base de données. Je suis en train de démarrer une create-app-react. Mais je débute également à ce sujet. j'ai l'impression que cela me mene trop loin. En théorie il me reste encore trois semaines .
Auriez vous quelques conseils SVP ? Merci d'avance.

Bonjour,

comment récupères tu tes données via Talend et sous quelle forme?
L'idéal serait peut-être d'analyser ton fichier (si tu les récupère sous cette forme) et de stocker tes données au sein d'une base de données en faisant attention de ne pas créer de doublons.
Ainsi tu auras la possibilité de faire des requêtes SQL pour filtrer les résultats.

Après, si tes données peuvent être récupérées directement via une API, alors il n'y a pas forcément besoin de passer par l’intermédiaire d'une base de données. Et des fonctions de filtres existent peut-être déjà avec l'API.

À cela tu pourrais afficher tes éléments avec Datatables. Cela te permettra de filtrer sans trop te casser la tête. Par contre, attention aux performances si tu as un trop grand jeu de données.

Et sinon quels sont les langages avec lesquels tu es familière?
Modifié par Raphi (27 May 2020 - 08:42)

Bonjour, merci pour cette réponse!
Pour récupérer mes données via Talend je vais me connecter à la base de données pour récupérer ce dont j'ai besoin. Comme je l'ai notifié au début de mon premier message je peux les récupérer sous forme d'un fichier xml ou encore dans une base de données ou bien un flux RSS. Je tatonne.
Je vais regarder datatables, je crois que je l'ai déjà croisé au cours de mes recherches depuis 10jours.
Je suis débutante en tout en fait, fraichement sortie du cursus DUT informatique Année Speciale de l'IUT paris Descartes. Je suis en reconversion et pratique l'informatique depuis en fait une bonne année. Avant je faisais de la CAO dans le paramédical. Disons que la formation est complète mais qu'il faudra pratiquer pour encrer les compétences!

Ok, concernant les langages est-ce que tu as déjà fait du php ou du javascript?
Tu peux très bien partir de ton fichier XML, le transformer en json (via javascript ou php), pour le fournir à Datatables et 80% du travail sera fait.
Tu auras la possibilité de trier par ordre alphabétique et de filtrer tes résultats.
Tu as un exemple de jeu de données pour voir ce qui est attendu pour ton annuaire (tu peux mettre des fausses données c'est juste pour voir la structure de ton fichier XML)?

ah une lueur d'espoir dans ce message! j'ai fait du javascript en effet. Et j'ai essayé d'obtenir mes résultats de données en json sur Talend mais la mise à jour n'est pas top je pourrais reprendre cette partie si vous me dites que c'est plus pratique pour data tables pour la suite.
je me suis crée un très petit jeu de données en effet sur un fichier car j'ai des soucis d'accès aux bases de données test pour l'instant. Je viens de récupérer un fichier json sur Talend :

{"Annuaire Professionnel":[{"Prenom":"Raphaelle","mail":"raphaelle.arrosi@parachoc.com","Fonction":"Responsable RH","Situation_geographique":"Nimes","Nom":"Arrosi"},
{"Prenom":"Thomas","mail":"thomas.clementu@parachoc.com","Fonction":"Directeur Produit","Situation_geographique":"Paris","Nom":"Clementu"},
{"Prenom":"Carole","mail":"carole.lentier@parachoc.com","Fonction":"Stagiaire","Situation_geographique":"Brest","Nom":"Lentier"},
{"Prenom":"Cecilia","mail":"cecilia.lunaire@parachoc.com","Fonction":"Responsable RH","Situation_geographique":"Lyon","Nom":"Lunaire"},
{"Prenom":"Christophe","mail":"Christophe.tubulaire@parachoc.com","Fonction":"Responsable Technique","Situation_geographique":"Toulouse","Nom":"Tubulaire"}]}
J'ai commencé à regarder un ou deux tuto et à lire le manuel mais c'est un peu abscond. Ils disent que je dois intégrer un fichier html dans mon site, que je n'ai pas... car je fais des tests...
Je dois trouver comment utiliser ce fichier json pour le fournir a data tables...

Ah c'est encore mieux si tu récupères en json.
Par contre je n'ai pas compris cette phrase, tu n'as pas la possibilité de créer des fichiers ?

Carole95 a écrit :
J'ai commencé à regarder un ou deux tuto et à lire le manuel mais c'est un peu abscond. Ils disent que je dois intégrer un fichier html dans mon site, que je n'ai pas... car je fais des tests...

Commence par te créer une page html dans laquelle tu fait fonctionner un datatables simple.
Puis une fois que ça fonctionne tu peux tenter d'appeler un fichier json.
Modifié par Raphi (27 May 2020 - 10:44)

ok merci je vais essayer ceci. Je n'ai trouvé que des tutos en anglais et je ne suis pas bilingue, certaines subtilités doivent m'échapper.

N'hésites pas à faire un retour si tu rencontres des difficultés, en nous mettant à disposition ton code.

Voilà c'est encore moi, je n'arrive pas a aller chercher mon fichier ResultatJson.json pour ensuite implémenter le tableau de mon fichier html.
mon fichier html est comme ceci:
<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Annuaire Professionnel</title>

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready( function () {
$('#annuaire').DataTable();
});

</script>
</head>
<body>
<div><h1> Annuaire Professionnel </h1></div>
<script>
$.getJSON("ResulatJson.json", function(data){
let Objet = JSON.parse(data)
console.log(Objet);
});

</script>
<table id="annuaire" class="display" style="width:100%">
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Fonction</th>
<th>Situation Géographique</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Duchemin</td>
<td>Secrétaire</td>
<td>Paris</td>
<td>alice.duchemin@gmail.com</td>
</tr>

</table>



</body>


</html>

désolée pour ce format je ne connais pas la manip pour afficher mieux que ça. (
et J'ai ces erreurs qui s'affichent dans la console ...
Access to XMLHttpRequest at 'file:///C:/Users/clecarpentier/Desktop/Projet/ResulatJson.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
ResulatJson.json:1 Failed to load resource: net::ERR_FAILED.

En fait j'ai trouvé des explications pour implémenter son tableau en dur dans le html mais pas de méthode pour implémenter le html déjà paramétré par datatables avec mon fichier.json.
Je tourne en rond depuis ce midi.
Auriez vous quelques autres conseils?

Bonjour,

tu peux mettre ton code dans les balises code en utilisant le bouton prévu à cet effet.
Sinon pour ton erreur, le fait que tu appelles le fichier ResulatJson.json au lieu de ResultatJson.json ne doit pas aider.
Après il y a surement d'autres choses à corriger mais ça permettra d'enlever cette erreur.

Bonjour, oui effectivement erreur basique!! Mais cela ne change rien à mon soucis j'ai toujours la même erreur. Depuis hier j'ai fait plein de modifications, et essais différents, cherché des explications : il semble que mon chemin d'accès qui est placé dans la place de url de $.getJSON (qui prend en paramètre url, data, succès) ne soit pas bon . Le système de requête utilisé ne correspond pas .
Pourtant j'ai trouvé plusieurs tuto utilisant cette syntaxe et cette méthode ...Je continue mes recherches

Bonjour,

désolé pour le fait de ne pas avoir pu te répondu plus tôt.
Donc pour revenir à ton problème, tu peux utiliser cette page de la documentation pour faire fonctionner ton tableau avec un fichier json.
Et voici le contenu du fichier json utilisé dans l'exemple.
Il faut donc que tu respectes ce format et ça devrait le faire.
Modifié par Raphi (02 Jun 2020 - 13:49)

Bonjour, merci vraiment beaucoup, ces liens vont surement m'être d'une grande utilité ! cela fait trois jours que je me casse la tête pour solutionner ce probleme. Je vais de ce pas tenter de résoudre tout ça . Je vous tiens au courant!

Ça marche, courage !

Bonsoir, après cette journée de recherche et tests variés , il s'avère que je ne peux pas accéder à mon fichier json en local , à cause des cors policy qui sont là justement pour protéger nos données. Du coup je suis perplexe quand aux explications données sur l'utilisation des fichiers json qui semble ultra simple sur dataTables. d'ailleurs j'ai constaté nombre de témoignages comme le mien sans pouvoir résoudre pour autant mon problème.
Apparemment la solution semble être de créer un serveur local pour lire le fichier local et l'ajax interroge le serveur local... en gros. J'avoue que je me suis perdue en chemin aujourd'hui. Je vais méditer tout cela et reprendre mes "experiences" demain. Je pense comprendre la problématique mais n'arrive pas en pratique à résoudre le problème.
A suivre...

Bon vu que tu rencontres le même soucis, j'ai quand même regardé d'où ça pouvait venir, et en fait tu avais raison, il y a bien un autre problème.
Chrome (et sûrement les autres navigateurs également) bloque tout ce qui ne provient pas d'un serveur web.
Donc tu dois installer un serveur local sur ta machine ou utiliser un serveur web en ligne, au choix.
Le plus simple restera sûrement le serveur local.
Tu peux par exemple installer Xampp ou Laragon. Par contre, comme je n'utilise pas ces outils, je ne pourrais pas te donner d'avis sur ce qui est le mieux. Mais les deux feront le travail.

Merci vraiment pour votre soutient cela m'aide beaucoup. Je vais regarder les serveurs locaux cités dans votre post. Je commençais hier soir à créer un projet dans visual studio et créer un local server.. A suivre!

Bonjour Carole,

tient ça m'a fait penser que peut-être Visual Studio Code propose une solution. Et en effet il existe le plugin Live Server qui permet de travailler avec un serveur local, configuré avec VS Code.

Et voici un tutoriel pour le mettre en place.
Ça vaut le coup de tester.

Le plus rapide : XML + XSLT = HTML.
Une boucle fin du sujet.

S'embêter à transcoder du XML en JSON ça n'a aucun intérêt autant utiliser les outils adaptés au XML.

Dans un fichier datas.xml : tes données au format XML

<?xml version="1.0" encoding="utf-8"?>
<root>
    <rows>
        <row>
            <nom>Doe</nom>
            <prenom>John</prenom>
            <fonction>maître du monde</fonction>
            <situation>paris</situation>
            <mail>johndoe@gmail.com</mail>
        </row>
    </rows>
</root>

Dans un fichier template.xslt (à adapter à ton format XML et pas l'inverse) :

<stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
	<output method="html" omit-xml-declaration="yes" indent="no" />
<!-- Noeud racine -->
	<template match="root">
		<html>
			<head>
				<meta charset="utf-8">
					<title>
						Annuaire Professionnel
					</title>
				</meta>
				<body>
					<table class="table">
						<thead>
							<tr>
								<th>
									Nom
								</th>
								<th>
									Prénom
								</th>
								<th>
									Fonction
								</th>
								<th>
									Situation Géographique
								</th>
								<th>
									Mail
								</th>
							</tr>
						</thead>
						<tbody>
							<tr>
<!--  Boucle sur chaque noeud row-->
								<xsl:for-each select="rows/row">
<!-- affiche la valeur du noeud nom-->
                                    <td><xsl:value-of select="nom" /></td>
                                    <td><xsl:value-of select="prenom" /></td>
                                    <td><xsl:value-of select="fonction" /></td>
                                    <td><xsl:value-of select="situation" /></td>
                                    <td><xsl:value-of select="mail" /></td>
                                </xsl:for-each> 
							</tr>
						</tbody>
					</table>
				</body>
			</head>
		</html>
	</template>
</stylesheet>

Dans un fichier index.php :

//Fichier de données
$xet = new DOMDocument();

//Chargement des données en XML
$xet->load("datas.xml");

//Fichier de template
$xslt = new DOMDocument();
//Chargement du fichie de template
$xslt->load("template.xslt");

//Processeur de transformation XSLT
$proc = new XSLTProcessor();
//Ajout du template
$proc->importStylesheet($xslt);
//Transformation en HTML 
echo $proc->transformToXML($xet);

Tuto sur les boucles en XSLT : http://www.oujood.com/xml/element-xslt-xsl-for-each.php


@+
Modifié par gray_magic (16 Dec 2020 - 11:48)