Documentation · Chapitre 05

Atelier : une interface
simple et cohérente.

Réorganisez reading-list sans changer son comportement. Chaque amélioration doit pouvoir être vérifiée séparément.

Nous améliorons reading-list sans changer sa logique HTTP ni son stockage temporaire en session.

OBJECTIF

Donner la même identité à toutes les pages Livres.

  1. Créer head, header, footer et book-form comme partiels.
  2. Ranger les pages sous src/views/books.
  3. Créer public/css/app.css et public/img/logo.svg.
  4. Ajouter une navigation clavier claire et des métadonnées.
  5. Personnaliser 404.php et default.php.

Le header partagé

src/views/partials/header.php

phpaml — zsh
<header>
    <nav class="container" aria-label="Navigation principale">
        <a class="brand" href="/books">
            <img src="/img/logo.svg" width="32" height="32" alt="">
            <span>Reading List</span>
        </a>
        <a href="/books">Livres</a>
        <a href="/books/create">Ajouter</a>
        <a href="/about">À propos</a>
    </nav>
</header>

Le footer partagé

src/views/partials/footer.php

phpaml — zsh
<footer>
    <div class="container">
        <small>&copy; <?= date('Y') ?> Reading List</small>
    </div>
</footer>

Ordre de migration sans casse

  1. Créez les partiels sans retirer l’ancien HTML.
  2. Migrez seulement books/index.php et rechargez /books.
  3. Migrez create.php, puis testez un ajout valide et invalide.
  4. Migrez edit.php, puis testez modification et suppression.
  5. Ajoutez CSS et images après avoir confirmé le HTML.

Cette progression évite de modifier structure, style et comportement en même temps. Si une erreur apparaît, la dernière petite étape désigne probablement sa cause.

Liste de vérification finale

Toutes les pages ont un h1 unique✓
Tab atteint tous les contrôles✓
Les erreurs restent près des champs✓
Les valeurs sont échappées✓
Une URL inconnue montre la 404✓
Aucun fichier src n’est public✓
phpaml — zsh
aml test
# puis vérifier /books, /books/create et une URL inconnue

EN RÉSUMÉ

Ce qu’il faut retenir

  • partial() compose explicitement les vues classiques.
  • src/views reste privé; public est servi au navigateur.
  • Le HTML sémantique précède la décoration CSS.
  • Le JavaScript enrichit mais ne remplace pas le serveur.
  • Les pages d’erreur publiques n’exposent aucun détail interne.