Avant de vous lancer dans la génération de code HTML dynamique à l'aide de PHP, il est bon de monter le code HTML avec des valeurs codées en dur.
Ceci permet de bien voir le rendu de la page Web et de corriger le code HTML ou CSS au besoin.
Lorsque l'apparence de la page est satisfaisante, il est temps de rendre le tout dynamique.
Dans cet exemple, nous allons dynamiser une liste d'items stylisée comme suit :
Le code HTML statique est donné plus bas.
Les règles CSS étaient fournies dans la maquette et ne sont pas importantes pour cette démonstration.
▼Publicité Le texte se poursuit plus bas
Il est important de bien comprendre les différentes parties du code HTML statique :
Les couleurs permettent d'identifier ces parties.
<div class="conteneur">
<section class="boites">
<ul class="items quatre-par-ligne">
<li class="un-quart">
<article>
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</li>
<li class="un-quart">
<article>
<h2>Item 2</h2>
<p>Sed a gravida leo. Sed in semper urna, quis porta est. Etiam convallis.</p>
</article>
</li>
<li class="un-quart">
<article>
<h2>Item 3</h2>
<p>Phasellus vitae enim eu arcu venenatis tincidunt in et mauris.</p>
</article>
</li>
<li class="un-quart">
<article>
<h2>Item 4</h2>
<p>Aliquam id lectus nulla. Donec varius, sem et viverra ullamcorper.</p>
</article>
</li>
</ul>
</section>
<div class="push"></div>
</div>
Tout d'abord, vous avez besoin d'une base de données pour stocker les informations à afficher. Pour une application Web PHP, MySQL est la solution naturelle.
Vous devrez modéliser la base de données pour répondre à vos besoin puis y ajouter des données.
Pour cet exemple, je vous présente seulement la table items requise pour remplir les cases dynamiquement.
Notez que le champ code ne sera pas utilisé à cet endroit mais la modélisation a démontré qu'il était nécessaire pour une autre page du site.
Une fois la base de données modélisée et remplie, il est temps de dynamiser le code HTML, c'est-à-dire faire en sorte que les balises HTML soient générées par PHP à partir des résultats d'une requête SQL.
Commencez par mettre en commentaire tout le code HTML qui doit être répété pour chacun des items de la liste. C'est lui qui doit être remplacé par des instructions PHP.
Effectuez la requête SQL qui permet de retrouver les données. Vous utiliserez une requête préparée] si la requête utilise au moins une variable. Sinon, vous pourrez travailler avec une requête standard.
Dans cette démonstration, la requête n'utilise aucune variable donc j'ai utilisé une requête standard.
J'ai repris les codes de couleur afin de bien illustrer le code généré en PHP par rapport au code statique.
Notez que ce code est adapté pour PHP 7.x.
Si vous travaillez avec PHP 8.x, vous devrez y apporter quelques ajustements.
<div class="conteneur">
<section class="boites">
<?
$requete = "SELECT titre, description FROM items ORDER BY titre";
$resultat = $mysqli->query($requete); // exécute la requête
if ($resultat) { // si la requête a fonctionné
if ($mysqli->affected_rows > 0) { // si la requête a retourné au moins un enregistrement
echo '<ul class="items quatre-par-ligne">';
while ($enreg = $resultat->fetch_row()) {
echo '<li class="un-quart">';
echo '<article>';
echo "<h2>$enreg[0]</h2>";
echo "<p>$enreg[1]</p>";
echo '</article></li>';
}
echo "</ul>";
} else {
echo "<p class='message-avertissement'>Il n'y a présentement aucun item.</p>";
}
$resultat->free(); // libère immédiatement la mémoire qui était allouée
} else {
echo "<p class='message-erreur'>Nous sommes désolés, les items ne peuvent pas être affichés.</p>";
echo_debug($mysqli->error); // cette instruction sera expliquée dans une fiche plus loin
}
?>
</section>
<div class="push"></div>
</div>
Site fièrement hébergé chez A2 Hosting.
