Exercices — formulaires

Le code de départ

Tous les exercices partagent le même contexte : la boutique fictive L’Érablière dorée.
Téléchargez le dossier de départ et servez-le comme racine du site.

Contenu de l’archive

depart/
├── assets/style.css
├── data/
│   ├── products.php          douze produits
│   └── categories.php        liste blanche des catégories
├── includes/                 header.php, footer.php
├── partials/product-card.php
├── ex02-catalogue/
└── ex03-recherche/

Exercice 1 (QCM) — Lire et corriger du code de formulaire

Partie A — Comprendre ce que fait le code

A1. Une personne saisit sirop, puis soumet le formulaire.

<form action="recherche.php">
  <input type="text" name="q">
  <button type="submit">Chercher</button>
</form>

Quiz. Quelle adresse URL résulte de la soumission du formulaire ?

A2. La page /boutique/index.php contient ce formulaire.

<form method="post" action="traitement.php">
  <input type="text" name="nom">
  <button type="submit">Envoyer</button>
</form>

Quiz. À quelle adresse les données du formulaire sont-elles envoyées ?

A3. Le formulaire est soumis sans cocher la case.

<form method="post" action="traitement.php">
  <input type="text" value="Patrick">

  <input type="text" name="ville" value="Laval">

  <input type="checkbox" name="cadeau" value="1">

  <button type="submit">Envoyer</button>
</form>

Quiz. Quelles données retrouve-t-on dans $_POST ?

A4. Le champ contient la valeur 3 au moment de la soumission.

<form method="post" action="commande.php?etape=2">
  <input type="number" name="quantite" value="3">
  <button type="submit">Valider</button>
</form>

Quiz. Que contiennent $_GET et $_POST dans commande.php ?

A5. Les options petit et grand sont sélectionnées avant la soumission.

<form method="post" action="traitement.php">
  <select name="tailles" multiple>
    <option value="petit">Petit</option>
    <option value="moyen">Moyen</option>
    <option value="grand">Grand</option>
  </select>

  <button type="submit">Envoyer</button>
</form>

Quiz. Quelle valeur retrouve-t-on dans $_POST['tailles'] ?

Partie B — Modifier le code pour obtenir le comportement souhaité

B1. On veut pouvoir copier ou partager l’adresse d’une recherche avec les critères utilisés.

<form method="post" action="recherche.php">
  <input type="search" name="q">
  <button type="submit">Chercher</button>
</form>

Quiz. Quelle modification faut-il apporter au formulaire ?

B2. Plusieurs cases peuvent être cochées, et on veut récupérer toutes leurs valeurs dans un tableau PHP.

<input type="checkbox" name="interets" value="sirop">
<input type="checkbox" name="interets" value="atelier">
<input type="checkbox" name="interets" value="visite">

Quiz. Quelle modification faut-il apporter aux champs ?

B3. Après l’enregistrement d’une commande, actualiser la page provoque un nouvel enregistrement.

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    enregistrerCommande($_POST);
    include __DIR__ . "/confirmation.php";
}

Quiz. Quelle modification permet d'éviter ce problème ?

B4. Cette ligne produit un avertissement lorsque la case cadeau n’est pas cochée.

$cadeau = $_POST["cadeau"];

Le formulaire contient :

<input type="checkbox" name="cadeau" value="1">

Quiz. Quelle instruction permet de savoir directement si la case a été cochée ?

B5. Une page affiche un formulaire et traite elle-même sa soumission. Pourtant, une erreur de validation apparaît dès le premier affichage.

$erreurs = [];

if (trim($_POST["nom"] ?? "") === "") {
    $erreurs["nom"] = "Le nom est obligatoire.";
}

Quiz. Quelle modification permet de valider seulement après la soumission du formulaire ?

Exercice 2 — Filtrer un catalogue

Dossier de départ : ex02-catalogue/

L’objectif ici est d’ajouter au catalogue un formulaire de filtres en mode GET pour prendre en compte les filtres suivants: catégorie, prix maximal, disponibilité.

À faire

Lire les trois filtres dans $_GET.
Valider chaque filtre avant de s’en servir. Une catégorie absente de data/categories.php et un prix qui n’est pas un nombre positif se ramènent à « pas de filtre » plutôt qu’à une erreur.
Réduire la liste affichée en appliquant les filtres retenus.
Écrire le formulaire, avec method="get", traité par la même page, avec un bouton de réinitialisation.

Critères de réussite

Les trois filtres se combinent : choisir une catégorie et un prix maximal réduit deux fois la liste.
Après envoi, le formulaire réaffiche les valeurs actives — le menu reste sur la catégorie choisie, la case reste cochée.
L’adresse obtenue, recopiée dans un autre onglet, produit exactement le même résultat.
Modifier l’adresse à la main pour y mettre categorie=nimportequoi affiche le catalogue complet, sans avertissement PHP.
Le nombre de produits affiché correspond à la liste réellement présentée.

Exercice 3 — Une barre de recherche

Dossier de départ : ex03-recherche/

✅ Les filtres de l’exercice 2 sont déjà écrits dans le code fourni.

L’objectif ici est d’ajouter un champ de recherche qui filtre les produits par nom, sans perdre les filtres déjà actifs.

À faire

Lire le terme (tappé dans la barre de recherche) dans $_GET["q"] et le normaliser.
Filtrer les produits pour ne garder que ceux dont le nom contient ce terme, sans tenir compte de la casse ni des espaces avant ou après le terme.
Prévoir un message lorsque la recherche ne donne rien, plutôt qu’une grille vide.
Intégrer le champ au formulaire existant, de façon qu’une recherche conserve la catégorie et le prix maximal déjà choisis.

Critères de réussite

Chercher érable avec la catégorie « Confiseries » selectionnée donne uniquement les confiseries dont le nom contient « érable ».
Chercher SIROP donne le même résultat que sirop.
Une recherche sans résultat affiche un message et propose de réinitialiser.
Vider le champ de recherche et renvoyer le formulaire rétablit la liste filtrée, sans perdre les autres filtres.