Cara menggunakan Datatables di Laravel dengan Database MySQL, Datatables Serverside – Halo semuanya, apa kabar ? semoga dalam keadaan baik-baik saja. Tutorial pemrograman kali ini membahas mengenai tutorial Laravel.
Tutorial Laravel yang membahas mengenai cara menggunakan datatables di Laravel biasa dan menggunakan Datatables ServerSide.
Sudah tahu apa itu datatable ?
Apa itu Datatables ?
Datatables adalah sebuah package / Libary yang digunakan untuk menampilkan data ke dalam bentuk sebuah tabel. Perbedaan tabel dengan datatable dan tidak terletak pada fitur yang di sajikan.
Dengan menggunakan Fitur Datatable kita tidak lagi di pusing kan membuat pagination, pencarian, sorting dan masih banyak lagi karena semua itu sudah di sediakan oleh datatables.
Penggunaan Datatables sendiri dapat di bedakan menjadi 2 yaitu : Datatables biasa dan Datatables Server Side.
Cara menggunakan databales biasa cukup dengan menampilkan data pada umumnya, sedangkan datatables server side yaitu menggunakan data json untuk di tampilkan di tabel.
Keuntungan menggunakan Datatables server side yaitu kecepatan akses terhadap data lebih cepat karena akan di bagi per jumlah data. Sedangkan untuk datatables regular akan di tampilkan seluruh data hanya saja di tangani dengan tabel pada jumlah pagination tertentu.
Yuk lanjut kita lakukan di dalam pengkodean.
Apa saja yang perlu di siapkan untuk menggunakan Datatable Laravel?
- Projek Laravel
- Database MySQL
Berikut ini contoh skema tabel yang di pakai :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | CREATE TABLE `users` ( `id` BigInt( 20 ) UNSIGNED AUTO_INCREMENT NOT NULL, `name` VarChar( 255 ) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL, `email` VarChar( 255 ) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL, `email_verified_at` Timestamp NULL, `password` VarChar( 255 ) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL, `remember_token` VarChar( 100 ) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL, `created_at` Timestamp NULL, `updated_at` Timestamp NULL, PRIMARY KEY ( `id` ), CONSTRAINT `users_email_unique` UNIQUE( `email` ) ) CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ENGINE = InnoDB AUTO_INCREMENT = 4; |
Skema SQL di atas berguna untuk membuat tabel MySQL dengan nama “users”
Silahkan isi database tabel users dengan data dummy.
Gambar di atas contoh data dummy pada PC saya.
Cara menggunakan Datatables Biasa
Langsung saja silahkan buat routing baru :
routes/web.php
| 1 | Route::get("users_server_side", "UserController@getAllUserServerSide"); |
Asumusikan sudah terdapat controller dengan nama UserController.
Setelah itu buat controller baru :
| 1 | php artisan make:controller UserController |
Silahkan ubah controller Laravel dengan nama UserController dengan kode di bawah ini :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\User; use Illuminate\Support\Facades\Cache; class UserController extends Controller { public function getAllUser() { $users = User::all(); return view('users', compact("users")); } } |
Baca Juga Tutorial Laravel pendukung untuk belajar :
- Relasi Many to Many Elequent ORM pada Laravel
- Tutorial Export PDF dengan DOMPDF pada Laravel
- Relasi One to Many Elequent ORM pada Laravel
Jangan lupa selanjutnya kita buat model dengan nama User.
| 1 | php artisan make:model User |
Pada model User tidak perlu di lakukan perubahan kode PHP.
Sekarang silahkan buat views dengan nama users.blade.php
resource/users.php
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Users | Kodingin</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css"/> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> </head> <body class="container"> <h1 class="mt-4 mb-4"> User DataTable Reguler</h2> <table id="data_users_reguler" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Created_at</th> </tr> </thead> <tbody> @foreach ($users as $item) <tr> <td>{{ $item->name }}</td> <td>{{ $item->email }}</td> <td>{{ $item->created_at}}</td> </tr> @endforeach </table> <script> $(document).ready(function() { $('#data_users_reguler').DataTable(); } ); </script> </body> </html> |
Jika sudah saatnya lakukan uji coba :
| 1 | php artisan serve |
Dan buka URL nya : http://127.0.0.1:8000/users_general
Maka hasilnya :
Lihatlah gambar di atas, tampilannya sangat menarik dan fitur yang di sajikan pun sangatlah lengkah untuk kebutuhan pengelolaan data.
Selanjutnya kita buat datatables server side menggunakan yajra.
Cara menggunakan Datatables Serverside dengan Yajra
Untuk menggunakan Datatables Serverside di Laravel menggunakan package dari Yajra. Berikut ini cara instalasi package datatables yajra untuk Laravel :
| 1 | composer require yajra/laravel-datatables-oracle |
Setelah itu tambahkan kode berikut ini di config/app.php
config/app.php
| 1 2 3 4 5 | 'providers' => [ //datalain Yajra\DataTables\DataTablesServiceProvider::class, ] |
| 1 2 3 4 | 'aliases' => [ //datalain 'DataTables' => Yajra\DataTables\Facades\DataTables::class, ] |
Jika sudah buat 2 routing baru :
| 1 2 | Route::get("users_server_side", "UserController@getAllUserServerSide")->name("user.data"); Route::get("index_get_user", "UserController@indexGetUser"); |
2 routing laravel baru di atas berguna untuk menampilkan views dan menampilkan data JSON menggunakan Datatables Serverside oleh Yajra.
Sebelum nya kan sudah membuat UserController, jadi untuk menggunakan UserController tidak perlu bikin lagi.
Ubah UserController.php menjadi kode di bawah ini :
app/Http/Controlller/UserController.php
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <?php namespace App\Http\Controllers; use DataTables; use Illuminate\Http\Request; use App\User; use Carbon\Carbon; use Illuminate\Support\Facades\Cache; class UserController extends Controller { public function getAllUserServerSide() { $data = User::latest()->get(); return Datatables::of($data) ->editColumn("created_at", function ($data) { return date("m/d/Y", strtotime($data->created_at)); }) ->addColumn('ID', function ($data) { $update = '<a href="javascript:void(0)" class="btn btn-primary">' . $data->id . '</a>'; return $update; }) ->rawColumns(['ID']) ->make(true); } public function indexGetUser() { return view("user_server_side"); } } |
Perhatikan kode di atas, untuk menggunakan datatables server side di Laravel harus mengimport facade yang kita instance di config/app.php tadi.
Pada method getAllUserServerSide() terdapat query mengguakan elequent ORM untuk menampilkan data dari Database MySQL.
Untuk melakukan perubahan bentuk data pada data JSON datatables menggunakan keyword “editColumn“, sedangkan untuk menambahkan field baru yang tidak ada di tabel database dapat menggunakan perintah “addColumn“.
Selanjutnya bikin views untuk memanggil data Json pada method getAllUserServerSid() menggunakan method indexGetUser().
Silahkan buat views baru dengan nama user_server_side. Berikut ini kode views nya :
Resource/Views/user_server_side.php
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Users | Kodingin</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css" /> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> </head> <body class="container"> <h1 class="mt-4 mb-4"> User DataTable Server Side</h2> <table id="data_users_side" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Created_at</th> <th>ID</th> </tr> </thead> </table> <script> $(function() { $('#data_users_side').DataTable({ processing: true, serverSide: true, ajax: "/users_server_side", columns: [{ data: 'name', name: 'name' }, { data: 'email', name: 'email' }, { data: 'created_at', name: 'created_at' }, { data: 'ID', name: 'ID' } ] }); }); </script> </body> </html> |
Perhatikan kode di atas, untuk memanggil data json yang tadi kita buat menggunakan bantuan Ajax Jquery, Lalu hasil (response) dari json di definisikan nama field nya untuk di tampilkan sebagai data pada tabel.
Jika sudah semua saatnya lakukan uji coba :
| 1 | php artisan serve |
Lalu akses URL : http://127.0.0.1:8000/index_get_user
Lihat Hasil nya :
Pada gambar di atas menujukkan hasil dari data pada database MySQL.Terdapat 3 varian bentuk data yaitu :
- Data Asli,
- Merubah Format Waktu,
- dan Memberikan Style pada Field Data.
Note : Uji Coba menggunakan Laravel Versi 5.8
Sekian tutorial Laravel yang membahas Cara menggunakan Datatables di Laravel. Semoga Bermanfaat.
Related Posts
Relasi One to Many Elequent ORM pada Laravel
Pengertian dan Cara Install Laravel dengan Composer
Tutorial Export PDF dengan DOMPDF pada Laravel
Tutorial Design Pattern Repository pada Laravel
Relasi One to One Elequent ORM pada Laravel
Relasi Many to Many Elequent ORM pada Laravel
2 Cara mudah membuat Login pada Laravel
Tutorial membuat Controller Pada Framework Laravel
hmm, masih bingung apa sih bedanya datatable client-side sama yang server-side, soalnya klo di aplikasi biasa gak kelihatan 🙂 ?
Ketika data yang ditampilkan sudah sangat banyak kan terasa, client-side akan lebih lama karena akan mengambil semua data yang tersedia kemudian baru dijadikan datatable, sedangkan untuk yang server-side data yang diambil hanya beberapa saja sesuai yang dibutuhkan.