Aller au menu - Aller au contenu

Icône Les bases de la mise en forme XML avec XSLT

Avatar
Par Avatar Banana Split
Mise à jour : 25/08/2010
Difficulté : Facile Facile
213 visites depuis 7 jours , classé 375/777
Bienvenue dans mon tutoriel consacré au langage XSLT.

Vous avez envie de mettre en forme une page XML afin de pouvoir l'utiliser ?
Eh bien, le format XSLT est parfaitement adapté pour ça.

Je vais vous apprendre les techniques nécessaires en vue de créer un document XSLT, ainsi qu'à traiter et afficher des données XML.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

XML et XSLT

Le XML est un langage de mise en forme de données utilisant des balises.

Si vous ne connaissez pas le XML, consultez ce tutoriel.

Il existe plusieurs moyens pour mettre en forme du XML, mais le plus puissant est le XSLT (le CSS est aussi utilisable, mais limité).
Comme vous vous en doutez, il s'agit du langage que nous allons étudier.

Lors d'exemples, je vais utiliser ce petit fichier XML tout simple :

Code : XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<test>
	<jeu id="1">
		<nom>Guild Wars</nom>
		<type>Jeu de rôle en ligne</type>
		<prix>Environ 20 € l'épisode</prix>
	</jeu>
	<jeu id="2">
		<nom>Super Mario Galaxy</nom>
		<type>Jeu de plate-forme</type>
		<prix>30-50 €</prix>
	</jeu>
	<jeu id="3">
		<nom>Mario Sokoban</nom>
		<type>Jeu de réflexion</type>
		<prix>Gratuit</prix>
	</jeu>
</test>


Créez un fichier que vous enregistrerez sous le nom « le_nom_que_vous_voulez.xml » et placez-y donc ce code. Allez, passons à présent aux choses sérieuses ! ;)
Retour en haut

Création de la page XSLT

Commencez par créer un nouveau fichier que vous enregistrerez sous le nom « le_nom_de_votre_choix.xsl ».
Comme vous le constatez, l'extension d'un fichier XSLT est .xsl, ce qui n'est pas étonnant.

Vous avez donc une page vierge devant vous, mais qu'à cela ne tienne !
Mettons tout d'abord le code par défaut.

Il faut indiquer en premier la même version XML et le même encodage que la page XML. Pour cela, recopiez la première ligne du document XML, qui est dans mon cas :

Code : XML
1
<?xml version="1.0" encoding="utf-8"?>

