Création d'une boîte de dialogue de confirmation avec Livewire : un guide étape par étape

Livewire est un framework full-stack pour Laravel qui simplifie la création d'interfaces dynamiques sans quitter Laravel.

La possibilité de créer des boîtes de dialogue de confirmation avec peu ou pas de code et sans JavaScript est l'une des fonctionnalités de Livewire.

Je vais vous guider à travers le processus de création d'une boîte de dialogue de confirmation à l'aide de Livewire en quelques étapes simples dans cet article de blog en utilisant la nouvelle directive HTML « wire:confirm » qui rend plus facile que jamais l'ajout d'une boîte de dialogue de confirmation avant d'effectuer une opération importante ou action dangereuse.

Installer Livewire

Pour utiliser Livewire, vous devez l'installer dans votre projet Laravel. Vous pouvez le faire en exécutant la commande suivante dans votre terminal:

composer require livewire/livewire

Cela installera Livewire en tant que dépendance et publiera ses actifs et ses fichiers de configuration.

Vous pouvez également éventuellement exécuter la commande suivante " php artisan livewire:publish --config " pour publier le fichier de configuration Livewire, ce qui vous permet de personnaliser certains paramètres.

L'utilisation du nouveau wire:confirm' facilite grandement l'ajout de la boîte de dialogue de confirmation à votre application.

Vous pouvez utiliser wire:confirm pour une confirmation simple comportant un bouton "Annuler" et "OK", associé à un événement tel que wire:click:

<div>
    <h2>Danger zone</h2>
    <button
        type="button"
        wire:click="delete"
        wire:confirm="Are you sure you want to delete this project?"
    >
        Delete this project
    </button>
</div>

Livewire lancera une fenêtre contextuelle de confirmation du navigateur natif lorsque vous cliquerez sur le bouton.

Les choses deviennent un peu plus intéressantes si vous demandez à l’utilisateur de saisir quelque chose pour vérifier qu’il veut faire exprès quelque chose de catastrophique.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
    >
        Delete this project
    </button>
</div>

Le '|DELETE' permet à Livewire de connaître l'invite attendue.

Lorsque vous cliquez sur le bouton, un modal ' prompt() ' apparaîtra et demandera à l'utilisateur d'écrire « SUPPRIMER ». Si les entrées de l'utilisateur correspondent, la méthode ' delete() ' du composant Livewire sera appelée.

Le mot ou la phrase de confirmation peut être modifié pour refléter une valeur dynamique sur le composant. Par exemple, vous souhaiterez peut-être demander à l'utilisateur de fournir le nom du projet afin de vérifier:

J'ai pensé que tout mettre en majuscules serait le plus simple car il y a une mise en garde : la correspondance du texte est sensible à la casse. Vous devez utiliser des entités HTML dans l'attribut ' wire:confirm ' si vous souhaitez utiliser des guillemets comme je le démontre.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType &quot;{{ str($project_name)->upper() }}&quot; to confirm|{{ str($project_name)->upper() }}"
    >
        Delete this project
    </button>
</div>

Pourquoi devriez-vous utiliser la directive HTML Livewire «wire:confirm»?

Si vous recherchez un moyen simple et efficace d'ajouter une boîte de dialogue de confirmation avant d'effectuer une action importante ou dangereuse sur votre page Web, vous devriez envisager d'utiliser la directive HTML wire:confirm .

Cette directive fait partie du framework Livewire, qui est une bibliothèque qui facilite la création d'applications Web dynamiques et interactives à l'aide de Laravel.

La directive wire:confirm vous permet de spécifier un message qui sera affiché dans un navigateur modal natif lorsque l'utilisateur clique sur un élément auquel est attachée une action Livewire.

Par exemple, si vous disposez d'un bouton qui supprime un enregistrement de la base de données, vous pouvez ajouter wire:confirm="Êtes-vous sûr de vouloir supprimer ceci ?" à l'élément bouton, et l'utilisateur verra une boîte de dialogue lui demandant de confirmer son action avant que l'action Livewire ne soit déclenchée.

De cette façon, vous pouvez empêcher les actions accidentelles ou malveillantes de se produire et fournir plus de contexte et de clarté à l'utilisateur sur ce qu'il fait.

La directive wire:confirm présente plusieurs avantages par rapport aux autres méthodes d'ajout de boîtes de dialogue de confirmation, telles que l'utilisation de JavaScript ou de composants personnalisés.

Premièrement, il utilise le modal du navigateur natif « Window.confirm », qui est simple et cohérent sur différents navigateurs et plates-formes.

Vous n'avez pas à vous soucier des problèmes de style, de compatibilité ou de performances.

Deuxièmement, il est très simple à utiliser et nécessite un minimum de code.

Il vous suffit d'ajouter la directive et le message à l'élément, et Livewire s'occupera du reste.

Troisièmement, il s'intègre parfaitement au framework Livewire, ce qui signifie que vous pouvez l'utiliser avec n'importe quelle action Livewire, telle que wire:click , wire:submit ou wire:model .

Conclusion

La directive wire:confirm est un excellent outil pour ajouter des boîtes de dialogue de confirmation à votre page Web. C’est simple, efficace et pratique à utiliser.

Il peut vous aider à améliorer l'expérience utilisateur et la sécurité de votre application Web.

Si vous souhaitez en savoir plus sur la wire:confirm et le framework Livewire, vous pouvez visiter la documentation officielle ou le référentiel GitHub.

J'espère que cette note vous a convaincu de l'essayer. 😊