Dalam pengembangan aplikasi berbasis web, pengelolaan data dalam jumlah besar menjadi tantangan utama. Salah satu solusi yang efektif adalah menggunakan server-side rendering pada Datatables.
Konsep ini memungkinkan data hanya diambil dari server ketika diperlukan, sehingga meningkatkan performa aplikasi.
Artikel ini bertujuan untuk memberikan tutorial langkah demi langkah untuk mengintegrasikan Yajra Datatables dalam aplikasi Laravel yang bisa anda ikuti, selengkapnya:
Apa Itu Yajra Datatables dan Mengapa Digunakan?
Yajra Datatables adalah paket Laravel yang mempermudah penggunaan Datatables secara efisien.
Paket ini sangat sering digunakan untuk menampilkan data dalam tabel dengan kemampuan sorting, filtering, dan pagination secara otomatis. Selain itu, server-side rendering yang didukung oleh
Yajra Datatables memberikan keuntungan seperti penghematan bandwidth dan peningkatan performa, terutama ketika menangani data dalam jumlah besar dalam proyek Laravel.
Implementasi Laravel Datatables Server Side Rendering
Step 1: Menginstal Yajra Datatables
Untuk memulai, hal pertama yang perlu anda lakukan adalah menginstall Yajra Datatables pada framework Laravel. Anda bisa melakukan proses install menggunakan Composer dengan perintah berikut:
“`bash
composer require yajra/laravel-datatables-oracle
“`
Setelah instalasi selesai, tambahkan service provider (jika diperlukan) di file `config/app.php`:
“`php
YajraDataTablesDataTablesServiceProvider::class,
“`
Verifikasi instalasi datatables Laravel dapat berhasil dengan menjalankan perintah berikut:
“`bash
php artisan vendor:publish –provider=”YajraDataTablesDataTablesServiceProvider”
“`
Step 2: Mengonfigurasi Route dan Controller
Setelah terinstal dengan sempurna, langkah selanjutnya yang perlu anda lakukan adalah membuat route baru di file `web.php` untuk menangani permintaan data dari Datatables, seperti:
“`php
use AppHttpControllersDataTableController;
Route::get(‘/data-tables’, [DataTableController::class, ‘getData’])->name(‘data-tables’);
“`
Selanjutnya, buat controller menggunakan perintah Artisan:
“`bash
php artisan make:controller DataTableController
“`
Di dalam controller, tambahkan method untuk mengambil data dari database dan mengembalikannya dalam format JSON:
“`php
use YajraDataTablesDataTables;
use AppModelsUser;
public function getData() {
$users = User::query();
return DataTables::of($users)->make(true);
}
“`
Step 3: Menyiapkan View dengan DataTables
Setelah mengkonfigurasi, langkah ketiga adalah menyiapkan View. Buat view sederhana agar data yang ditampilkan dengan Datatables dapat terlihat. Berikut adalah contohnya:
“`html
<table id=”example” class=”display”>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
</tr>
</thead>
</table>
“`
Tambahkan inisialisasi DataTables menggunakan JavaScript:
“`javascript
$(document).ready(function() {
$(‘#example’).DataTable({
processing: true,
serverSide: true,
ajax: ‘{!! route(‘data-tables’) !!}’,
columns: [
{ data: ‘id’, name: ‘id’ },
{ data: ‘name’, name: ‘name’ },
{ data: ’email’, name: ’email’ },
{ data: ‘created_at’, name: ‘created_at’ }
]
});
});
“`
Step 4: Menampilkan Data dengan Server Side Rendering
Untuk memanfaatkan server-side rendering, pastikan Datatables memproses data langsung dari server.
Proses ini meliputi pagination, searching, dan sorting.
- Pagination
Datatables secara otomatis menangani pembagian data menjadi beberapa halaman berdasarkan jumlah baris per halaman yang diatur di sisi klien. Dengan server-side rendering, proses penghitungan halaman dan pengambilan data terjadi di server.
Pada kode JavaScript:
$(‘#example’).DataTable({ processing: true, serverSide: true, ajax: ‘{!! route(‘data-tables’) !!}’, columns: [ { data: ‘id’, name: ‘id’ }, { data: ‘name’, name: ‘name’ }, { data: ’email’, name: ’email’ }, { data: ‘created_at’, name: ‘created_at’ } ], pageLength: 10 // Jumlah baris per halaman }); - Searching
Ketika pengguna mengetik di kolom pencarian, permintaan dikirim ke server untuk menyaring dan menyajikan data berdasarkan kolom yang tersedia. Di sisi server, Yajra Datatables menangani logika filter ini. Contohnya:
public function getData() { $users = User::query(); return DataTables::of($users)->filter(function ($query) { if (request()->has(‘search’)) { $query->where(‘name’, ‘like’, “%” . request(‘search’)[‘value’] . “%”); } })->make(true); } - Sorting
Pengguna dapat mengurutkan kolom tabel dengan mengklik header kolom. Informasi urutan dikirim ke server dan diterapkan pada query. Contohnya:
public function getData() { $users = User::query()->orderBy(request(‘order’)[0][‘column’], request(‘order’)[0][‘dir’]); return DataTables::of($users)->make(true); }
Di konfigurasi frontend:
columns: [ { data: ‘id’, name: ‘id’, orderable: true }, { data: ‘name’, name: ‘name’, orderable: true }, { data: ’email’, name: ’email’, orderable: true }, { data: ‘created_at’, name: ‘created_at’, orderable: true } ]
Dengan konfigurasi di controller dan view sebelumnya, data ditampilkan secara efisien tanpa memuat semua data ke client sekaligus.
Baca Juga: Memahami Relasi Many to Many Relationship pada Laravel Eloquent dengan Mudah
Menambahkan Fitur Button dan Customization
Datatable memungkinkan penambahan tombol interaktif seperti export dan print. Gunakan library tambahan untuk fitur ini seperti:
“`javascript
$(‘#example’).DataTable({
dom: ‘Bfrtip’,
buttons: [
‘copy’, ‘csv’, ‘excel’, ‘pdf’, ‘print’
]
});
“`
Penyesuaian kolom atau tampilan tabel dapat dilakukan melalui konfigurasi API Datatables untuk memenuhi kebutuhan project aplikasi anda.
Menggunakan Dummy Data untuk Testing
Sebelum menghubungkan ke database nyata, Anda dapat menggunakan dummy data untuk mengujinya, seperti:
“`php
return DataTables::of([
[‘id’ => 1, ‘name’ => ‘John Doe’, ’email’ => ‘[email protected]’],
[‘id’ => 2, ‘name’ => ‘Jane Doe’, ’email’ => ‘[email protected]’]
])->make(true);
“`
Langkah ini membantu anda memastikan bahwa fitur server side di laravel berfungsi dengan baik tanpa risiko error di lingkungan production.
Mengimplementasikan Datatable Laravel untuk Pengembangan Aplikasi
Belajar Laravel Yajra Datatables dengan server-side rendering adalah solusi ideal untuk menampilkan data dalam jumlah besar secara efisien. Dengan langkah-langkah di atas, Anda dapat mengintegrasikan fitur ini ke dalam aplikasi web Laravel Anda.
Jangan ragu untuk bereksperimen fitur-fitur lain untuk mengoptimalkan pengelolaan data dalam proyek Anda menggu.
Anda juga bisa belajar lebih lanjut mengenai integrasi datatables dan package lainnya dengan coach praktisi yang telah berpengalaman lebih dari 5 tahun di Kursus Laravel Bersertifikat yang Course-Net sediakan, tersedia dari kelas pemula hingga ahli.
Gratis layanan re-coaching, belajar sampai bisa, bahkan seumur hidup!
Kursus Experience Based Learning yang telah mendapatkan 4 (empat) penghargaan internasional ini bisa anda cicil hingga 18 kali
100.000+ alumni dengan 472+ corporate clients telah merasakan kepuasan yang tinggi dibuktikan dengan bintang 4.9 dari 15.000+ ulasan di google review. Kini, giliran anda!