Ensuite, si vous utilisez des entités dans la page XML (c'est-à-dire des choses telles que « &eacute; »), il vous faut les déclarer. Pour cela, écrivez à la suite :

Code : XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE xsl:stylesheet  [
	<!ENTITY nbsp   "&#160;">
	<!ENTITY copy   "&#169;">
	<!ENTITY reg    "&#174;">
	<!ENTITY trade  "&#8482;">
	<!ENTITY mdash  "&#8212;">
	<!ENTITY ldquo  "&#8220;">
	<!ENTITY rdquo  "&#8221;"> 
	<!ENTITY pound  "&#163;">
	<!ENTITY yen    "&#165;">
	<!ENTITY euro   "&#8364;">
]>

Je vous ai joint quelques entités par défaut, utiles en particulier si vous utilisez l'ISO pour l'encodage des caractères.

Les entités par défaut de XML n'ont pas besoin d'être déclarées (c'est-à-dire « &lt; », « &amp; », « &gt; », « &quot; » et « &apos; »).

Pour ajouter une entité, vous devez récupérer son nom (en principe, vous le possédez déjà) et son code. Pour cela, rendez-vous sur cette page.
Trouvez la ligne de l'entité recherchée, copiez le code (par exemple « &#160; ») et écrivez ceci à la suite des entités déjà déclarées :

Code : XML
1
<!ENTITY le_nom  "le_code">

Ensuite, nous allons ouvrir les premières balises XSLT en donnant aussi quelques informations.
Tapez donc ceci à la suite du code présent :

Code : XML
1
2
3
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">

La première ligne renseigne la version de XSLT et désigne le namespace (xmlns:xsl) des balises XSLT, c'est-à-dire leur « préfixe ». La valeur par défaut est xsl, et je la conserverai tout au long du tutoriel.
La deuxième ligne donne des informations sur le format de la page après transformation. Dans le cas où vous en utilisez un autre, changez l'encodage.
La troisième ligne indique quelles balises seront concernées par le code qui s'y trouve. Vous pouvez en mettre plusieurs, comme une qui ne concernerait qu'un type d'élément si le fichier XML contenait plus d'un type de données.

Ensuite, c'est simple, vous placez le code de base d'un document XHTML :

Code : HTML
1
2
3
4
5
6
7
8
9
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mise en forme avec XSLT</title>
</head>

<body>
</body>
</html>

Vous pouvez utiliser tout code qu'une page HTML peut gérer (balises HTML classiques, CSS et même JavaScript).

Mais attention : il est impossible d'exploiter du contenu dynamique, tel que du PHP ou de l'ASP par exemple !

Après le code de base, il faut refermer les balises xsl :

Code : XML
1
2
</xsl:template>
</xsl:stylesheet>


Et voilà ! La page XSLT est terminée ! Du moins, la base. Il faut maintenant rajouter le contenu XML.

Il est inutile d'essayer d'ouvrir la page XSLT, car elle ne contient que la mise en forme ! Nous verrons plus tard comment afficher le résultat.
Retour en haut

Afficher du contenu XML

La page de base XSLT étant terminée, nous allons maintenant ajouter du contenu XML.

Pour faire simple, nous allons créer un tableau qui affichera le contenu d'une page XML.
Entre les balises <body></body> , écrivez ce code :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<table width="1000" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Nom</th>
    <th scope="col">Type</th>
    <th scope="col">Prix</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Maintenant, on souhaite afficher des données XML à la place des &nbsp; .
Une balise XSL se présente sous cette forme :

Code : XML
1
<xsl:nom_de_la_balise attributs="valeurs" />

Comme je vous l'ai dit à propos des namespaces, le préfixe de la balise est xsl.
La balise permettant d'afficher du contenu est celle-ci :

Code : XML
1
<xsl:value-of select="test/jeu/@id"/>

Sachez que le XSLT utilise le langage XPath pour naviguer dans un fichier XML. Consultez ce lien pour plus d'informations.

Dans cet exemple, l'id de la première balise jeu dans la balise test sera sélectionné.
Lorsque l'on cible l'un des attributs d'une balise, on indique @ devant le nom de l'attribut.
Pour cibler le contenu d'une balise, on s'arrête à son nom.

Pour afficher toutes les informations de notre première balise jeu, on doit écrire :

Code : XML
1
2
3
4
<td><xsl:value-of select="test/jeu/@id"/></td>
<td><xsl:value-of select="test/jeu/nom"/></td>
<td><xsl:value-of select="test/jeu/type"/></td>
<td><xsl:value-of select="test/jeu/prix"/></td>


Maintenant, vous savez afficher du contenu XML, mais je pense que vous avez envie de tester, non ? Eh bien, nous allons voir ça !
Retour en haut

Lier la feuille XSLT au fichier XML

Comme je vous l'ai dit plus haut, il est inutile de visualiser la page XSLT. Il va falloir l'attacher à la page XML comme on attache un document CSS à une page HTML.
Pour cela, rien de plus simple !

Au début du fichier XML et après la première ligne, ajoutez la ligne suivante :

Code : XML
1
<?xml-stylesheet href="nom_de_la_feuille_xslt.xsl" type="text/xsl"?>

Après ça, essayez d'ouvrir le fichier XML… Et là, que voyez-vous ?
Un tableau avec les données de la première balise jeu !

Mais ce n'est pas vraiment ce qu'on recherche, on voudrait plutôt afficher tout le contenu !
Il va donc falloir utiliser une nouvelle balise XSL.
Retour en haut

Régions répétées

Comme promis, nous allons évoquer une autre balise XSL.
La voici :

Code : XML
1
2
3
<xsl:for-each select="test/jeu">

</xsl:for-each>

Le contenu présent à l'intérieur de ces balises sera répété autant de fois qu'il y a de balises jeu dans le document XML.
Il faudrait donc écrire :

Code : XML
1
2
3
4
5
6
7
8
<xsl:for-each select="test/jeu">
    <tr>
      <td><xsl:value-of select="test/jeu/@id"/></td>
      <td><xsl:value-of select="test/jeu/nom"/></td>
      <td><xsl:value-of select="test/jeu/type"/></td>
      <td><xsl:value-of select="test/jeu/prix"/></td>
    </tr>
</xsl:for-each>

Sauf qu'en réalité, il ne faut pas remettre test/jeu/ car il est déjà écrit dans l'attribut select de <xsl:for-each> .

Le bon code est donc celui-ci :

Code : XML
1
2
3
4
5
6
7
<xsl:for-each select="test/jeu">
    <tr>
      <td><xsl:value-of select="@id"/></td>
      <td><xsl:value-of select="nom"/></td>
      <td><xsl:value-of select="type"/></td>
      <td><xsl:value-of select="prix"/></td>
    </tr>


Essayez ce code et laissez la magie opérer ! L'intégralité du contenu de toutes les balises jeu est écrite noir sur blanc.
Retour en haut

Les filtres

Généralement, vous ne souhaiterez pas afficher tout un document XML d'un coup : pour cela, il faudra utiliser les filtres.

Vous devez les mettre dans l'attribut select. Admettons que vous voulez afficher tous les jeux dont le nom est « Super Mario Galaxy ».

Vous devrez donc indiquer le filtre entre crochets, à côté de la balise que vous voulez filtrer.
Pour illustrer mon exemple, voici le script qui affiche tous les jeux dont le nom est « Super Mario Galaxy » :

Code : XML
1
2
3
4
5
6
7
8
<xsl:for-each select="test/jeu[nom = 'Super Mario Galaxy']">
    <tr>
      <td><xsl:value-of select="@id"/></td>
      <td><xsl:value-of select="nom"/></td>
      <td><xsl:value-of select="type"/></td>
      <td><xsl:value-of select="prix"/></td>
    </tr>
</xsl:for-each>

Je me suis permis d'utiliser des apostrophes pour délimiter « Super Mario Galaxy », parce que mon fichier est encodé en UTF-8. En ISO, on doit écrire « &apos; ».

Vous pouvez appliquer des filtres à n'importe quelle balise.

Il existe aussi plusieurs opérateurs de comparaison :

Égal =
Non égal !=
Supérieur > (&gt;)
Supérieur ou égal >= (&gt;=)
Inférieur < (&lt;)
Inférieur ou égal <= (&lt;=)


Bien entendu, les opérateurs de supériorité ou d'infériorité ne s'appliquent qu'à des nombres.

Il est également possible de mettre plusieurs filtres en même temps. Pour cela, placez or (« ou ») ou and (« et ») entre les conditions.

Vous ne pouvez pas mélanger les deux !
Retour en haut

Régions conditionnelles

Il est possible, grâce à une nouvelle balise XSL, de n'afficher une zone que si une condition est remplie.

Voici la balise en question :

Code : XML
1
2
3
<xsl:if test="">

</xsl:if>

Par exemple, le code suivant affichera « J'ai Mario Sokoban » mais pas « J'ai Metroid Prime », sauf si vous l'ajoutez dans le fichier XML.

Code : XML
1
2
3
4
5
6
7
8
<xsl:for-each select="test/jeu">
<xsl:if test="nom = 'Mario Sokoban'">
<p>J'ai Mario Sokoban !</p>
</xsl:if>
<xsl:if test="nom = 'Metroid Prime'">
<p>J'ai Metroid Prime !</p>
</xsl:if>
</xsl:for-each>


Les multiples conditions

Il existe en XSL une sorte de variante de switch.
Le code de base est celui-ci :

Code : XML
1
2
3
4
5
6
7
8
<xsl:choose> 
    <xsl:when test=""> 

    </xsl:when> 
    <xsl:otherwise> 

    </xsl:otherwise> 
</xsl:choose>

<xsl:choose> ouvre le switch.
Chaque <xsl:when test=""> indique une condition telle que <xsl:if test=""> .
<xsl:otherwise> est l'équivalent du default, c'est-à-dire ce qui est effectué si aucune des conditions n'est vérifiée.

En fait, <xsl:choose> est le mélange d'un switch et d'une cascade de if, elseif, etc.
Les conditions peuvent donc porter sur n'importe quel élément.

Elles offrent beaucoup de possibilités, et les utiliser ne peut être qu'utile.
Retour en haut

Commentaires

Les commentaires existent aussi en XSL. Voici la balise en question :

Code : XML
1
2
3
<xsl:comment>
Commentaire
</xsl:comment>

Ajoutez-y tous les commentaires que vous voulez, ils ne seront pas affichés.
Retour en haut

Inclure une page XML associée à une page XSLT dans PHP

Notez que la solution utilisée dans cette partie est valable uniquement pour PHP5.

Il est tout à fait possible d'afficher une page XML mise en forme avec XSLT dans une page PHP.

Pour cela, vous devez d'abord vérifier si l'extension XSL de PHP est activée.
Par exemple, avec WAMP, cliquez sur l'icône de WAMP, choisissez « PHP » puis « Extensions PHP », et cochez l'option « php_xsl » si ce n'est pas déjà fait.

Ensuite, créez donc une page XML, une page XSLT (sans les balises de base d'un document HTML) et une page PHP.

Dans la page PHP, placez le code suivant :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<?php
   $xslDoc = new DOMDocument();
   $xslDoc->load("sommaire.xsl");

   $xmlDoc = new DOMDocument();
   $xmlDoc->load("chapitre.xml");

   $proc = new XSLTProcessor();
   $proc->importStylesheet($xslDoc);
   echo $proc->transformToXML($xmlDoc);
?>

Explications : au départ, il faut charger la page XML (dans $xmlDoc) et la feuille de style XSLT (dans $xslDoc). Ensuite, on crée un nouveau container ($proc) qui doit contenir le résultat final. On applique avant tout la feuille de style XSL (importStylesheet), puis on effectue la transformation de la page XML à l'aide de la feuille de style et on affiche le résultat.

Changez bien évidemment sommaire.xsl et chapitre.xml par les chemins d'accès réels.

Si vous lancez ce code, la page s'affichera normalement et, si vous regardez dans le code source, tout le code XSL traité est affiché (non présentable, mais peu importe).

Et voilà !
Retour en haut
Nous voici arrivés à la fin de ce tutoriel traitant des bases. En réalité, le XSLT est bien plus puissant que vous ne pouvez l'imaginer.
Par exemple, il existe beaucoup plus de balises XSL. Il existe aussi des fonctions utiles comme current() et last() qui, avec une condition, pourraient effectuer des actions si l'élément sélectionné est le dernier.

Je ne vous ai appris que la mise en forme. En réalité, on peut aussi transformer une page XML avec XSLT.

Mais compte tenu que ce tutoriel ne parle que des bases, vous allez devoir apprendre le reste par vous-mêmes. C'est en forgeant que l'on devient forgeron ! :)

Vous pouvez trouver ici une assez bonne documentation sur le XSLT, en français.
Pour les anglophones, une documentation en anglais est disponible sur le site même de la W3C : cliquez ici.
Retour en haut

Partager

Retour en haut
20 commentaires pour "Les bases de la mise en forme XML avec XSLT"
Note moyenne : 2.85 / 4 (13 votes)
Pseudo Commentaire
Hors ligne jmlépanda # Posté le 26/08/2010 à 20:25:39
yop
Avatar

 Si on veut se rapprocher du SQL il y a Xquery qui est plus adapter, Je pense que Xslt est avant tout un langage de transformation et non pas un langage de requete, le document XML est vue dans son ensemble et non pas vue comme une base de donnée.
Hors ligne anenonime # Posté le 28/08/2010 à 08:01:44

Excellent tutorial ... par contre je suis toujours une pipe concernant UTF8
Malgré mes déclarations <!ENTITY...etc. ça persiste à m'afficher les caractères à la con ! lol
Hors ligne Chicobuarque # Posté le 28/08/2010 à 16:31:04

Ville : Nice
Pays : France métropolitaine

 @ Jmlependa : bien vu, c'est vrai que la comparaison avec Xquery est plus pertinente.

@ anenonime : je te renvoie à ce tuto du SDZ : Passer du latin 1 à l'unicode.
En plus de déclarer un encodage en utf-8 il faut que ton fichier lui-même soit enregistré en utf-8, dans Notepad++ par exemple tu as un menu "Format" et là tu cliques sur "Convertir en utf-8 (sans BOM)", pareil pour les fichiers qui se servent de ta feuille de style.
Hors ligne v1nCenT # Posté le 29/08/2010 à 10:43:01

Bonjour !

Je viens juste de terminer ce petit tuto', et de suite j'ai activé mon compte sur le site du ZérO, pour faire quelques remarques.

Alors oui, on peut juger que cette présentation est expéditive. Un mal pour un bien ! Fi des détails et des informations parasites, on va directement au concret.
Je rejoins dans cette logique l'image de l'exemple bien plus qu'un tutoriel complet.

Ceci dit, j'ai apprécié cet "exemple", qui m'a replongé avec joie dans le XSLT. Je ne me permettrais pas de faire des commentaires sur la rédaction, puisque je n'ai pas eu de difficulté de lecture. Je laisse le chipotage à d'autres zérOs.

Par contre je ferais quelques remarques sur le contenu en lui-même, en espérant que ça serve à l'auteur !

1) Explications des lignes "xsl:output" et "xsl:template" (début), qui me semblent partielles.
Tu as choisi "method='html'", mais tu pourrais parler des autres choix possibles plus en détail (et non en une phrase bien trop vague à mon goût)
En outre tu n'expliques pas que le "/" désigne la racine du document XML. C'est une information qui peut s'avérer utile pour un débutant !

2)Dans la partie "régions répétées", l'exemple 3.
Je me suis contenté de copier-coller dans mon fichier cet exemple..... mais il manque la balise fermante </xsl:for-each>. Un débutant peut se retrouver perdu !

