Bayangkan kamu buka halaman admin, lalu tabel data produk butuh waktu 10 detik untuk muncul. Sambil nunggu, kamu udah keburu buka tab YouTube. Nah, ini bukan cuma masalah UX yang buruk — ini adalah tanda bahwa aplikasimu memuat semua data sekaligus ke browser, padahal cuma perlu menampilkan 10 baris. Solusinya? DataTables server side Laravel. Di artikel ke-46 dari seri 50 Artikel Belajar Laravel ini, kita bakal kupas tuntas cara mengimplementasikan server-side processing supaya tabelmu tetap ringan dan responsif meskipun datanya jutaan baris.
Server-Side Processing adalah teknik di mana operasi filtering, sorting, dan pagination dilakukan di server, bukan di browser. DataTables hanya mengirim parameter (halaman berapa, cari apa, urut gimana) ke server, dan server membalas hanya dengan data yang dibutuhkan saat itu. Hasilnya: browser tidak pernah kewalahan, berapapun jumlah total data di database.
🔍 Client-Side vs Server-Side DataTables Laravel: Apa Bedanya?
Analogi sederhananya begini: Client-Side itu seperti kamu pesan semua menu di restoran, taruh di meja, baru milih mau makan apa. Server-Side itu seperti kamu bilang ke pelayan "bawain nasi goreng spesial aja" — dan pelayan cuma bawain itu. Jauh lebih efisien, kan?
| Aspek | Client-Side | Server-Side ✅ |
|---|---|---|
| Jumlah Data Cocok | < 5.000 baris | Jutaan baris ♾️ |
| Loading Awal | Lambat (load semua) | Cepat (per halaman) |
| Beban Server | Ringan (sekali kirim) | Sedang (per request) |
| Kompleksitas Kode | Simpel | Lebih kompleks, tapi worth it |
| UX pada Data Besar | 💀 Sangat Buruk | 🚀 Excellent |
Menurut riset Google, setiap penambahan 1 detik waktu loading halaman dapat meningkatkan bounce rate hingga 32%. Client-side DataTables dengan 100k baris bisa butuh 5–15 detik untuk render. Itu bencana UX yang nyata!
🛠️ Persiapan: Install Package DataTables Server Side Laravel
Kita akan pakai package yajra/laravel-datatables — package paling populer dan terawat untuk implementasi datatables server side di Laravel. Pastikan kamu sudah punya project Laravel yang berjalan, ya!
Jalankan perintah berikut di terminal project Laravel kamu:
Untuk Laravel 10 dan 11, gunakan yajra/laravel-datatables-oracle versi ^10 atau ^11. Cek dokumentasi resmi di yajrabox.com/docs/laravel-datatables untuk versi yang sesuai dengan Laravel kamu.
⚙️ Implementasi DataTables Server Side Laravel Step by Step
Oke, sekarang masuk ke bagian yang paling seru! Kita akan buat tabel data produk yang bisa menampilkan ratusan ribu data dengan mulus. Ikuti langkah-langkah di bawah ini dengan teliti.
Kita butuh dua route: satu untuk halaman tampilan, satu untuk endpoint data (JSON).
use App\Http\Controllers\ProdukController; Route::get('/produk', [ProdukController::class, 'index']) ->name('produk.index'); Route::get('/produk/data', [ProdukController::class, 'getData']) ->name('produk.data');
namespace App\Http\Controllers; use App\Models\Produk; use Illuminate\Http\Request; use Yajra\DataTables\DataTables; class ProdukController extends Controller { // Method untuk tampilkan halaman view public function index() { return view('produk.index'); } // Method untuk suplai data JSON ke DataTables public function getData(Request $request) { if ($request->ajax()) { $data = Produk::select([ 'id', 'nama', 'kategori', 'harga', 'stok', 'created_at' ]); return DataTables::of($data) ->addIndexColumn() ->addColumn('harga_format', function($row) { return 'Rp ' . number_format($row->harga, 0, ',', '.'); }) ->addColumn('aksi', function($row) { return '<a href="'.route('produk.edit', $row->id) .'" class="btn btn-sm btn-warning">Edit</a>'; }) ->rawColumns(['aksi']) ->make(true); } } }
Perhatikan kita menggunakan DataTables::of($data) bukan Produk::all(). Ini kuncinya! Kita hanya pass Query Builder, bukan Collection. Package Yajra-lah yang akan mengeksekusi query dengan LIMIT, OFFSET, dan WHERE yang tepat sesuai request dari DataTables di frontend.
Buat file resources/views/produk/index.blade.php dengan kode berikut:
<!-- Pastikan sudah include Bootstrap, jQuery, DataTables CSS & JS di layout utama --> <div class="container mt-4"> <h3>Daftar Produk</h3> <table id="tabelProduk" class="table table-bordered"> <thead><tr> <th>#</th> <th>Nama Produk</th> <th>Kategori</th> <th>Harga</th> <th>Stok</th> <th>Aksi</th> </tr></thead> </table> </div> <script> $(document).ready(function() { $('#tabelProduk').DataTable({ // Aktifkan server-side processing! processing: true, serverSide: true, ajax: { url: '{{ route("produk.data") }}', type: 'GET' }, columns: [ { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false }, { data: 'nama', name: 'nama' }, { data: 'kategori', name: 'kategori' }, { data: 'harga_format', name: 'harga' }, { data: 'stok', name: 'stok' }, { data: 'aksi', name: 'aksi', orderable: false, searchable: false } ], language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' } }); }); </script>
🚀 Optimasi DataTables Server Side Laravel agar Makin Kencang
Implementasi dasar sudah jalan? Bagus! Tapi kita bisa pergi lebih jauh. Berikut teknik optimasi yang wajib kamu terapkan agar performa datatables server side Laravel kamu benar-benar maksimal.
Kolom yang sering dipakai untuk search dan sort WAJIB diberi index. Ini bisa mempersingkat query time hingga 10x lipat!
// Di migration file Schema::table('produks', function(Blueprint $table) { $table->index('nama'); $table->index('kategori'); $table->index('created_at'); // Composite index jika sering filter bersamaan $table->index(['kategori', 'stok']); });
Hindari SELECT *. Pilih hanya kolom yang benar-benar ditampilkan!
// ❌ Buruk - ambil semua kolom $data = Produk::query(); // ✅ Bagus - pilih hanya yang dibutuhkan $data = Produk::select([ 'id', 'nama', 'kategori', 'harga', 'stok' ]);
Jika kamu menggunakan addColumn() dengan nama kolom yang berbeda dari nama kolom database (seperti harga_format), pastikan di array columns JavaScript, properti name menunjuk ke nama kolom database yang asli (dalam contoh: name: 'harga'), bukan nama kolom kustom. Ini agar sorting tetap berfungsi dengan benar.
Untuk data yang jarang berubah (misal: master data), pertimbangkan menggunakan Laravel Cache pada query DataTables. Wrap query-mu dengan Cache::remember('produk-data', 300, fn() => ...) untuk cache 5 menit. Hasilnya? Response time bisa turun dari 200ms menjadi <5ms!
Kesimpulan
Selamat! Kamu sudah berhasil memahami dan mengimplementasikan DataTables server side Laravel dari nol. Mari kita rekap poin-poin pentingnya:
Artikel ini adalah bagian dari Seri 50 Artikel Belajar Laravel yang dirancang untuk membawamu dari pemula hingga level profesional. Di artikel berikutnya, kita akan memperkaya tabel DataTables dengan tombol Aksi Edit dan Hapus yang fungsional!
💬 Punya pertanyaan atau stuck di salah satu langkah? Drop komentar di bawah — saya baca semua komentar!
No comments:
Post a Comment