Listes déroulantes dépendantes avec Laravel 8 et Livewire

Objectifs

Etre capable d’implémenter une liste déroulante dépendante à l’aide de livewire dans l’application laravel 8

Présentation

Voila un exemple de liste déroulante dépendante de Laravel 8 Livewire. Dans cet exemple, vous apprendrez comment implémenter la liste déroulante dépendante à l’aide de livewire dans l’application laravel 8.
Ce tutoriel vous guidera étape par étape sur la façon d’ajouter une liste déroulante dépendante dans laravel 8 livewire.
Dans ce tutoriel, nous allons créer un exemple de liste déroulante dépendante de trois niveaux gouvernorats, délégations , localités et une zone de texte pour afficher le code postal de chaque localité sélectionnée, à l’aide de laravel livewire.
Alors, suivons l’étape ci-dessous et vous obtiendrez la mise en page ci-dessous:

Listes déroulantes dépendantes avec Laravel 8 et Livewire

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-liste-dependante

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 (liste-deroulante-Livewire), le nom d’utilisateur et le mot de passe.

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Créer les fichiers de migration

Utiliser les commandes suivantes pour créer les fichiers de migration

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Fichier database\migrations\2021_04_18_095952_create_gouvernorats_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateGouvernoratsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('gouvernorats', function (Blueprint $table) {
            $table->integer('cde_gouv')->primary();
            $table->string('intitule_gouv_fr');
            $table->string('intitule_gouv_ar');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('gouvernorats');
    }
}

Fichier database\migrations\2021_04_18_100135_create_delegations_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateDelegationsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('delegations', function (Blueprint $table) {
            $table->integer('cde_deleg')->primary();
            $table->integer('cde_gouv');
            $table->string('intitule_deleg_fr');
            $table->string('intitule_deleg_ar');
            $table->timestamps();
            $table->foreign('cde_gouv')  
                    ->references('cde_gouv')  
                    ->on('gouvernorats')  
                    ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('delegations');
    }
}

Fichier database\migrations\2021_04_18_100146_create_localites_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateLocalitesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('localites', function (Blueprint $table) {
            $table->integer('cde_local')->primary();
            $table->integer('cde_deleg');
            $table->string('intitule_local_fr');
            $table->string('intitule_local_ar');
            $table->integer('cde_postal');
            $table->timestamps();
            $table->foreign('cde_deleg')  
                  ->references('cde_deleg')  
                  ->on('delegations')  
                  ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('localites');
    }
}

Maintenant, ouvrez votre invite de commande et exécutez la commande suivante pour créer la table dans votre base de données : php artisan migrate

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Le résultat dans phpMyAdmin est le suivant:

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Créer les fichiers de modèle (« Models »)

Dans cette étape, ouvrez votre terminal et exécutez les commandes suivantes pour créer des fichiers de modèle:

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Fichier App/Models/Gouvernorat.php

Visitez le répertoire app/Models/ et ouvrez le fichier Gouvernorat.php et ajoutez-y le code suivant:

use HasFactory;
    public $primaryKey = 'cde_gouv';
    public $incrementing = false;
    protected $fillable = [ 
        'cde_gouv', 'intitule_gouv_fr', 'intitule_gouv_ar'
    ];

Fichier App/Models/Delegation.php

Visitez le répertoire app/Models/ et ouvrez le fichier Delegation.php et ajoutez-y le code suivant:

public $primaryKey = 'cde_deleg';
    public $incrementing = false;
    protected $fillable = [ 
        'cde_gouv','cde_deleg', 'intitule_gouv_fr', 'intitule_gouv_ar'
    ];

Fichier App/Models/Localite.php

Visitez le répertoire app/Models/ et ouvrez le fichier Localite.php et ajoutez-y le code suivant:

use HasFactory;
    public $primaryKey = 'cde_local';
    public $incrementing = false;
    protected $fillable = [ 
        'cde_deleg','cde_local', 'intitule_gouv_fr', 'intitule_gouv_ar', 'cde_postal'
    ];

Installer le package 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
```

Laravel Livewire CRUD Exemple01

Cette commande installera le package Livewire dans le framework Laravel 8.
Créer un composant « Component »

Ensuite, nous voulons créer un composant Livewire. Donc, pour cela aussi, nous devons aller à l’invite de commande et écrire la commande suivante: php artisan make:livewire gouvDelegLocalListe
Cette commande générera deux fichiers, l’un est la classe GouvDelegLocalListe.php dans le répertoire app/Http/Livewire et le fichier de vues gouvDelegLocalListe.blade.php dans le répertoire views/livewire .
Fichier GouvDelegLocalListe.php

Maintenant, accédez au dossier app/ Http/Livewire et ouvrez le fichier GouvDelegLocalListe.php et joutez le code suivant:

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Fichier gouv-deleg-local-liste.blade

Après cela, accédez au dossier resources/views/livewire et ouvrez le fichier gouv-deleg-local-liste.blade.php.
Ajoutez ensuite le code suivant dans votre fichier gouv-deleg-local-liste.blade.php :

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Ajouter une route

Dans cette étape, accédez au dossier routes et ouvrez web.php.
Ajoutez ensuite les routes suivantes dans votre fichier web.php :

Route::get('gouvDelegLocalListe', GouvDelegLocalListe::class);

Créer un fichier de vue

Dans cette étape, accédez au dossier resources/views/livewire et créez un dossier qui se nomme layouts et dans ce dossier créez un fichier de vue de « Blade » qui se nomme app.blade.php.
Ajoutez ensuite le code suivant dans votre fichier app.blade.php :

Listes déroulantes dépendantes avec Laravel 8 et Livewire

Exécutez le serveur de développement

Enfin, vous devez exécuter la commande suivante: php artisan serve pour démarrer votre application

Laravel Livewire CRUD Exemple02 1/2

Sommaire du cours Laravel

Laravel

Listes déroulantes dépendantes avec Laravel 8 et Livewire