Cara menggunakan Datatables di Laravel dengan Database MySQL

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 ?

Daftar Isi

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 :

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;

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.

Cara menggunakan Datatables di Laravel dengan Database MySQL — Menggunakan Datatables ServerSide | MySQL

Gambar di atas contoh data dummy pada PC saya.

Cara menggunakan Datatables Biasa

Langsung saja silahkan buat routing baru :

routes/web.php

Route::get("users_server_side", "UserController@getAllUserServerSide");

1	Route::get("users_server_side", "[email protected]");

Asumusikan sudah terdapat controller dengan nama UserController.

Setelah itu buat controller baru :

php artisan make:controller UserController

1	php artisan make:controller UserController

Silahkan ubah controller Laravel dengan nama UserController dengan kode di bawah ini :

<?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"));
    }
}

<?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 :

Jangan lupa selanjutnya kita buat model dengan nama User.

php artisan make:model 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

<!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>

<!DOCTYPE html>

<head>

<title>Users | Kodingin</title>

</head>

<h1 class="mt-4 mb-4"> User DataTable Reguler</h2>

<thead>

<tr>

<th>Email</th>

<th>Created_at</th>

</tr>

</thead>

<tbody>

@foreach ($users as $item)

<tr>

<td>{{ $item->email }}</td>

<td>{{ $item->created_at}}</td>

</tr>

@endforeach

</table>

$(document).ready(function() {

$('#data_users_reguler').DataTable();

} );

</script>

</body>

</html>

Jika sudah saatnya lakukan uji coba :

php artisan serve

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 :

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

Setelah itu tambahkan kode berikut ini di config/app.php

config/app.php


    'providers' => [
       //datalain
      Yajra\DataTables\DataTablesServiceProvider::class,
    ]

'providers' => [

//datalain

Yajra\DataTables\DataTablesServiceProvider::class,

]

 'aliases' => [
    //datalain
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
 ]

'aliases' => [

//datalain

'DataTables' => Yajra\DataTables\Facades\DataTables::class,

]

Jika sudah buat 2 routing baru :

Route::get("users_server_side", "UserController@getAllUserServerSide")->name("user.data");
Route::get("index_get_user", "UserController@indexGetUser");

1 2	Route::get("users_server_side", "[email protected]")->name("user.data"); Route::get("index_get_user", "[email protected]");

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

<?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");
    }
}

<?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

<!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>

<!DOCTYPE html>

<head>

<title>Users | Kodingin</title>

</head>

<h1 class="mt-4 mb-4"> User DataTable Server Side</h2>

<thead>

<tr>

<th>Email</th>

<th>Created_at</th>

</tr>

</thead>

</table>

$(function() {

$('#data_users_side').DataTable({

processing: true,

serverSide: true,

ajax: "/users_server_side",

columns: [{

data: 'name',

{

data: 'email',

{

data: 'created_at',

{

data: '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 :