• Facile
Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

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.

XML et XSLT

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

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 :

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

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 :

<?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 :

<!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.

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 :

<!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 :

<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 :

<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).

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

</xsl:template>
</xsl:stylesheet>

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

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 :

    <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 :

    <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 :

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

    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 :

    <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 !

    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 :

    <?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.

    Régions répétées

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

    <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 :

    <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 :

    <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.

    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 » :

    <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>
    

    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.

    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 :

    <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.

    <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 :

    <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.

    Commentaires

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

    <xsl:comment>
    Commentaire
    </xsl:comment>
    

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

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

    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 :

    <?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à !

    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.

    Exemple de certificat de réussite
    Exemple de certificat de réussite