TUTORIAL MENGGUNAKAN DATATABLE SERVERSIDE PADA LARAVEL

Bissmillah

Assalamualaikum

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 ArjayAngeles dari Philipina.

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 :

1

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

Kemudian paste scrip yang di atas berikut adalah hasil sccresn shotnya

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.

Default

1

2

3

4

5

6

7

8

9

'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.

untuk cek apakah tabelnya sudah ada atau belum silahkan masuk ke cmd berikut adalah masuk ke database mysql lewat cmd

https://setiawantopan.wordpress.com/2012/08/07/cara-masuk-server-mysql-melalui-cmd-prompt/

silahkan buka link d atas dan pastikan posisi nya pada "MariaDB [<none>]>"

tuliskan database yang akan digunakan

contoh "use tkj_larapos"

masukan "describe users"

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

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 function json untuk menggenerate data json yang akan digunakan oleh library datatable nantinya.
ini berada pada App/Http/Controller/UserController.php
Copy semua yang ada d bawah ini

Default

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 DataTables;

class UserController extends Controller

{

    public function json(){

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

    }

    public function index(){

        return view('user.list_users');

    }

}

Kemudian kita akan membuat dua routing baru dengan method GET agar kedua function tersebut bisa di akses melalui URL menggunakan web browser.
ini berada pada routes/web.php
Copy semua yang ada d bawah ini

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

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

Kemudian kalian buka localhost/phpmyadmin
masuk ke tabel user
tambahkan data bebas gimana kalian untuk melakukan inputan agar saat d panggil akan muncul

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 :

masuk ke URL
localhost:8000/user/json

Membuat View Untuk Menampilkan Data

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

Default

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

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

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

Default

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

@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

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 :

Cari Blog Ini

Perkenalan Laravel Serta Composer