Exercice : Lire un fichier JSON

🎯 Objectif

Créer un fichier produits.json, le lire avec PHP et afficher les produits dans une page de catalogue.

Étape 1 — Créer le fichier JSON

Dans ton dossier de projet, crée data/produits.json :

[
    {
        "id": 1,
        "nom": "Clavier mécanique",
        "prix": 89.99,
        "categorie": "Périphériques",
        "dispo": true
    },
    {
        "id": 2,
        "nom": "Souris ergonomique",
        "prix": 45.00,
        "categorie": "Périphériques",
        "dispo": false
    },
    {
        "id": 3,
        "nom": "Écran 27 pouces",
        "prix": 349.00,
        "categorie": "Écrans",
        "dispo": true
    },
    {
        "id": 4,
        "nom": "Webcam HD",
        "prix": 69.99,
        "categorie": "Accessoires",
        "dispo": true
    }
]

⚠️ JSON est strict : pas de virgule après le dernier élément, guillemets doubles obligatoires.

Étape 2 — Lire et afficher

catalogue.php

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

// --- LECTURE DU FICHIER JSON ---
$fichier = "data/produits.json";

if (!file_exists($fichier)) {
    // Le fichier n'existe pas encore
    $produits = [];
} else {
    // On lit le fichier et on décode le JSON
    $contenu = file_get_contents($fichier);
    $produits = json_decode($contenu, true);

    // Si json_decode échoue (JSON mal formé), on sécurise
    if ($produits === null) {
        $produits = [];
    }
}
?>

<main class="container mt-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Catalogue</h1>
        <span class="badge bg-secondary fs-6"><?= count($produits) ?> produit(s)</span>
    </div>

    <?php if (empty($produits)) : ?>
        <!-- Aucun produit dans le fichier -->
        <div class="alert alert-warning">Aucun produit trouvé.</div>

    <?php else : ?>

        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">

            <?php foreach ($produits as $p) : ?>

                <div class="col">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">

                            <!-- Nom du produit -->
                            <h5 class="card-title"><?= htmlspecialchars($p['nom']) ?></h5>

                            <!-- Catégorie -->
                            <span class="badge bg-info text-dark mb-2">
                                <?= htmlspecialchars($p['categorie']) ?>
                            </span>

                            <!-- Prix -->
                            <p class="fs-5 fw-bold text-primary">
                                <?= number_format($p['prix'], 2, ',', ' ') ?> €
                            </p>

                            <!-- Disponibilité -->
                            <?php if ($p['dispo']) : ?>
                                <span class="badge bg-success">✅ Disponible</span>
                            <?php else : ?>
                                <span class="badge bg-danger">❌ Rupture de stock</span>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>

            <?php endforeach; ?>

        </div>

    <?php endif; ?>

</main>

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

Ce qui se passe ligne par ligne

✅ Vérifie

1. La page affiche bien 4 produits
2. Le compteur en haut indique "4 produit(s)"
3. La souris ergonomique affiche "Rupture de stock"

🏆 Challenge

1. Trie les produits par prix croissant avant l'affichage
   (indice : regarde usort() en PHP)
2. Ajoute un filtre par catégorie via l'URL : catalogue.php?cat=Ecrans
3. Affiche uniquement les produits disponibles si ?dispo=1 est dans l'URL