0Pricing
PHP Academy · Leçon

HTML dynamique avec les boucles PHP

Générer des tableaux et des listes HTML à partir de tableaux PHP dans des modèles.

HTML dynamique avec les boucles PHP est une leçon PHP Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage PHP Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours PHP Academy comprend 4 leçons au total.

Génération de HTML pilotée par PHP

L’une des utilisations les plus puissantes de PHP consiste à générer dynamiquement du HTML à partir de tableaux de données : listes, tableaux, menus déroulants, menus de navigation, et bien plus encore.

Générer une liste

Générez une liste HTML non ordonnée à partir d’un tableau PHP :

<?php
$fruits = ['Apple', 'Banana', 'Cherry', 'Durian'];
?>

<ul>
<?php foreach ($fruits as $fruit): ?>
    <li><?= htmlspecialchars($fruit) ?></li>
<?php endforeach; ?>
</ul>

Générer un tableau HTML

Construisez un tableau dynamique à partir d’un tableau à deux dimensions :

<?php
$users = [
    ['Alice', 'alice@test.com', 'Admin'],
    ['Bob',   'bob@test.com',   'User'],
];
?>
<table>
    <thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead>
    <tbody>
    <?php foreach ($users as [$name, $email, $role]): ?>
        <tr>
            <td><?= htmlspecialchars($name) ?></td>
            <td><?= htmlspecialchars($email) ?></td>
            <td><?= htmlspecialchars($role) ?></td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

Générer un menu déroulant

Construisez un élément select HTML à partir d’un tableau :

<?php
$countries = ['TR' => 'Turkey', 'US' => 'United States', 'DE' => 'Germany'];
$selected  = 'TR';
?>

<select name="country">
<?php foreach ($countries as $code => $name): ?>
    <option value="<?= htmlspecialchars($code) ?>"
        <?= $code === $selected ? 'selected' : '' ?>>
        <?= htmlspecialchars($name) ?>
    </option>
<?php endforeach; ?>
</select>

Alterner la couleur des lignes

Appliquez des styles alternés aux lignes pour améliorer la lisibilité :

<?php
$rows = range(1, 8);
?>

<table>
<?php foreach ($rows as $i => $row): ?>
    <tr class="<?= $i % 2 === 0 ? 'even' : 'odd' ?>">
        <td>Row <?= $row ?></td>
    </tr>
<?php endforeach; ?>
</table>

Classes CSS conditionnelles

Appliquez des classes CSS selon les conditions liées aux données :

<?php
$tasks = [
    ['title' => 'Write tests',  'done' => true],
    ['title' => 'Deploy app',   'done' => false],
];
?>

<ul class="task-list">
<?php foreach ($tasks as $task): ?>
    <li class="task <?= $task['done'] ? 'done' : 'pending' ?>">
        <?= htmlspecialchars($task['title']) ?>
    </li>
<?php endforeach; ?>
</ul>

Liens de pagination

Générez l’interface de pagination à partir d’une boucle for :

<?php
$totalPages  = 10;
$currentPage = 3;
?>

<nav class="pagination">
<?php for ($p = 1; $p <= $totalPages; $p++): ?>
    <a href="?page=<?= $p ?>"
       class="<?= $p === $currentPage ? 'active' : '' ?>">
        <?= $p ?>
    </a>
<?php endfor; ?>
</nav>

Boucles imbriquées pour du HTML imbriqué

Générez des structures HTML imbriquées avec des boucles imbriquées :

<?php
$menu = [
    ['Home', '/', []],
    ['Products', '/products', ['Widgets', 'Gadgets']],
    ['About', '/about', []],
];
?>

<ul>
<?php foreach ($menu as [$label, $href, $sub]): ?>
    <li><a href="<?= $href ?>"><?= htmlspecialchars($label) ?></a>
    <?php if ($sub): ?>
        <ul>
        <?php foreach ($sub as $child): ?>
            <li><?= htmlspecialchars($child) ?></li>
        <?php endforeach; ?>
        </ul>
    <?php endif; ?>
    </li>
<?php endforeach; ?>
</ul>

Gestion de l’état vide

Gérez toujours le cas d’un tableau vide dans les modèles :

<?php
$posts = [];
?>

<?php if (!empty($posts)): ?>
    <ul>
    <?php foreach ($posts as $post): ?>
        <li><?= htmlspecialchars($post['title']) ?></li>
    <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p class="empty-state">No posts found. <a href="/new">Create one!</a></p>
<?php endif; ?>

Générer des attributs de données

Transmettez des données à JavaScript via les attributs de données HTML :

<?php
$products = [
    ['id' => 1, 'name' => 'Widget', 'price' => 9.99],
    ['id' => 2, 'name' => 'Gadget', 'price' => 24.99],
];
?>

<div class="product-grid">
<?php foreach ($products as $p): ?>
    <div class="product-card"
         data-id="<?= $p['id'] ?>"
         data-price="<?= $p['price'] ?>">
        <?= htmlspecialchars($p['name']) ?>
    </div>
<?php endforeach; ?>
</div>

PHP et JSON pour JavaScript

Transmettez des tableaux PHP à JavaScript en toute sécurité avec json_encode :

<?php
$config = [
    'apiUrl'  => '/api/v1',
    'userId'  => $user['id'] ?? 0,
    'locale'  => 'en-US',
];
?>

<script>
const APP_CONFIG = <?= json_encode($config, JSON_HEX_TAG | JSON_HEX_APOS) ?>;
console.log(APP_CONFIG.apiUrl);
</script>

Vérification rapide

Quelle fonction devez-vous utiliser lors de l’affichage de chaînes contrôlées par l’utilisateur dans du HTML pour empêcher XSS ?

Récapitulatif : HTML dynamique avec des boucles

Techniques clés :

  • Utilisez la syntaxe alternative de foreach/for avec deux-points dans les modèles
  • Échappez toujours les sorties avec htmlspecialchars()
  • Utilisez des classes CSS conditionnelles avec un opérateur ternaire dans les attributs
  • Gérez les tableaux vides avec if/else autour des boucles
  • Transmettez les données PHP à JavaScript via json_encode()

Questions Fréquemment Posées

La leçon « HTML dynamique avec les boucles PHP » est-elle gratuite ?

Oui — le texte complet de « HTML dynamique avec les boucles PHP » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours PHP Academy, passe à CoddyKit PRO. Le cours PHP Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « HTML dynamique avec les boucles PHP » ?

Générer des tableaux et des listes HTML à partir de tableaux PHP dans des modèles. Tu pratiques PHP Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer PHP Academy ?

Aucune expérience préalable n'est requise. PHP Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « HTML dynamique avec les boucles PHP » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon PHP Academy ?

Oui. Chaque leçon PHP Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Balises PHP et syntaxe d’intégration
  2. HTML dynamique avec les boucles PHP
  3. Inclure et exiger des fichiers
  4. Modèle de conception : séparer la logique de la vue
← Retour à PHP Academy