Vader[FR] : ce n'est pas un blog, c'est un Sith

Script générique des diaporamas AJAX

Vader[FR] — 2014-10-18T19:53:27Z

Ce script est le même pour le diaporama de la page de garde et pour le diaporama de la galerie.

Il lit des paramètres dans la page (numéro de rubrique à parcourir, nombre de niveaux de sous-rubriques à chercher, langue) et envoie la requête au serveur, puis insère dans la page l'image, le titre et le texte de chaque élément du diaporama en l'adaptant à la taille de la fenêtre, avant de demander l'élément suivant.

En effet, les éléments de ce diaporama sont des articles :

le logo de l'article est une image particulière, que l'on peut aisément différencier du texte, afin de lui accorder un traitement différent.
un article existe dans une certaine langue, ce qui permet d'afficher un diaporama différent selon la langue souhaitée
un article avec texte, titre et logo est facile à ajouter, modifier ou enlever dans l'espace privé de SPIP.

Lancement des fonctions JavaScript

Comme on peut le voir dans l'aperçu Firebug de la structure de la page de garde, il y a dans chaque page, pour l'évènement onLoad (= "au chargement") de l'élément HTML body, appel à une fonction unique et générique "AuChargement".

function AuChargement(){ pisteIE(); cachejs(); setTimeout("charger_diapo()",1000); // 1 seconde traitercadres(); traiterimages();
}

Cette fonction unique en invoque d'autres, qui, selon les éléments présents ou non dans la page, feront quelque chose :

pisteIE va, comme son nom l'indique, rediriger les utilisateurs du navigateur Internet Explorer vers une page d'avertissement, indiquant les déficiences de Microsoft Internet Explorer quand aux éléments pourtant normalisés W3C de la page.
- Un lien "continuer quand même" permet aux utilisateurs d'Internet Explorer de poursuivre la navigation, ils ont été prévenus.
- Un système de cookie enregistre le fait que l'utilisateur est prévenu, cela évite de faire la redirection à chaque ouverture de page.
cachejs sert, comme son nom l'indique, à cacher le message selon lequel JavaScript est désactivé sur le navigateur.
setTimeout("charger_diapo()",1000); lance la fonction charger_diapo() au bout d'une seconde.
- C'est cette fonction qui ira chercher les paramètres du diaporama dans la page et enverra la requête au serveur pour le premier élément.
traitercadres et traiterimages vont redimensionner les cadres et images qui en ont besoin.

Lancement du diaporama

function charger_diapo(){ if (this.document.getElementById('diapo')!=null){

Cette fonction ne s'exécutera que si un élément "diapo" est présent dans la page

 if (this.document.getElementById('nrubrique')!=null){ nrubrique=this.document.getElementById('nrubrique').value; }else{ nrubrique=0; }

Pour chaque paramètre du diaporama, on vérifie sa présence, et en cas d'absence on utilise une valeur par défaut

Autres paramètres

 if (this.document.getElementById('mindepth')!=null){ mindepth=this.document.getElementById('mindepth').value; }else{ mindepth=0; } if (this.document.getElementById('maxdepth')!=null){ maxdepth=this.document.getElementById('maxdepth').value; }else{ maxdepth=1; } if (this.document.getElementById('lang')!=null){ lang=this.document.getElementById('lang').value; }else{ lang="fr"; }

Puis on initialise quelques valeurs avant d'appeler la fonction qui créera et enverra la requête.

 var url_image=null; var texte_diapo=null; var titre_diapo=null; requete_requete_image_diapo('charger_diapo.php?id=0&rub='+nrubrique+'&min='+mindepth+'&max='+maxdepth+'&lang='+lang); }
}

Création de la requête XMLHTTP

Le script javaScript défini quelque variables globales, que plusieurs fonctions utiliseront.

var diapo = 0;
var prochain=0;
var nrubrique=0;
var mindepth=0;
var maxdepth=1;
var delai=5000;

Avant de pouvoir créer la requête XMLHTTP, il faut un objet de type xmlhttprequest pour y mettre les paramètres, l'envoyer au serveur et recevoir sa réponse.
En fonction du navigateur, on utilisera plusieurs méthodes.

Création de l'objet xmlhttprequest

