Les bases de la mise en forme XML avec XSLT
Bienvenue à mon tutorial sur le XSLT !
Vous avez envie de mettre en forme une page XML pour pouvoir l'utiliser ?
Et bien le format XSLT est parfait pour cela !
Je vais vous apprendre les techniques nécessaires pour créer un document XSLT et à traiter et afficher des données XML.
Le XML est un language de mise en forme de données avec des balises.
(si vous ne connaissez pas le XML, regardez
ce tutorial)
Il existe plusieurs moyens de mettre en forme du
XML mais la plus puissante est le
XSLT. (le CSS est aussi possible mais limité)
C'est donc celui que nous allons voir (vous vous en doutiez je pense
)
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 plateforme</type>
<prix>30-50€</prix>
</jeu>
<jeu id="3">
<nom>Mario Sokoban</nom>
<type>Jeu de Réflection</type>
<prix>Gratuit</prix>
</jeu>
</test>
|
Créez un fichier que vous enregistrerez avec le nom "le_nom_que_vous_voulez.xml" et mettez y donc ce code. Allez, maintenant passons aux choses sérieuses.
Commencez par créer un nouveau fichier que vous enregistrerez avec le nom "le_nom_de_votre_choix.xsl"
Comme vous le voyez, l'extension d'un fichier XSLT est .xsl, pas étonnant.
Vous avez donc une page vierge devant vous, mais qu'à cela ne tienne !
D'abord, mettons 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 | <?xml version="1.0" encoding="utf-8"?>
|
Ensuite, si, dans la page XML, vous utilisez des entités (c'est à dire, des choses comme é) , 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 " ">
<!ENTITY copy "©">
<!ENTITY reg "®">
<!ENTITY trade "™">
<!ENTITY mdash "—">
<!ENTITY ldquo "“">
<!ENTITY rdquo "”">
<!ENTITY pound "£">
<!ENTITY yen "¥">
<!ENTITY euro "€">
]>
|
Je vous ai mis quelques entités par défaut. C'est surtout utile si vous utilisez l'iso pour l'encodage des caractères.
Les entités par défauts de XML n'ont pas besoin d'être déclarées (c'est à dire < & > " ')
Pour ajouter une entité, vous devez récupérer son nom (vous l'avez déjà normalement) et son code. Pour cela, allez sur
cette page
Trouvez la ligne de l'entité cherché, copiez le code (par example  ) et écrivez à la suite des entités déjà déclarées :
Code : XML | <!ENTITY le_nom "le_code">
|
Après ça on va, on va ouvrir les premières balises XSLT en donnant aussi quelques informations.
Tapez donc à la suite du code présent, cela :
Code : XML | <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, le "préfixe" des balises xslt. Par défaut c'est xsl et je laisserais la valeur par défaut pendant le tutorial.
La deuxième ligne donne des informations sur le format de la page après transformation. Changer l'encodage si vous en utilisez un autre évidemment.
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 mettez le code de base d'un document xHtml :
Code : HTML | <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 mettre tout ce qu'une page html peut gérer (Balises html classiques, css et même Javascript)
Mais attention ! Il est impossible de mettre du contenu dynamique comme du PHP ou de l'ASP par exemple
Après le code de base, il faut refermer les balise xsl :
Code : XML | </xsl:template>
</xsl:stylesheet>
|
Et voila ! La page xslt est terminée ! Enfin, la base. Il faut maintenant rajouter le contenu XML
C'est inutile d'essayer d'ouvrir la page xslt. Elle ne contient que la mise en forme ! Nous verrons plus tard comment afficher le résultat.
La page de base xslt étant terminée, nous allons maintenant ajouter du contenu XML.
Pour faire simple, on va faire 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> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
|
Maintenant ou souhaite afficher des données XML à la place des
Une balise xsl est comme ça :
Code : XML | <xsl:nom_de_la_balise attributs="valeurs" />
|
xsl est le préfixe de la balise comme je vous l'ai dit à propos des namespaces
La balise permettant d'afficher du contenu est
Code : XML | <xsl:value-of select="test/jeu/@id"/>
|
Dans cette exemple, l'id de la première balise jeu dans la balise test sera sélectionné.
Lorsque l'on cible un attribut d'une balise on met @ avant le nom de l'attribut.
Pour cibler le contenu d'une balise, on s'arrête à son nom.
Pour afficher tout de notre première balise jeu, on doit écrire :
Code : XML | <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 ? Et bien nous allons voir ça !
Comme je vous l'ai dit plus haut, il est inutile d'ouvrir la page xslt. Il va falloir l'attacher à la page XML comme on accroche une page 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 | <?xml-stylesheet href="le_nom_de_la_feuille_xslt.xsl" type="text/xsl"?>
|
Après ça, essayez d'ouvrir le fichier xml, et la, 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 !
Il va falloir utiliser un nouvelle balise xsl !
Comme je l'ai promis, nous allons voir une autre balise xsl.
La voici :
Code : XML | <xsl:for-each select="test/jeu">
</xsl:for-each>
|
Le contenu entre ces balises sera répétée autant de fois qu'il y a de balises jeu dans le document XML.
Il faudrait donc écrire :
Code : XML | <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 que 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 vrai code est donc :
Code : XML | <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>
|
</code>
Essayez donc ce code et regardez la magie opérer ! Tout le contenu de toutes le balise jeu sont écrites noir sur blanc
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. Mettons que vous voulez afficher tout les jeux donc le nom est "Super Mario Galaxy".
Vous devrez donc mettre à côté de la balise que vous voulez filtrer entre crochet le filtre.
Pour illustrer mon exemple, voici le script qui affiche tout les jeux dont le nom est Super Mario Galaxy :
Code : XML | <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 de mettre des apostrophes pour délimiter Super Mario Galaxy parce que mon fichier est encodé en UTF-8. En iso, on doit écrire '
Vous pouvez appliquer des filtres à n'importe quel balise.
Il existe aussi plusieurs opérateurs de comparaison :
| Égal |
= |
| Non égal |
!= |
| Supérieur |
> (>) |
| Supérieur ou égal |
>= (>=) |
| Inférieur |
< (<) |
| Inférieur ou égal |
<= (<=) |
Les opérateurs de supériorité ou d'infériorité ne s'applique qu'à des nombres bien sûr.
Il est aussi possible de mettre plusieurs filtres en même temps :
Pour cela, mettez entre les conditions or (ou) ou and (et).
Vous ne pouvez pas mélanger les deux
Il est possible grâce à une nouvelle balise xsl d'afficher une zone que si une condition est remplie.
Voici la balise en question :
Code : XML | <xsl:if test="">
</xsl:if>
|
Par exemple :
Code : 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>
|
Afficherait "J'ai Mario Sokoban" mais pas "J'ai Metroid Prime" à part si vous le rajoutiez dans le fichier XML.
Les multiples conditions
Il existe en xsl, un sorte de variante de switch
Le code de base est :
Code : XML | <xsl:choose>
<xsl:when test="">
</xsl:when>
<xsl:otherwise>
</xsl:otherwise>
</xsl:choose>
|
ouvre le "switch".
Chaque
<xsl:when test="">
indique une condition comme
<xsl:if test="">
<xsl:otherwise>
est l'équivalent du default, c'est à dire ce qui est fait si aucune des conditions n'est vérifiée.
En faite
<xsl:choose>
est le mélange d'un switch et d'une cascade de if elseif ...
Les conditions peuvent donc porter sur n'importe quel élément.
Les conditions offrent beaucoup de choix possibles et les utiliser ne peut être qu'utile.
Les commentaires en xsl existent aussi. Voici la balise en question :
Code : XML | <xsl:comment>
Commentaire
</xsl:comment>
|
Mettez tout les commentaires que vous voulez il ne seront pas affiché
Il est tout à fait possible d'afficher une page XML mise en forme avec XSLT dans une page PHP.
(Notez que la solution utilisée dans ce chapitre est valable uniquement pour PHP5)
Pour cela, vous devez d'abord vérifier si l'extension xsl de php est activée.
Par exemple, sous wamp, cliquez sur l'icône de Wamp, choisissez PHP puis Extensions PHP et cochez php_xsl si ce n'est 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, mettez le code suivant :
Code : PHP | <?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 contenir le résultat final. On applique avant tout la feuille de style CSS (
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 vrais chemins d'accès.
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 on s'en fiche).
Et voila !
Nous voila arrivé à la fin de ce tutorial sur les 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 pourrait 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 vu que ce tutorial ne parle que des bases, vous allez devoir apprendre par vous même le reste. C'est en forgeant que l'on devient forgeron
Une assez bonne documentation sur xslt en français se trouve
ici
Pour les anglophones, une documentation en anglais se trouve sur le site même de la W3C :
Ici
Informations sur le tutoriel
Retour en haut 
Créé : Le 10/11/2009 à 13:22:27
Modifié : Le 20/11/2009 à 00:49:08
Avancement : 100%
Licence : Copie non autorisée
13 commentaires
Flux RSS News
Twitter
Facebook