Press "Enter" to skip to content

Menampilkan Data Menggunakan Datatables di Laravel

Artikel ini melanjutkan tutorial saya tentang tutorial dasar CRUD dengan menggunakan Laravel. Nah, dengan tema yang sama, kita akan membuat aplikasi dengan Laravel dengan tema CRUD dengan tambahan fitur yaitu Datatables.

Datatables adalah library yang dibangun dengan menggunakan JQuery yang digunakan untuk membantu kita dalam menampilkan data secara real time tanpa memuat ulang halaman. Kita akan menggunakan script pada artikel sebelumnya jadi silahkan clone dari repo Github saya untuk memulai.

Untuk menggunakan datatables di Laravel, kita dapat menggunakan package dari Chumper Datatables. Package ini masih mendukung Laravel versi 4 dan untuk Laravel 5 masih bersifat Beta. Tentunya kita juga membutuhkan script datatables yang dapat di download di situs resminya di http://datatables.net.

Untuk melakukan instalasi package Chumper Datatables kita harus merubah file composer.json menjadi seperti ini

{
  "name": "laravel/laravel",
  "description": "The Laravel Framework.",
  "keywords": ["framework", "laravel"],
  "license": "MIT",
  "type": "project",
  "require": {
    "laravel/framework": "4.2.*",
    "chumper/datatable": "2.*"
  },
  "autoload": {
    "classmap": ["app/commands", "app/controllers", "app/models", "app/database/migrations", "app/database/seeds", "app/tests/TestCase.php"]
  },
  "scripts": {
    "post-install-cmd": ["php artisan clear-compiled", "php artisan optimize"],
    "post-update-cmd": ["php artisan clear-compiled", "php artisan optimize"],
    "post-create-project-cmd": ["php artisan key:generate"]
  },
  "config": {
    "preferred-install": "dist"
  },
  "minimum-stability": "stable"
}

Lalu buka console / command prompt kamu. Arahkan pada direktori tempat source code LaraCRUD berada dan ketikkan perintah ini

composer update

Setelah proses instalasi selesai, sekarang kita ubah file konfigurasi pada app/config/app.php dan ubah pada bagian ini

// tambahkan pada bagian
Provider 'Chumper\Datatable\DatatableServiceProvider',

// tambahkan pada bagian Aliases
'Datatable' => 'Chumper\Datatable\Facades\DatatableFacade',

Setelah itu, kita hanya perlu publish file config tersebut. Jalankan perintah berikut pada console / command prompt kamu

php artisan config:publish chumper/datatable

Sekarang kita buat controller baru dengan nama DatatablesController.php.

<?php

class DatatablesController extends \BaseController {

	public $column; // kolom dalam table MySQL
	public $query; // query
	public $o; // output html untuk link

	public function getProvinsi() {
		// deklarasikan kolom yang akan ditampilkan
		$this->column = array('id','nama_provinsi'); 
		$this->o = "";
		// jalankan query untuk menampilkan data dari table provinsi
    	return Datatable::collection(Provinsi::all($this->column))
    	// tampilkan kolom nama provinsi
	    ->addColumn('nama_provinsi',function($model) { return $model->nama_provinsi; })
	    // tampilkan kolom action
	    ->addColumn('Action', function($model) {
	    		$this->o  = '<center>';
	            $this->o .= '<a href=state/edit/'.$model->id.'>Ubah</a>   |  ';
	            $this->o .= '<a data-toggle="modal" href="#confirm'.$model->id.'">Hapus</a>';
	            $this->o .= '<div class="modal fade" id="confirm'.$model->id.'" style="display:none;">
				                <div class="modal-dialog">
				                    <div class="modal-content">
				                        <div class="modal-header">
				                            <button class="close" data-dismiss="modal">×</button>
				                            <h4>Confirm</h4>
				                        </div>
				                        <div class="modal-body">
				                            <p>Anda yakin menghapus data ini ?</p>
				                        </div>
				                        <div class="modal-footer">
				                            <a class="btn btn-success" href="provinsi/destroy/'.$model->id.'">Ya</a>
				                            <a href="#" data-dismiss="modal" class="btn btn-danger">Tidak</a>
				                        </div>
				                    </div>
				                </div>
			            	</div>';
		       
		        $this->o .= '</center>';
		        // render output
		        return $this->o;
	    })
		// kolom yang dapat di search
	    ->searchColumns('nama_provinsi')
	    // order kolom
	    ->orderColumns('id','nama_provinsi')
	    ->make();
  	}
}

