TP Sessions PHP

Étape 1 : Création d'un Site E-commerce avec Panier

Durée estimée : 2h30

Objectifs de l'étape

Structure des fichiers

projet/
├── index.php           # Page principale avec liste des produits
├── panier.php         # Page d'affichage du panier
├── actions/
│   ├── ajouter_panier.php    # Script pour ajouter au panier
│   └── vider_panier.php       # Script pour vider le panier
└── includes/
    └── header.php             # En-tête avec menu de navigation

Tâches à réaliser

Tâche 1 : Configuration initiale et structure de base

Créez la structure de fichiers et configurez l'en-tête commun.

1.1. Créer le fichier includes/header.php
<?php
// TODO 1: Démarrer la session PHP
// Indice : Utilisez la fonction qui initialise ou reprend une session

// TODO 2: Initialiser le panier dans $_SESSION s'il n'existe pas
// Indice : Vérifiez avec isset() et initialisez avec un tableau vide

// TODO 3: Calculer le nombre total d'articles dans le panier
// Indice : Le panier est un tableau d'articles, chaque article a une 'quantite'
// Utilisez array_column() pour extraire toutes les quantités, puis array_sum()
$nombre_articles = 0; // À remplacer par le calcul

?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Boutique en Ligne</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <!-- TODO 4: Créer la structure de navigation Bootstrap -->
            <!-- Inclure : 
                 - Un lien "Ma Boutique" vers index.php (classe navbar-brand)
                 - Un bouton toggler pour mobile
                 - Un menu avec deux liens :
                   * "Produits" vers index.php
                   * "Panier" vers panier.php avec :
                     - Une icône panier (classe bi-cart)
                     - Un badge rouge affichant $nombre_articles
            -->
        </div>
    </nav>
Astuce : La fonction session_start() doit être appelée avant tout contenu HTML. Elle permet d'activer les sessions PHP.

Tâche 2 : Récupération et affichage des produits

Créez la page principale qui récupère les produits depuis l'API et les affiche.

2.1. Créer le fichier index.php
<?php
// TODO 1: Inclure le fichier header.php

// TODO 2: Récupérer les produits depuis l'API
// URL de l'API : https://dummyjson.com/products?limit=30
// Indices : 
// - Utilisez file_get_contents() pour récupérer le JSON
// - Utilisez json_decode() avec true comme 2e paramètre pour obtenir un tableau
// - Les produits sont dans $data['products']

$produits = []; // À remplacer par les vrais produits
?>

<div class="container my-4">
    <h1 class="mb-4">Nos Produits</h1>
    
    <div class="row">
        <!-- TODO 3: Boucler sur les produits avec foreach -->
        <!-- Pour chaque produit, créer une carte Bootstrap qui contient :
             - Une colonne responsive (col-md-6 col-lg-4 mb-4)
             - Une carte avec classe "card h-100" pour hauteur égale
             - L'image du produit (utiliser $produit['thumbnail'])
               * Classe : card-img-top
               * Style : height: 200px; object-fit: cover;
             - Le corps de la carte avec :
               * Le titre (dans un h5 avec classe card-title)
               * La description (dans un p avec classe card-text)
               * En bas : prix et bouton d'ajout
        -->
        
        <!-- TODO 4: Dans chaque carte, ajouter un formulaire pour l'ajout au panier -->
        <!-- Le formulaire doit :
             - Utiliser method="POST" et action="actions/ajouter_panier.php"
             - Contenir des champs hidden pour : id, title, price, thumbnail
             - Avoir un bouton submit avec :
               * Classe : btn btn-primary
               * Icône : bi-cart-plus
               * Texte : "Ajouter"
             
             Structure suggérée pour le bas de la carte :
             <div class="d-flex justify-content-between align-items-center mt-auto">
                 <span class="h5 mb-0">[PRIX] €</span>
                 <form>...</form>
             </div>
        -->
    </div>
</div>

<!-- TODO 5: Inclure Bootstrap JS -->
</body>
</html>
Note : La fonction file_get_contents() permet de récupérer le contenu d'une URL. json_decode() convertit le JSON en tableau PHP.

Tâche 3 : Gestion de l'ajout au panier

Implémentez la logique d'ajout de produits au panier.

3.1. Créer le fichier actions/ajouter_panier.php
<?php
// TODO 1: Démarrer la session

