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

Page de garde et structure générale

Vader[FR] — 2014-10-18T14:40:37Z

Page de garde

La toute première page (http://isabellepalenc.com/) est une simple page avec fond grisé et 3 liens de langue. Pour l'instant, seul la langue française est disponible car les articles n'ont pas encore été traduits.

Le lien de langue mène ensuite à la rubrique biographie (http://isabellepalenc.com/spip.php?rubrique2).

Sur la page de garde furent affichés la liste des articles les plus récents, puis un diaporama automatique des œuvres situées dans la rubrique galerie, puis enfin un diaporama automatique sur l'artiste et son atelier, ainsi qu'une citation.

Dès le départ - et c'est un point commun à tous mes squelettes SPIP/Zpip - fut conçue une fausse rubrique "Accueil" en tant que rubrique numéro 1, et ce pour plusieurs raisons :

La rubrique est listée automatiquement dans le menu des rubriques principales du bloc navigation
Le nom de cette rubrique dans la liste peut facilement être traduit grâce à un bloc multilingue dans SPIP, plus facile à éditer qu'un lien en dur dans le squelette.
Le site étant multilingue, le tri par titre dans la liste des rubriques aurait provoqué des incohérences selon la langue, c'est pourquoi les rubriques sont listées par numéro.
- La fausse rubrique étant la numéro 1, elle apparaît toujours en premier, que son nom soit "Accueil" ou "Home".
Cette fausse rubrique peut en cacher d'autres, comme un diaporama dédié ou une citation, qui ne seront visibles de nulle part ailleurs sur le site, y compris la page de plan ou la page recherche.
- Cette fonctionnalité n'était pas prévue au départ, mais était toujours possible, et à fini par servir.

Au sein d'un plugin Zpip, les fichiers de squelette correspondants à la page de garde sont :

rubrique=1.html à la racine du plugin, qui se contente de décrire pour cette rubrique la même structure que la page sommaire
page-sommaire.html dans le répertoire contenu, qui décrit donc le contenu commun des pages sommaire et "Accueil" (rubrique 1).
rubrique-1.html dans le répertoire contenu, qui affichera pour les sous rubriques de la rubrique 1 le même contenu (que la page sommaire).

Squelette de la page de garde

le bloc conteneur général du contenu.

Style CSS associé

.contenu-principal { padding:5px;
}

Pour les éléments de classe "contenu-principal" : espace interne de 5 pixels à gauche.

div.galeries { position:absolute; top:50px; bottom:0; left:0; right:5px; overflow-y:auto;
}

Pour les blocs de classe "galeries" : fixé à 50 pixels du bord haut (du cadre conteneur ou de la fenêtre), à 0 pixels du bas et de la gauche, 5 pixels du bord droite, et ascenseur vertical (axe y) automatique.

le bloc du diaporama

       [(#LOGO_ARTICLE)]  
  JavaScript doit être activé pour que le diaporama puisse démarrer

Ce bloc contient un formulaire, qui sera lu par le script JavaScript générique des diaporamas, afin de préparer la requête XMLHTTP pour le serveur et demander l'élément de diaporama à afficher.
Seuls les éléments (image, titre, texte descriptif) du diaporama seront demandés et téléchargés depuis le serveur, sans que la page ne soit rechargée, afin d'alléger la charge.

Ce concept de programmation en web se nomme AJAX.

Une boucle SPIP permet de charger la première image avant même le lancement du diaporama.

Style CSS diaporama

#diapo { position:absolute; left:0; top:55px; bottom:120px; right:55px; background-color:#999999;
}

Pour le bloc "diapo" : fixé à gauche, en haut, en bas et à droite. 120 pixels du bas afin de prendre en compte la hauteur - fixe - du bloc citation situé dessous.

#diapo_image, #bio_texte, #peintures_image { position:absolute; left:25px; top:25px; bottom:25px;
}
#diapo_image, #peintures_image { right:500px;
}
#diapo_texte, #peintures_contenu { width:475px;
}
#diapo_image img, #bio_image img, #peintures_image img { max-height:100%; max-width:100%;
} #diapo_texte, #bio_image, #peintures_contenu { position:absolute; bottom:0; top:25px; right:5px; padding-right:5px;
} #diapo_texte, #bio_texte, #peintures_contenu { overflow-y:auto;
} #diapo.diapo-sommaire #diapo_texte { visibility:hidden;
} #diapo.diapo-sommaire #diapo_image { right:5px;
}

Afin de cacher le bloc de texte du diaporama de la page de garde, et seulement celle là, le bloc diapo dispose d'une classe, "diapo-sommaire", qui fait que les blocs "diapo_texte" contenus dans un bloc disposant de la classe précitée seront cachés.

De même, les blocs "diapo_image" contenus dans un bloc disposant de la classe précitée seront "fixés" à 5px du bord droite, au lieu de 500px.

Cette classe n'est définie que dans le squelette de la page sommaire.
Cela permet d'avoir un seul "squelette" de diaporama, et donc un seul script AJAX, générique.

.titre_diapo { font-size:1.2em; font-weight:bold;
} .titre_diapo, .titre_diapo a, .titre_article { color:#666666;
} .titre_diapo a { text-decoration: none;
}

le bloc citation

	   [(#TEXTE)]

Ici, c'est une simple boucle SPIP qui va chercher un et un seul ({pagination 1}) article (on travaille sur la table des (ARTICLES)) au hasard ({par hasard}) dans la rubrique 36 ({id_rubrique=36}), rubrique dédiée qui contient les citations et est cachée dans la rubrique "Accueil".
Le filtre de langue {lang} permet de ne choisir que parmi les articles dans la langue souhaitée, selon le paramètre transmis à SPIP (lien de langue).
On affiche ensuite le texte de la citation par la balise [(#TEXTE)].

Style CSS citation

#citation { position:absolute; left:0; bottom:55px; right:55px; background-color:#999999; height:50px; text-align:center;
}

Pour le bloc "citation" : fixé à gauche, en bas et à droite, hauteur fixe de 50 pixels.

#citation p { font-size: 1.2em; margin: 0;
}

Puis la fin du bloc conteneur général

Structure générale du site

L'élément body est surchargé par un bloc "page" positionné de manière absolue et fixé aux bords de la fenêtre.
Les différents éléments du corps de page sont ensuite disposé dans des blocs dédiés : entête, pied de page, navigation et contenu.
Les 4 blocs sont positionnés de manière absolue à l'intérieur du bloc "page", fixés aux bords dudit bloc, afin que le bloc "contenu" puisse s'étendre selon la taille de l'écran, sans que les autres blocs ne se déforment (voir ici).

Le bloc entête contient lui-même 2 sous-blocs :

le bloc unique d'identifiant #drapos, contenant la liste des liens de langue selon les langues utilisées dans les articles publiés du site SPIP. Il est situé de manière absolue dans son cadre (entete), fixé à 20% du bord gauche et 20 pixels du haut. Il peut ainsi s'étendre selon les besoins.
le bloc de classe .accueil, qui est de fait également unique. Il est lui aussi fixé de manière absolue dans son cadre (entete), à 150 pixels du bord droite et 20 pixels du haut. Il contient le logo, qui est de largeur fixe.

Cela permet si besoin est de mettre un bloc d'arrière plan et un bloc filtre sans toucher au contenu, comme c'est le cas pour certains de mes thèmes ZenGarden (exemple).
L'arrière plan étant monochrome, et le bloc contenu disposant généralement d'un arrière plan propre, il n'a pas été nécessaire d'utiliser un bloc dédié à l'arrière plan et un bloc filtre.


Structure général site Isabelle palenc: Aperçu par Firebug (module pour Mozilla Firefox)

Affichage d'une rubrique par vignettes

Vader[FR] — 2014-06-17T16:23:20Z

La rubrique de mes Thèmes Zengarden affiche les sous-rubriques et articles par vignettes, et non sous forme de liste comme dans les autres rubriques.

Comment mettre en place ce format d'affichage ?

1) la boucle SPIP

Pour éviter d'avoir ce format d'affichage dans toutes les rubriques, il ne faudra le mettre que dans des squelettes de rubriques dédiés.

Ne faire ce format d'affichage que pour des rubriques avec relativement peu d'articles car il n'y a pas de système de pagination.

à l'intérieur de la , il faudra créer 2 boucles, une pour les rubriques, auxquelles on ajoute une petite icône style "répertoire", et une pour les articles.

Je ne vais pas expliquer le fonctionnement complet de la boucle SPIP ici, simplement le code HTML généré.

On sélectionne dans la table des rubriques, selon l'identifiant de la rubrique parent (la rubrique affichée) et on trie de manière alphanumérique par le titre au lieu de la date de publication.
Ainsi, les vignettes seront dans l'ordre alphabétique, ce qui est plus simple pour les visiteurs.

On génère un bloc div, dont la classe de style permettra un traitement adéquat.

Dans ce bloc, on affiche le logo de l'article (ou de la rubrique), en le réduisant aux bonnes dimensions, grâce au filtre |image_reduire{250,150}.

En dessous de l'image (en raison de l'utilisation d'un bloc paragraphe), mais toujours dans le même cadre, on affiche le titre de l'article (ou de la rubrique).

 [(#LOGO_RUBRIQUE|image_reduire{150,70})][(#TITRE)]

Articles et rubriques auraient pu avoir une classe CSS identique, mais il est préférable de faire une différence afin que celle-ci soit visible pour les visiteurs.

la boucle pour les articles :

	   [(#LOGO_ARTICLE|image_reduire{150,70})]
#TITRE

2) le style CSS

Toutes les vignettes s'alignent dans le même cadre, grâce à la propriété de style float:left.

Comme il n'y a pas de pagination, il faudra permettre au cadre conteneur de défiler, avec la propriété de style overflow-y:auto, qui affichera donc un "ascenseur" vertical si le contenu dépasse la taille du cadre.
Sauf si le cadre n'est pas "fixé" en taille fixe ou à distance fixe des bords en position:absolute (ou position:relative), auquel cas il pourra s'agrandir à volonté... et la page avec.

Tout d'abord, la taille et le positionnement, communs aux deux classes de vignettes.
La taille doit être cohérente avec celle du filtre de la boucle SPIP, et prévoir la hauteur du texte sous l'image.

La propriété de style float:left permet de faire "flotter" les blocs, qui vont s'aligner les uns à côtés des autres, puis "couler" à la ligne suivante.

.vignettes_rubrique, .vignettes_article { width:150px; height:100px; float:left; margin: 10px; text-align: center;
}

De même, les images (éléments HTML correspondants à la balise HTML img) contenus dans un bloc de classe vignettes, auront une taille limitée par le style CSS.

Dans la mesure où la taille des images est limitée par le filtre de la boucle SPIP, cette précaution n'est pas nécessaire.

.vignettes_rubrique img, .vignettes_article img { max-width:150px;
}

Pour les blocs des vignettes de rubriques, on ajoute une image d'arrière plan, en forme d'icône de répertoire, qui sera positionnée en bas à droite, et non répétée.
Cette image est située dans le même répertoire que le CSS, même si le CSS est question est invoqué par un CSS de thème situé dans un sous-répertoire, dans le cas d'une feuille de style commune (ce qui est le cas pour ce site).

.vignettes_rubrique { background-image:url("icon_rep.png"); background-position:bottom right; background-repeat:no-repeat;
}

En raison de la présence de cette vignette, il faut, afin que le texte (titre) des blocs vignettes de rubriques reste lisible et ne passe pas devant, ajouter une marge à droite, ici de 32px.

.vignettes_rubrique .texte { margin: 0 32px 0 0;
}

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(); ?>