Composant

Afin d’éviter les répétitions et de faciliter la maintenance du site, il est possible de factoriser certaines portions de code HTML.

Une simple inclusion avec require permet de réutiliser un fichier (par exemple un header ou un footer). Cependant, le fichier inclus dépend souvent des variables définies dans la page principale : il partage le même contexte et utilise directement les variables disponibles.

Pour aller plus loin, on peut adopter une logique de composant.

Un composant consiste à placer dans un fichier séparé une structure HTML générique, puis à remplacer les éléments variables par des données transmises explicitement (par exemple sous la forme d’un tableau).

Dans le fichier principal, on définit d’abord les données nécessaires au composant (contenu, liens, attributs, etc.), puis on inclut le fichier avec require. Le composant n’utilise alors que les données prévues pour lui, ce qui le rend plus autonome, plus lisible et moins dépendant du contexte global.

Cette approche permet :

  • de centraliser la structure HTML commune ;

  • de rendre les données utilisées plus explicites ;

  • de modifier le composant à un seul endroit et de voir les changements s’appliquer partout où il est utilisé ;

  • de réutiliser plus facilement ce composant dans d’autres pages, d’autres projets ou d’autres contextes, sans dépendre des variables propres au site d’origine.

Nous placerons nos composants dans le dossier components.

Méthodecomponents/card.php

Nous créons un composant appelé card, qui permettra d’afficher les données d’un utilisateur sous forme de carte.

1
<figure class="card">
2
    <img src='<?= $card['src'] ?>' alt='<?= $card['alt'] ?>' />
3
    <figcaption>
4
        <?= $card['figcaption'] ?>
5
    </figcaption>
6
</figure>

La variable $card est un tableau associatif PHP qui contient les données nécessaires à l’affichage d’une carte.

Exemple :

1
$card = [
2
    'src' => 'images/photos/1_aule.gif',
3
    'alt' => 'Photo de Aule Lucie',
4
    'figcaption' => 'Aule Lucie – 45 ans'
5
];

Méthodeutilisateur/index.php

1
...
2
<ul class="utilisateur-list">
3
    <?php foreach ($listeUtilisateurs as $utilisateur): ?>
4
        <li>
5
            <?php
6
            $card = [
7
                'src' => $utilisateur['photo'],
8
                'alt' => "photo de {$utilisateur['nom']} {$utilisateur['prenom']}",
9
                'figcaption' => "{$utilisateur['nom']} {$utilisateur['prenom']} - {$utilisateur['age']} ans"
10
            ];
11
            require("$page_base/components/card.php");
12
            ?>
13
        </li>
14
    <?php endforeach; ?>
15
</ul>
16
...

Dans cet exemple, la variable $card est construite à partir des informations contenues dans la variable $utilisateur.

Les données de l’utilisateur (photo, nom, prénom, âge) sont utilisées pour renseigner les différentes valeurs attendues par le composant.

Une fois la variable $card définie, le composant card est ajouté à la page à l’aide de l’instruction require.

Cette opération est répétée pour chaque utilisateur grâce à la boucle foreach, ce qui permet d’afficher une liste de cartes sans dupliquer le code HTML.