Ajouter une tâche via un formulaire

Objectifs pédagogiques

• Créer un formulaire HTML pour ajouter une tâche.
• Gérer l'envoi d’un formulaire avec la méthode POST.
• Séparer l'affichage (index.php) et le traitement (add.php).
• Rediriger l’utilisateur après soumission avec header().
• Valider les champs et sécuriser les données reçues.

Structure des fichiers

On adopte une structure claire et maintenable :

/project-root/
│
├── index.php       ← Affiche la liste et le formulaire
├── add.php         ← Traite les données du formulaire
└── tasks.json      ← Fichier contenant les tâches

Exercice pratique

1. Créer un fichier index.php affichant un formulaire d’ajout de tâche et la liste actuelle.
2. Créer un fichier add.php pour traiter les données envoyées.
3. Valider les champs du formulaire.
4. Enregistrer les données dans un fichier tasks.json.
5. Rediriger l’utilisateur vers index.php après traitement.
6. Afficher les tâches dans un tableau HTML.

Correction

Visualiser la correction

Formulaire (index.php)

<form method="POST" action="add.php">
  <input type="text" name="label" placeholder="Nouvelle tâche" required>
  <input type="text" name="category" placeholder="Catégorie" required>
  <button type="submit">Ajouter</button>
</form>

Lecture et affichage (index.php)

<?php
$tasks = [];

if (file_exists('tasks.json')) {
    $json = file_get_contents('tasks.json');
    $tasks = json_decode($json, true) ?? [];
}
?>

<ul>
  <?php foreach ($tasks as $task): ?>
    <li>
      <?= htmlspecialchars($task['label']) ?> - <?= htmlspecialchars($task['category']) ?>
      (<?= $task['done'] ? '✅' : '❌' ?>)
    </li>
  <?php endforeach; ?>
</ul>

Traitement (add.php)

<?php

// Vérification des champs requis
if (!isset($_POST['label'], $_POST['category'])) {
    header('Location: index.php');
    exit;
}

$label = trim($_POST['label']);
$category = trim($_POST['category']);

// Validation : les champs doivent être non vides
if ($label === '' || $category === '') {
    header('Location: index.php?error=1');
    exit;
}

// Lecture des tâches existantes
$file = 'tasks.json';
$tasks = [];

if (file_exists($file)) {
    $json = file_get_contents($file);
    $tasks = json_decode($json, true) ?? [];
}

// Nouvelle tâche
$tasks[] = [
    'label' => $label,
    'category' => $category,
    'done' => false,
    'created_at' => date('Y-m-d')
];

// Sauvegarde
file_put_contents($file, json_encode($tasks, JSON_PRETTY_PRINT));

// Redirection finale
header('Location: index.php');
exit;

Explications

• Le test $_SERVER['REQUEST_METHOD'] s’assure que les données sont bien envoyées via POST.
• Les champs sont nettoyés avec trim() et échappés avec htmlspecialchars().
• Les données sont ajoutées seulement si les deux champs sont valides.
• L'utilisateur est redirigé vers la page principale après traitement.