Laravel 8 Jetstream Livewire CRUD avec modal tailwind css
Sommaire
- 1- Objectifs
- 2- Qu'est-ce que Tailwind CSS?
- 3- Créer un nouveau projet Laravel8
- 4- Créer Jetstream Auth avec Livewire
- 5- Configurer la base de données
- 6- Créer une migration et un modèle
- 6.1- Une migration
- 6.2- Un model
- 7- La population (seeding)
- 7.1- Écriture des seeders
- 7.2- Génération des seeders
- 8- Créer un composant (component)
- 9- Mettre à jour le fichier de composant (component)
- 10- Mettre à jour les fichiers Blade
- 10.1- Fichier
etudiants.blade.php
- 10.2- Fichier
create.blade.php
- 11- Mettre à jour les routes "
routes/web.php"
- 12- Exécuter le projet
- 13- Les écrans
- 13.1- Liste des étudiants:
- 13.2- Formulaire d'ajout:
- 13.3- Formulaire de modification:
- 13.3.1- Sommaire du cours Laravel
Laravel 8 Jetstream Livewire CRUD avec modal tailwind css
-
Objectifs
- Être capable de créer des opérations CRUD livewire avec jetstream dans une application modal
-
Qu’est-ce que Tailwind CSS?
- Tailwind CSS est un framework CSS qui permet de construire rapidement des designs personnalisés.
- Plutôt que de proposer des composants pré-conçus, Tailwind offre des classes utilitaires de bas niveau qui permettent de construire des designs et éléments entièrement personnalisables.
- Tous les éléments de base sont donnés, à vous de les modifier pour obtenir ce que vous souhaitez. Les couleurs, la taille, les bordures et bien d’autres éléments peuvent être modifiés.
- Tailwind CSS propose une documentation complète de chaque élément afin de les personnaliser à votre guise et sans accroc. Tous les utilitaires fournis par Tailwind proposent une variante responsive. Pour trouver les classes responsives, il suffit de chercher {screen} dans le balisage.
- Ce framework permet ainsi d’avoir le contrôle sur chaque élément et ainsi créer des sites uniques et qui correspondent à vos attentes.
- Dans ce tutoriel, nous verrons comment nous pouvons utiliser Livewire pour implémenter la pagination ,la suppression à l’aide de la confirmation modale, l’ajout à l’aide de modal et l’édition à l’aide de modal.
- Nous utiliserons Jestream Livewire Stack, qui utilise également Tailwind CSS pour implémenter toutes ces fonctionnalités. Nous utiliserons des modaux et d’autres composants fournis par Jetstream.
- Voyons donc un processus étape par étape pour mettre en œuvre cela et vous obtiendrez la mise en page ci-dessous:
-
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 :
-
Créer Jetstream Auth avec Livewire
- Installer jetstream à l’aide de la commande ci-dessous, alors ouvrir le terminal et exécuter la commande ci-dessous:
- Maintenant, créer une authentification à l’aide de la commande ci-dessous, vous pouvez créer une connexion de base, une inscription et une vérification par e-mail. si vous souhaitez créer une gestion d’équipe, vous devez passer le paramètre d’addition. vous pouvez voir les commandes ci-dessous:
- Maintenant, installer le package node js:
- Exécuter le package:
-
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 (« livewire-jetstream-projet02« ), le nom d’utilisateur et le mot de passe.
- Si votre base de données est de type MySql5.6.XXX ou autre version antérieur, vous risquez d’obtenir un erreur en cours de migration, une solution (la plus simple mais pas la meilleure) consiste à modifier le fichier database.php dans le dossier config :
'engine' => null,
- Devient :
'engine' => 'InnoDB ROW_FORMAT=DYNAMIC',
- Ou tout autre type de engine paramétré lors de l’install de MySql…
-
Créer une migration et un modèle
-
Une migration
- Dans cette étape, nous devons créer la table de migration pour les etudiants à l’aide de la commande artisanale ci-dessous. Alors ouvrons le terminal et exécutons la commande:
- Après l’exécution de cette commande un fichier sera crée dans le chemin suivant:
database/migrations/2021_04_11_085510_create_etudiants_table.php
- Modifier la méthode up comme suit:
- Pour exécuter la migration pour un seul fichier, utiliser la commande suivante:
php artisan migrate --path=database/migrations/2021_04_11_085510_create_etudiants_table.php
-
Un model
- Dans cette étape, nous devons créer lemodèle Etudiant à l’aide de la commande artisanale ci-dessous. Alors ouvrons le terminal et exécutons la commande:
- Modifier le fichier « app\Models\Etudiant.php » comme suit:
-
La population (seeding)
-
Écriture des seeders
- Pour générer un seeder, exécutez la commande Artisan :
php artisan make:seeder EtudiantsTableSeeder
. - Tous les seeders générés par le Framework seront placés dans le répertoire database/seeders:
-
Génération des seeders
- Vous pouvez utilisez la commande suivante pour insérer des données dans le attbles de votre base de données :
php artisan db:seed --class=EtudiantsTableSeeder
-
Créer un composant (component)
- Dans cette étape, nous devons créer un composant de etudiant livewire à l’aide de la commande ci-dessous. Alors ouvrons le terminal et exécutons la commande ci-dessous:
php artisan make:livewire etudiants
- Maintenant, ils ont créé des fies sur les deux chemins:
- app/Http/Livewire/Etudiants.php
ressources/vues/livewire/etudiants.blade.php -
Mettre à jour le fichier de composant (component)
- Ici, nous écrirons les méthodes
render()
,create()
,openModal()
,closeModal()
,resetInputFields()
,store()
,edit()
etdelete()
pour notre application CRUD. - Alors, mettons à jour le fichier comme suit:
-
Mettre à jour les fichiers Blade
-
Fichier
etudiants.blade.php
- Ici, nous mettrons à jour la liste suivante de fichiers pour notre page de liste, créer une page.
- Alors, mettons à jour le fichier suivant: resources/views/livewire/etudiants.blade.php
-
Fichier
create.blade.php
-
Mettre à jour les routes «
routes/web.php"
-
Exécuter le projet
- Vous pouvez maintenant ouvrir l’URL ci-dessous sur votre navigateur:
php artisan serve
localhost:8000/etudiant
-
Les écrans
-
Liste des étudiants:
-
Formulaire d’ajout:
-
Formulaire de modification: