Champs personnalisés

Objectifs pédagogiques

• Ajouter des champs supplémentaires dans un tableau associatif.
• Manipuler et afficher dynamiquement des informations enrichies.
• Adapter le formulaire d’ajout et l’affichage des données.

Contexte

Jusqu’à présent, chaque tâche contenait :

• un label,
• une category,
• un done,
• une created_at.

Nous allons désormais introduire d’autres champs comme :

• priority (ex: basse, moyenne, haute),
• description (texte libre),
• due_date (date limite).

Exercice pratique

1. Modifier la structure des tâches pour ajouter les champs suivants :
   • priority (valeurs possibles : basse, moyenne, haute)
   • description (facultative)
   • due_date (facultative)
2. Afficher ces nouvelles informations dans le tableau HTML.
3. Styliser la priorité avec un badge coloré :
   • basse : gris clair
   • moyenne : orange
   • haute : rouge

Correction

Visualiser la correction

Exemple de tableau enrichi

<?php
$tasks = [
  [
    'label' => 'Acheter du pain',
    'category' => 'Courses',
    'done' => false,
    'created_at' => '2024-07-20',
    'priority' => 'haute',
    'description' => 'Ne pas oublier les œufs',
    'due_date' => '2024-07-21'
  ],
  [
    'label' => 'Envoyer le rapport',
    'category' => 'Travail',
    'done' => true,
    'created_at' => '2024-07-15',
    'priority' => 'moyenne',
    'description' => 'Récupérer les chiffres sur le drive',
    'due_date' => null
  ]
];
?>

Affichage des champs supplémentaires

<tbody>
  <?php foreach ($tasks as $task): ?>
    <tr>
      <td class="p-4 border-b border-slate-200"><?= htmlspecialchars($task['label']) ?></td>
      <td class="p-4 border-b border-slate-200"><?= htmlspecialchars($task['category']) ?></td>

      <td class="p-4 border-b border-slate-200">
        <div class="w-max">
          <div class="relative grid items-center px-2 py-1 text-xs font-bold uppercase rounded-md select-none whitespace-nowrap
            <?= $task['done'] ? 'bg-green-500/20 text-green-900' : 'bg-slate-100 text-slate-500' ?>">
            <?= $task['done'] ? 'Terminée' : 'À faire' ?>
          </div>
        </div>
      </td>

      <td class="p-4 border-b border-slate-200">
        <?= htmlspecialchars($task['created_at']) ?>
        <?php if (!empty($task['due_date'])): ?>
          <br><small>Limite: <?= htmlspecialchars($task['due_date']) ?></small>
        <?php endif; ?>
      </td>

      <td class="p-4 border-b border-slate-200">
        <div class="w-max">
          <span class="px-2 py-1 text-xs font-bold uppercase rounded-md select-none whitespace-nowrap
            <?php
              echo match($task['priority']) {
                'haute' => 'bg-red-100 text-red-700',
                'moyenne' => 'bg-orange-100 text-orange-700',
                default => 'bg-slate-100 text-slate-500'
              };
            ?>">
            <?= htmlspecialchars($task['priority']) ?>
          </span>
        </div>
      </td>
    </tr>
  <?php endforeach; ?>
</tbody>

Explications

• Le champ priority est stylisé avec un match() (PHP 8+) pour adapter l’apparence.
• La date d’échéance est affichée sous la date de création si elle est définie.
• La description pourrait être intégrée à un affichage étendu ou à une page dédiée.
• Tous les champs restent optionnels, ce qui permet de manipuler des structures partielles.