Afficher une liste de contacts
Objectif : Parcourir un tableau pour produire une ligne HTML par contact.
Une liste de contacts peut s’allonger rapidement. Répéter à la main le même bloc HTML pour chaque personne rend la page difficile à maintenir et ne s’adapte pas aux nouvelles entrées. Vous allez confier cet affichage à une boucle, puis traiter proprement les cas où la liste contient zéro contact.
Parcourir chaque contact avec foreach
À la fin de la leçon précédente, $contacts contient deux contacts sous forme de tableaux associatifs. Une boucle foreach prend successivement chaque élément de ce tableau et le place dans une variable temporaire, ici $contact. Le corps de la boucle est exécuté une fois par élément : vous écrivez donc le balisage d’un contact une seule fois.
Le code ci-dessous reprend les deux contacts de l’état précédent et les affiche dans la zone de liste du carnet. Chaque élément conserve la classe contractuelle carnet-contact, ainsi que les classes prévues pour la liste et les actions. Les valeurs des contacts sont échappées avant d’être placées dans le HTML, comme vous l’avez appris dans « Afficher une valeur sans exposer du code ».
<?php
declare(strict_types=1);
$titre = 'Carnet de contacts';
$carnetOuvert = true;
$nombreContacts = 2;
$versionPhp = PHP_VERSION;
if ($carnetOuvert) {
$message = 'Le carnet est ouvert.';
} else {
$message = 'Le carnet est fermé.';
}
$contacts = [
[
'nom' => 'Ada Lovelace',
'courriel' => '[email protected]',
'telephone' => '01 23 45 67 89',
],
[
'nom' => 'Alan Turing',
'courriel' => '[email protected]',
'telephone' => '06 12 34 56 78',
],
];
$nombreContacts = count($contacts);
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= htmlspecialchars($titre, ENT_QUOTES, 'UTF-8') ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="carnet-page">
<header class="carnet-entete">
<h1><?= htmlspecialchars($titre, ENT_QUOTES, 'UTF-8') ?></h1>
<nav class="carnet-navigation" aria-label="Navigation principale">
<a href="index.php">Contacts</a>
<a href="contact-ajouter.php">Ajouter un contact</a>
<a href="deconnexion.php">Se déconnecter</a>
</nav>
</header>
<main class="carnet-principal">
<p class="carnet-message" role="status">
<?= htmlspecialchars($message, ENT_QUOTES, 'UTF-8') ?>
Version PHP : <?= htmlspecialchars($versionPhp, ENT_QUOTES, 'UTF-8') ?>.
</p>
<section aria-labelledby="titre-contacts">
<h2 id="titre-contacts">Liste des contacts</h2>
<p><?= $nombreContacts ?> contact(s) dans le carnet.</p>
<?php if ($contacts === []): ?>
<p>Aucun contact à afficher.</p>
<?php else: ?>
<ul class="carnet-liste">
<?php foreach ($contacts as $contact): ?>
<li class="carnet-contact">
<h3><?= htmlspecialchars($contact['nom'], ENT_QUOTES, 'UTF-8') ?></h3>
<p>
<?= htmlspecialchars($contact['courriel'], ENT_QUOTES, 'UTF-8') ?>
·
<?= htmlspecialchars($contact['telephone'], ENT_QUOTES, 'UTF-8') ?>
</p>
<div class="carnet-actions">
<a href="contact-modifier.php">Modifier</a>
<form action="contact-supprimer.php" method="post">
<input type="hidden" name="id" value="">
<button type="submit">Supprimer</button>
</form>
</div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</section>
</main>
<footer class="carnet-pied">
<p>Carnet de contacts privé</p>
</footer>
</div>
</body>
</html>La page affiche le message d’état, puis « 2 contact(s) dans le carnet. » et deux éléments de liste : Ada Lovelace et Alan Turing, avec leurs adresses e-mail et téléphones.Le compteur est calculé avec count($contacts) : il suit ainsi la taille réelle du tableau au lieu de dépendre d’un nombre écrit séparément. La condition vérifie ensuite si le tableau est vide. Si c’est le cas, la page présente un message à la place de la liste ; sinon, elle affiche le bloc ul et parcourt les contacts.
Vérifier l’affichage et tester une liste vide
Enregistrez le fichier dans le projet et ouvrez la page avec le serveur PHP utilisé dans les leçons précédentes. Vous devez voir deux contacts, chacun rendu une seule fois, ainsi que le compteur correspondant. Pour tester l’état vide, remplacez temporairement le contenu du tableau par $contacts = []; et rechargez la page : le compteur passe à zéro et le message « Aucun contact à afficher. » apparaît.
La comparaison avec un tableau vide permet de choisir un affichage adapté sans démarrer une boucle inutile. Une fois le test terminé, remettez les deux contacts pour conserver l’état de projet attendu à la fin de cette leçon. Les liens de modification et le formulaire de suppression restent des éléments de structure : leur traitement sera réalisé dans les leçons consacrées aux opérations du carnet.
À retenir
- Utilisez foreach pour exécuter une fois le même bloc d’affichage par contact.
- Calculez le nombre d’éléments avec count($contacts) afin que le compteur suive le tableau.
- Prévoyez un message explicite lorsque le tableau de contacts est vide.
- Échappez chaque valeur avant de l’insérer dans le HTML et conservez les classes prévues par le contrat du carnet.
Dans la prochaine leçon, vous découperez cette page en fichiers communs pour éviter de répéter l’en-tête et le pied de page.