Lire un fichier XML

mel2311 · avril 2018

Bonjour,

Dans mon projet Pluxml, je dispose d’une Page Statique qui contient un code HTML pour afficher un formulaire (permettant aux utilisateurs de s’inscrire dans notre association). Celui-ci est contrôlé avant envoi par une fonction JavaScript afin de vérifier que les saisies de l’utilisateur sont cohérentes.

Dans mon formulaire, je fais appel à du PHP pour lire un fichier XML perso de stockage de données. Les informations nécessaires sont bien retranscrites.
Voici un exemple d’un morceau de code que j’utilise :

[== PHP ==]
<?php 
$inscriptions= simplexml_load_file('data/stockage_inscriptions.xml'); 

Echo $inscriptions->cours[0]->nb_places_restantes.'places’ ;?>

Par contre, j’aurais besoin de faire le même chargement XML lors de mon contrôle Javascript afin de vérifier des données avant envoi du formulaire mais je n’y parviens pas.
Voici, suite à toutes mes recherches sur le sujet, le code que j’ai ajouté dans ma fonction javascript (ce code fonctionne en test simple html / javascript / xml en dehors de mon environnement pluxml, mais une fois ajouté dans ma page, il ne fonctionne pas – ma fonction Javascript se déroule jusque-là puis est interrompue) :

[== JavaScript ==]
var Document;
var nb_places = 0;

Document = new ActiveXObject("Microsoft.XMLDOM");
Document.async = "false"; 

if(Document.load("data/stockage_inscriptions.xml")){

 nb_places = Document.documentElement.childNodes(0).childNodes(2).text;
 alert(nb_places);
 
}

Y a-t-il une méthode spécifique pour utiliser cela avec pluxml ? ou sinon comment procéder pour lire mon fichier XML au moment de ma validation de formulaire ? je suis encore novice dans ce genre de développements et je n'ai peut-être pas les bons réflexes pour gérer HTML / JS / PHP...

Merci pour votre aide !

M.B

bazooka07 · avril 2018

Le format idéal pour gérer les données avec Javascript est le format JSON.
Et PHP le manipule très bien et plus simplement que cet antique format XML.
Pour transmettre les données de PHP vers Javascript le plus simple est de mettre le contenu dans l'attribut data d'une balise HTML

Documentation pour PHP
Documentation pour Javascript

De plus le format JSON est beaucoup moins verbeux que le format XML
Et le contenu d'un fichier JSON s'affiche très bien dans un navigateur via un plugin.

Si tu as besoin d'un coup de pouce dans ce sens, n'hésite pas à demander.
Mais si tu préfères rester à XML, alors bon courage.

mel2311 · avril 2018

Bonjour Bazooka07,

Merci pour ta réponse !
Je ne connaissais pas JSON (juste de nom). Je vais donc tester cela dès ce soir à l'aide de tes docs pour voir si je réussi à faire ce que je souhaite.

bonne journée,

M.B

mel2311 · avril 2018

Bonjour,

J'ai testé le JSON. J'en arrive au même point qu'avec XML : ma partie sur affichage PHP fonctionne bien par contre ma partie récupération des données avec Javascript ne fonctionne pas...

Voici des extraits du code :

Fichier JSON :

[== Indéfini ==]
{
"Orientale": {"nb_places_total": 20,"nb_places_restantes": 12},
"Salsa": {"nb_places_total": 20,"nb_places_restantes": 16}
}

Extrait de Fonction Javascript :

[== JavaScript ==]
/*controle du nombre de places disponibles dans chaque cours*/
 

alert("controle json");

 var json = JSON.parse("data/stockage_inscriptions.json");

alert("fichier ok");
 
 var nb_places_total;
 var nb_places_restantes;

 var nb_places_orientale = json.Orientale.nb_places_restantes; 
 alert("Hello : " + nb_places_orientale);

J'ai mon premier affichage "Controle json" mais pas le second sur "fichier ok". J'en déduit donc un souci au moment du chargement du fichier...

Merci pour ton aide!

M.B

bazooka07 · avril 2018

Tu oublies de télécharger le fichier JSON.

