Laravel Tutorial : Menampilkan Data Dengan Datatables Server Side Pada Laravel

0
5056

Laravel Datatables sangat membantu bagi para developer dalam menyajikan data dalam bentuk table disertai dengan fitur paging, searching dan sorting tanpa perlu membuat script untuk membuat fitur tersebut.

Salah satu package datatables yang dapat kita gunakan pada framework Laravel adalah yajra/laravel-datatables-oracle. Sebuah library datatables bernama yajra ini dikembangkan oleh developer bernama Arjay Angeles dari Philipina. Yajra Datatables memberikan fungsi kemudahan bagi para developer seperti pencarian, shorting data, dan pagination.

Pada artikel laravel datatables ini saya menggunakan project yang telah saya install pada pembahasan sebelumnya, jadi saya tidak perlu menginstall project Laravel lagi dari awal.

Bagi yang belum install project Laravel bisa membaca artikel : Melakukan Intalasai Framework Laravel dan Syaratnya

Data sebelum menggunakan laravel datattables

Install Datatbles Pada Framework Laravel

Untuk menginstall datatables maka pertama-tama 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

Lalu sambil minum-minum kopi 🙂 tunggulah hingga proses instalasi selesai dengan sempurna. Setelah proses instalasi package datatables selesai dengan sempurna, langkah selanjutnya adalah kita melakukan konfigurasi datatables pada project Laravel kita agar bisa kita gunakan.

Konfigurasi Datatable Pada Framework Laravel

Setelah proses instalasi library yajra datatables selesai, maka tahapan selanjutnya adalah melakukan konfigurasi dengan mendaftarkan pada provider dan facade pada project Laravel. Buka file “config/app.php” lalu tambahkan dua bari kode berikut pada block provider dan aliases, seperti contoh berikut :

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

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

Setelah mendaftarkan Yajra datatables pada project Laravel, langkah selanjutnya adalah memanggilnya pada file controller untuk tujuan penggunaan menampilkan data dalam bentuk datatable.

Membuat Routes

Disini saya meregisterkan route sesuai kebutuhan saja, seperti berikut :

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

Membuat Data Json

Agar datatables yang ter-install pada project Laravel dapat kita gunakan pada controller, maka kita harus memanggilnya terlebih dahulu. Anda dapat menambahkan kode use Datatables; untuk memanggil datatable agar dapat digunakan. Selanjutnya kita akan menggunakan datatable untuk menggenerate data dalam format json seperti tampak pada controller berikut :

Simpan kembali file controller yang sudah disertai pemanggilan datatables, sehingga file controller seperti tampak berikut :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Datatables;
use App\Kontak;

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

Lalu jalankan project Laravel Anda dengan mengetikkan perintah artisan berikut :

php artisan serve

Buka browser dan jalankan url project Anda, disini saya akan mengakses url project dengan alamat seperti berikut :

localhost:8000/kontak/json

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

Data dalam bentuk json

Membuat View Untuk Menampilkan Data

Langkah selanjutnya adalah membuat file view untuk menampilkan data nya, karena disini saya menggunakan project Laravel yang sudah ada sebelumnya maka saya hanya perlu memodifikasi file “app.blade.php” pada folder “resources/views/layouts/app.blade.php”, buka file “app.blade.php” lalu tambahkan tambahkan kode 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">	
	<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">	
    <!-- Styles -->
    <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

Sekarang saatnya kita menjalankan project Laravel datatables yang telah kita buat, buka kembali browser Anda lalu jalankan url seperti berikut :

localhost:8000/kontak

Jika berjalan dengan baik, maka akan ditampilkan halaman seperti berikut :

Menampilkan data dengan datatables pada laravel

Nah teman-teman sekalian, begitulah step by step tutorial menampilkan data dengan datatable pada framework laravel, semoga tutorial kali ini dapat membantu dan memberi manfaat. Kami mohon maaf jika terdapat kesalahan pada penulisan kata. Terimakasih..