Hai kembali lagi di kodekreasi.com , kali ini kita akan mempelajari tentang cara menggunakan datatables server side di Laravel 8 dengan menggunakan package yajra datatables . Sebagai seorang web developer sendiri tentu kalian tidak asing lagi dengan yang namanya datatables , datatables merupakan sebuah library yang membantu para web developer untuk menyajikan data dalam bentuk tabel yang tentunya lebih user friendly. Datatables memiliki fitur bawaan seperti paging, searching dan sorting yang sangat membantu para developer karena kita tidak perlu pusing-pusing membuatnya dari awal.
Terus bagaimana cara menggunakan datatables di laravel 8 ?
Untuk menggunakan datatables di laravel kalian tinggal mengincludekan file-file javascript datatables yang telah kalian download ke dalam view di laravel. Dimana hal tersebut jika digunakan untuk mengelola data yang jumlah recordnya kecil maka tidak ada masalah jika kita menggunakan jquery datatatables client side seperti tadi. Namun, jika data yang dikelola dalam jumlah banyak munkin diatas 10.000 record atau lebih maka aplikasi yang kita buat akan lama banget saat dibuka bahkan malah terjadi kegagalan saat user membuka aplikasi kita dikarenakan semua data yang banyak tersebut harus diload terlebih dahulu oleh sisi client dan tentu akan memberatkan client. Maka solusi yang tepat untuk menangani data yang banyak tersebut adalah dengan meload data secara server side. Namun tenang untuk framewok laravel sendiri sudah tersedia sebuah library datatables yang dapat kita gunakan untuk meload data secara server side yang bernama yajra datatables yang dibuat oleh developer bernama Arjay Angeles dari Philipina. Kalian bisa melihat dokumentasi dari yajra datatables disini .
Diartikel ini kita akan mempelajari cara installasi yajra datatables laravel 8 serta cara menggunakan yajra datatables server side. Ok tidak usah berlama-lama lagi langsung saja ikuti langkah-langkah berikut ini :
Step 1 – Installasi project laravel 8
Baja Juga : Tutorial cara install laravel step by step
langkah pertama yang tentunya harus kita lakukan sebelum melakukan installasi yajra datatables adalah dengan install laravel project versi terbaru (saat ini versi 8). Untuk menginstall laravel, kita bisa menggunakan composer dengan perintah seperti di bawah ini. Silakan buka CMD atau terminal kalian lalu ketikkan perintah berikut ini untuk memulai proses installasinya :
composer create-project laravel/laravel datatables-example
Setelah itu lakukan konvigurasi database pada file .env pada project laravel kalian.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=exampledb DB_USERNAME=root DB_PASSWORD=
Step 2 – Install yajra datatables laravel 8
Langkah selanjutnya kita perlu melakukan installasi yajra datatables. Untuk menginstall yajra datatables kita akan menggunakan composer seperti saat kita menginstall project laravel kita. Silakan buka CMD atau terminal kalian lalu ketikkan perintah berikut ini untuk memulai proses installasinya :
composer require yajra/laravel-datatables-oracle
Setelah proses installasinya selesai , langkah selanjutnya yang perlu kalian lakukan adalah melakukan konfigurasi dengan mendaftarkan provider dan facade yajra datatable pada sistem laravel. Silakan buka file config/app.php kemudian tambahkan scribt seperti berikut ini pada providers dan aliases :
'providers' => [
...,
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
...,
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
Step 3 – Menyiapkan tabel menggunakan migration
Untuk menyiapkan data yang akan kita tampilkan pada datatables nanti kita perlu menyipkan tabelnya terlebih daahulu pada database kita dengan menggunakan migration pada laravel. Tapi sebelumnya kita perlu memodifikasi file migration user kita pada folder database/migrations menjadi seperti berikut ini :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('first_name');
$table->string('last_name');
$table->string('no_telp');
$table->enum('gender',['L','P'])->description('L:laki-laki, P:perempuan');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
Setelah itu jalankan perintah seperti dibawah ini pada CMD atau Terminal kalian untuk memulai proses migration tabel kedalam database.
php artisan migrate
Step 4 – Menyiapkan data dummy untuk ditampilkan pada datatables
Setelah proses membuat tabel yang akan digunakan untuk menampung data-data pada database telah selesai. Tugas selanjutnya adalah menyiapkan data-data dummy untuk ditampung kedalam tabel user yang telah kita buat tadi. Untuk membuat data dummy kita akan menggunakan faker . Silakan buka file database/factories/UserFactory.php kemudian rubah menjadi seperti berikut ini :
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
use App\Models\User;
class UserFactory extends Factory
{
/**
* The name of the factory's corresponding model.
*
* @var string
*/
protected $model = User::class;
/**
* Define the model's default state.
*
* @return array
*/
public function definition()
{
return [
'first_name' => $this->faker->firstName(),
'last_name' => $this->faker->lastName(),
'email' => $this->faker->unique()->safeEmail(),
'gender' => $this->faker->randomElement(['L', 'P']),
'no_telp' => $this->faker->phoneNumber(),
'email_verified_at' => now(),
'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
'remember_token' => Str::random(10),
];
}
/**
* Indicate that the model's email address should be unverified.
*
* @return \Illuminate\Database\Eloquent\Factories\Factory
*/
public function unverified()
{
return $this->state(function (array $attributes) {
return [
'email_verified_at' => null,
];
});
}
}
Setelah itu jalankan perintah berikut pada CMD atau Terminal kalian untuk memulai proses generate data dummy yang telah kita buat menggunakan faker tadi .
php artisan tinker
Kemudian pada Psy shell isikan perintah berikut :
User::factory()->count(100)->create()
Dari perintah diatas diketahui jika kita akan mengenerate 100 data dummy menggunakan faker sehingga ketika proses tersebut selesai maka kita seharusnya kita akan menemui 100 data dummy yang telah tertampung pada tabel didatabase yang telah kita buat tadi.
Step 5 – Memodifikasi Model User
Selanjutnya kita perlu melakukan sedikit modifikasi pada model user dengan cara buka file app/Models/User.php kemudian pada bagian $fillable rubah isinya menjadi seperti berikut ini :
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var string[]
*/
protected $fillable = [
'first_name',
'last_name',
'gender',
'no_telp',
'email',
'password',
];
/**
* The attributes that should be hidden for serialization.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
}
Step 6 – Menambahkan Controller
Langkah selanjutnya , buat sebuah controller baru dengan nama UserController dengan menggunakan perintah berikut pada CMD atau Terminal kalian .
php artisan make:controller UserController
Selanjutnya buka file UserController yang telah kalian buat pada folder app/Http/Controllers kemudian rubah isinya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
//use yajra datatables
use DataTables;
//use models user
use App\Models\User;
class UserController extends Controller
{
/**
* Menampilkan halaman tabel user
*
* @return \Illuminate\Http\Response
*/
public function index() {
return view('index');
}
/**
* Datatables user server side process
*
* @param Request $request
* @return \Illuminate\Http\JsonResponse
*/
public function dataTable(Request $request)
{
if ($request->ajax()) {
$datas = User::all();
return DataTables::of($datas)
->addIndexColumn() //memberikan penomoran
->addColumn('nama',function($row){ //menambahkan column baru pada yajra datatable
$nama = $row->first_name.' '.$row->last_name;
return $nama;
})
->editColumn('gender', function($row){ //mengedit column pada yajra datatable
if($row->gender == 'L'){
return 'Laki-laki';
}else{
return 'Perempuan';
}
})
->addColumn('action', function($row){
$enc_id = \Crypt::encrypt($row->id);
$btn = '<a href="#" class="edit btn btn-sm btn-primary" > <i class="fas fa-edit"></i> Edit</a>
<a href="#" class="hapus btn btn-sm btn-danger"> <i class="fas fa-trash"></i> Hapus</a>';
return $btn;
})
->rawColumns(['action']) //merender content column dalam bentuk html
->escapeColumns() //mencegah XSS Attack
->toJson(); //merubah response dalam bentuk Json
}
}
}
Penjelasan :
Dari scribt diatas kita telah membuat 2 buah function dengan nama index() dan dataTable() . Function index() digunakan untuk menampilkan halaman index.blade.php yang berupa tampilan datatable server side , sedangkan function dataTable() digunakan untuk merender content pada dataTable server side .
Catatan :
Dalam mengunakan rawColumns pada yajra datatables kalian harus berhati-hati karena data akan dirender dalam html sehingga script yang disimpan dalam database tidak akan disanitize terlebih dahulu ketika mau ditampilkan , hal tersebut akan membuat celah XSS Attack pada website yang kita buat.
Step 7 – Menambahkan Tampilan View
Proses selajutnya adalah membuat tampilan dari halaman datatables server side yang akan kita buat dengan cara masuk ke foder resources/views buat file baru dengan nama index.blade.php kemudian copykan script berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>How to Use Laravel 8 datatables server side</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4 text-center">Contoh yajra datatables server side pada laravel 8 </h1>
<table id="dataTable" class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Phone</th>
<th>Email</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
fetch_data()
function fetch_data(){
$('#dataTable').DataTable({
pageLength: 10,
lengthChange: true,
bFilter: true,
destroy: true,
processing: true,
serverSide: true,
oLanguage: {
sZeroRecords: "Tidak Ada Data",
sSearch: "Pencarian _INPUT_",
sLengthMenu: "_MENU_",
sInfo: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
sInfoEmpty: "0 data",
oPaginate: {
sNext: "<i class='fa fa-angle-right'></i>",
sPrevious: "<i class='fa fa-angle-left'></i>"
}
},
ajax: {
url:"{{route('user.data')}}",
type: "GET"
},
columns: [
{
data: 'DT_RowIndex',
name: 'DT_Row_Index',
"className": "text-center" ,
orderable: false,
searchable: false
},
{
data: 'nama',
},
{
data: 'no_telp'
},
{
data: 'email'
},
{
data: 'gender',
"className": "text-center"
},
{
data: 'action',
"className": "text-center",
orderable: false,
searchable: false
},
]
});
}
});
</script>
</html>
Step 8 – Menambahkan Route
Langkah terakhir yang perlu kita lakukan adalah menambahkan route . Untuk menambahkan route dapat dilakukan dengan cara buka file routes/web.php kemudian tambahkan scribt seperti berikut ini :
Route::get('/',[UserController::class,'index'])->name('user');
Route::get('data',[UserController::class,'dataTable'])->name('user.data');
Sekarang silahkan buka web browser anda dan akses http://127.0.0.1:8000/, jika semua step yang anda lakukan sudah benar maka akan muncul tampilan seperti berikut ini :
Untuk file lengkapnya kalian bisa dapatkan di github saya berikut ini .
Sekian artikel dari saya kali ini mengenai cara menggunakan yajra datatables server side di Laravel 8 . semoga bisa bermanfaat ….