[== HTML ==]
<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Réservation salles</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
	<div id="salles"></div>
	<script text="text/javascript">
	(function() {
		'use strict';
		const xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(event) {
		    if (this.readyState === XMLHttpRequest.DONE) {
		        if (this.status === 200) {
					const reservations = JSON.parse(this.responseText);
					const salles = document.getElementById('salles');
					for(var salle in reservations) {
						const el = document.createElement('DIV');
						el.innerHTML = '<div>' + salle + ' : ' +
							reservations[salle].nb_places_restantes + ' / ' +
							reservations[salle].nb_places_total + '</div>';
						salles.appendChild(el);
					}
		        } else {
					console.log("Status de la réponse: %d (%s)", this.status, this.statusText);
				}
		    }
		}
		xhr.open('GET', 'inscriptions.json', true);
		xhr.send();
	})();
	</script>
</body>
</html>

Utilise XMLHttpRequest pour cela
https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest

mel2311 · avril 2018

J'ai mis pas mal de temps mais à priori, à force de tentatives et de recherche sur le net, mon controle Javascript à l'air de fonctionner.
Le contrôle du formulaire se fait et mon message "alert" s'affiche correctement (il a juste l'air de s'afficher deux fois, alors je dois continuer à faire des tests plus pousser pour vérifier cela....).

