Implementasi Datatables di Laravel

This post is also available in: English

Hallo apa kabar teman semuanya, kali ini kita akan membahas laravel kembali. Untuk pemabahasannya, kamu dapat implementasi Datatables pada Laravel.

Package laravel yang akan kita gunakan yaitu Yjra Datatbles Server Side. Package ini sangat berguna ketika kamu mempunyai ribuan data dan kamu ingin sekali memmiliki tampilan yang lebih user friendly maka kita harus menggunakan package laravel. Kali ini kita akan menampilkan data dinamis dengan beberapa fitur seperti pagination dan search.

DataTables adalah plug-in yang didukung oleh jQuery yang sering dikenal sebagai perpustakaan Javascript. Ini adalah alat yang sangat fleksibel dan dinamis.

Kita langsung saja ke dalam pembahasannya:

Install Laravel
Buat Database & Setup .ENV
Instal Laravel Datatables
Set Up Model and Migrations
Create DataTable Controller
Tentukan Rute
Display Data Dengan Yajra Datatables

Kamu dapat mempelajari tutorial lainnya di sini:

Integrasi Social Media Share di Laravel

Integrasi Paypal Payment Gateway Dengan Laravel

Error Handling di Laravel

Install Laravel

laravel new laravel-datatables

Langkah pertama yang kita lakukan adalah install projek laravel. Ataug gunakan printah di bawah ini untuk melakukan install.

composer create-project laravel/laravel laravel-datatables

Kita telah melakuakn install projek larave menggunakan composer. Selanjutkan kita akan lakuakn configurasi database.

Buat Database & Setup .ENV

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_datatables
DB_USERNAME=root
DB_PASSWORD=

Kali ini kamu harus buat terlebih dahulu databasenya dan atur konfigurasi database di .ENV.

Instal Laravel Datatables

Plugin ini menangani pekerjaan sisi server dari plugin DataTables jQuery melalui opsi AJAX dengan mempertimbangkan Eloquent ORM, Fluent Query Builder atau Collection.

Masukan perintah di bawah ini untuk melakukan install package datatables.

composer require yajra/laravel-datatables-oracle

atau

composer require yajra/laravel-datatables-oracle:"^10.0"

Setelah melakuakan instal package selesai, masukan service provider di bawah ini ke dalam config/app.php.

.....
.....
'providers' => [
	....
	....
	Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
	....
	....
	'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....
.....

Jalankan perintah di bawah ini:

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

Set Up Model and Migrations

Buatlah sebuah database produk.

php artisan make:migrations create_products_table

Buka file database/migrations/timestamp_create_products_table.php. Dan sesuaikan kodenya seperti di bawah ini:

public function up()
{
    Schema::create('students', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('product_code');
        $table->string('product_name');
        $table->timestamps();
    });
}

Langkah selanjutnya buatlah model product.

php artisan make:model Products -m

Dan sesuaikan kodenya seperti di bawah ini:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'product_code','product_name'
    ];
}

Jalankan perintah migrasi, dengan perintah di bawah ini:

php artisan migrate

Setelah lakukan migrate dan telah terbuah tabel product di database, kamu harus lakukan input data atau buat sebuah data dummy sebanyak banyaknya. Karena kita akan lakukan uji coba pada aplikasi yang kita buat.

Create DataTable Controller

Langkah selanjutnya kita buat sebuah controller yang berfungsi untuk menampilkan data yang akan kira kirim datanya ke datatables. Buatlah sebiah controller seperti di bawah ini.

php artisan make:controller ProductController

Buka file controller di app/Http/Controllers/StudentController.php dan sesuai kodenya seperti di bawah ini.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
use DataTables;
class StudentController extends Controller
{
    public function index()
    {
        return view('welcome');
    }

    public function index()
    {
        if(\request()->ajax()){
            $data = Product::latest()->get();
            return DataTables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                    return $actionBtn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
        return view('products.index');
    }
}

Tentukan Rute

Setelah kita membuat contoller, maka kita buat route. Buka file routes/web.php dan sesuaikan kodenya.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::resource('products', ProductController::class);

Display Data Dengan Yajra Datatables

Langkag terakhir kita buat sebuah blade untuk menampilkan database yang telah kita buat sebelumnya. Saya tambahkan beberapa plugin untuk mendukung tampilan yang menarik.

Buka file resources/views/welcome.blade.php. Masukan kode di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Datatables Tutorial</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">
    <h2 class="mb-4">Laravel Yajra Datatables Example</h2>
    <table id="myTable" class="table table-bordered">
        <thead>
            <tr>
                <th>No</th>
                <th>Kode Barang</th>
                <th>Nama Barang</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">
    $(function () {
          var table = $('#myTable').DataTable({
              processing: true,
              serverSide: true,
              ajax: "{{ route('products.index') }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'kode_barang', name: 'kode_barang'},
                  {data: 'nama_barang', name: 'nama_barang'},
              ]
          });

        });
</script>
</html>

Selanjutnya kita jalankan perintah php artisan serve untuk melihat hasil dari progres yang kamu buat menggunakan browser.