Rabu, 15 Januari 2014

1/15/2014
2
Ini merupakan artikel pertama saya yang membahas Framework Laravel. Dan pada kesempatan ini, saya akan sedikit memberikan contoh penerapan DataTables pada Laravel dengan AJAX Source disertai dengan Twitter Bootstrap 3 tentunya, ya walaupun sederhana sih.

Langsung saja, pada contoh ini saya menggunakan database test dan membuat table dengan nama browser. berikut querynya.

CREATE TABLE IF NOT EXISTS `browser` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `engine` varchar(100) NOT NULL,
  `browser` varchar(100) NOT NULL,
  `platform` varchar(100) NOT NULL,
  `version` varchar(10) NOT NULL,
  `grade` varchar(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=58;

INSERT INTO `browser` (`id`, `engine`, `browser`, `platform`, `version`, `grade`) VALUES
(1, 'Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'),
(2, 'Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'),
(3, 'Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'),
(4, 'Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'),
(5, 'Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'),
(6, 'Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'),
(7, 'Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'),
(8, 'Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A'),
(9, 'Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A'),
(10, 'Gecko', 'Firefox 3.0', 'Win 2k+ / OSX.3+', '1.9', 'A'),
(11, 'Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'),
(12, 'Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'),
(13, 'Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'),
(14, 'Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'),
(15, 'Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'),
(16, 'Gecko', 'Mozilla 1.0', 'Win 95+ / OSX.1+', '1', 'A'),
(17, 'Gecko', 'Mozilla 1.1', 'Win 95+ / OSX.1+', '1.1', 'A'),
(18, 'Gecko', 'Mozilla 1.2', 'Win 95+ / OSX.1+', '1.2', 'A'),
(19, 'Gecko', 'Mozilla 1.3', 'Win 95+ / OSX.1+', '1.3', 'A'),
(20, 'Gecko', 'Mozilla 1.4', 'Win 95+ / OSX.1+', '1.4', 'A'),
(21, 'Gecko', 'Mozilla 1.5', 'Win 95+ / OSX.1+', '1.5', 'A'),
(22, 'Gecko', 'Mozilla 1.6', 'Win 95+ / OSX.1+', '1.6', 'A'),
(23, 'Gecko', 'Mozilla 1.7', 'Win 98+ / OSX.1+', '1.7', 'A'),
(24, 'Gecko', 'Mozilla 1.8', 'Win 98+ / OSX.1+', '1.8', 'A'),
(25, 'Gecko', 'Seamonkey 1.1', 'Win 98+ / OSX.2+', '1.8', 'A'),
(26, 'Gecko', 'Epiphany 2.20', 'Gnome', '1.8', 'A'),
(27, 'Webkit', 'Safari 1.2', 'OSX.3', '125.5', 'A'),
(28, 'Webkit', 'Safari 1.3', 'OSX.3', '312.8', 'A'),
(29, 'Webkit', 'Safari 2.0', 'OSX.4+', '419.3', 'A'),
(30, 'Webkit', 'Safari 3.0', 'OSX.4+', '522.1', 'A'),
(31, 'Webkit', 'OmniWeb 5.5', 'OSX.4+', '420', 'A'),
(32, 'Webkit', 'iPod Touch / iPhone', 'iPod', '420.1', 'A'),
(33, 'Webkit', 'S60', 'S60', '413', 'A'),
(34, 'Presto', 'Opera 7.0', 'Win 95+ / OSX.1+', '-', 'A'),
(35, 'Presto', 'Opera 7.5', 'Win 95+ / OSX.2+', '-', 'A'),
(36, 'Presto', 'Opera 8.0', 'Win 95+ / OSX.2+', '-', 'A'),
(37, 'Presto', 'Opera 8.5', 'Win 95+ / OSX.2+', '-', 'A'),
(38, 'Presto', 'Opera 9.0', 'Win 95+ / OSX.3+', '-', 'A'),
(39, 'Presto', 'Opera 9.2', 'Win 88+ / OSX.3+', '-', 'A'),
(40, 'Presto', 'Opera 9.5', 'Win 88+ / OSX.3+', '-', 'A'),
(41, 'Presto', 'Opera for Wii', 'Wii', '-', 'A'),
(42, 'Presto', 'Nokia N800', 'N800', '-', 'A'),
(43, 'Presto', 'Nintendo DS browser', 'Nintendo DS', '8.5', 'C'),
(44, 'KHTML', 'Konqureror 3.1', 'KDE 3.1', '3.1', 'C'),
(45, 'KHTML', 'Konqureror 3.3', 'KDE 3.3', '3.3', 'A'),
(46, 'KHTML', 'Konqureror 3.5', 'KDE 3.5', '3.5', 'A'),
(47, 'Tasman', 'Internet Explorer 4.5', 'Mac OS 8-9', '-', 'X'),
(48, 'Tasman', 'Internet Explorer 5.1', 'Mac OS 7.6-9', '1', 'C'),
(49, 'Tasman', 'Internet Explorer 5.2', 'Mac OS 8-X', '1', 'C'),
(50, 'Misc', 'NetFront 3.1', 'Embedded devices', '-', 'C'),
(51, 'Misc', 'NetFront 3.4', 'Embedded devices', '-', 'A'),
(52, 'Misc', 'Dillo 0.8', 'Embedded devices', '-', 'X'),
(53, 'Misc', 'Links', 'Text only', '-', 'X'),
(54, 'Misc', 'Lynx', 'Text only', '-', 'X'),
(55, 'Misc', 'IE Mobile', 'Windows Mobile 6', '-', 'C'),
(56, 'Misc', 'PSP browser', 'PSP', '-', 'C'),
(57, 'Other browsers', 'All others', '-', '-', 'U'); 

Selanjutnya setting project laravel anda sesuai database yang anda buat (Saya memakai database 'test'). Setelah itu, buat Controller dengan nama SiteController.php dan berisikan seperti berikut.

<?php

class SiteController extends \BaseController {

    public function getIndex() {
        return View::make('index');
    }

    public function getBrowser() {
        if (Request::ajax()) {
            $result = [];
            foreach (Browser::all() as $row):
                $result[] = [
                    $row->engine,
                    $row->browser,
                    $row->platform,
                    $row->version,
                    $row->grade
                ];
            endforeach;
            return json_encode(['aaData' => $result]);
        }
        else {
            return Redirect::to('site');
        }
    }

}

Kemudian pada folder views buat file lagi dengan nama layouts.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Contoh Penerapan DataTables pada Laravel 4</title>
        {{ HTML::style("assets/css/jquery.dataTables.css") }}
        {{ HTML::style("assets/twbs/css/bootstrap.css") }}

        {{ HTML::script("assets/js/jquery.js") }}
        {{ HTML::script("assets/twbs/js/bootstrap.js") }}
        {{ HTML::script("assets/js/jquery.dataTables.js") }}
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>Contoh Penerapan DataTables pada Laravel 4</h2>
                    <h4>dengan DataTables AJAX source</h4>
                </div>
            </div>
            <hr />
            @yield('content')
            <hr />
            <div class="row">
                <div class="col-lg-12">
                    <h4> {{ HTML::link('http://didanurwanda.blogspot.com') }} </h4>
                </div>
            </div>        
        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                @yield('script')
            });
        </script>
    </body>
</html>

Pada script diatas, saya menyimpan file twitter bootstrap, jquery, dan jquery datatables pada folder assets. Atur sesuai dengan lokasi Anda menyimpan file-file tersebut. Lanjut lagi, masih di view buat file dengan nama index.blade.php


@extends('layouts')

@section('content')
<div class="row">
    <div class="col-lg-12">
        <table width="100%" id="browser" class="table table-bordered table-condensed table-striped">
            <thead>
                <tr>
                    <th width="10%">Rendering engine</th>
                    <th width="30%">Browser</th>
                    <th width="20%">Platform(s)</th>
                    <th width="20%">Engine Version</th>
                    <th width="20%">CSS Grade</th>                        
                </tr>
            </thead>
        </table>
    </div>
</div>
@stop

@section('script')
$("#browser").dataTable({
    "bProcessing": true,
    "sAjaxSource": "{{ URL::to('site/browser') }}"
});
@stop


Jika sudah kemudian buka folder models dan buat file dengan nama Browser.php dan isi seperti berikut

<?php

class Browser extends Eloquent {
 protected $table = 'browser';
        public $timestamps = false;
}

Jangan lupa atur juga routes.php sesuai dengan nama controllernya, saya mengaturnya seperti berikut.


<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the Closure to execute when that URI is requested.
|
*/

Route::get('/', 'SiteController@getIndex');
Route::controller('site', 'SiteController');

Selesai, silahkan di coba. Berikut penampakan di Laptop saya


Download
Download 
Password: didanurwanda.blogspot.com

2 komentar:

  1. mantep kang dida.. tp itu kan proses awalnya adalah mengenerate data di table lalu otomatis si datatables ini mengenerate ulang hasil query dan mem pagingnnya .

    pertanyaannya klo data di table tersebut berjumlah 50.000 record gmn ??
    Browsernya bakal HANG..karna kelamaan nunggu querynya hhe

    BalasHapus
  2. misi mas, saya udah coba ikutin mas tapi koq table saya kosong ya, ga mau nampilin data satupun dari tables

    saya coba pakai foreach di view malah error, mohon bimbingan nuhun kang

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.