Menggunakan DataTables ServerSide pada Laravel 5.x

Ketika sedang membuat aplikasi berbasis web menggunakan php, terkadang kita direpotkan dengan penyajian data berbentuk table yang kepengen cepet deploy-nya tapi punya fitur lengkap dengan pencarian dan pagging loading-nya nggak pake lama. DataTables adalah solusinya.

Berikut adalah pengertian DataTables menurut situs resminya:

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Secara garis besar pengertiannya DataTables itu semacam plugi-in berbasis jQuery yang dapat digunakan untuk membuat table yang berbasis HTML kita menjadi lebih interaktif, praktis dan lebih cepat dalam penyajian datanya.

Nah, pada kesempatan kali ini saya akan menjelaskan bagaimana cara menggunakan DataTables dengan Laravel. Oke kita mulai tutorialnya. Oh, iya, di tutrial kali ini saya menggunakan Laravel versi 5.3, XAMPP terbaru dan Windows 7 Professional Edition ya.

Sebetulnya ketika kita pakai framework php semacam Laravel, Codeigniter, Cakephp dan sejenisnya, kita sudah dimanjakan dengan pustaka (library) semacam table atau pagging yang tinggal pake. Tapi terkadang itu juga kurang mencukupi kebutuhan kita dalam mengembangkan aplikasi berbasis web.

Pertama instal dulu laravel di folder server Anda. Kalau tidak paham bagaimana caranya, Anda bisa baca di tutorial saya sebelumnya: Instalasi Framework Laravel 5 Windows 7 dan Xampp.

Lalu kita atur agar aplikasi laravel kita terhubung dengan database. Buka file .env pada root folder aplikasi Anda. Kemudian sesuaikan bagian ini:

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=homestead /* Ganti pakai nama database aplikasi Anda */

DB_USERNAME=homestead /* Ganti dengan username database */
DB_PASSWORD= /* Ganti dengan password Database */

Kemudian kita buat dahulu sebuah Controller, buat saja dengan Nama DataTablesController.php, dengan mengetikkan perintah pada cmd:

php artisan make:controller DatatablesController

Lanjut dengan membuat sample Database. Kita buat migration-nya terlebih dahulu. Ketik perintah pada cmd:

php artisan make:migration create_barang_table

Kemudian ubah jadi seperti berikut:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBarangTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        //
        Schema::create('barang',function(Blueprint $table){
            $table->increments('id');
            $table->string('nama');
            $table->text('stok');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
        Schema::drop('barang');
    }
}

Setelah itu jalankan migrasinya dengan mengetik perintah:

php artisan migrate

Lanjut ke seeder. Buat Seeder untuk table yang kita buat:

php artisan make:seeder BarangSeeder

Kemudian buka file BarangSeeder.php dan update menjadi seperi berikut:

<?php

use Illuminate\Database\Seeder;

class BarangSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        //
        DB::table('barang')->insert(
        	[
        		[
        			'nama'			=> 'Rinso Cair',
        			'stok'		=> '30',
        		],
        		[
        			'nama'			=> 'Rinso Bubuk',
        			'stok'		=> '30',
        		],
        		[
        			'nama'			=> 'hape Jadul',
        			'stok'		=> '20',
        		],
        	]
        );
    }
}

Jalankan Seeder dengan perintah cmd:

php artisan db:seed --class=BarangSeeder

Lanjut kita ke bagian DataTables nya. Kita akan menggunakan pustaka DataTables untuk laravel dari Yajra. Silahkan lihat dokumentasi lengkapnya disini: Laravel DataTables.

Ketik lewat cmd:

composer require yajra/laravel-datatables-oracle:~6.0

Setelah instalasinya selesai, buka config/app.php pada folder aplikasi laravel Anda kemudian ubah jadi seperti berikut:

'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        Illuminate\Bus\BusServiceProvider::class,
        Illuminate\Cache\CacheServiceProvider::class,
        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
        Illuminate\Cookie\CookieServiceProvider::class,
        Illuminate\Database\DatabaseServiceProvider::class,
        Illuminate\Encryption\EncryptionServiceProvider::class,
        Illuminate\Filesystem\FilesystemServiceProvider::class,
        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
        Illuminate\Hashing\HashServiceProvider::class,
        Illuminate\Mail\MailServiceProvider::class,
        Illuminate\Notifications\NotificationServiceProvider::class,
        Illuminate\Pagination\PaginationServiceProvider::class,
        Illuminate\Pipeline\PipelineServiceProvider::class,
        Illuminate\Queue\QueueServiceProvider::class,
        Illuminate\Redis\RedisServiceProvider::class,
        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
        Illuminate\Session\SessionServiceProvider::class,
        Illuminate\Translation\TranslationServiceProvider::class,
        Illuminate\Validation\ValidationServiceProvider::class,
        Illuminate\View\ViewServiceProvider::class,
        Yajra\Datatables\DatatablesServiceProvider::class,

        /*
         * Package Service Providers...
         */

        //

        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        // App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,

    ],

Ketik lagi di cmd untuk publish package-nya:

php artisan vendor:publish

Kemudian lanjut buat model Barang.

php artisan make:model Barang

Kemudian perbarui model Barang.php seperti berikut:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Barang extends Model
{
    //
    protected $table = 'barang';
}

Lanjut kita update file DatatablesController.php nya jadi seperti berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Barang; /* Import model barang */
use Datatables; /* Import datatables-nya juga */

class DatatablesController extends Controller
{
    //
    public function index()
    {
    	return view('DTindex');
    }

    public function getBarang()
    {
    	$barang = Barang::select(['nama', 'stok'])->get();
 
    	return Datatables::of($barang)->make(true);
    }
}

Update Routenya jadi seperti berikut:

<?php
Route::get('/', function () {
    return view('welcome');
});


Route::group(['middleware' => ['web']], function () {
 
    Route::get('barang','DatatablesController@index');
    Route::get('barang/get-barang','DatatablesController@getBarang');
 
});

Lanjut buat tampilannya, bikin file app.blade.php pada folder resource/views:

Buat lagi file dengan nama DTindex.blade.php pada folder yang sama, isinya:

Terakhir jalankan file pada browser: http://localhost/[folder_aplikasi_laravel_anda]/public/barang/

Okke itu aja, kebanyakan banget kayanya. Kalau ada yang mau ditanyakan kirim respon ke kolom komentar. Happy Coding!

Loading Facebook Comments ...

Add a Comment

Your email address will not be published. Required fields are marked *