Laravel Livewire CRUD Exemple01

Présentation

• Livewire est un framework full-stack pour le framework Laravel qui simplifie la création d'interfaces dynamiques, sans quitter le confort de Laravel.
• Si vous utilisez livewire avec laravel, alors vous ne vous souciez pas d'écrire du code jquery ajax, livewire vous aidera à écrire de manière très simple du code jquery ajax en utilisant php.
• Sans actualisation de la page, la validation laravel fonctionnera, le formulaire sera soumis, etc.
• Dans cet exemple, nous allons créer un module de suppression de mise à jour après insertion.
• Alors, suivons l'étape ci-dessous:
  • Téléchargez l'application Laravel
  • Créer des itinéraires
  • Créer un modèle et une migration
  • Installez Livewire
  • Créer un composant et une vue Livewire
  • Créer un fichier Blade
  • Exécuter le projet
• Vous obtiendrez la mise en page ci-dessous

Aperçu de notre application

• Nous allons créer une application CRUD en Laravel et Livewire. Il s'agit donc essentiellement d'une application CRUD sans que la page ne se recharge.
• Livewire gérera toutes les requêtes AJAX requises pour mettre à jour l'interface utilisateur.

Réalisation

1. Créer un nouveau projet Laravel8

   • Dans la première étape, nous devons obtenir une nouvelle application de version laravel à l'aide de la commande ci-dessous. Alors ouvrons le terminal et exécutons la commande ci-dessous.

     composer create-project --prefer-dist laravel/laravel livewire-projet01

2. Quand on installe Laravel, si on veut déjà un système d’authentification complet, on installe Jetstream qui va lui-même installer Livewire comme dépendance (à moins qu’on choisisse Inertia) :

composer require laravel/jetstream
php artisan jetstream:install livewire
npm install
npm run dev
php artisan migrate

3. Configurer la base de données

   • Pour configurer la base de données. Ouvrir le fichier ".env"
   • changer le nom de la base de données (livewire01), le nom d'utilisateur et le mot de passe.

   

4. Créer une migration et un modèle

   • Ici, créer une migration de base de données pour la table "users" et créer un modèle pour la table "User".

     php artisan make:migration create_users_table --create=users

5. Installer Livewire

   • Livewire est un package pour Laravel qui s’installe classiquement avec composer :
   • Dans cette étape, installer livewire sur l'application laravel en utilisant la commande ci-dessous:

     composer require livewire/livewire

   

6. Créer Component

   

   • Deux fichiers ont été créé dans les deux chemins suivants:

     app/Http/Livewire/Users.php
     resources/views/livewire/users.blade.php

7. Contenu du ficher: app/Http/Livewire/Users.php

8. Mettre à jour le fichier de component

   • Contenu du ficher: app/Http/Livewire/Users.php

   

9. Ajouter une route

   • Pour ajouter une route dans l'application laravel. ouvrir le fichier "routes/web.php" et ajouter la route suivante.

     Route::view('users','livewire.home');

10. Créer les views

    • resources/views/livewire/users.blade.php

      

    • resources/views/livewire/home.blade.php

      

    • resources/views/livewire/create.blade.php

      

    • resources/views/livewire/update.blade.php