Setelah itu kita ubah file layout.blade.php yang berada di dalam direktori app/views dengan menambahkan library Datatables.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- main title -->
    <title>{{ $title }}</title>
    <link href="{{ url('packages/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url('packages/js/datatable/css/jquery.dataTables.css') }}" rel="stylesheet">
    <link href="{{ url('packages/js/datatable/css/jquery.dataTables_themeroller.css') }}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="{{ url('packages/js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ url('packages/js/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ url('packages/js/datatable/js/datatable.ext.js')}}"></script>
    <style type="text/css">
	   body{ padding-top: 20px; }
     #datatable th { text-align: center }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- inilah main content kita -->
      {{ $content }}
    </div>
    <script src="{{ url('packages/js/bootstrap.min.js') }}"></script>
  </body>
</html>

Jika sudah selesai, kita bisa langsung menggunakan Datatables di Laravel. Buka file ProvinsiController.php pada direktori app/controllers dan ketikkan script berikut

<?php

class ProvinsiController extends BaseController 
{
	// layout dengan menggunakan blade
	public $layout 	= 'layout';
	public $title  	= 'Manajemen Provinsi';

	public function index() {
		$this->layout->title = $this->title;
		/* 
		* menggunakan view yang ada 
		* pada direktori views/provinsi/index
		*/
		$view = View::make('provinsi.index');

		/* 
		* query ini digunakan untuk menggunakan pagination pada Eloquent. 
		* angka 20 adalah jumlah data yg ditampilkan perhalaman
		* orderBy digunakan untuk menampilkan data dari id terakhir
		*/
		$view->provinsis = Provinsi::orderBy('id', 'DESC')->paginate(20);

		/*
		 * query ini digunakan untuk menghitung total data dari table provinsi
		 */
		$view->count = Provinsi::all()->count();

		// render semua konten view kedalam layout
		$this->layout->content = $view;
	}

	public function create() {
		$this->layout->title = $this->title;
		/* menggunakan view yang ada 
		 * pada direktori views/provinsi/form
		 */
		$view = View::make('provinsi.form');

		// form action untuk memproses form ke method yang lain 
		$view->form_action = url('provinsi/store');

		$view->form_title = 'add';
		$view->action_title = 'Tambah Provinsi';

		// render semua konten view ke dalam layout
		$this->layout->content = $view;
	}
	
	public function store() {
		/*  memanggil class model Provinsi
		 *  dan menyimpan data yang dikirim dari form
		 */
		$provinsi = new Provinsi;
		$provinsi->nama_provinsi = Input::get('nama_provinsi');
		$provinsi->save();

		// redirect ke route yang lain
		return Redirect::to('provinsi')->with('message', 'PROVINSI BERHASIL DISIMPAN');
	}

	public function edit($id) {
		$this->layout->title = $this->title;
		/* menggunakan view yang ada 
		 * pada direktori views/provinsi/form
		 */
		$view = View::make('provinsi.form');

		// form action untuk memproses form ke method yang lain 
		$view->form_action = url('provinsi/update/'.$id.'');

		$view->action_title = 'Ubah Provinsi';
		$view->form_title = 'edit';
		
		// query untuk mengambil data dari parameter
		$view->provinsi = Provinsi::find($id);
		$this->layout->content = $view;
	}
	
	public function update($id) {
		/*  memanggil class model Provinsi
		 *  lalu melakukan query untuk mengambil data dari DB 
		 *  dan memperbaharuinya dengan data yang dikirim dari form
		 */
		$provinsi  = Provinsi::find($id);
		$provinsi->nama_provinsi = Input::get('nama_provinsi');
		$provinsi->save();

		// redirect ke route yang lain
		return Redirect::to('provinsi')->with('message', 'PROVINSI BERHASIL DIUBAH');
	}
	
	public function destroy($id) {
		/*  memanggil class model Provinsi
		 *  lalu melakukan query untuk mengambil data dari DB 
		 *  dan menghapus datanya
		 */
		$provinsi = Provinsi::find($id);
		$provinsi->delete();

		// redirect ke route yang lain
		return Redirect::to('provinsi')->with('message', 'PROVINSI BERHASIL DIHAPUS');
	}
}

Lalu ubah pada file index.php di direktori app/views/provinsi. Ubah menjadi seperti ini

<div class="row">
  <div class="col-lg-12">
  		<h2>Provinsi</h2>
  		<a href="{{ url('provinsi/create') }}" class="btn btn-primary">Tambah Provinsi</a>
  		<br><br> 
  		@if ($count > 0)
  			@if(Session::has('message'))
				<br><br>
			    <div class="alert alert-success">
			    	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
			        <center>{{ Session::get('message') }}</center>
			    </div>
			@endif
			{{
			 	Datatable::table()
			    ->addColumn('Nama Provinsi','Action')
			    ->setUrl(route('datatables.provinsi'))
			    ->setCallbacks(["fnServerParams" => 'function ( aoData ) {
      							    aoData.push({ "name": "q", "value": $(\'#q\').val() });
        						}'
        						])
			    ->render()
			}}
		@else
	    <br><br>
	    <div class="alert alert-danger"><center>DATA PROVINSI KOSONG</center></div>
	    @endif
  </div>
</div>

Setelah itu kita tambahkan satu route pada file route.php, tambahkan baris ini pada file route.php di direktori app/

// route untuk memanggil fungsi di Datatables Controller
Route::get('datatables/provinsi', array('as'=>'datatables.provinsi', 'uses'=>'DatatablesController@getProvinsi'));

Pada bagian ini sudah selesai. Output yang dihasilkan adalah seperti ini

table-provinsi

Segitu saja dulu untuk bahasan kita untuk tutorial Laravel tentang bagaimana cara menggunakan Datatables di Laravel. Kamu bisa mendownload full sourcenya pada link di bawah ini. Semoga bermanfaat.

Download Full Source Code : Google Drive

Be First to Comment

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *