Cara Membuat DataTables Server Side di Laravel

Cara Membuat DataTables Server Side di Laravel - DataTables Server-side adalah proses terbaik untuk menampilkan data dari database dengan jumlah data mencapai ribuan, dengan metode server-side ini tiap data yang di tampilkan melalui protokol HTTP Request dan di tampilkan melalui response AJAX kepada Client.

Pada tutorial sebelumnya kita membahas Cara Membuat Tabel Data Dengan JQuery DataTables dari sisi Client-side yang mana data yang ditampilkan tidak diperoleh dari Server dan tidak membutuhkan database.

Cara Membuat DataTables Server Side di Laravel

Jika anda memiliki data yang jumlahnya mencapai ribuan dan anda menggunakan DataTables biasa dengan cara mengkonversi tabel biasa ke DataTables dengan memanfaatkan function DataTables() di javascript. 

Ini adalah kesalahan besar, sebab semua data akan di loaded dahulu dalam bentuk HTML sebelum di tampilkan.

Nah jika anda menggunakan DataTables Server-side processing maka data akan di tampilkan perhalaman sesuai pageLength yang anda tentukan. 

Dengan begini website anda akan terasa ringan, walaupun jumlah data yang dimiliki mencapai ribuan.

Kali ini saya akan langsung coba tutorial membuat DataTables Server Side di Laravel, disini saya akan mempraktekannya dari awal, mulai dari instal laravel, install plugin datatables di laravel, membuat database dan mencoba menjalankannya, mari kita coba.

Cara Install Laravel

Buka terminal atau command prompt anda, lalu mulai ketikan perintah berikut.

Keterangan: tutorial-datatables adalah nama folder, laravel/laravel:^7.0 adalah versi laravel yang akan kita install.

    
        composer create-project --prefer-dist laravel/laravel:^7.0 tutorial-datatables
    

Tunggu hingga proses install selesai, jika sudah buka project laravel yang baru saja kita buat dengan text editor yang anda miliki, disini saya menggunakan Visual Studio Code.

Setting File .env dan Buat Database

Buat database terlebih dahulu, dengan nama "tutorial-datatables". Setelah database berhasil dibuat sekarang kita lanjut ke proses migrasi database, ketikan perintah berikut di command line anda.

Disini kita akan menggunakan file migration bawaan dari laravel yakni "CreateUsersTable" untuk membuat tabel users.

Keterangan: jika muncul text "Migration table created successfully." berarti tabel yang anda buat berhasil di migrasi kedalam Database.

    
        php artisan migrate
    

Buat Seeder Untuk Mengisi Tabel Dengan Cepat

Disini kita akan memanfaatkan fitur laravel seeder untuk mengisi tabel yang sudah kita buat dengan data acak sebagai sample data agar lebih mudah dan cepat dalam proses belajar laravel.

Ketikan perintah berikut untuk membuat Class Seeder, jika perintah tersebut berjalan lancar maka akan muncul peringatan "Seeder created successfully."

Keterangan: "UserSeeder" adalah nama seeder, pastikan saat anda membuat class seeder gunakan kata "Seeder" di akhir nama seeder yang anda buat.

    
        php artisan make:seeder UserSeeder
    

Buka file UserSeeder didalam folder "database > seeds > UserSeeder.php" lalu masukkan perintah berikut untuk membuat data seeder ke dalam database.

    
        use App\User;
use Faker\Factory as Faker;
use Illuminate\Support\Str;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Hash;

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        for ($i = 0; $i < 50; $i++){
            $faker = Faker::create();
            \App\User::create([
                'name' => $faker->name,
                'email' => $faker->unique()->safeEmail,
                'password' => Hash::make('password'),
                'remember_token' => Str::random(10),
                'created_at' => now(),
                'updated_at' => now(),
            ]);
        }
    }
}
    

Setelah script diatas selesai dibuat sekarang kita jalankan fitur seed dari laravel dengan mengetikan perintah berikut di cmd atau terminal anda.

Keterangan: --class= diikuti dengan nama seeder yang sudah kita buat, dengan begitu artisan hanya akan menjalankan file UserSeeder saja, jika tanpa menggunakan --class maka semua seeder akan dijalankan.

Jika muncul peringatan "Database seeding completed successfully." maka seeder berhasil di jalankan.

    
        ❯ php artisan db:seed --class=UserSeeder
    

Berikut adalah hasil dari seeder yang barusan kita jalankan, buka tabel user anda.

Gambar Tabel User

Cara Install Yajra DataTables di Laravel

Dari tahapan diatas yang sudah kita lalui, sekarang saatnya proses untuk install library Yajra DataTables di Laravel dengan mengetikan perintah berikut:

    
        composer require yajra/laravel-datatables-oracle
    

Panduan dan dokumentasi lengkap dari Yajra DataTables dapat kalian baca di situs resminya, jika proses download plugin yajra datatables sudah selesai sekarang kita mulai mengintegrasikan DataTable dengan Laravel.

Integrasi Yajra DataTables Dengan Laravel

Buka file app.php yang berada didalam folder config, cari baris kode yang berisi "providers" dan "aliases".

Tambahkan script berikut di pada baris terakhir array 'providers', perhatikan contoh kode berikut:

    
        'providers' => [
            ...,
            Yajra\DataTables\DataTablesServiceProvider::class,
        ]
    

Selanjutnya tambahkan kode di bagian akhir array 'aliases', perhatikan baris kode berikut:

    
        'aliases' => [
            ...,
            'DataTables' => Yajra\DataTables\Facades\DataTables::class,
        ]
    

Sampai disini kita sudah melakukan konfigurasi library datatables, tabel user di laravel, selanjutnya kita akan membuat method untuk memanggil data dari database dan mengubahnya kedalam bentuk JSON.

Membuat Controller Untuk Menampilkan Data Kedalam DataTables

Buatlah sebuah controller baru dengan menjalankan perintah "php artisan make:controller UserController" di dalam terminal kalian. 

Pastikan setiap membuat controller selalu diakhiri dengan nama "Controller" agar memudahkan kita dalam membedakan mana file controller dengan yang lainnya.

Jika sudah buka file UserController.php yang baru saja kita buat, lalu ketikan kode berikut:

    
        namespace App\Http\Controllers;

use App\User;
use Carbon\Carbon;
use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * fungsi untuk menampilkan data dari database kedalam datatables
     */

    public function UserJson(Request $request)
    {
        $user = User::all();
        return datatables($user)
                ->editColumn('created_at', function ($data) {
                return $data->created_at ? with(new Carbon($data->created_at))->isoFormat('D MMMM Y') : '';
                })->make(true);
    }
}
    

Membuat Routing Untuk Menampilkan Data dan Memanggil JSON User

Agar data JSON dapat ditampilkan kedalam datatables dengan proses server-side maka kita harus melakukan konfigurasi routing pada file web.php yang terletak didalam folder routes/web.php

Perhatikan script web.php berikut:

    
        // Route ini dibuat untuk memanggil method UserJson didalam class UserController
        Route::get('/UserJson', 'UserController@UserJson');
    

Jika sudah sekarang kita akan memasuki tahap menampilkan database ke dalam datatables di laravel menggunakan Ajax.

Cara Menampilkan DataTables Server-Side dengan AJAX

Ubah view default bawaan laravel dengan menambahkan table dari datatables. buka file welcome.blade.php yang terletak didalam folder "resources/views/"

Kemudian kalian isi file tersebut dengan script yang ada di bawah ini, disini kita akan memanfaatkan CDN dari datatables jadi pastikan kalian tersambung dengan internet.

Untuk memahami konsep CDN ini kalian bisa membaca : Cara Mempercepat Loading Blogspot dengan CDN

perhatikan script view berikut:

    
        <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Cara Membuat DataTables Server-Side di Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">
        
        <!-- Css Bootstrap dan Jquery Datatables -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
    </head>
    <body>
            <div class="container">
                <h4 class="alert alert-success">
                    Latihan DataTables Server-Side di Laravel
                </h4>

                <div class="table-responsive py-3">
                    <table class="table table-bordered" id="users-table">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Tgl Register</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <!-- DataTables -->
        <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $('document').ready(function(){
                $('#users-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '/UserJson',
                    columns: [
                        { data: 'name', name: 'name' },
                        { data: 'email', name: 'email' },
                        { data: 'created_at', name: 'created_at' },
                    ]
                });
            });
        </script>
    </body>
</html>

   

Setelah semua proses sudah kita lalui sekarang kita akan mulai mencoba menjalankan project laravel kita di browser, buka terminal kita lalu ketikan perintah "php artisan server" pastikan letak folder kita sudah benar.

Jika terjadi kesalahan atau muncul pop up error dari DataTables silahkan baca, Cara Mengatasi Datatables Warning Table Ajax Error

Jika muncul pesan "Laravel development server started: http://127.0.0.1:8000" tinggal kita buka di browser kita dengan url "http://127.0.0.1:8000".

Berikut ini adalah contoh tampilan Server-side Datatables yang sudah berhasil kita install di laravel.

Jika kalian ingin download project contoh ini bisa langsung ke github saya : Github Tutorial Datatables Server Side di Laravel

Contoh DataTables Server Side di Laravel

Kesimpulan

Apa Itu DataTables

Datatables merupakan plugin jquery yang memiliki fitur lengkap untuk menampilkan data ke dalam sebuah tabel

Apa Perbedaan Server side dan Client Side

Serverside kita memproses data di sisi server sementara clientside kita memproses di sisi client untuk performance yang baik direkomendasikan menggunakan serverside

Apa Itu Yajra DataTables

Yajra datatables merupakan package yang membantu kita integrasi serverside datatables pada laravel sehingga tidak perlu membuat dari awal lagi sehingga proses development menjadi lebih cepat