Blog

Belajarphp > Blog > Tutorial Laravel > Tutorial Menggunakan Datatable Serverside Pada Laravel

Tutorial Menggunakan Datatable Serverside Pada Laravel

May 8, 2018
Posted by: Nuris Akbar
Category: Tutorial Laravel

Datatables adalah sebuah library yang membantu developer dalam menyajikan data dalam bentuk table dengan fitur bawaan seperti paging, seraching dan sorting tanpa perlu membuat script untuk membuat fitur tersebut. khusus untuk framewok laravel sudah tersedia sebuah library datatables khusus untuk laravel bernama yajra yang dibuat oleh developer bernama Arjay Angeles dari Philipina.

Pada artikel kali ini kita akan belajar cara menggunakan datatables pada proyek yang dibuat menggunakan framework laravel.

Cara Install Datatbles Pada Framework Laravel

untuk menginstall datatable kita akan menggunakan composer, silahkan buka CMD kemudian pastikan posisi pointer sekarang di dalam proyek laravel anda dan silahkan ketikan perintah berikut ini :

composer require yajra/laravel-datatables-oracle:"~8.0"

1	composer require yajra/laravel-datatables-oracle:"~8.0"

Konfigurasi Datatable Pada Framework Laravel

Setelah proses download datatable selesai maka kita masuk ke tahapan selanjutnya yaitu mendaftarkan provider dan facade datatable pada sistem laravel, silahkan buka app.php yang ada pada folder config dan silahkan tambahkan dua baris berikut pada block providers dan aliases.

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

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

'providers' => [

...,

Yajra\DataTables\DataTablesServiceProvider::class,

]

'aliases' => [

...,

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

]

Membuat Data Json

sekarang kita akan menggunakan datatable untuk menggenerate data dalam format json dan untuk table yang akan kita gunakan adalah table users yang sudah otomatis ada ketika anda melakukan migrate pertama kali.

Kemudian silahkan gunakan perintah artisan untuk membuat sebuah controller baru dengan nama UserController

php artisan make:controller UserController

1	php artisan make:controller UserController

kemudian silahkan buat panggil model user dan buat function index yang akan kita gunakan untuk menampilkan data kepada visitor dan functio json untuk menggenerate data json yang akan digunakan oleh library datatable nantinya.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use DataTables;
class UserController extends Controller
{
    public function json(){
        return Datatables::of(User::all())->make(true);
    }

    public function index(){
        return view('list_users');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

use DataTables;

class UserController extends Controller

{

public function json(){

return Datatables::of(User::all())->make(true);

}

public function index(){

return view('list_users');

}

Kemudian kita akan membuat dua routing baru dengan method GET agar kedua function tersebut bisa di akses melalui URL menggunakan web browser.

Route::get('user','UserController@index');
Route::get('user/json','UserController@json');

1 2	Route::get('user','UserController@index'); Route::get('user/json','UserController@json');

sekarang silahkan buka browser anda dan akses http://localhost:8000/user/json, pastikan tabel users sudah ada data nya dan jika semua step yang anda lakukan benar maka seharusnya akan muncul data json seperti dibawah ini :

Membuat View Untuk Menampilkan Data

Langkah selanjutnya adalah membuat view untuk menampilkan data nya, silahkan buat sebuah view dengan nama layout.blade.php yang akan kita gunakan sebagai template utama dan simpan pada folder resources/views kemudian tulislah script berikut ini :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel DataTables Tutorial</title>

        <!-- Bootstrap CSS -->
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            body {
                padding-top: 40px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>

        <!-- jQuery -->
        <script src="//code.jquery.com/jquery.js"></script>
        <!-- DataTables -->
        <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!-- App scripts -->
        @stack('scripts')
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Laravel DataTables Tutorial</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body {

padding-top: 40px;

}

</style>

</head>

<body>

@yield('content')

</div>

@stack('scripts')

</body>

</html>

Kemudian kita akan membuat sebuah child view dengan nama list_users.blade.php dan tulislah script berikut ini :

@extends('layout')

@section('content')
    <table class="table table-bordered" id="users-table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Updated At</th>
            </tr>
        </thead>
    </table>
@stop

@push('scripts')
<script>
$(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: 'user/json',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' }
        ]
    });
});
</script>
@endpush

@extends('layout')

@section('content')

<thead>

<tr>

<th>Email</th>

<th>Created At</th>

<th>Updated At</th>

</tr>

</thead>

</table>

@stop

@push('scripts')

$(function() {

$('#users-table').DataTable({

processing: true,

serverSide: true,

ajax: 'user/json',

columns: [

{ data: 'id', name: 'id' },

{ data: 'name', name: 'name' },

{ data: 'email', name: 'email' },

{ data: 'created_at', name: 'created_at' },

{ data: 'updated_at', name: 'updated_at' }

]

});

</script>

@endpush

sekarang silahkan buka web browser anda dan akses http://localhost:8000/user, jika semua step yang anda lakukan sudah benar maka akan muncul tampilan seperti berikut ini :

Begitulah step by step tutorial menggunakan datatable pada framework laravel dan jika tutorial ini bermanfaat bagi anda maka anda boleh menebar manfaat ini juga bagi orang lain dengan cara share artikel ini, terima kasih.

Referensi :

https://github.com/yajra/laravel-datatables
https://datatables.yajrabox.com/starter