Tanggal :19 Oktober 2021
Dattable di Laravel

Tutorial Menggunakan DataTable Server Side di Laravel

Assalamualaikum Warrohmatulloh Wabarokatuh, seringkali kita sebagai programmer dihadapkan pada situasi untuk menampilkan data dalam bentuk tabel. Mungkin pekerjaan ini tidak terlalu berat karena cukup mudah untuk dilakukan. Namun untuk meningkatkan user experience pengguna aplikasi kita dari tabel tersebut dibutuhkan pencarian, sortir atau atau filter data yang komprehensif.

DataTable adalah sebuah library yang akan memudahkan kita untuk menyajikan data berbentuk tabel dengan fitur pencarian, sortir secara realtime dengan mudah. Namun, seringkali kita yang tidak secara detail membaca dokumentasi akan mengimplementasikan dengan cara client side yang akan tidak optimal ketika memuat banyak data.

Pada tulisan ini kita akan membahas penggunaan DataTable secara server side pada framework Laravel dengan bantuan package dari Yajra.

Cara menginstal DataTable pada Framework Laravel

Saat tulisan ini dibuat versi Laravel yang digunakan versi 8. Untuk versi lama atau versi mendatang mungkin ada perbedaan pada versi DataTable yang kompatibel bisa menuju tautan ini. Saya asumsikan kawan-kawan sudah menginstal atau memiliki proyek Laravel.

Berikutnya, buka terminal dan ketikkan, atau copas saja perintah di bawah ini

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

Membuat Data Contoh

Untuk keperluan testing kita membutuhkan data contoh, kita gunakan tabel users yang sudah tersedia dari instalasi Laravel.

Kita akan gunakan factory untuk membuat data contohnya, untuk mengeksekusi perintahnya kita gunakan tinker.

php artisan tinker
Laravel DataTable
Tampilan tinker di Laravel

Kita buat 100 data contoh user ntuk menguji DataTable, jalankan perintah ini pada tinker.

App\Models\User::factory()->count(100)->create();

Akan muncul penampakan seperti di bawah ini jika sukses & selesai eksekusi perintahnya.

DataTable di Laravel
Berhasil membuat data contoh

Untuk memastikan bahwa data sudah benar-benar ada di database silakan cek databasenya.


Data users hasil factory

Menampilkan Data JSON

Bagian yang ditunggu tunggu nih, mari kita tampilkan datanya ke dalam DataTable, buat controller dulu.

php artisan make:controller UserController
<?php

namespace App\Http\Controllers;

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

class UserController extends Controller
{
    public function data()
    {
        return DataTables::of(User::query())->toJson();
    }

    public function index()
    {
        return view('user.index');
    }
}

Kemudian daftarkan fungsi di atas ke route di web.php.

Route::get('/user/json', [\App\Http\Controllers\UserController::class, 'data'])->name('user.data');
Route::get('/user', [\App\Http\Controllers\UserController::class, 'index'])->name('user.index');

Akses URL http://localhost:8000/user/json, seharusnya muncul seperti gambar di bawah ini, oh ya tampilannya bisa bagus soalnya pakai chrome extension JSONView.

Kalau sudah tampil seperti itu, berarti datanya sudah siap untuk digunakan.

Membuat View Untuk Menampilkan Datatable

Sesudah data bisa digunakan sekarang waktunya membuat file view di dalam folder resources/views, buat folder baru dengan nama user dan buat file blade dengan nama index.blade.php di dalamnya, jadi pathnya resources/views/user/index.blade.php.

Silakan copy paste kode di bawah ini, serta baca sedikit komentarnya biar paham :P.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <title>Laravel DataTable</title>
</head>

<body>
    <div class="container">
        <table class="table table-bordered" id="users-table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                </tr>
            </thead>
        </table>
    </div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
        $(function() {
            $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('user.data') !!}', // memanggil route yang menampilkan data json
                columns: [{ // mengambil & menampilkan kolom sesuai tabel database
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at'
                    }
                ]
            });
        });
    </script>
</body>

</html>

Maka akan tampil sebuah tabel yang kurang lebih tampilannya seperti ini jika kita akses http://localhost:8000/user.

Refactor Kode Agar Lebih Sederhana

Mari kita lakukan sedikit refactor pada kode kita, mulai dari controller, kita ubah menjadi seperti ini.

<?php

namespace App\Http\Controllers;

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

class UserController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax()) {
            return DataTables::of(User::query())->toJson();
        }
        
        return view('user.index');
    }
}

Kenapa bisa begitu? Jadi, pada file view user/index.blade.php request yang dikirim berupa request ajax jadi kita bisa taruh fungsinya menjadi dalam satu method.

Upsss, tapi ini menjadikan kode yang tadi sudah berjalan menjadi error seperti ini.

Tentu saja error karena kita menghapus method data() pada UserController sebelumya. Jadi kita perlu memperbarui juga pemanggilannya pada view user/index.blade.php tepatnya pada bagian ini.

ajax: '{!! route('user.data') !!}'

Ubah pemanggilannya ke route user.index, karena sekarang data JSON ditampilkan pada route yang sama, menjadi seperti ini.

ajax: '{!! route('user.index') !!}'

Coba akses ulang http://localhost:8000/user, BOOM, sudah berfungsi kembail dan datatable sudah tampil.

Hapus route di bawah ini dari file web.php.

Route::get('/user/json', [\App\Http\Controllers\UserController::class, 'data'])->name('user.data');

Baris tersebut sudah tidak kita gunakan lagi karena kita sudah memindahkan fungsinya ke dalam method index().

Wassalamualaikum Warrohmatulloh Wabarokatuh.

Halo semuanya, saya Amirul seoarang Web Developer, suka membuat konten pembelajaran berupa artikel, video tutorial maupun podcast, saya juga suka makan dan foto makanan.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *