Implementasi Yajra Datatables Server Side di Laravel 8

Implementasi Yajra Datatables Server Side di Laravel 8

Admin
Admin・ 13 Agustus 2021
8 min read ・ 332 views

Laravel Datatables - Apakah kamu mempunyai ribuan data di database ? Apakah kamu ingin menampilkannya dengan tampilan yang lebih user friendly ? Jika jawabanya iya semua, kita bisa menggunakan laravel datatables package untuk membuat table dinamis untuk menampilkan ribuan data tersebut.

Nah, di artikel kali ini saya akan membagikan tutorial mengenai cara menggunakan laravel datatables package di laravel versi 8 untuk menampilkan data dinamis dengan beberapa fitur seperti pagination, instan search, multi-column ordering dan lain-lain.

Oke, langsung saja kita ke koding 🚀

Step 1: Install Laravel 8

laravel new laravel-datatables

Langkah pertama yang akan kita lakukan pada tutorial ini tentu saja dimulai dengan install laravel project versi terbaru (saat ini versi 8). Untuk menginstall laravel, kita bisa menggunakan laravel installer dengan perintah seperti di atas atau install laravel dengan composer dengan perintah seperti di bawah ini.

composer create-project laravel/laravel laravel-datatables

Kita bebas menggunakan cara yang mana saja yang kita suka untuk menginstall laravel project, apakah dengan laravel installer atau dengan composer. Dari kedua contoh perintah di atas, jika dijalankan akan membuatkan atau generate laravel project dengan nama laravel-datatables. Jika proses installasi sudah selesai, buka project dengan perintah cd laravel-datatables.

Step 2: Buat Database & Setup .ENV

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_datatables
DB_USERNAME=root
DB_PASSWORD=

Selesai di langkah pertama, kita lanjutkan dilangkah kedua yaitu membuat database baru untuk menampung data dummy yang akan kita buat di step selanjutnya menggunakan factory. Jika sudah selesai membuat database baru, jangan lupa untuk menyesuaikan DB_DATABASE di file .ENV seperti pada contoh di atas.

Step 3: Install Laravel Datatables Package

composer require yajra/laravel-datatables-oracle:"~9.0"

Di tutorial ini kita akan menggunakan laravel datatables package dari yajra. Package ini dibuat untuk menangani kinerja server side dari datatables jQuery plugin via AJAX dengan menggunakan Eloquent ORM, Query Builder atau Collection.  Silahkan buka terminal lagi dan jalankan perintah di atas untuk menginstall laravel datatables package.

Step 4: Edit File User Migration

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('gender');
            $table->string('email')->unique();
            $table->string('phone');
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
} 

By default, laravel telah menyediakan file migration untuk membuat table user dengan field name, email, email_verified_at dan lain-lain. File tersebut terletak di direktori database/migration/{timestamp}_create_users_table.php. Nah di file ini, kita akan memperbarui sedikit dengan menambahkan field gender dan phone. Sesuaikan kode yang ada di file migration tersebut dengan kode seperti di atas.

Step 5: Membuat Data Dummy

<?php

namespace Database\Factories;

use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;

class UserFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = User::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name(),
            'gender' => $this->faker->randomElement(['male', 'female']),
            'email' => $this->faker->unique()->safeEmail(),
            'phone' => $this->faker->phoneNumber(),
            'email_verified_at' => now(),
            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
            'remember_token' => Str::random(10),
        ];
    }

    /**
     * Indicate that the model's email address should be unverified.
     *
     * @return \Illuminate\Database\Eloquent\Factories\Factory
     */
    public function unverified()
    {
        return $this->state(function (array $attributes) {
            return [
                'email_verified_at' => null,
            ];
        });
    }
}

Kita akan membuat data dummy untuk tabel user dan akan menampilkan data-data dari tabel user tersebut menggunakan laravel datatables package. Buka file yang terletak di database/factories/UserFactory.php dan sesuaikan kode yang ada dengan kode seperti di atas.

php artisan tinker
User::factory()->count(30)->create()

Kemudian kita akan mengeksekusi file UserFactory tersebut menggunakan tinker. Buka terminal, kemudian jalankan perintah php artisan tinker dan disusul perintah User::factory()->count(30)->create() untuk mulai generate 30 data dummy user.

Step 6: Define Route

<?php
use Illuminate\Support\Facades\Route;
use Illuminate\Http\Request;
use Yajra\Datatables\Datatables;
use App\Models\User;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::get('getUser', function (Request $request) {
    if ($request->ajax()) {
            $data = User::latest()->get();
            return DataTables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                    return $actionBtn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
})->name('user.index'); 

Di tutorial kali ini kita tidak bekerja di Controller karena kita akan membuat logic dan menerapkan laravel datatables di route. Silahkan buka file route/web.php kemudian sesuaikan kode yang ada dengan kode seperti di atas.

Di route ini, kita akan menggunakan request, yajra datatables dan user models. Di route::('/') tidak ada perubahan karena kita akan tetap menggunakan welcome.blade.php untuk tampilan ketika laravel project dijalankan.

Kita perlu menambahkan route baru dengan logic laravel datatables untuk menampilkan data users menggunakan laravel datatables dan akan kita panggil di file welcome.blade.php di step berikutnya. 

Step 7: Setup Blade View

<!DOCTYPE html>
<html>
    <head>
        <title>How to Use Yajra Datatables in Laravel 8</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
        <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container mt-5">
            <h1 class="mb-4 text-center">How to Use Yajra Datatables in Laravel 8</h1>
            <table class="table table-bordered yajra-datatable">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </body>
    <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.21/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript">
        $(function () {
          
          var table = $('.yajra-datatable').DataTable({
              processing: true,
              serverSide: true,
              ajax: "{{ route('user.index') }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'name', name: 'name'},
                  {data: 'gender', name: 'gender'},
                  {data: 'email', name: 'email'},
                  {data: 'phone', name: 'phone'},
                  {
                      data: 'action', 
                      name: 'action', 
                      orderable: true, 
                      searchable: true
                  },
              ]
          });
          
        });
    </script>
</html>

Di step terakhir, silahkan buka file welcome.blade.php, kemudian copy semua kode di atas dan replace di file welcome.blade.php tersebut. Dengan kode di atas, kita mengubah tampilan welcome yang merupakan default dari laravel menjadi tampilan tabel yang berisi data-data user. Kemudian kita sisipkan script AJAX yang memanggil route dengan name user.index yang telah kita buat di step sebelumnya.

Step 8: Pengujian Laravel Datatables

Oke, setelah melalu langkah-langkah mulai dari install laravel, install laravel datatables sampai setup blade view untuk membuat tampilan table user, sekarang waktunya pengujian. Untuk melihat apakah program laravel datatables sudah bekerja, kita cukup menjalankan laravel project kita dengan perintah php artisan serve lalu buka di browser dengan URL 127.0.0.1:8000 atau laravel-datatables.test.

Selamat mencoba, semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya 🚀 🚀 🚀

 

Credit: Business analytics illustrations by Storyset

Tinggalkan Komentar
Loading Comments