PHP : Pages liste et détails

Le principe

Deux pages classiques dans tout site :

  • liste.php → affiche tous les éléments avec des liens
  • detail.php?id=3 → affiche un élément précis (identifié par son id dans l'URL)

Les données (pour l'instant : un tableau PHP)

<?php
// On simule des données (plus tard : ça viendra d'un fichier JSON ou d'une BDD)
$produits = [
    1 => ["nom" => "Clavier mécanique", "prix" => 89.99, "stock" => 12],
    2 => ["nom" => "Souris ergonomique", "prix" => 45.00, "stock" => 0],
    3 => ["nom" => "Écran 27 pouces",    "prix" => 349.00,"stock" => 3],
];

liste.php

<?php
$pageTitle = "Produits";
require 'includes/header.php';
require 'includes/nav.php';

$produits = [
    1 => ["nom" => "Clavier mécanique", "prix" => 89.99,  "stock" => 12],
    2 => ["nom" => "Souris ergonomique","prix" => 45.00,  "stock" => 0],
    3 => ["nom" => "Écran 27 pouces",   "prix" => 349.00, "stock" => 3],
];
?>

<main class="container mt-5">
    <h1>Catalogue produits</h1>

    <table class="table table-hover mt-3">
        <thead class="table-dark">
            <tr>
                <th>#</th>
                <th>Produit</th>
                <th>Prix</th>
                <th>Stock</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($produits as $id => $p) : ?>
            <tr>
                <td><?= $id ?></td>
                <td><?= htmlspecialchars($p['nom']) ?></td>
                <td><?= number_format($p['prix'], 2, ',', ' ') ?></td>
                <td>
                    <?php if ($p['stock'] > 0) : ?>
                        <span class="badge bg-success"><?= $p['stock'] ?> en stock</span>
                    <?php else : ?>
                        <span class="badge bg-danger">Rupture</span>
                    <?php endif; ?>
                </td>
                <td>
                    <!-- On passe l'id dans l'URL -->
                    <a href="detail.php?id=<?= $id ?>" class="btn btn-sm btn-outline-primary">Voir →</a>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</main>

<?php require 'includes/footer.php'; ?>

detail.php

<?php
// On récupère l'id depuis l'URL
$id = (int)($_GET['id'] ?? 0);   // (int) force la conversion en entier

// Les données
$produits = [
    1 => ["nom" => "Clavier mécanique", "prix" => 89.99,  "stock" => 12],
    2 => ["nom" => "Souris ergonomique","prix" => 45.00,  "stock" => 0],
    3 => ["nom" => "Écran 27 pouces",   "prix" => 349.00, "stock" => 3],
];

// Vérifier que l'id existe
if (!isset($produits[$id])) {
    // Produit introuvable → on redirige
    header("Location: liste.php");
    exit;
}

$produit = $produits[$id];
$pageTitle = $produit['nom'];

require 'includes/header.php';
require 'includes/nav.php';
?>

<main class="container mt-5">

    <a href="liste.php" class="btn btn-outline-secondary mb-3">← Retour à la liste</a>

    <div class="card shadow-sm">
        <div class="card-body">
            <h1 class="card-title"><?= htmlspecialchars($produit['nom']) ?></h1>
            <p class="fs-4 text-primary fw-bold"><?= number_format($produit['prix'], 2, ',', ' ') ?></p>
            <p>
                Stock :
                <?php if ($produit['stock'] > 0) : ?>
                    <span class="text-success"><?= $produit['stock'] ?> unité(s) disponible(s)</span>
                <?php else : ?>
                    <span class="text-danger">Rupture de stock</span>
                <?php endif; ?>
            </p>
        </div>
    </div>

</main>

<?php require 'includes/footer.php'; ?>

🧪 À tester

  1. Ouvre liste.php et clique sur un produit → tu arrives sur detail.php?id=2
  2. Modifie l'URL à la main : detail.php?id=99 → que se passe-t-il ?
  3. Ajoute un 4ème produit dans le tableau → il apparaît automatiquement dans la liste

🏆 Challenge

Dans detail.php, ajoute un bouton "Produit précédent" et "Produit suivant"
qui naviguent entre les IDs (?id=2?id=1 et ?id=3).

Pour aller plus loin