Pernah nggak kamu bikin tabel data di Laravel, tapi hasilnya kaku banget — nggak bisa dicari, nggak bisa diurutkan, dan harus scroll panjang buat nemuin satu baris data? Nah, di artikel ke-44 dari seri 50 Artikel Belajar Laravel ini, kita bakal fix masalah itu dengan melakukan yajra datatables laravel instalasi dari nol. Yajra DataTables adalah package Laravel paling populer untuk mengintegrasikan library jQuery DataTables ke dalam backend Laravel secara elegan. Setelah selesai baca ini, kamu bakal punya tabel interaktif yang bisa search, sort, dan paginate secara otomatis — tanpa keringat berlebihan. 💪
Yajra DataTables adalah package PHP/Laravel yang menjadi jembatan antara server Laravel (backend) dan library jQuery DataTables (frontend). Package ini menangani proses server-side processing — sorting, searching, dan pagination — langsung di level database, sehingga performa tetap optimal meski data kamu jutaan baris.
🤔 Kenapa Harus Pakai Yajra DataTables di Laravel?
Bayangkan kamu punya warung mie ayam yang ramai. Kalau ada 10 pelanggan, kamu masih bisa hapal pesanan semua. Tapi kalau tiba-tiba 1.000 orang datang sekaligus? Kamu butuh sistem — mungkin antrian, kasir digital, atau minimal papan menu yang jelas. Nah, itulah analogi Yajra DataTables: sistem manajemen data yang membuat "warung backend-mu" tidak kolaps meski data meledak.
| Fitur | Tabel HTML Biasa | DataTables Client-Side | Yajra (Server-Side) |
|---|---|---|---|
| Search / Filter | ❌ | ✅ (dari memori) | ✅ (dari DB) |
| Sorting Kolom | ❌ | ✅ | ✅ |
| Pagination | Manual | ✅ | ✅ |
| Performa Data Besar (>10rb baris) | 💀 Lambat | ⚠️ Bisa lemot | 🚀 Cepat |
| Integrasi Laravel Eloquent | ❌ | Sebagian | ✅ Native |
Package yajra/laravel-datatables-oracle sudah diunduh lebih dari 15 juta kali di Packagist! Ini menjadikannya salah satu package Laravel paling banyak digunakan di dunia untuk manajemen tabel. Artinya, kamu belajar sesuatu yang benar-benar dipakai di industri nyata.
⚙️ Persiapan Sebelum Instalasi Yajra DataTables di Laravel
Sebelum kita mulai proses yajra datatables laravel instalasi, pastikan environment kamu sudah siap. Ini seperti memastikan bahan masak sudah lengkap sebelum mulai memasak — biar nggak berhenti di tengah jalan!
composer --version)Kalau kamu ikuti seri ini dari awal, project Laravel kamu sudah siap. Jika belum, bisa cek Artikel 1 di seri "50 Artikel Belajar Laravel" untuk setup project dari nol. Yajra DataTables bekerja paling optimal dengan jQuery DataTables versi 1.13+.
🚀 Step-by-Step: Cara Instalasi Yajra DataTables di Laravel
Oke, sekarang kita masuk ke inti artikel ini. Ikuti langkah-langkah berikut secara berurutan, dan kamu akan punya setup Yajra DataTables yang berfungsi penuh dalam waktu singkat.
Buka terminal, arahkan ke folder project Laravel kamu, lalu jalankan perintah Composer berikut:
composer require yajra/laravel-datatables-oracle
Tunggu hingga Composer selesai mengunduh semua dependensi. Proses ini biasanya memakan waktu 1–2 menit tergantung kecepatan internet.
Untuk menyesuaikan perilaku default DataTables (misal: bahasa, cache, dll), publish file konfigurasinya:
php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"
Perintah ini akan membuat file config/datatables.php di project kamu.
Yajra membutuhkan jQuery DataTables di sisi frontend. Tambahkan CDN berikut di file layout utama kamu (biasanya resources/views/layouts/app.blade.php):
<!-- Bootstrap CSS (jika belum ada) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <!-- DataTables CSS --> <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- DataTables JS --> <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
Cek apakah package sudah terdaftar dengan benar. Buka file composer.json dan pastikan ada entri Yajra di bagian require:
"require": {
"php": "^8.1",
"laravel/framework": "^10.0",
"yajra/laravel-datatables-oracle": "^10.0"
}
Jika sudah ada, berarti instalasi berhasil. 🎉 Laravel 10 atau 11 akan otomatis mendaftarkan Service Provider Yajra melalui package discovery.
Jika kamu menggunakan Laravel 9 ke bawah, kamu perlu mendaftarkan Service Provider secara manual di config/app.php:
Yajra\DataTables\DataTablesServiceProvider::class
Tambahkan di array 'providers' dan alias DataTables::class di array 'aliases'.
💻 Implementasi Awal: Uji Coba Yajra DataTables Laravel
Setelah proses yajra datatables laravel instalasi selesai, mari kita tes apakah semuanya bekerja dengan membuat implementasi minimal. Kita akan buat route, controller sederhana, dan view dengan DataTables.
use App\Http\Controllers\UserController;
Route::get('/users', [UserController::class, 'index'])->name('users.index');
Route::get('/users/data', [UserController::class, 'getData'])->name('users.data');
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Yajra\DataTables\DataTables;
class UserController extends Controller
{
// Tampilkan halaman utama
public function index()
{
return view('users.index');
}
// Endpoint untuk data DataTables (JSON)
public function getData()
{
$users = User::select(['id', 'name', 'email', 'created_at']);
return DataTables::of($users)
->addColumn('action', function ($user) {
return '<a href="/users/'.$user->id.'" class="btn btn-sm btn-primary">Detail</a>';
})
->rawColumns(['action'])
->make(true);
}
}
@extends('layouts.app')
@section('content')
<div class="container mt-4">
<h2>Daftar User</h2>
<table id="tabel-user" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Email</th>
<th>Tanggal Daftar</th>
<th>Aksi</th>
</tr>
</thead>
</table>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function () {
$('#tabel-user').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route("users.data") }}',
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'email' },
{ data: 'created_at' },
{ data: 'action', orderable: false, searchable: false }
]
});
});
</script>
@endpush
Parameter serverSide: true adalah kunci! Ini memberitahu DataTables bahwa semua proses pencarian, pengurutan, dan paginasi dilakukan di server (Laravel), bukan di browser. Inilah yang membuat Yajra sangat powerful untuk dataset besar. Tanpa ini, seluruh data akan diload ke browser sekaligus — bayangkan loading 100.000 baris! 😱
Gunakan @push('scripts') dan @stack('scripts') di layout kamu untuk memastikan inisialisasi DataTables berjalan setelah jQuery dan library DataTables selesai dimuat. Ini mencegah error "$ is not defined" yang sering membuat pusing developer pemula!
Yajra DataTables Laravel — Siap Bertempur! 🎯
Di artikel ini kamu sudah berhasil melakukan yajra datatables laravel instalasi secara lengkap, mulai dari install package via Composer, publish konfigurasi, memuat asset frontend DataTables, hingga membuat implementasi pertama dengan server-side processing. Poin-poin yang perlu kamu ingat:
composer require yajra/laravel-datatables-oracleDataTables::of()serverSide: truePunya pertanyaan atau menemukan error saat instalasi? Tulis di kolom komentar di bawah — saya baca semua komentar! Dan kalau artikel ini membantu, jangan lupa share ke teman-teman yang juga belajar Laravel ya. 🙌
No comments:
Post a Comment