Laravel Livewire CRUD Exemple01
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Aperçu de notre application
- 4- Réalisation
- 4.1- Créer un nouveau projet Laravel8
- 4.2- Configurer la base de données
- 4.3- Créer une migration et un modèle
- 4.4- Installer Livewire
- 4.5- Créer Component
- 4.6- Mettre à jour le fichier de component
- 4.7- Ajouter une route
- 4.8- Créer les views
- 4.8.1- Sommaire du cours Laravel
Laravel Livewire CRUD Exemple01
-
Objectifs
- Comment effectuer l’opération CRUD livewire dans une application laravel.
-
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
-
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.
- 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) :
-
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.
-
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« .
-
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:
-
Créer Component
- Deux fichiers ont été créé dans les deux chemins suivants:
- Contenu du ficher:
app/Http/Livewire/Users.php -
Mettre à jour le fichier de component
- Contenu du ficher:
app/Http/Livewire/Users.php -
Ajouter une route
- Pour ajouter une route dans l’application laravel. ouvrir le fichier « routes/web.php » et ajouter la route suivante.
-
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
composer create-project --prefer-dist laravel/laravel livewire-projet01composer require laravel/jetstream
php artisan jetstream:install livewire
npm install
npm run dev
php artisan migrate
php artisan make:migration create_users_table --create=userscomposer require livewire/livewire
app/Http/Livewire/Users.php
resources/views/livewire/users.blade.php
Route::view('users','livewire.home');
