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

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:

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.

Créer les fichiers de migration

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

1. 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');
       }
   }
   

2. 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');
       }
   }
   

3. 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');
       }
   }
   

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:

1. 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'
       ];

2. 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'
       ];

3. 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

  

• 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:

    

  • 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:

    

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:

Exécutez le serveur de développement

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