Aller au contenu principal

Module 13 – Projet final Livewire

Niveau 5.1 – Laravel Livewire

Projet de synthèse (dashboard ou CRUD) : composants, formulaires validés, listes filtrées/paginées, wire:loading, policies, tests. Critères et checklist pour un rendu exploitable en production. En fin de module : déploiement et mise en production.

Objectif​

À la fin de ce module, vous saurez :

  • Consolider l’ensemble des acquis du niveau 5.1 en réalisant un mini-projet complet : par exemple un tableau de bord ou un CRUD (articles, utilisateurs, produits) avec listes filtrables, formulaires de création/édition, pagination, et feedback utilisateur (loading, messages flash).
  • Appliquer une structure claire : plusieurs composants Livewire (liste, formulaire, dashboard), éventuellement des traits pour la logique partagée (tri, recherche), et des policies pour l’autorisation.
  • Garantir la qualité : validation sur tous les formulaires, messages d’erreur affichés, wire:loading et wire:target sur les actions, et au moins quelques tests Livewire pour valider le comportement.

Ce projet sert de base pratique au projet 3 – Livewire de la formation (voir la section Projets) et peut être adapté selon votre contexte (stack, périmètre).

Périmètre suggéré​

Choisir un des axes suivants (ou une combinaison raisonnable) :

  1. Tableau de bord : une page full-page Livewire avec plusieurs « widgets » (liste récente d’articles, statistiques, formulaire de création rapide). Utilisation de ->layout('layouts.app'), wire:loading sur les blocs, et éventuellement wire:init pour charger des données secondaires après le premier rendu.

  2. CRUD complet : une ressource (ex. Article, Product) avec :

    • Liste : recherche, tri, pagination (composant liste avec WithPagination et filtres).
    • Création : formulaire dans un composant (ou une page dédiée) avec validation (#[Rule] ou validate()), messages d’erreur, wire:submit et wire:loading sur le bouton.
    • Édition : formulaire pré-rempli (mount avec ID, chargement du modèle), validation, mise à jour en BDD.
    • Suppression : bouton avec wire:confirm et méthode delete($id) protégée par authorize('delete', $model).

  3. Mix : tableau de bord avec un bloc « Derniers articles » (composant liste avec pagination ou limite) + formulaire de création d’article + lien vers une page liste complète avec recherche et tri.

L’accent est mis sur la structure (composants pas trop gros, responsabilités claires), la sécurité (validation, policies), et l’UX (feedback, loading, messages).

Critères de validation​

Pour valider le projet (ou pour le projet 3 de la formation), on attend au minimum :

  • Au moins 3 composants Livewire : par exemple une liste (ArticleList), un formulaire (CreateArticle / EditArticle), un dashboard ou un widget.
  • Formulaires : validation (règles, validate() ou validateOnly()), affichage des erreurs avec @error, et message de succès (flash) après création/édition.
  • Liste : recherche (avec debounce) et/ou tri et pagination (WithPagination, $items->links()).
  • Feedback utilisateur : wire:loading et wire:target sur les actions (sauvegarde, suppression) ; boutons désactivés ou texte « En cours... » pendant l’action.
  • Sécurité : authorize() sur les actions sensibles (delete, update) et éventuellement dans mount() pour les pages réservées (ex. liste des articles en modération). Validation systématique des entrées.
  • Tests : au moins 2 tests Livewire (PHPUnit ou Pest) sur un ou deux composants : par exemple test du compteur ou d’un formulaire (validation + succès), ou test d’une action protégée (assertion sur le comportement attendu).

Organisation recommandée​

  • Traits : si plusieurs listes partagent tri + recherche + pagination, extraire un trait WithSortingAndSearch (module 8).
  • Policies : une policy par modèle concerné (ex. ArticlePolicy) pour viewAny, create, update, delete, et les appeler dans les composants (mount ou méthodes d’action).
  • Layout : utiliser un layout Blade commun (layouts.app) pour les pages full-page Livewire ; garder la navbar, le footer et les scripts Livewire/Alpine au même endroit.
  • Nommage : composants en PascalCase (ArticleList, CreateArticle), vues en kebab-case (article-list.blade.php, create-article.blade.php) pour rester cohérent avec les conventions Livewire.

À retenir​

  • Le projet final permet de valider la maîtrise de Livewire en conditions proches du réel : composants réutilisables, Eloquent, validation, UX (loading, messages) et sécurité (policies, validation). Critères : 3+ composants, formulaires validés, liste filtrée/paginée, wire:loading, authorize(), 2+ tests ; structure (traits, policies) et qualité au niveau production.
  • Il sert de base au projet 3 – Livewire de la formation (voir section Projets). Après ce module, consultez le module 00 – Bonus & Ressources pour la doc officielle, Volt, Filament et la suite (Alpine, Filament).
  • À l’issue de ce parcours, vous disposez des bases pour construire des interfaces réactives en PHP et Blade (traits, full-page, tests, sécurité, performance).

Approfondissement​

  • Déploiement : Livewire ne nécessite pas de build front (pas de npm run build pour Livewire lui-même). Déployez comme une app Laravel classique (PHP, Blade, assets publics). Vérifiez que APP_URL et la config de session sont corrects pour le domaine de production (cookies, CSRF).
  • Monitoring : en production, surveillez les temps de réponse des requêtes Livewire (middleware, logs). Les composants qui font des requêtes lourdes (grosses listes, N+1) peuvent dégrader l’UX ; les optimisations des modules 6 et 10 (pagination, with(), debounce, wire:key) sont alors essentielles.
  • Évolution : après ce projet, vous pouvez enchaîner sur Filament pour un back-office complet, ou approfondir Alpine.js et Volt pour des interfaces encore plus riches tout en restant dans l’écosystème Livewire.