Laravel Datatables
Laravel Datatables Yajra Datatables

Laravel Datatables adalah sebuah library yang dapat digunakan untuk mempermudah developer dalam hal menampilkan data saat membangun aplikasi. Penggunaan sebuah library datatables memberikan kemudahan dalam menampilkan data ke view dalam bentuk datatable dengan disertai fitur seperti pencarian, shorting data, dan pagination.

Menggunakan library datatable pada framework Laravel dapat dilakukan dengan berbagai cara, bisa menggunakan laravel vue datatable, Yajra datatables, atupun menggunakan library datatable secara manual dengan mengetikkan kode-kode pendukungnya pada sebuah controller.

Salah satu library laravel datatable yang tidak asing ditelinga kita atau sering kita dengar adalah bernama yajra datatables, yah library yang satu ini merupakan package yang disediakan secara gratis bagi para penggemar frmaework laravel. Library yajra datatables ini dikembangkan oleh developer berkebangsaan Filipina bernama Arjay Angeles. Menggunakan Yajra Datatables memberikan kemudahan development dalam urusan pemanggilan data kedalam data table yang disertai fitur pencarian, shorting data, dan pagination. Sehingga developer tidak perlu repot-repot lagi membuat secara manual dengan mengetikkan kebutuhan kode.

Untuk menggunakan library datatables bernama yajra ini developer hanya perlu melakukan instalasi pada project Laravel nya, dan disusul dengan sedikit konfigurasi serta pemanggilan untuk menggunakannya, bagiamana terdengar mudah bukan?

Berbicara menggunakan sebuah library pada project framework Laravel, menginggatkan kembali bahwa untuk itu semua kita harus memulai melakukannya dengan menginstal framework Laravel pada project web server kita. Akan tetapi, untungnya saya telah melakukan instalasi framework Laravel sebelumnya pada project web server saya. Jika Anda belum mengetahui cara-cara instalasi framework Laravel beserta hal-hal pendukungnya yang harus dipenuhi, Anda dapat mengunjungi link tutorial Instalasi Framework Laravel Pada Web Server Dan Syaratnya, pada tutorial ini dibahas dari tahap instalasi hingga selesai.

Data ditampilkan tanpa datatables

Menginstall Library Yajra Datatables Pada Framework Laravel

Untuk menggunakan library bernama Yajra datatables, maka pengguna harus menginstalnya terlebih dahulu pada project laravel nya. Untuk menginstall datatables pertama buka jendela Terminal/Command Prompt, lalu dengan perintah change directory (CD) arahkan pada project Laravel Anda, kemudian ketikan perintah berikut ini :

composer require yajra/laravel-datatables-oracle

Nimatilah proses instalasi hingga selesai dengan sempurna sambil menyeruput secangkir kopi 🙂 . Setelah proses instalasi package datatables selesai dengan sempurna, langkah selanjutnya adalah kita melakukan konfigurasi datatables pada project Laravel kita agar bisa kita gunakan.

Melakukan Konfigurasi Datatable Pada Framework Laravel

Melakukan konfigurasi datatables pada project Laravel dalah sebuah langkah agar library yang akan digunakan dapat dikenali, konfigurasi yajra datatables langkahnya cukup mudah, pengguna hanya perlu mendaftarkan pada provider dan facade pada project Laravel pada file “config/app.php”, buka file “app.php” pada folder “config/app.php” lalu tambahkan dua baris kode berikut pada block provider dan aliases, sehingga tampak seperti contoh berikut :

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

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

Proses konfigurasi telah dilakukan, tahap selanjutnya yang perlu dilakukan oleh developer adalah memanggilnya pada file controller, proses pemanggilan datatables dapat dilakukan dengan menambahkan kode use Datatables; pada setiap controller yang akan menggunakannya. Seperti contoh berikut :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use Datatables; //pemanggilan datatable dalam sebuah controller

Menambahkan Sebuah Routing Pada Laravel

Routing pada laravel adalah sebuah proses yang mengatur lalu lintas pengiriman data maunpun informasi ke pengguna melalui sebuah request dari pengguna, lalu alamat tersebut akan memproses dari permintaan yang kita lakukan, dan mengembalikannya ke sebuah output atau hasil dari proses tersebut.

Nah didalam project Laravel kita disana dapat kita jumpai folder bernama “routes”. Dimana terdapat beberapa file, salah satunya diantaranya adalah file bernama “web.php”, nah pada file inilah kita dapat menggunakannya untuk mebuat routing web yang kita perlukan. Dan disini saya meregisterkan route sesuai kebutuhan saja, seperti berikut :

Route::get('/kontak', 'KontakController@index')->name('kontak'); 
Route::get('/kontak/json', 'KontakController@datajson')->name('json'); // menampilkan data json

Menampilkan Data Dalam Bentuk Data Json

Langkah selanjutnya adalah menampilkan data yang telah kita buat ke dalam bentuk data Json. Menggunakan yajra datatable untuk menggenerate data dalam format json dapat dilakukan seperti pada controller berikut :

public function datajson()
	{
		return Datatables::of(Kontak::all())->make(true);
	}

Lalu kita coba jalankan project Laravel data Json kita dengan mengetikkan perintah artisan berikut pada browser:

localhost:8000/kontak/json

Jika berjalan dengan baik maka akan ditampilkan halaman berupa data dalam bentuk format json seperti berikut :

Data dalam bentuk data Json

Data dalam format Json telah berhasil kita tampilkan, langkah selanjutnya adalah menampilkan data tersebut ke dalam view.

Menambahkan Controller Pada Laravel

Fungsi controller pada laravel digunakan untuk mengambil permintaan, memparsing permintaan, menginisialisasi, memanggil model yang diperlukan, mengambil respon dan mengirimkannya ke dalam view.

Untuk membuat controller dapat dilakukan dengan perinta artisan berikut :

php artisan make:controller KontakController --resource

Sehingga kebutuhan controller pada kebutuhan totorila laravel server side datataable ini adalah seperti berikut :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use Datatables; //memanggil datatable
use App\Kontak; //memanggil model

class KontakController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
	
    public function index()
    {
        return view('kontak.index');
    }
	
    public function datajson()
    {
	return Datatables::of(Kontak::all())->make(true);
    }

Menampilkan Data Ke Dalam View Laravel

Langkah selanjutnya adalah kita membuat file view yang akan kita gunakan untuk menampilkan data dalam format datatable. Langkahnya dapat dilakukan dengan memodifikasi file “app.blade.php” pada folder “resources/views/layouts/app.blade.php”, maka bukalah file “app.blade.php” lalu tambahkan kode untuk memanggil library jQuery datatables beserta file pendukungnya sehingga menjadi seperti berikut :

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->    
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
	<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">		
    <!-- Styles -->
	<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">	
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item">
                                <a href="{{ url('kontak')}}" class="nav-link">Kontak</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
	@stack('scripts')
</body>
</html>

Kemudian buka file view “index.blade.php” pada folder “resources/views/kontak/index.blade.php”, lalu modifikasi dan tambahkan kode sehingga menjadi seperti berikut:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Daftar Kontak</div>
                @if($message = Session::get('status'))
                <div class="alert alert-success alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <p>{{$message}}</p>
                </div>
                @endif
                <div class="card-body">
                    <a href="#" class="btn btn-sm btn-success">Tambah</a>
                    <table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
					<thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Lengkap</th>
                            <th>Email</th>
                            <th>Pekerjaan</th>
                            <th>Alamat</th>
                        </tr>
					</thead>
					<tbody>  
                        
					</tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function () {
   $('#tbl_list').DataTable({
	   "aLengthMenu": [
				[5,10, 25, 50, 100, 200, -1],
				[5,10, 25, 50, 100, 200, "All"]
			],
		paging: true,
		processing: true,
		serverSide: true,
		ajax: '{{ url('kontak/json') }}',
		columns: [
			{ data: 'id', name: 'id' },
			{ data: 'nama_lengkap', name: 'nama_lengkap' },
			{ data: 'email', name: 'email' },
			{ data: 'pekerjaan', name: 'pekerjaan' },
			{ data: 'alamat', name: 'alamat' }
		]
	});
 });
</script>
@endpush

Nah sampai tahap ini kita telah melakukan semua yang dibutuhkan untuk menampilkan data dalam bentuk datatables. Saatnya kita uji apa yang sudah kita lakukan, jalankan project Laravel datatable Anda, buka browser Anda lalu jalankan url seperti berikut :

localhost:8000/kontak

Jika berjalan dengan baik, maka akan ditampilkan halaman dengan menampilkan data ke dalam bentuk datatable seperti berikut :

Data dalam bentuk datattables

Nah sampai disini pembahasan step by step tutorial penggunaan laravel datatables server side dan cara menggunakannya telah kita rampungkan, semoga tutorial yang singkat ini dapat membantu dan memberi manfaat bagi siapa saja yang membutuhkan. Terimakasih..