Mini-projet : todo list avec BDD

Ce qu'on va construire

Une todo list complète avec :

Afficher toutes les tâches (SELECT)
Ajouter une tâche via formulaire (INSERT)
Marquer une tâche comme faite (UPDATE)
Supprimer une tâche (DELETE)

Étape 1 : créer la table

CREATE TABLE taches (
  id        INT AUTO_INCREMENT PRIMARY KEY,
  titre     VARCHAR(255) NOT NULL,
  faite     TINYINT(1) DEFAULT 0,   -- 0 = non, 1 = oui
  creee_le  DATETIME DEFAULT CURRENT_TIMESTAMP
);

Étape 2 : index.php — afficher et ajouter


require_once 'connexion.php';

// Ajouter une tâche si formulaire soumis
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['titre'])) {
    $titre = trim($_POST['titre']);
    $stmt  = $pdo->prepare("INSERT INTO taches (titre) VALUES (:titre)");
    $stmt->execute([':titre' => $titre]);
    header('Location: index.php');
    exit;
}

// Lire toutes les tâches, non-faites en premier
$taches = $pdo->query(
    "SELECT * FROM taches ORDER BY faite ASC, creee_le DESC"
)->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8"/>
  <title>Ma Todo List</title>
</head>
<body>

<h1>Ma Todo List</h1>

<!-- Formulaire d'ajout -->
<form method="post">
  <input type="text" name="titre"
         placeholder="Nouvelle tâche..." required/>
  <button>Ajouter</button>
</form>

<!-- Liste des tâches -->
<ul>
<?php foreach ($taches as $t): ?>
  <li style="<?= $t['faite'] ? 'opacity:.5;text-decoration:line-through' : '' ?>">
    <?= htmlspecialchars($t['titre']) ?>

    <!-- Marquer comme faite -->
    <form method="post" action="terminer.php" style="display:inline">
      <input type="hidden" name="id"   value="<?= $t['id'] ?>"/>
      <input type="hidden" name="etat" value="<?= $t['faite'] ? 0 : 1 ?>"/>
      <button><?= $t['faite'] ? '↩ Rouvrir' : '✓ Fait' ?></button>
    </form>

    <!-- Supprimer -->
    <form method="post" action="supprimer.php"
          style="display:inline"
          onsubmit="return confirm('Supprimer ?')">
      <input type="hidden" name="id" value="<?= $t['id'] ?>"/>
      <button>✕</button>
    </form>
  </li>
<?php endforeach; ?>
</ul>

</body>
</html>

Étape 3 : terminer.php et supprimer.php

// terminer.php

require_once 'connexion.php';
$stmt = $pdo->prepare("UPDATE taches SET faite = :etat WHERE id = :id");
$stmt->execute([':etat' => (int)$_POST['etat'], ':id' => (int)$_POST['id']]);
header('Location: index.php');

// supprimer.php

require_once 'connexion.php';
$stmt = $pdo->prepare("DELETE FROM taches WHERE id = :id");
$stmt->execute([':id' => (int)$_POST['id']]);
header('Location: index.php');

Structure finale du projet

todo/
├── connexion.php
├── index.php       ← affichage + ajout
├── terminer.php    ← marquer comme faite
└── supprimer.php   ← suppression

✅

Pour aller plus loin : ajoute des catégories avec une table categories liée par clé étrangère. Ou des dates d'échéance. Ou un système de comptes utilisateurs avec les sessions PHP.

// À retenir

CRUD complet : SELECT (lire), INSERT (ajouter), UPDATE (modifier), DELETE (supprimer)
Toujours requêtes préparées pour les données utilisateur
Pattern PRG : POST → traitement → redirect
htmlspecialchars() sur tout ce qu'on affiche venant de la BDD
(int) $var pour caster les IDs en entier avant d'utiliser
Ce projet = base de presque toutes les applis web