Aller au contenu principal

Examen blanc – Laravel Livewire

Niveau 5.1 – Laravel Livewire

Objectif​

S'entraîner avant l'examen officiel : questions avec réponses à l'appui (corrections dépliables).
Cet examen blanc n'est pas noté et ne fait pas l'objet d'enregistrement.

Partie 1 – Notions de base​

Q1.1​

Qu'est-ce que Laravel Livewire et où s'exécute la logique d'un composant ?

Réponse attendue

Livewire est un package Laravel qui permet des interfaces réactives en PHP et Blade sans écrire d'API ni de JavaScript métier. La logique d'un composant (méthodes, propriétés) s'exécute côté serveur (PHP). Chaque interaction (clic, saisie) envoie une requête AJAX au serveur, qui réexécute le composant et renvoie le HTML mis à jour.

Q1.2​

Quelle directive Livewire lie une propriété PHP à un champ de formulaire ? Quelle directive déclenche un appel serveur au clic ?

Réponse attendue
  • wire:model (ou wire:model.live) pour lier une propriété à un champ (input, select, etc.).
  • wire:click pour déclencher l'appel d'une méthode du composant au clic (ex. wire:click="increment").

Q1.3​

Où se trouvent par défaut la classe PHP et la vue Blade d'un composant Livewire ?

Réponse attendue
  • Classe PHP : namespace App\Livewire, sous app/Livewire/ (ex. app/Livewire/Counter.php).
  • Vue Blade : sous resources/views/livewire/ (ex. resources/views/livewire/counter.blade.php).

Partie 2 – Cycle de vie et état​

Q2.1​

Que sont les propriétés publiques d'une classe Livewire ? Pourquoi éviter d'y stocker de gros tableaux ?

Réponse attendue

Les propriétés publiques constituent l'état du composant : elles sont sérialisées et envoyées avec chaque requête/réponse Livewire. Si on stocke de gros tableaux (ex. toute une liste), le payload devient lourd et les requêtes plus lentes. Il vaut mieux stocker les filtres (recherche, page) et recalculer la liste dans render().

Q2.2​

Quelle méthode du cycle de vie est appelée une seule fois à la création du composant ? Et à chaque requête pour produire le HTML ?

Réponse attendue
  • mount() : appelée une seule fois quand le composant est créé (première requête).
  • render() : appelée à chaque requête pour produire le HTML de la vue.

Q2.3​

Qu'est-ce que le « morphing » en Livewire ?

Réponse attendue

Le morphing est la mise à jour du DOM en n'appliquant que les différences entre l'ancien et le nouveau HTML renvoyé par le serveur. Cela évite le rechargement complet de la page, préserve le scroll, le focus et l'état des champs.

Partie 3 – Formulaires et validation​

Q3.1​

Comment déclarer des règles de validation sur les propriétés d'un composant Livewire ?

Réponse attendue

En PHP : méthode rules() qui retourne un tableau, ou attribut #[Validate] sur les propriétés (Livewire 3). Exemple :

protected function rules() {
    return ['email' => 'required|email'];
}

Puis appeler $this->validate() dans la méthode qui traite la soumission.

Q3.2​

Que fait wire:submit sur un formulaire ?

Réponse attendue

wire:submit indique la méthode du composant à appeler à la soumission du formulaire (ex. wire:submit="save"). Les données des champs liés via wire:model sont envoyées au serveur ; la méthode reçoit les valeurs et peut valider, enregistrer, etc. Pas de rechargement complet de la page.

Partie 4 – Exercice (esquisse)​

Q4.1​

Donner l'esquisse d'un composant Livewire « Compteur » : propriété $count, méthodes increment() et decrement(), vue avec deux boutons + et −.

Correction

Classe PHP (App\Livewire\Counter) :

namespace App\Livewire;
use Livewire\Component;

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function decrement(): void
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Vue Blade (resources/views/livewire/counter.blade.php) :

<div>
    <span>  (double accolades + $count)  </span>
    <button type="button" wire:click="increment">+</button>
    <button type="button" wire:click="decrement">−</button>
</div>

(À la place du texte entre parenthèses : en Blade, écrire la syntaxe d’affichage de la variable $count, avec deux accolades ouvrantes, la variable, puis deux accolades fermantes.)

Suite​

Quand vous vous sentez prêt, passez l'examen officiel (noté) : 📝 Examen Livewire.