Par contre, une autre question, cette fois pour PHP...
Je lis correctement mon fichier JSON, mais je souhaiterais pouvoir le mettre à jour (toujours par le biais du formulaire) et je n'y parviens pas.
Je fais des opérations sur le contenu du fichier JSON (récupération d'une donnée, soustraction d'une valeur en fonction des saisies dans le formulaire, puis renvoi de la donnée -- j'ai fait des affichages pour véirifer la cohérence de mes données et tout est ok) mais à la fin le fichier ne semble pas s'enregistrer.

Voici l'extrait du code utilisé :

[== PHP ==]
$json = file_get_contents("data/stockage_inscriptions.json");
$parsed_json = json_decode($json);

$nb_places_restante = $parsed_json->{'Orientale'}->{'nb_places_restantes'};
$nb_places_restante = $nb_places_restante - 1;

$parsed_json->{'Orientale'}->{'nb_places_restantes'} = $nb_places_restante;

/*jusque là tout semble fonctionner - mes valeurs affichées sont bonnes */

$newJsonString = json_encode($parsed_json);
file_put_contents('/data/stockage_inscriptions.xml', $newJsonString);

Est ce qu'il manquerait quelque chose pour la bonne mise à jour de mon fichier JSON ?

Merci !

bazooka07 · avril 2018

Pourquoi tu changes le nom du fichier en cours de route ?
Il vaut mieux le stocker dans une variable.

[== PHP ==]
$filename = 'data/stockage_inscriptions.json';
$content = file_get_contents($filename);
$inscriptions = json_decode($content, true); // pour tableau associatif
$inscriptions['Orientale']['nb_places_restantes']--; // modif in situ
// Bon, on s'en va !
$content = json_encode($inscriptions,  JSON_PRETTY_PRINT); // pour un joli contenu
file_put_contents($filename, $content);

Attention que "data" est un paramètre de ton installation PluXml. (valeur par défaut)

mel2311 · mai 2018

En effet, la sauvegarde se fait bien maintenant.. Merci !

Par contre j'ai toujours des difficultés avec la partie Javascript...

Voila ou j'en suis :

[== Javascript ==]
function createXHR(){ 

	var request = false;
	try {
		request = new ActiveXObject('Msxml2.XMLHTTP');
	}
	catch (err2) {
		try {
			request = new ActiveXObject('Microsoft.XMLHTTP');
		}
		catch (err3) {
			try {
				request = new XMLHttpRequest();
			}
			catch (err1) 
			{
				request = false;
			}
		}
	}
	return request;
}

function controle(f) {

	var req = createXHR();
	req.open("GET", "data/stockage_inscriptions.json", true); 
	req.onreadystatechange = 
	
	function(){
		var doc = eval('(' + req.responseText + ')'); 
		
		if(eval("document.getElementById(\"cotisation1\").checked == true")){

			var nb_places_restantes = doc.Orientale.nb_places_restantes;   
			alert("nb_places : " + nb_places_restantes); 

			if(nb_places_restantes < 1){
				alert("Erreur, le cours est complet");    
				return false;
			}
			else{
				alert("ok");
			}
		} 
	}   
	req.send(null);
	
	return true;
}

Mes soucis et incompréhensions :
- Il garde en mémoire des valeurs tant que je ne vide pas le cache (donc la valeur testée nb_places_restantes n'est pas la bonne --> toujours à 0)...
- La fonction (req.onreadystatechange) semble s’exécuter deux fois de suite (j'obtiens 2 fois mon alert "erreur")
- La soumission du formulaire n'est pas bloquée par mon "return false" (mon formulaire réussi à se valider).

D'avance merci pour tes conseils !

mel2311 · mai 2018

Bonjour,

Je continue à chercher pour faire fonctionner mon contrôle JSON mais malheureusement cela ne fonctionne toujours pas...

Voici mon code actuel :


[== JSON ==]
{
"Orientale": {"nb_places_total": 20,"nb_places_restantes": 12},
"Salsa": {"nb_places_total": 20,"nb_places_restantes": 16}
}


[== HTML ==]
<form class="form_centre" name="inscription"  action="static.html" onsubmit="return controle(this)" method="post" >

    <?php

            $json = file_get_contents("test.json");
            $parsed_json = json_decode($json);

            Echo '<div name="cotisation" onchange="calcul_cotisation()">

            <label for="nom"><b>Cours envisagé(s) font color="red">*</font> :</b></label><br>

            <INPUT type="checkbox" id="cotisation1" name="cotisation[]" value="Orientale / Bollywood"> Danse orientale moderne / Bollywood [mardi 19h - 15 ans et +] ['.$parsed_json->{'Orientale'}->{'nb_places_restantes'}.'/'.$parsed_json->{'Orientale'}->{'nb_places_total'}.' places]<br>

            <INPUT type="checkbox" id="cotisation2" name="cotisation[]" value="Salsa"> Salsa [mardi 20h - 15 ans et +] ['.$parsed_json->{'Salsa'}->{'nb_places_restantes'}.'/'.$parsed_json->{'Salsa'}->{'nb_places_total'}.' places]<br>';

     ?>

 <div class="button center"><button type="submit">Soumettre votre pré-inscription</button><br><br></div>

</form>


[== JavaScript ==]
function getXMLHttpRequest() {
	 var xhr = null;
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else if(window.XDomainRequest){
			xhr = new XDomainRequest();
		}
		else {
            xhr = new XMLHttpRequest(); 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    return xhr;

}


function controle(f) {

   var ok = false;
   var xmlhttp = getXMLHttpRequest();
   var url = "data/stockage_inscriptions.json";

   xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
			
	if(eval("document.getElementById(\"cotisation1\").checked == true")){

   	    var nb_places_restantes = myArr.Orientale.nb_places_restantes;  

  	    if(nb_places_restantes < 1){
		alert("Désolé, le cours de Danse est complet .");   
		ok = false;
  	    }
 	    else{
		ok = true;
	    }
	}
    }
};


xmlhttp.open("GET", url, true);
xmlhttp.send();


 if(!ok) {
	return false;
 }
    
  
 return true;

}

A priori les comportements semblent différents d'un navigateur à l'autre (IE et Chrome, la fonction open de xmlhttp est refusée donc mon contrôle ne se fait pas - par contre sous Firefox, cela semble fonctionner !).

Merci de votre aide !

M.B.

bazooka07 · mai 2018

Inutile d'utiliser XMLHttpRequest, il te faut passer par PHP pour valider l'inscription.

Voir le fichier studio-danses-php pour la page statique à cette adresse :
https://gist.github.com/bazooka07/6f6f103bb7a8bae3145a6d7b20eb909f#file-studio-danses-php

Et voir le fichier inscriptions.json pour la liste des inscrit-e-s à chaque danse.
https://gist.github.com/bazooka07/6f6f103bb7a8bae3145a6d7b20eb909f#file-inscriptions-json
S'il n'existe pas, il se crée tout seul.

La liste des danses avec places, titre et cotisation est à régler dans le tableau $inscriptions

dans la constante INSCRIPTIONS_FILENAME, $this correspond à $plxShow.

Lire un fichier XML

Réponses