Affichage stylisé avec Tailwind

Objectifs pédagogiques

• Générer un tableau HTML avec un design professionnel (via TailwindCSS).
• Itérer dynamiquement sur les tâches avec foreach.
• Utiliser des classes conditionnelles pour l'affichage.

Exercice pratique

1. Créer un fichier index.php.
2. Définir un tableau $tasks, chaque tâche étant un tableau associatif avec :
   • label : description,
   • category : catégorie de la tâche,
   • done : booléen indiquant si elle est terminée,
   • created_at : date de création (au format jj/mm/aa).
3. Utiliser une boucle foreach pour générer chaque ligne du tableau.
4. Utiliser les bonnes classes Tailwind selon que la tâche est terminée ou non.

Correction

Visualiser la correction

Exemple de code

<?php
$tasks = [
  [
    'label' => 'Ma tâche',
    'category' => 'Une catégorie',
    'done' => true,
    'created_at' => '23/04/18'
  ],
  [
    'label' => 'Une autre tâche',
    'category' => 'Une autre catégorie',
    'done' => false,
    'created_at' => '23/04/18'
  ]
];
?>

<div class="max-w-[720px] mx-auto">
  <div class="relative flex flex-col w-full h-full text-slate-700 bg-white shadow-md rounded-xl bg-clip-border">
    <div class="relative mx-4 mt-4 overflow-hidden text-slate-700 bg-white rounded-none bg-clip-border">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-lg font-semibold text-slate-800">Liste des tâches</h3>
          <p class="text-slate-500">Au charbon camarade !</p>
        </div>
        <div class="flex flex-col gap-2 shrink-0 sm:flex-row">
          <button
            class="flex select-none items-center gap-2 rounded bg-slate-800 py-2.5 px-4 text-xs font-semibold text-white shadow-md shadow-slate-900/10 transition-all hover:shadow-lg hover:shadow-slate-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
            type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
              class="w-4 h-4">
              <path
                d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z">
              </path>
            </svg>
            Ajouter une tâche
          </button>
        </div>
      </div>
    </div>
    <div class="p-0 overflow-scroll">
      <table class="w-full mt-4 text-left table-auto min-w-max">
        <thead>
          <tr>
            <th class="p-4 border-y border-slate-200 bg-slate-50">Label</th>
            <th class="p-4 border-y border-slate-200 bg-slate-50">Catégorie</th>
            <th class="p-4 border-y border-slate-200 bg-slate-50">Statut</th>
            <th class="p-4 border-y border-slate-200 bg-slate-50">Date de création</th>
            <th class="p-4 border-y border-slate-200 bg-slate-50"></th>
          </tr>
        </thead>
        <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="<?= $task['done']
                    ? 'relative grid items-center px-2 py-1 text-xs font-bold text-green-900 uppercase rounded-md bg-green-500/20'
                    : 'relative grid items-center px-2 py-1 text-xs font-bold uppercase rounded-md bg-slate-100 text-slate-500' ?>">
                    <span><?= $task['done'] ? 'Terminée' : 'À faire' ?></span>
                  </div>
                </div>
              </td>
              <td class="p-4 border-b border-slate-200">
                <p class="text-sm text-slate-500"><?= htmlspecialchars($task['created_at']) ?></p>
              </td>
              <td class="p-4 border-b border-slate-200">
                <button
                  class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center font-sans text-xs font-medium uppercase text-slate-900 transition-all hover:bg-slate-900/10 active:bg-slate-900/20"
                  type="button">
                  <span class="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                      <path
                        d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
                      </path>
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

Explications

• La structure HTML utilise un composant Tailwind sans aucune modification.
• Le tableau PHP est dynamique, chaque ligne est générée avec un foreach.
• Le statut de la tâche est affiché avec une classe conditionnelle :
  • vert si la tâche est faite,
  • gris sinon.