Laravel Livewire CRUD Exemple01

Laravel Livewire CRUD Exemple01

  1. Objectifs

    • Comment effectuer l’opération CRUD livewire dans une application laravel.
  2. 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



  3. 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.
  4. Réalisation

    1. 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-projet01
      • 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) :
      • composer require laravel/jetstream
        php artisan jetstream:install livewire
        npm install
        npm run dev
        php artisan migrate
    2. 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.
      • Laravel Livewire CRUD Exemple01

    3. 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“.
        • php artisan make:migration create_users_table --create=users
    4. 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:
        • composer require livewire/livewire

      Laravel Livewire CRUD Exemple01

    5. Créer Component
      • Laravel Livewire CRUD Exemple01

      • Deux fichiers ont été créé dans les deux chemins suivants:
        • app/Http/Livewire/Users.php
          resources/views/livewire/users.blade.php
      • Contenu du ficher: app/Http/Livewire/Users.php
    6. Mettre à jour le fichier de component
      • Contenu du ficher: app/Http/Livewire/Users.php
      • Laravel Livewire CRUD Exemple01

    7. Ajouter une route
      • Pour ajouter une route dans l’application laravel. ouvrir le fichier “routes/web.php” et ajouter la route suivante.
        • Route::view('users','livewire.home');
    8. Créer les views
      • resources/views/livewire/users.blade.php
        • Laravel Livewire CRUD Exemple01

      • resources/views/livewire/home.blade.php
        • Laravel Livewire CRUD Exemple01

      • resources/views/livewire/create.blade.php
        • Laravel Livewire CRUD Exemple01

      • resources/views/livewire/update.blade.php
        • Laravel Livewire CRUD Exemple01



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement