Étape 4

Passer au PHP et lire des données JSON

Tu vas transformer le projet HTML en petit projet PHP : morceaux de page réutilisables, lecture d’un fichier JSON, génération automatique des cartes et calcul simple.

Liens utiles

1. Comprendre le rôle de PHP

PHP s’exécute côté serveur. Le serveur lit le fichier PHP, exécute le code, prépare du HTML, puis envoie ce HTML final au navigateur.

Dans cette étape, PHP sert à éviter le copier-coller entre deux pages, puis à lire des données depuis un fichier JSON. Ce JSON simule une petite source de données, comme une base de données très simple.

2. Lancer un serveur local

Un fichier PHP doit être exécuté par un serveur. Depuis le dossier du projet, lance :

php -S localhost:8000
  1. Ouvre ensuite tes pages PHP avec une adresse qui commence par http://localhost:8000/.
  2. Si le code PHP apparaît dans la page, c’est que tu as ouvert le fichier directement au lieu de passer par le serveur.

3. Créer deux pages PHP

Le projet aura une page pour afficher les jeux et une page pour ajouter un jeu. Ces deux pages partageront le même haut de page et le même bas de page.

  1. Crée index.php pour la liste.
  2. Crée new-game.php pour le formulaire.
  3. Reprends la structure HTML précédente, mais avec l’extension .php.

4. Créer un header commun avec include

include est une instruction PHP qui insère le contenu d’un autre fichier à l’endroit où elle est appelée. Cela permet de mettre un morceau de page commun dans un seul fichier, puis de le réutiliser dans plusieurs pages.

__DIR__ est une constante spéciale de PHP. Elle contient le chemin du dossier dans lequel se trouve le fichier PHP actuel. C’est utile pour construire un chemin fiable vers un fichier à inclure.

Le point . sert à concaténer, c’est-à-dire coller deux morceaux de texte. Par exemple, on peut coller le dossier courant avec le chemin d’un fichier.

Exemple générique :

<?php include __DIR__ . '/parts/top.php'; ?>
  1. Crée un dossier pour les morceaux communs, par exemple includes.
  2. Crée un fichier pour le haut de page, par exemple includes/header.php.
  3. Déplace dedans le doctype, le <head>, l’ouverture du <body>, le header et la navigation.
  4. Dans chaque page PHP, utilise include pour insérer ce header commun.

5. Créer un footer commun avec include

Le footer peut aussi être partagé. Cela évite de modifier plusieurs fichiers si le texte du bas de page change.

Exemple générique :

<?php include __DIR__ . '/parts/bottom.php'; ?>
  1. Crée un fichier pour le bas de page, par exemple includes/footer.php.
  2. Déplace dedans le footer et les balises de fermeture.
  3. Inclus ce footer à la fin de tes deux pages PHP.

6. Télécharger le fichier JSON

Pour simuler une lecture de données, tu vas utiliser un fichier JSON déjà préparé.

Télécharger games.json

  1. Télécharge games.json.
  2. Place-le à côté de index.php.
  3. Observe les clés disponibles : title, category, rating, description, image, link.

7. Comprendre le JSON

JSON est un format texte pour stocker des données. Ici, il contient une liste, et chaque élément de la liste représente un jeu.

[
    {
        "name": "Exemple",
        "score": 10
    }
]

8. Lire le fichier JSON avec PHP

Une variable PHP commence par $. Elle sert à garder une information en mémoire pendant l’exécution du script.

Exemples de types simples :

$name = 'Alex';      // texte, ou string
$age = 14;          // entier, ou integer
$price = 19.99;     // nombre décimal, ou float
$isReady = true;    // booléen : true ou false
$nothing = null;    // absence de valeur

Un tableau simple contient une liste de valeurs. Un tableau associatif contient des valeurs rangées par clés.

$colors = ['rouge', 'bleu', 'vert'];

$person = [
    'name' => 'Alex',
    'age' => 14,
];

file_get_contents lit le contenu d’un fichier et retourne ce contenu sous forme de texte. Pour lire un JSON, on lit d’abord le fichier, puis on le convertit.

$path = 'data.json';
$content = file_get_contents($path);
  1. Crée une variable qui contient le chemin vers games.json.
  2. Utilise file_get_contents pour lire le fichier.
  3. Stocke le résultat dans une variable.

9. Transformer le JSON en tableau PHP

Le fichier lu est du texte. Pour le parcourir avec PHP, il faut le convertir en tableau avec json_decode.

Exemple générique :

$items = json_decode($content, true);

Le paramètre true demande à PHP de créer des tableaux associatifs.

  1. Transforme le JSON lu en tableau PHP.
  2. Stocke le résultat dans une variable.

10. Prévoir une liste de secours

Une condition if / else permet de faire un choix : si une condition est vraie, on exécute un bloc ; sinon, on exécute un autre bloc.

if ($age >= 18) {
    $message = 'Majeur';
} else {
    $message = 'Mineur';
}

is_array vérifie qu’une valeur est bien un tableau. empty vérifie qu’une valeur est vide : tableau vide, texte vide, valeur absente, etc.

if (!is_array($items) || empty($items)) {
    $message = 'Aucune donnée disponible';
}
  1. Vérifie que les données obtenues sont bien un tableau avec is_array.
  2. Vérifie aussi que le tableau n’est pas vide avec empty.
  3. Si le fichier n’existe pas, est invalide ou ne contient aucune donnée, affiche le message Aucune donnée disponible.
  4. Si les données sont disponibles, continue l’affichage normal des cartes.

11. Ranger la lecture JSON dans une fonction

Une fonction permet de donner un nom à un bloc de code que l’on veut réutiliser. Elle peut recevoir des paramètres entre parenthèses, puis renvoyer un résultat avec return.

function addNumbers(int $a, int $b): int
{
    return $a + $b;
}
  1. Crée une fonction qui reçoit le chemin du fichier JSON.
  2. Dans cette fonction, lis le fichier et transforme le JSON en tableau.
  3. Retourne les données disponibles.
  4. Si les données ne sont pas utilisables, retourne un tableau vide.

12. Sécuriser l’affichage

Quand on affiche une donnée qui vient d’un fichier ou d’un formulaire, il ne faut pas l’afficher directement. Si une donnée contient du HTML, le navigateur pourrait l’interpréter comme du vrai code HTML.

Le risque principal est d’afficher du code non prévu dans la page. Par exemple, si un utilisateur envoie un titre contenant une balise HTML, cette balise pourrait modifier l’affichage. Avec du JavaScript injecté, cela pourrait même devenir une faille de sécurité.

htmlspecialchars transforme les caractères spéciaux en texte affichable. Une fonction au nom clair, comme escapeHtml, rend cette intention visible.

function escapeHtml(string|int $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}
  1. Crée une fonction escapeHtml.
  2. Utilise-la pour afficher les textes venant du JSON.
  3. Utilise-la aussi pour afficher les liens et noms d’images.

13. Créer le libellé de note

Les opérateurs de comparaison permettent de comparer deux valeurs.

Pour créer un libellé de note, tu peux utiliser une fonction et des conditions.

  1. Crée une fonction getRatingLabel qui reçoit une note.
  2. Retourne Excellent si la note est supérieure ou égale à 8.
  3. Retourne Correct si la note est supérieure ou égale à 5.
  4. Retourne À découvrir dans les autres cas.
  5. Utilise cette fonction dans les cartes.

14. Afficher les cartes avec foreach

foreach permet de parcourir une liste. À chaque tour de boucle, une variable contient l’élément courant.

foreach ($items as $item) {
    echo $item;
}

Pour afficher une valeur dans du HTML, on peut utiliser echo.

<?php echo $title; ?>

PHP propose aussi une syntaxe raccourcie très pratique pour l’affichage.

<?= $title ?>
  1. Parcours la liste de jeux avec foreach.
  2. Pour chaque jeu, affiche une carte HTML.
  3. Utilise la syntaxe raccourcie <?= ... ?> pour afficher les valeurs.
  4. Pense à passer les valeurs dans escapeHtml.
  5. Ajoute data-rating pour conserver le filtre JavaScript.

15. Calculer une moyenne

Une moyenne se calcule avec la formule suivante :

moyenne = total des valeurs / nombre de valeurs

En PHP, count permet de compter le nombre d’éléments dans un tableau.

$numberOfItems = count($items);
  1. Additionne les notes pour obtenir un total.
  2. Compte le nombre de jeux avec count.
  3. Divise le total par le nombre de jeux.
  4. Affiche la moyenne seulement si des données sont disponibles.

Critères de réussite

Étape précédente : JavaScript Étape bonus : formulaire