3)Dans la partie "Commentaires", tu présentes une balise <xsl-comment>, mais pourquoi ne pas tout simplement utiliser "<!-- -->" ??? C'est utiliser en XHTML, en TEI ou tout autre format XML. Pourquoi changer quand on aborde les XSLT ?

Encore bravo pour ce travail, et bon courage pour une suite "XSLT EN MODE ULTRA BOURRIN" (avec des pointeurs XPATH de 3 lignes et des balises XSL dans tous les coins).
Hors ligne djaps # Posté le 25/01/2012 à 09:24:15
Avatar

 Bonjour,

Une entité ne se déclare pas dans le fichier de transformation (.xsl) MAIS dans le fichier source à transformer (.xml)
Côté client, le remplacement de l'entité est automatique
Côté serveur, pour par exemple php5, il faut lui dire
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
   $xslDoc = new DOMDocument();
   $xslDoc->load("sommaire.xsl");

   $xmlDoc = new DOMDocument();
   $xmlDoc->substituteEntities = true; // avant de lire le document source
   $xmlDoc->load("chapitre.xml");

   $proc = new XSLTProcessor();
   $proc->importStylesheet($xslDoc);
   echo $proc->transformToXML($xmlDoc);
?>


David
Retrouvez moi sur Facebouc
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.