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

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

  1. Objectifs

    • Etre capable d’implémenter une liste déroulante dépendante à l’aide de livewire dans l’application laravel 8
  2. 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




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

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

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

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

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

  8. 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);
  9. 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

  10. Exécutez le serveur de développement

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



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement