Laravel Datatables

Laravel Datatables – Minggu kemaren yang biasanya disibukkan dengan urusan rumah, kali ini disibukkan dengan urusan tantangan dari calon client untuk dibuatkan aplikasi sederhana menggunakan Laravel 5.* dan di dalamnya ada beberapa komponen yang wajib ada dalam aplikasi yaitu komponen Datatables. Jika browsing dengan keyword “Laravel Datatables”, nantinya akan menemukan beberapa versi yaitu yajra, bllim, dll. Tapi kali ini yang akan saya bahas adalah komponen Databales untuk laravel milik yajra. Persiapan yang dibutuhkan dalam mengimplementasikan Laravel Datatables ini adalah framework Laravel tentunya dan package yajra datatables.

Pertama-tama kita install dulu paket yajra datatables dengan menambahkan script composer pada bagian require

yajra/laravel-datatables-oracle: ~6.0

Kemudian ketik perintah composer update dan biarkan proses update dan instalasi package berjalan.  Langkah selanjutnya adalah buka file app.php pada folder config/app.php dan tambahkan pada bagian provides:

 Yajra\Datatables\DatatablesServiceProvider::class

Dan pada bagian alias, tambahkan dengan:

Datatables => Yajra\Datatables\Facades\Datatables::class

Sampai disini setup untuk menggunakan package laravel Datatables telah selesai. Langkah selanjutnya adalah membuat tampilan yang nantinya akan menampilkan data dalam datatables. Dalam kasus saya, saya membuat datatables untuk menampilkan data task yang saya kerjakan.

Maka terlabih dahulu saya membuat model sekaligus migration yang menyimpan data struktur tabel yang saya gunakan. Dengan cara ketikkan perintah php artisan model:Tasks -m. Kemudian silahkan buka migration yang berada dalam folder database/migrations kemudian edit xxx_create_table_tasks.php tersebut dan sisipkan perintah

Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->Integer('id_user');
            $table->string('title');
            $table->longText('description');            
            $table->char('priority', 4);
            $table->tinyInteger('complete');
            $table->date('due_date');
            $table->timestamps();
        });

Setelah file migration selesai dibuat, jalankan perintah pada command line php artisan migrate, biarkan proses berjalan dan nantinya akan terbentuk table task pada database.

Kemudian bikin controller untuk Task model yang baru dibuat tersebut dengan perintah php artisan controller:TaskController -r, option r tersebut agar supaya otomatis dibuatkan routing dan function dasar pada sebuah controller pada laravel. Untuk menampilkan record pada datatables, ketikkan script di bawah ini

$task = Tasks::select(['id', 'title', 'priority', 'complete', 'due_date'])->get();       
return Datatables::of($task)->make();

Kemudian buatlah view yang di dalamnya terdapat tag <table> dengan id=“users-table“ dan class=“table table-condensed“, Kemudian jangan lupa untuk menyisipkan css dan js plugin untuk datatables

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">

Kemudian silahkan cek pada browser, jika tidak muncul tampilan datatables, silahkan untuk mengecek kembali source code yang diketikkan, dan bisa untuk mencoba menggunakan addons firebug firefox untuk memastikan hasil return pada controller sesuai dengan yang seharusnya.

firebug datatables

Unutk memudahkan, silahkan untuk clone sourcecode mytask ini disini. Clone dan install task tersebut kemudian berikan perintah migration untuk import database yang sudah saya tulis. Semoga bermanfaat