Morioh
Login
Thadée Cisowski

Thadée Cisowski

10 months ago

Comment implémenter des tables de données côté serveur dans Laravel avec Yajra

Yajra est un package Laravel populaire qui fournit une variété d'outils et d'extensions pour le framework Laravel. L'un des packages Yajra les plus populaires est Yajra Datatables, qui facilite l'implémentation de tables de données côté serveur dans Laravel.

Dans ce tutoriel, nous apprenons comment implémenter des tables de données côté serveur dans Laravel 9 avec Yajra. Les tables de données nous permettent une recherche, une pagination, un classement, un tri rapides, etc.

Nous utiliserons le package yajra/laravel-datatables-oracle pour les tables de données côté serveur.

  • Étape 1 : Installer le projet Laravel
  • Étape 2 : configurer les détails de la base de données
  • Étape 3 : Installer les tables de données Yajra
  • Étape 4 : Créer des données factices
  • Étape 5 : ajouter un itinéraire
  • Étape 6 : Créer un contrôleur
  • Étape 7 : Créer un fichier lame

Étape 1 : Installer le projet Laravel

Tout d’abord, ouvrez Terminal et exécutez la commande suivante pour créer un nouveau projet Laravel :

#! /bin/bash
composer create-project --prefer-dist laravel/laravel laravel-datatable-example

ou, si vous avez installé le programme d'installation de Laravel en tant que dépendance globale du compositeur :

#! /bin/bash
laravel new laravel-datatable-example

Étape 2 : configurer les détails de la base de données

Après l'installation, accédez au répertoire racine du projet, ouvrez le fichier .env et définissez les détails de la base de données comme suit :

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

Étape 3 : Installer les tables de données Yajra

Pour installer les tables de données Yajra, nous devons exécuter une commande composer. Ouvrez le terminal, tapez cette commande et exécutez.

#! /bin/bash
composer require yajra/laravel-datatables-oracle:"~9.0"

Ce package est conçu pour gérer les performances côté serveur des tables de données du plugin jQuery via AJAX à l'aide d'Eloquent ORM, Query Builder ou Collection.

Étape 4 : Créer des données factices

Dans cette étape, nous allons créer des utilisateurs factices à l’aide de la Tinker Factory. créons donc des enregistrements factices à l'aide de la commande ci-dessous :

Tout d’abord, ouvrez Tinker en utilisant cette commande

php artisan tinker

Après avoir ouvert Tinker, exécutez la commande suivante pour créer des enregistrements factices

User::factory()->count(500)->create()

Étape 5 : ajouter un itinéraire

Dans cette étape, nous devons créer un itinéraire pour le fichier de mise en page des tables de données et un autre pour obtenir des données. alors ouvrez votre  fichier routes/web.php  et ajoutez la route suivante.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('users', [UserController::class, 'index'])->name('users.index');

Étape 6 : Créer un contrôleur

À ce stade, nous devons maintenant créer un nouveau contrôleur en tant que UserController. ce contrôleur gérera la mise en page, obtiendra les demandes de données et renverra une réponse, alors mettez le contenu ci-dessous dans le fichier du contrôleur :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use DataTables;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */

    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::select('id','name','email')->get();
            return Datatables::of($data)->addIndexColumn()
                ->addColumn('action', function($row){
                    $btn = '<a href="javascript:void(0)" class="btn btn-primary btn-sm">View</a>';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('users');
    }
}

Étape 7 : Créer un fichier lame

Dans la dernière étape, créons users.blade.php(resources/views/users.blade.php) pour la mise en page et nous écrirons ici le code de conception et mettrons le code suivant :

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Server Side Datatables Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 table-responsive">
            <table class="table table-bordered user_datatable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th width="100px">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
  $(function () {
    var table = $('.user_datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('users.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
  });
</script>
</html>

Nous sommes maintenant prêts à exécuter notre exemple, alors exécutez la commande ci-dessous :

#! /bin/bash
php artisan serve

Vous pouvez maintenant ouvrir l'URL ci-dessous sur votre navigateur :

http://localhost:8000/users

Maintenant, lancez-le et testez-le ! 

1.05 GEEK