// TODO 2: Vérifier que la requête est bien en POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // TODO 3: Récupérer les données du formulaire
    // Variables nécessaires : $id, $title, $price, $thumbnail
    
    // TODO 4: Vérifier si le produit existe déjà dans le panier
    // Indice : Parcourir $_SESSION['panier'] avec foreach
    // Si le produit existe (même id), incrémenter sa quantité
    // Utilisez une variable $produit_existe pour savoir si on l'a trouvé
    
    $produit_existe = false;
    // TODO: Parcourir le panier et chercher le produit
    // IMPORTANT : Utilisez &$item dans le foreach pour modifier directement l'élément
    // foreach ($_SESSION['panier'] as &$item) { ... }
    
    // TODO 5: Si le produit n'existe pas, l'ajouter au panier
    // Structure d'un article dans le panier :
    // [
    //     'id' => $id,
    //     'title' => $title,
    //     'price' => $price,
    //     'thumbnail' => $thumbnail,
    //     'quantite' => 1
    // ]
}

// TODO 6: Rediriger vers la page précédente
// Indice : Utilisez header('Location: ' . $_SERVER['HTTP_REFERER']);
// N'oubliez pas exit(); après la redirection
?>
Important : L'opérateur & devant $item permet de modifier directement l'élément dans le tableau.

Tâche 4 : Affichage du panier

Créez la page d'affichage du panier avec calcul du total.

4.1. Créer le fichier panier.php
<?php
// TODO 1: Inclure le header
// TODO 2: Initialiser une variable $total à 0

?>

<div class="container my-4">
    <h1 class="mb-4">Mon Panier</h1>
    
    <!-- TODO 3: Vérifier si le panier est vide avec empty() -->
    <!-- Si vide : afficher une alerte Bootstrap info avec un lien vers index.php -->
    <!-- Si non vide : afficher le tableau du panier -->
    
    <!-- Structure du tableau Bootstrap responsive :
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Produit</th>
                    <th>Prix unitaire</th>
                    <th>Quantité</th>
                    <th>Sous-total</th>
                </tr>
            </thead>
            <tbody>
                TODO 4: Boucler sur $_SESSION['panier']
                Pour chaque article :
                - Calculer le sous-total (prix × quantité)
                - Ajouter le sous-total au total général
                - Afficher une ligne avec :
                  * Image miniature (50x50px) + nom du produit
                  * Prix unitaire
                  * Quantité
                  * Sous-total formaté avec number_format($sous_total, 2)
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="3" class="text-end">Total :</th>
                    <th>TODO: Afficher le total formaté</th>
                </tr>
            </tfoot>
        </table>
    </div>
    -->
    
    <!-- TODO 5: Ajouter les boutons d'action -->
    <!-- Structure suggérée :
    <div class="d-flex justify-content-between mt-4">
        - Bouton "Continuer les achats" (lien vers index.php)
        - Formulaire pour vider le panier (POST vers actions/vider_panier.php)
          avec un bouton "Vider le panier" (classe btn-danger)
    </div>
    -->
</div>

<!-- TODO 6: Inclure Bootstrap JS -->
</body>
</html>

Tâche 5 : Fonction pour vider le panier

Implémentez la fonction pour vider complètement le panier.

5.1. Créer le fichier actions/vider_panier.php
<?php
// TODO 1: Démarrer la session

// TODO 2: Vider le panier
// Indice : Réaffecter un tableau vide à $_SESSION['panier']

// TODO 3: Rediriger vers la page du panier
// Indice : Utilisez header() avec le chemin ../panier.php
// N'oubliez pas exit()
?>

Tâche 6 : Tests et améliorations

Testez votre application et ajoutez des améliorations.

Vérifications à effectuer :
  • Le panier est bien initialisé vide à la première visite
  • L'ajout de produits fonctionne correctement
  • L'ajout d'un même produit incrémente sa quantité
  • Le badge du panier affiche le bon nombre d'articles
  • Le calcul du total est correct
  • L'interface est responsive sur mobile
Améliorations suggérées :
  • Ajouter des messages flash de confirmation (produit ajouté au panier)
  • Permettre de modifier la quantité directement dans le panier
  • Ajouter un bouton pour supprimer un produit spécifique
  • Afficher le stock disponible et gérer les ruptures

Points clés à retenir