function get_requete_image_diapo(){ var requete_image_diapo = null; if (window.XMLHttpRequest){ // Firefox requete_image_diapo=new XMLHttpRequest(); }else if (window.ActiveXObject){ // IE try{ requete_image_diapo=new ActiveXObject("Msxml12.XMLHTTP"); }catch(e){ try{ requete_image_diapo=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e1){ requete_image_diapo=null; } } }else{ // non supporté alert("Votre navigateur ne supporte pas les XMLHTTPRequest."); /* + redirection vers page navigs.html */ } return requete_image_diapo;
}

La fonction précédente, qui créé l'objet xmlhttprequest, est appelée par la fonction de création et d'envoi de la requête que voici :

function requete_requete_image_diapo(url){

	requete_image_diapo=get_requete_image_diapo(); if (!requete_image_diapo){ alert("Votre navigateur ne peut créer de requête AJAX."); /* + redirectiuon vers page navigs.html */ return; }

On récupère l'objet xmlhttprequest, puis, si celui-ci n'a pu être créé et que par conséquent la variable requete_image_diapo n'existe pas - le ! signifiant la négation - on affiche un message et l'on quitte la fonction.
Sinon, on poursuit

	//alert("envoi de la requete"); requete_image_diapo.onreadystatechange=function(){traitementReponse_requete_image_diapo(requete_image_diapo)} requete_image_diapo.open("GET",url,true); requete_image_diapo.send(null);
}

requete_image_diapo.onreadystatechange= définit la fonction function(){ ... } de traitement de la réponse, quand la requête aura "changé d'état". Puis on ouvre l'url du script du serveur auquel il faut envoyer la requête, et qui la traitera pour envoyer la réponse selon les paramètres indiqués, et on y envoie la requête.

`Modification de la page affichée`

function traitementReponse_requete_image_diapo(requete_image_diapo){ var contenu; var erreur=0; if (requete_image_diapo.readyState==4){


Si la requête est dans l'état "4", c'est à dire que l'on a reçu la réponse du serveur,
 //alert("reception de la reponse : traitement"); contenu=requete_image_diapo.responseXML;
On récupère le document XML constituant la réponse du serveur.
 if (contenu.getElementsByTagName("image")[0].firstChild.nodeValue!=null){ url_image=contenu.getElementsByTagName("image")[0].firstChild.nodeValue; }else{ erreur=1; }
On vérifie la présence de différents éléments de réponse, en préparant des valeurs par défaut si besoin.
 contenu est le document XML de réponse. Celui-ci est organisé selon une arborescence de balises pour les divers éléments et leurs valeurs.
 on utilise la fonction getElementsByTagName pour adresser ces balises par leur nom
 cette fonction renvoie un tableau de balises correspondantes, dont on s'intéresse au premier élément, à la case 0, qui est la première case d'un tableau javaScript.
 Une fois récupéré la balise souhaitée, on récupère la valeur du nœud (nodeValue).
Autres éléments
 if (contenu.getElementsByTagName("url_article")[0].firstChild.nodeValue!=null){ url_article=contenu.getElementsByTagName("url_article")[0].firstChild.nodeValue; }else{ erreur=1; } if (contenu.getElementsByTagName("titre")[0].firstChild!=null){ if (contenu.getElementsByTagName("titre")[0].firstChild.nodeValue!=null){ titre_diapo=contenu.getElementsByTagName("titre")[0].firstChild.nodeValue; }else{ erreur=1; } }else{ titre_diapo=""; } //alert("titre="+contenu.getElementsByTagName("titre")[0].textContent); // y'a aussi data, wholeText...nodeValue... if (contenu.getElementsByTagName("texte")[0].firstChild!=null){ if (contenu.getElementsByTagName("texte")[0].firstChild.nodeValue!=null){ texte_diapo=contenu.getElementsByTagName("texte")[0].firstChild.nodeValue; if ((texte_diapo==null)||(texte_diapo=="")){ texte_diapo="Sans titre"; } }else{ texte_diapo=""; } }else{ texte_diapo=""; }
De même, on récupère plusieurs paramètres toujours présents, dont la prochaine image preload que l'on va commencer à charger comme arrière plan à taille nulle pour accélérer son chargement lorsque ce sera son tour.
 prochain=contenu.getElementsByTagName("prochain")[0].firstChild.nodeValue; // delai=contenu.getElementsByTagName("delai")[0].firstChild.nodeValue; preload=contenu.getElementsByTagName("preload")[0].firstChild.nodeValue; //alert("texte="+contenu.getElementsByTagName("texte_diapo")[0].firstChild.nodeValue);
Pour comprendre à quoi correspondent ces éléments, voir l'onglet détaillant le script PHP.
Et si tout va bien (variable erreur toujours à zéro)
	if (erreur==0){	
On essaie de récupérer le bloc "image" du diaporama afin de pouvoir y intégrer l'image indiquée dans le document XML.

Dans la même structure conditionnelle, l'on s'assure qu'il y a bien une image à y intégrer (l'url de l'image fournie dans la réponse XML est non nulle).
 if ((this.document.getElementById('diapo_image')!=null)&&(url_image!="")){ //alert ("on a le div image");
Si le bloc image existe, on le référence afin de pouvoir le modifier, en utilisant la fonction getElementById qui renvoie un élément unique, puis on y intègre un lien vers l'article sous la forme d'une image qui est son logo avec la valeur innerHTML de l'élément, qui correspond au code HTML que l'élément contient.
 var div_image=this.document.getElementById('diapo_image'); // le div div_image.innerHTML="";
L'image du diaporama étant dans son bloc, il est peut être utile à présent de la redimensionner afin de l'adapter aux dimensions dudit bloc.
On récupère donc les dimensions du bloc, par offsetHeight et offsetWidth, puis les dimensions réelles de l'image, par les valeurs "hauteur" et "largeur" fournies dans la réponse (voir script PHP).
 var h_div=this.document.getElementById('diapo_image').offsetHeight; var l_div=this.document.getElementById('diapo_image').offsetWidth; var h_img=parseFloat(contenu.getElementsByTagName("hauteur")[0].firstChild.nodeValue); var l_img=parseFloat(contenu.getElementsByTagName("largeur")[0].firstChild.nodeValue); //alert("traitement d'une image de "+h_img+" par "+l_img);
Selon la différence de dimension entre le bloc et l'image, il faudra la réduire prioritairement en largeur, en hauteur, ou les deux, et si l'image n'est pas trop grande, on cherchera à la centrer.
Le reste du script de traitement devrait être aisément compréhensible, d'autant que les commentaires permettent de suivre les conditions vérifiées et le traitement effectué.

Le principe reste toujours le même :
 si une dimension de l'image est plus grande que celle du bloc, alors
 calculer la proportion entre les deux afin de pouvoir réduire l'image
 une fois la bonne proportion de réduction trouvée, calculer les marges entre les dimensions du bloc et celles de l'image réduite, pour centrer l'image.
 if (l_img>l_div){ var reduction=l_img/l_div; // la proportion de réduction, qui sera la meme en hauteur et largeur // si h_img/reduction>h_div alors if ((h_img/reduction)>h_div){ // image plus large et en réduite, plus haute que le div // image plus HAUTE que large // réduction_h = h_img/h_div var reduction_h=h_img/h_div; // appliquer reduction_h en hauteur et largeur var nh=h_img/reduction_h; var nl=l_img/reduction_h; // pour être au milieu
Une fois l'image réduite, on calcule la marge, puis on applique réduction et marge de centrage.

De même que pour le bloc diapo, on utilise la fonction getElementById pour référencer le bloc, puis, comme pour la réponse XML, getElementsByTagName pour récupérer le tableau des images (balise  contenues, la première (et seule) étant à la case 0.

Puis l'on définit les attributs HTML de cette balise  pour retailler l'image, et lui ajouter un style personnalisé contenant la marge de centrage, ainsi que la prochaine image preload comme arrière-plan de taille nulle pour accélérer son chargement lorsque ce sera son tour.
 var margel=(l_div-nl)/2; // si la marge est > à x px, calculer la différence et réduire div image pour agrandir div texte image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("height",nh); image.setAttribute("width",nl); image.setAttribute("style","margin-left:"+margel+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;");
Autres cas
 // sinon }else{ // image plus large mais pas plus haute que le div // image plus LARGE que haute // appliquer réduction en largeur et hauteur var nh=h_img/reduction; var nl=l_img/reduction; // pour être au milieu, il faut que margeh=()h_div-nh/2 var margeh=(h_div-nh)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("height",nh); image.setAttribute("width",nl); image.setAttribute("style","margin-top:"+margeh+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); //finsi } // fins }else{ // image pas plus large que le div if (h_img>h_div){ // div assez large mais pas assez haut // réduction_h = h_img/h_div var reduction_h=h_img/h_div; // appliquer reduction_h en hauteur et largeur var nh=h_img/reduction_h; var nl=l_img/reduction_h; // pour être au milieu, il faut que margel=()545-nl/2 var margel=(l_div-nl)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("style","margin-left:"+margel+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); image.setAttribute("height",nh); image.setAttribute("width",nl); }else{ // image pas trop grande // mais cadre peut-être trop grand var margeh=(h_div-h_img)/2; var margel=(l_div-l_img)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("style","margin-left:"+margel+"px;margin-top:"+margeh+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); } } }else{ //alert("div image non trouvé"); }
Puis on fait la même chose pour le texte et le titre
 if (this.document.getElementById('diapo_texte')!=null){ var div_texte=this.document.getElementById('diapo_texte'); // le div //alert ("on a le div texte"); div_texte.innerHTML=""+titre_diapo+""+texte_diapo+"
"; }else{ //alert("div texte non trouvé"); } }
...et on demande le prochain élément, si bien sûr cela a du sens.

Si le diaporama n'a aucun ou qu'un seul élément, il n'est pas utile d'envoyer d'autre requête, et le script du serveur indiquera que prochain vaut "-1", soit une valeur non valide.
la commande setTimeout( permet de définir un délai avant de demander le prochain élément.
 diapo=prochain; if (prochain!=-1){ //	requete_requete_image_diapo("charger_diapo.php?id="+diapo+"&delai="+delai); setTimeout("requete_requete_image_diapo('charger_diapo.php?id='+diapo+'&rub='+nrubrique+'&min='+mindepth+'&max='+maxdepth+'&lang='+lang)",delai); } }
}

`script PHP`


Le script PHP charger_diapo.php, situé à la racine du serveur web, et appelé comme URL par la fonction charger_diapo et après chaque traitement de réponse, va traiter la requête xmlhttp et envoyer une réponse au format XML.

Dans la mesure où les scripts PHP de SPIP peuvent utiliser des variables de session pour stocker des paramètres, on se connecte à cette session afin de pouvoir récupérer la langue choisie.
On créé l'entête de la réponse avant qu'un autre script, de traitement des accents, ne s'en charge.

le script accents.php contient plusieurs fonctions, dont une utilisée pour transformer les caractères accentués contenus dans la base en leur équivalent en code HTML, permettant un affichage normal quel que soient les encodages de caractère du serveur et du navigateur.
header('content-Type:text/xml,charset=UTF-8');
require "accents.php";
On se connecte à la base de données.
mysql_connect('serveur','utilisateur','mot de passe','MYSQL'); mysql_select_db("nom de la base");
On travaillera sur les tables des rubriques et des articles de SPIP, qui ont généralement un nom commençant par "spip_".
$tablerubriques="spip_rubriques";
$tablearticles="spip_articles";
La requête xmlhttp envoyant ses paramètres dans l'url, par la méthode GET (voir article sur PHP), on récupère les paramètres par la variable globale $_GET, qui est un tableau associatif (les colonnes sont identifiées par nom et non par numéro).
if (isset($_GET["id"])){ $idd=$_GET["id"];
}else{ $idd=0; /* id du diapo en cours, à diviser par total de diapo et prendre le reste , ex si idd = 5 pour 3 photos existantes, alors charger photo 2 */
}
Autres paramètres
if (isset($_GET["delai"])){ $delai=$_GET["delai"]; //echo "delai de $delai secondes
";
}else{ $delai=0;
} if (isset($_GET["rub"])){ $id_rubrique_diapo=$_GET["rub"];
}else{ $id_rubrique_diapo=0; } if (isset($_GET["min"])){ $min_depth=$_GET["min"];
}else{ $min_depth=0; } if (isset($_GET["max"])){ $max_depth=$_GET["max"];
}else{ $max_depth=1; } if (isset($_GET["lang"])){ $_SESSION["lang"]=$_GET["lang"];
}else{ if (isset($_SESSION["languser"])){ $_SESSION["lang"]=$_SESSION["languser"]; } if (!isset($_SESSION["lang"])){ $_SESSION["lang"]="fr"; }
}
Pour la langue, on essaie d'abord de la récupérer par le paramètre fourni lors de la requête et le stocker dans la variable de session "lang", avant de pendre la variable de session "languser" si elle est définie, et enfin, si la variable de session "lang" n'est toujours pas définie, on prend par défaut langue française.

Une fonction de parcourt de rubrique et sous-rubrique est définie, ce qui permet de faire du parcours récursif, lorsque la fonction s'appelle elle-même.

La fonction renverra tous les identifiants de sous-rubriques dans lesquelles on est susceptible de trouver des éléments de diaporama.
function parcourt_rubrik($cur_rubrik,$curdepth,$maxdepth,$mindepth) {
Ces deux paramètres ne pouvant être passés d'un niveau à l'autre de la boucle récursive sans rendre la fonction complexe, on les redéfinit localement à chaque niveau.
	$tablerubriques="spip_rubriques"; $tablearticles="spip_articles";
	$curdepth.=$curdepth+1; $rubs=array(); // le tableau qu'on renverra, contenant dans la case 0 sa taille $reksrub="select id_rubrique from ".$tablerubriques." where id_parent=$cur_rubrik"; $resrub=mysql_query($reksrub); while ($rowrub=mysql_fetch_array($resrub,MYSQL_ASSOC)){ $ssrub=$rowrub["id_rubrique"]; if ($curdepth>=$mindepth){ $rubs[]=$ssrub; } if ($curdepth<$maxdepth){ $rubs=array_merge($rubs,parcourt_rubrik($ssrub,$curdepth,$maxdepth,$mindepth)); } } return $rubs;
}
On créé donc la liste des rubriques en appelant la fonction récursive, en partant de la rubrique fournie en paramètre par la requête xmlhttp.
$liste_rubriques=parcourt_rubrik($id_rubrique_diapo,$min_depth,$max_depth,$min_depth);
Ici, on construit un morceau de la requête SQL, à savoir une partie de la clause conditionnelle WHERE, en ajoutant à un code de base des morceaux de code SQL [1]

On utilise une boucle while (tant que) pour parcourir un tableau dont la taille est variable, en s'arrêtant lorsque l'index atteint le nombre de case contenues dans le tableau, et en incrémentant l'index au fur et à mesure.
$liste_rubrik="(id_rubrique=$id_rubrique_diapo";
$irub=0; while ($irub

Une fois que la partie "liste des rubriques parentes" de la requête des articles que l'on va sélectionner est créée, on l'utilise d'abord dans une requête pour compter les éléments, puis ensuite dans la requête de récupération.
/* requete pour connaître le nombre total de photos pouvant être affichées */ $rek_compt="select count(*) as total from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."'"; // pas de order by pour compter
$res_compt=mysql_query($rek_compt);
$row_total=mysql_fetch_array($res_compt,MYSQL_ASSOC);
$total=$row_total["total"];
 clause SELECT :
 On compte count
 les lignes dans leur globalité count(*)
 dont on stockera le compte dans une colonne nommée "total" as total, plus simple pour la référencer,
 clause FROM
 depuis la table des articles, dont le nom, susceptible de varier, a été mis dans la variable tablearticles
 clause WHERE
 pour les articles faisant partie de la liste des rubriques
 et étant publiés
 et dont la langue est celle déterminée plus tôt et stockée dans la variable de session.
if ($total>0){
Si il y a effectivement plusieurs articles publiés dans les rubriques ciblées et ce dans la langue choisie, alors on va récupérer les deux premiers articles selon un tri définit plus bas.

Le script JavaScript, fournissant toujours un paramètre de numéro de diapo à charger dans la requête xmlhttp, on se base sur ce paramètre pour démarrer la sélection dans la liste des articles disponibles.
Quand au prochain élément de diaporama à charger, c'est soit l'article suivant dans la liste - si l'article en cours n'est pas le dernier de la liste - soit le premier, à savoir le numéro 0 de la liste (tableau des réponses).
	$debut=$idd; // 0 par defaut $par_page=1; if (($idd+1)<$total){ $prochain=$idd+1; }else{ $prochain=0; }
La requête de sélection est la même que celle de comptage, logique puisque l'on travaille sur les mêmes éléments.

Seules les clauses SELECT - car on ne compte pas cette fois - et la clause de tri ORDER - qui était inutile dans une requête de comptage - vont changer

On ajoute aussi une clause LIMIT qui restreint le nombre de lignes de résultat que l'on va finalement traiter.
 clause SELECT : on sélectionne tous les champs *
 clause ORDER BY par date décroissante DESC, et donc par article le plus récent.
 on limite les lignes de résultat à 1, comme vu plus haut  $par_page=1;, et on démarre à la ligne numéro $debut, à savoir $idd, le paramètre de numéro de diapo fourni à l'appel du script par la requête xmlhttp.
	$rek_sel="select * from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."' order by 'date' DESC limit $debut,$par_page "; // order by date DESC $res_sel=mysql_query($rek_sel);
Étant donné que l'on traite des articles, et que l'image cherchée est un logo, il est bon de savoir que sous SPIP, les logos ont un nom particulier :
 type de l'élément SPIP articles, rubriques, sites
 on
 numéro dudit élément
 les logos étant stockés à la racine du dossier IMG, peu importe leur extension (jpg, png, gif...)
	$imagebase="IMG/arton";
Pour chaque ligne de résultat renvoyée (en fait il n'y en a qu'une)
	while ($row_sel=mysql_fetch_array($res_sel,MYSQL_ASSOC)){
On récupère la valeur de chaque champ dont on a besoin.

Les champs de type texte (titre et texte) passent par plusieurs filtres pour traiter des caractères spéciaux qui risqueraient de faire planter le document XML réponse.
 $id=$row_sel["id_article"]; $titre=htmlentities($row_sel["titre"]); $titre=remet_accents($titre); $titre=str_replace("'","'",$titre); $titre=str_replace('"','"',$titre); $titre=str_replace("°","°",$titre); $texte=htmlentities($row_sel["texte"]); $texte=remet_accents($texte); $texte=str_replace("'","'",$texte); $texte=str_replace('"','"',$texte); $texte=str_replace("°","°",$texte); $texte=nl2br($texte); $urlarticle="spip.php?article$id";
Pour l'image, on recherche si le fichier artonXX existe pour plusieurs extensions possibles.

Si un fichier portant ce nom existe, alors on a trouvé.
 // image = IMG/arton[+id article].jpg ou autre // =========== existence du fichier jpg, png ou gif ============== $extensions=array("jpg","jpeg","JPG","png","PNG","gif","GIF"); $i=0; $trouve=false; $image=""; while (($i"; if (file_exists($image_test)){ //echo "$image_test existe
"; $image=$image_test; $trouve=true; }else{ //echo "$image_test n'existe pas
"; } $i++; } // image par défaut if (!$trouve){ $image="interrogation.png"; }
Si aucun fichier image de logo correspondant à l'article n'est trouvé, on prend une image par défaut.

Puis on récupère les dimensions de l'image contenue dans le fichier avec une fonction PHP.
 $infos_image = @getImageSize($image); // info sur la dimension de l'image // '@' est placé devant la fonction getImageSize() pour empecher l'affichage des erreurs si l'image est absente. //dimension $largeur = $infos_image[0]; // largeur de l'image $hauteur = $infos_image[1]; // hauteur de l'image
Ces informations de taille seront envoyées dans la réponse et utilisées par le script pour redimensionner l'image si besoin est.
Et on oublie pas de fermer la boucle de traitement de la ligne de résultat des articles correspondants à ce que l'on cherche.
 }
Puis on sélectionne l'image suivante afin de pouvoir commencer à la charger plus tôt, de sorte qu'au tour d'après, l'image de la diaporama suivante se chargera plus vite.

La requête est la même que la précédente, mais on ne prendra pas la même ligne de résultat.

Le traitement pour trouver le fichier image sera le même.
Image suivante
	$rek_presel="select * from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."' order by 'date' DESC limit $prochain,$par_page "; // order by date DESC $res_presel=mysql_query($rek_presel); while ($row_presel=mysql_fetch_array($res_presel,MYSQL_ASSOC)){ $extensions=array("jpg","jpeg","JPG","png","PNG","gif","GIF"); $i=0; $trouve=false; $pre_image=""; while (($i"; if (file_exists($image_test)){ //echo "$image_test existe
"; $pre_image=$image_test; $trouve=true; }else{ //echo "$image_test n'existe pas
"; } $i++; } // image par défaut if (!$trouve){ $pre_image="interrogation.png"; } } //echo "image trouvee : $image
";
Si en revanche il n'y a aucun article correspondant à ce que l'on cherche
}else{ $image="interrogation.png"; $texte="\"\""; $largeur=0; $hauteur=0; $delai=0; $pre_image="\"\""; $urlarticle="#"; // page actuelle $prochain=-1; $titre="Aucune image disponible."; // changer le texte selon la langue if ($_SESSION["lang"]=="fr"){ $titre="Aucune image disponible."; // changer le texte selon la langue } if ($_SESSION["lang"]=="en"){ $titre="No article available for this language : english."; // changer le texte selon la langue } if ($_SESSION["lang"]=="de"){ } $texte=$titre; // $texte=htmlentities($texte); // $texte=remet_accents($texte);
}
Puis il est temps de créer le document XML qui servira de réponse.

Dans Firebug, il est possible de voir, dans l'onglet réseau, les requêtes avec leurs paramètres, et les réponses associées en XML.
On crée un objet de type DOMDocument, puis on y ajoute les éléments et sous-éléments, en commençant par la racine du document.
// réponse du serveur = contenu de l'XmlHttpResponse
$doc=new DOMDocument("1.0","utf-8");
$racine=$doc->createElement('root');
$doc->appendChild($racine);
$url_image=$doc->createElement('image',$image);
$racine->appendChild($url_image);
$lien=$doc->createElement('url_article',$urlarticle);
$racine->appendChild($lien);
$titre_diapo=$doc->createElement('titre',$titre);
$racine->appendChild($titre_diapo);
$texte_diapo=$doc->createElement('texte',$texte);
$racine->appendChild($texte_diapo);
$info=$doc->createElement('largeur',$largeur);
$racine->appendChild($info);
$info2=$doc->createElement('hauteur',$hauteur);
$racine->appendChild($info2);
$tempo=$doc->createElement('delai',$delai);
$racine->appendChild($tempo);
$next=$doc->createElement('prochain',$prochain);
$racine->appendChild($next);
$pre=$doc->createElement('preload',$pre_image);
$racine->appendChild($pre);
$debug=$doc->createElement('debug',"$debugmsg");
$racine->appendChild($debug);
Et pour finir, on envoie le document par un simple echo du texte XML renvoyé par la fonction saveXML sur l'objet.
echo $doc->saveXML();
?>


		
		
[1] ça tombe bien, j'avais justement besoin d'exemple de ce genre de méthode pour un autre article



AJAX - Affichage en temps réel de température relevée par une sonde.
Vader[FR] — 2013-05-05T16:51:40Z
A la demande de absolut_man sur jeuxvideopc.com, qui était intéressé par ma proposition d'aide pour réaliser un site web,
Description

Le projet de bac spé ISN consiste en un robot qui mesure la température et qui la communique sur un site internet. Pas d'une grande utilité à priori mais cela permet de balayer tout le programme de l'année.
Deux cartes arduinos sont utilisées pour la mesure météorologique :
 une sur le robot
 une connectée à l'ordinateur qui communiquera à intervalle régulier les données transmise par l'autre carte
Le problème était : comment faire pour mettre à jour automatiquement les données sur le site internet ?
en fait c'est assez facile

il faut sur le serveur :
 une base de données
 un script php qui fait la mise à jour, script appelé par un programme sur le PC qui envoie les informations à mettre en base (sonde, date, température...).
 une page html avec un script JavaScript mettant à jour les données affichées grâce à l'AJAX.
 un script php fournissant au script AJAX les données contenues en base.
sur le pc, il suffit d'utiliser la librairie python permettant de faire des requêtes HTTP.
voir là.
la requête sera donc du type http://le_site/page_php.php?paramètre1=valeur1¶mètre2=valeur2.

la page php permettra de mettre à jour la base de données.

python ne créé pas de liste, il envoie les données 1 par 1 à un script php, qui insère les données dans une base.
un script php affichera ensuite une donnée unique ou une liste, selon ce qui est prévu. donnée unique mise à jour par l'AJAX, liste éventuellement sous forme graphique pour présenter l'évolution.
Base de données

la base n'a besoin que d'une seule table : releves, contenant 3 champs
 numéro identifiant de la sonde - champ sonde de type int, entier.
 date + heure du relevé de température - champ date de type datetime, contenant donc date et heure.
 température relevée - champ temperature de type float, un nombre "flottant" donc à virgule, appartenant à l'ensemble mathématique des nombres réels ℝ.
tous ces champs sont non nuls, non uniques.
l'index PRIMARY KEY (clé primaire, permettant d'identifier de manière unique une ligne de la table) sera la combinaison du numéro de sonde et de la date/heure du relevé de température.
Script PHP mise à jour BDD

Ce script est extrêmement simple : Il reçoit en entrée plusieurs variables et les insère dans la base.

le script PHP étant appelé par un script python, l'envoi des données se fait dans l'url de la requête html générée par le script python.
la méthode est donc GET.

la récupération des variables se fait alors par $_GET["variable"]
par sécurité autant que par simplicité, on vérifie l'existence de la variable (dans la requête) avant d'essayer de récupérer sa valeur, avec la fonction isset(variable).

Et pour simplifier encore plus, on rend certaines variables optionnelles en prévoyant des valeurs par défaut.
Ainsi, s'il n'y a qu'une seule sonde et/ou qu'on ne souhaite pas se compliquer en envoyant la date/heure sous un format complexe, le script php s'en charge.
	if (isset($_GET["quand"])){ $quand=$_GET["quand"]; }else{ $quand=date("Y-m-d H:i:s"); // par défaut, date actuelle // format YYYY-MM-DD HH:MM:SS ===> datetime en MYSQL }
la date/heure, justement, doit être au format datetime de MySQL pour être insérée en base, à savoir de type YYYY-MM-DD HH:MM:SS
	// connexion à la base SQL et insertion des données include_once "connect.php";
Pour se connecter à la base, on fait appel à un autre script, ce qui permet d'avoir plusieurs scripts PHP différents utilisant la même méthode de connexion, rendant les changements et corrections plus faciles.



 mysql_connect('adresse serveur MySQL','utilisateur MySQL','mot de passe','MYSQL');

 mysql_select_db("nom de la base"); 

?>

Puis, si la température est définie et que la variable contient une valeur, on insère les données.
	if (isset($temper)&&$temper!=null){ $reki="insert into releves (sonde,date,temperature) values ($sonde,'$quand',$temper)"; $resi=mysql_query($reki); }
?>
null est un mot clé signifiant "rien". Pas zéro, pas chaîne vide, mais rien, pas de valeur. la variable existe mais n'est pas initialisée. C'est un peu comme s'il y avait un feu tricolore, mais éteint. Il est là, il existe, mais il n'est pas vert, orange ou rouge et n'a donc pas de "valeur".
la requête SQL est très simple, l'ordre étant insert dans la table releves dans les champs correspondants sonde, date, temperature des valeurs $sonde, $quand, $temper.
Par sécurité, on aurait pu ajouter un système de clé ou autre moyen d'authentifier le "client" envoyant la requête de mise à jour, que ce soit au niveau du script php, au niveau du serveur web Apache (SSL), ou même ou niveau du pare-feu iptables (chaîne mangle) sous Linux.

Le problème ne se posant pas sur ce projet et par souci de simplicité, cela n'a pas été envisagé.
Page HTML

La page html est assez simple


On indique :
 le type de document xhtml1 transitionnal. Les types de documents normalisés W3C définissent le contenu utilisable et permettent un traitement homogène par les navigateurs respectant ces normes.
 la langue
 la direction d'affichage : dir = ltr, left-to-right, de gauche à droite
	 Projet Celcius (ISN)     
en entête de page, on fournit d'autres informations comme le titre de la page, l'encodage des caractères, la description rapide du contenu.

Une feuille de style CSS et un fichier de script JavaScript sont également appelés.
	  Projet Celcius - Mesure de la température
 
le style CSS associé
body { margin-top: 0px; margin:0; background-image:url("ciel2.jpg"); background-repeat:repeat; font-family: Helvetica, sans-serif; font-size: 1em; color: black;
}
Le corps de page n'a pas de marge, possède une image d'arrière plan qui sera répétée (et non étirée ou fixée), on utilise la police d'écriture Helvetica, de taille 1em et la couleur du texte sera le noir.
body a, body a:visited { color: brown; cursor:pointer; text-decoration:underline;
}
les liens seront en marron et soulignés, qu'ils aient été visités ou non.
body a:hover { color: darkred;
}
Au survol de la souris (évènement "hover"), les liens passeront en rouge sombre.

La page se divise en 2 blocs : entête et contenu.
style CSS
#head, #content h2, #content h3, #temperature { text-align:center;
}
Dans l'entête, le texte est centré. 

De même que pour les titres (entre balises 
 et ) dans le contenu et le contenu du bloc "température".

le bloc contenu contiendra un petit texte explicatif ainsi que le bloc "température", dont le contenu sera mis à jour et dédié à l'affichage de la température.
  ¤ Bienvenue sur le site de notre Projet ISN ¤
 Intitulé du projet : Réaliser un programme et mettre en oeuvre des équipements permettant à un robot Mindstorm NXT de se déplacer dans une pièce en évitant les obstacles et de transmettre des
mesures de température rafraîchies automatiquement sur un site internet.
 Température en temps réel :
style CSS

Pour que le texte soit lisible et non collé aux bords de la page, une propriété de style inclut une marge à l'intérieur du bloc entre les bords du bloc et le contenu.
#content { padding:5px;
}
"padding" représente un espace à l'intérieur, entre le bord du contenant et son contenu. "margin" représente un espace à l'extérieur, entre le bord d'un élément et les éléments qui l'entourent.

Des propriétés différentes peuvent être déclarées pour les bords gauche, haut, droit et bas : padding-left, padding-top, padding-right, padding-bottom, margin-left, ...

Le bloc "température" contient par défaut une valeur quelconque, qui sera ensuite mise à jour par le script JavaScript qui demandera à un script PHP une valeur en base de données, avant d'insérer ladite valeur dans la page.
 en attente de mise à jour
style CSS
#temperature{ font-size:1.5em; color:darkred;
}
Au cas où l'utilisateur aurait désactivé JavaScript, un bloc sera par défaut affiché. Si Javascript est activé, une fonction cachera ce bloc.
  Vous avez désactivé JavaScript. JavaScript est requis pour le rafraîchissement des données de température relevées par le robot sur le site. 
style CSS
#jsornotjs{ color:darkred; font-weight:bold;
}
Puis on ferme le bloc contenu, le corps de page et la page.
 
 

Ce qui donne ceci :


Script JS de mise à jour de la page en AJAX

AJAX consiste à envoyer de manière asynchrone une requête de type XMLHttpRequest et d'effectuer ensuite un traitement du document XML fourni en réponse.
Il faut donc d'abord une fonction pour créer l'objet XMLHttpRequest
création de l'objet XMlHttpRequest
function get_requete_maj_temp(){ var requete_maj_temp=null;
Ici, la variable requete_maj_temp est initialisé à vide. Si la fonction s'exécute correctement, elle contiendra un objet de type XMLHttpRequest
Selon le navigateur, la fonction à utiliser est différente :
 window.XMLHttpRequest sous Firefox
 new ActiveXObject("Msxml12.XMLHTTP") ou new ActiveXObject("Microsoft.XMLHTTP") sous IE, selon la version.
	if (window.XMLHttpRequest){ // Firefox requete_maj_temp=new XMLHttpRequest(); }else if (window.ActiveXObject){ // IE
des blocs try { } catch (erreur) { } permettent "d'essayer" de réaliser certaines actions, et de récupérer le code/message d'erreur dans la variable erreur avant d'exécuter d'autres actions en cas d'échec de l'essai.

Cela permet dans cette fonction de tester les différentes versions d'Internet Explorer.
 try{ requete_maj_temp=new ActiveXObject("Msxml12.XMLHTTP"); }catch(e){ try{ requete_maj_temp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e1){ requete_maj_temp=null; } } }else{ // non supporte alert("Votre navigateur ne supporte pas les XMLHTTPRequest."); }
Une fois fini, que l'objet soit créé ou non, on retourne la variable. 

Celle-ci contient null si on n'a pas pu créer d'objet XMLHttpRequest
	return requete_maj_temp;
}
Ensuite, cet objet doit être envoyé à un script sur un serveur
création et envoi de la requête
On fournit à cette fonction l'adresse où envoyer la requête.
function requete_requete_maj_temp(url){
On tente de créer la requête en utilisant la fonction déclarée précédemment.
	requete_maj_temp=get_requete_maj_temp();
Si la variable n'existe pas ou si elle contient null, on affiche un message d'erreur et on quitte la fonction par la directive return.
	if ((!requete_maj_temp)&&(requete_maj_temp!=null)){ alert("Votre navigateur ne peut creer de requete AJAX."); return; }
Sinon, on définit la fonction JavaScript chargée de traiter la réponse et on envoie la requête.
	requete_maj_temp.onreadystatechange=function(){traitementReponse_requete_maj_temp(requete_maj_temp)} requete_maj_temp.open("GET",url,true); requete_maj_temp.send(null);
}
traitement de la réponse
function traitementReponse_requete_maj_temp(requete_maj_temp){ var contenu;
la variable  contiendra le document réponse XML.
Lorsque la requête sera dans l'état "4", à savoir présence d'une réponse, le traitement sera effectué.
	if (requete_maj_temp.readyState==4){
On charge le contenu du document XML de réponse dans la variable
contenu=requete_maj_temp.responseXML;
Puis on récupère une par une les valeurs des différentes balises XML (tag) avec getElementsByTagName(code_balise), qui renvoie un tableau de tous les éléments ayant ce tag Html/XML.

On cherche généralement le premier élément du tableau,
 dont on récupère la valeur.  temper=contenu.getElementsByTagName("temperature")[0].firstChild.nodeValue; dater=contenu.getElementsByTagName("date")[0].firstChild.nodeValue; heurer=contenu.getElementsByTagName("heure")[0].firstChild.nodeValue; sonde=contenu.getElementsByTagName("sonde")[0].firstChild.nodeValue;

Ensuite, si le bloc dédié à l'affichage des données existe dans la page Html affichée, on le met dans une variable afin de pouvoir y écrire les données reçues avec la directive variable_bloc.innerHTML=chaîne texte.
 if (this.document.getElementById('temperature')!=null){ var div_temp=this.document.getElementById('temperature'); // le div div_temp.innerHTML="sonde "+sonde+" : "+temper+"°C le "+dater+" à "+heurer;
Enfin, pour continuer de mettre à jour les données affichées, on définit un compte à rebours, ici de 10 secondes (10 000 milli-secondes) avec la directive SetTimeout pour appeler la fonction lançant la mise à jour et définie juste après.
 setTimeout("maj_temp()",10000); } }
}
fonction de chargement de la température 
il aurait été possible de faire appel direct à function requete_requete_maj_temp(url) mais cette fonction encapsule l'url pour faire un appel plus simple

on pourrait aussi accepter des paramètres de maj_temp.php, comme le numéro de sonde
function maj_temp(){ if (this.document.getElementById('temperature')!=null){ requete_requete_maj_temp('maj_temp.php'); }
}
La fonction de mise à jour est lancée au chargement de la page (évènement onLoad de l'élément body), via cette fonction AuChargement, qui permet de lancer plusieurs traitements.

Cette fois, le compte à rebours est de 1 seconde, pour initialiser dans la page une valeur de la base de données.
// fonction pour les scripts a lancer au chargement de la page => body onLoad
function AuChargement(){ pisteIE(); cacherjs(); setTimeout("maj_temp()",1000); // 1 seconde
}
Script PHP envoyant les données au script JS

Ce script, appelé par la fonction JavaScript, est extrêmement simple.

Il récupère en base la dernière valeur de température pour une sonde donnée, la sonde "par défaut" étant la 1.

On génère ensuite l'entête du document réponse...
 header('content-Type:text/xml,charset=UTF-8');
...avant de se connecter à la base, récupérer les valeurs...
	include_once "connect.php"; $rek="select sonde,DATE_FORMAT(date,'%d/%m/%Y') as date, DATE_FORMAT(date,'%H:%i:%s') as heure,temperature from releves where sonde=$id order by date DESC limit 0,1"; $res=mysql_query($rek); $row=mysql_fetch_array($res,MYSQL_ASSOC); $sonde=$row["sonde"]; $date=$row["date"]; // a transformer en texte $heure=$row["heure"]; // de meme $temperature=$row["temperature"];
... et de les mettre dans le document XML.
 d'abord, créer le document par new DOMDocument("1.0","utf-8");
 puis y mettre la balise racine createElement('root'); suivi de appendChild();
 ajouter les éléments par createElement(nom_balise, valeur); suivi de appendChild();
	$doc=new DOMDocument("1.0","utf-8"); $racine=$doc->createElement('root'); $doc->appendChild($racine); $xmlsonde=$doc->createElement('sonde',$sonde); $racine->appendChild($xmlsonde); $xmldate=$doc->createElement('date',$date); $racine->appendChild($xmldate); $xmlheure=$doc->createElement('heure',$heure); $racine->appendChild($xmlheure); $xmltemp=$doc->createElement('temperature',$temperature); $racine->appendChild($xmltemp);
et enfin envoyer le document.
	echo $doc->saveXML(); ?>

Vader[FR] : ce n'est pas un blog, c'est un Sith

Script générique des diaporamas AJAX

Lancement des fonctions JavaScript

Lancement du diaporama

Autres paramètres

Création de la requête XMLHTTP

Création de l'objet xmlhttprequest

`Modification de la page affichée`

Autres éléments

Autres cas

`script PHP`

Autres paramètres

Image suivante

AJAX - Affichage en temps réel de température relevée par une sonde.

Description

Base de données

Script PHP mise à jour BDD

`Page HTML`

Projet Celcius - Mesure de la température

le style CSS associé

style CSS

¤ Bienvenue sur le site de notre Projet ISN ¤

Température en temps réel :

style CSS

style CSS

style CSS

`Script JS de mise à jour de la page en AJAX`

création de l'objet XMlHttpRequest

création et envoi de la requête

traitement de la réponse

fonction de chargement de la température

`Script PHP envoyant les données au script JS`