Exemple XML et XSLT avec Bootstrap
Le fichier XML
Le fichier XML contient les données des contacts : Avatar, prénom, nom, email et téléphone.
Vous pouvez joindre une feuille de style dans le fichier XML avec la balise <?xml-stylesheet ?>
<?xml version="1.0" encoding="UTF-8"?>
<!-- Le fichier XSL qui va présenter le fichier XML -->
<?xml-stylesheet type="text/xsl" href="contacts.xsl"?>
<contacts>
<person>
<avatar>avatars/avatar3.png</avatar>
<firstname>Jane</firstname>
<lastname>Doe</lastname>
<email>jane.doe@example.com</email>
<phone>06 00 00 00 00</phone>
</person>
<person>
<firstname>John</firstname>
<lastname>Doe</lastname>
<email>john.doe@example.com</email>
<phone>06 00 00 00 01</phone>
</person>
<person>
<avatar>avatars/avatar1.png</avatar>
<firstname>Sherlock</firstname>
<lastname>Holmes</lastname>
<email>sherlock.holmes@example.com</email>
<phone>06 00 00 00 02</phone>
</person>
<person>
<avatar>avatars/avatar2.png</avatar>
<firstname>Bruce</firstname>
<lastname>Wayne</lastname>
<email>bruce.wayne@example.com</email>
<phone>06 00 00 00 03</phone>
</person>
<person>
<avatar>avatars/avatar4.png</avatar>
<firstname>John</firstname>
<lastname>Smith</lastname>
<email>john.smith@example.com</email>
<phone>06 00 00 00 04</phone>
</person>
</contacts>Le fichier XSL
Le fichier XSLT est une représentation des données. Il va mettre en page les données.
Dans cet exemple, j'utilise les composants Bootstrap comme pour le web. J'importe Bootstrap avec le CDN.
Attention : XSLT est du XML. Le moteur sera donc plus sensible que du HTML. Pensez à bien fermer les balises même pour les balises en une ligne ! (par exemple : <link rel="..." href="..." />)
<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<head>
<title>Mes contacts</title>
<!-- CDN Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- fichier style.css -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Mes contacts</h1>
<div class="row">
<!-- Pour chaque personne -->
<xsl:for-each select="contacts/person">
<div class="col-lg-4 col-md-6">
<div class="card contact-card">
<xsl:choose>
<!-- Si avatar existe -->
<xsl:when test="avatar">
<!-- On affiche l'avatar -->
<img class="card-img-top rounded-circle avatar" src="{avatar}" alt="Avatar" />
</xsl:when>
<xsl:otherwise>
<!-- Sinon on affiche l'avatar par défaut -->
<img class="card-img-top rounded-circle avatar" src="/resources/default-avatar.png" alt="Default Avatar" />
</xsl:otherwise>
</xsl:choose>
<div class="card-body">
<h5 class="card-title">
<!-- On affiche le prénom et le nom avec un espace   = -->
<xsl:value-of select="firstname"/> <xsl:value-of select="lastname"/>
</h5>
<p class="card-text">
<!-- On affiche l'email -->
<xsl:value-of select="email"/>
</p>
<p class="card-text">
<!-- On affiche le téléphone -->
<xsl:value-of select="phone"/>
</p>
</div>
</div>
</div>
</xsl:for-each>
</div>
</div>
</body>
</html>Grâce aux balises XSL vous pouvez choisir d'afficher ou non une donnée. Pour l'avatar, si il n'existe pas, j'affiche un avatar par défaut.
Vous pouvez ajouter une feuille de style CSS avec la balise <link>
.contact-card {
width: 18rem;
margin-top: 50px;
margin: 50px auto auto auto;
}
.avatar {
width: 100px;
margin: 0 auto;
}
Le résultat
L'arborescence du projet :
Commentaires
Enregistrer un commentaire