Laravel Livewire CRUD Exemple02 1/2

composer create-project --prefer-dist laravel/laravel LivewireCRUD-Ex02

1. Fichier database\migrations\….._create_utilisateurs_table.php

public function up()
    {
        Schema::create('utilisateurs', function (Blueprint $table) {
            $table->integer('cin')->primary();
            $table->string('prenomNom');
            $table->date('dteNaissance');
            $table->string('genre');
            $table->string('pays');
            $table->string('email');
            $table->timestamps();
        });
    }

2. Fichier App\Models\Utilisateur.php

class Utilisateur extends Model
{
    use HasFactory;
    public $primaryKey = 'cin';
    public $incrementing = false;
    protected $fillable = [ 
        'cin', 'prenomNom', 'dteNaissance', 'genre', 'pays' , 'email'
    ];
}

• Vous devez maintenant exécuter cette migration en suivant la commande: php artisan migrate

composer require livewire/livewire

app/Http/Livewire/Utilisateurs.php
resources/views/livewire/utilisateurs.blade.php

• à l’en-tête
• use App\Models\Utilisateur;
• use Livewire\WithPagination;
• Sous cette classe
• use WithPagination;
• protected $paginationTheme = 'bootstrap';
• Sous la méthode de render de classe Utilisateurs, qui est la méthode racine de cette classe, nous avons défini le code pour les données de recherche et créé des liens de pagination.
• nous avons lié la valeur de la variable search à un champ de texte spécifique côté client via le wire:model. Ainsi, chaque fois que l’utilisateur tape quelque chose, la variable search est également mise à jour. Et quand il est mis à jour, le composant est également re-rendu.
• En effet, dans la fonction render(), nous dépendons de la valeur de la variable search pour récupérer les données utilisateur.
• Donc pour chaque frappe, nous récupérons en fait des données de la base de données en fournissant la requête de l’utilisateur et le tri sélectionné.

public function render()
    {        
        return view('livewire.utilisateurs', [
            'utilisateurs' => Utilisateur::search($this->search)
                ->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
                ->paginate(4), //->simplePaginate(4),
        ]);
    }

• Tout d’abord, nous avons le champ de recherche pour rechercher des utilisateurs.
• Nous voulons que les utilisateurs puissent voir les résultats de leur requête au fur et à mesure de leur saisie.
• La façon dont nous implémentons cela consiste à utiliser wire:model.
• Cela nous permet de passer le nom de la variable depuis la classe du composant ( utilisateurs). Quels que soient les types d’utilisateurs dans ce champ, ils seront ensuite synchronisés avec la valeur de cette variable.
• Dans ce cas, nous lions la variable search par :

• <input wire:model="search" class="form-control" type="text" placeholder="Rechercher des utilisateurs ...">

• Nous utilisons wire:click.prevent pour écouter les événements de clic dans l’élément de lien. Celles-ci sont appelées actions dans Livewire.
• Les actions vous permettent essentiellement d’écouter les événements du navigateur, mais d’y répondre en utilisant des méthodes dans le back-end.
• La valeur que vous fournissez est le nom de la méthode que vous souhaitez exécuter dans la classe de composant. Dans ce cas, c’est sortBy
• Ensuite, nous passons le nom de la colonne que nous voulons trier situé entre deux cotes:

<th>
     <a wire:click.prevent="sortBy('cin')" role="button" href="#">
          CIN
          @include('includes.icone-de-tri', ['field' => 'cin'])
     </a>
</th>

@if ($sortField !== $field)
    <i class="text-muted fas fa-sort"></i>
@elseif ($sortAsc)
    <i class="fas fa-sort-up"></i>
@else
    <i class="fas fa-sort-down"></i>
@endif

Route::get('/', function () {
    return view('index');
});