Penggunaan Datatable di Laravel

Pada postingan kali ini saya akan membahas sedikit Tutorial Penggunaan Datatable di Laravel. Kenapa datatable? karena secara tidak langsung datatable sangat membantu pekerjaan kita dalam mendevelop sebuah web application. Bagaimana tidak, dengan datatable kita sudah tidak perlu lagi membuat fungsi – fungsi tambahan seperti pagination dan search untuk data yang ingin kita tampilkan.

Oke langsung saja, disini saya akan membahas penggunaan datatable di laravel dengan 2 cara, yaitu dengan ajax processing dan dengan html builder bawaan dari package laravel yang akan kita install. Mari kita mulai :

Persiapan Project

kita akan mulai dengan menginstall laravel terlebih dahulu, disini saya menggunakan laravel versi terbaru yaitu 5.3

1

composer create-project --prefer-dist laravel/laravel datatables-demo

selanjutnya kita sesuaikan konfigurasi database kita di file .env

1

2

3

4

5

6

7

8

9

...

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=homestead

DB_USERNAME=homestead

DB_PASSWORD=secret

...

ganti DB_DATABASE, DB_USERNAME, dan DB_PASSWORD sesuai dengan konfigurasi database anda.

Langkah selanjutkny kita akan membuat migrasi daan seed untuk data yang akan kita tampilkan di datatable. Dalam kasus ini kita akan mengambil contoh data buku.

Buat Model dan migration untuk table Book

1

php artisan make:model Book -m

sintaks tersebut akan membuat file model bernama Book.php dan file migration untuk table books.

Buka file xxxx_xx_xx_xxxxxx_create_books_table.php dan isi sebagai berikut :

1

2

3

4

5

6

7

Schema::create('books', function (Blueprint $table) {

 $table->increments('id');

 $table->string('title');

 $table->string('author');

 $table->string('publisher');

 $table->timestamps();

});

kemudian kita akan membuat contoh data yang akan kita panggil dengan laravel seeder. Jalankan sintaks berikut :

1

php artisan make:seeder BookSeeder

lalu isi sebagai berikut :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

public function run()

    {

        DB::table('books')->insert(

        	[

        		[

        			'title'			=> '7 Keajaiban Rezeki',

        			'author'		=> 'Ippho Santosa',

        			'publisher'		=> 'Elex Media Komputindo'

        		],

        		[

        			'title'			=> 'Khilafah',

        			'author'		=> 'Felix S Shiauw',

        			'publisher'		=> 'Al Fatih Press'

        		],

        		[

        			'title'			=> 'Do',

        			'author'		=> 'Handoko Hendroyono',

        			'publisher'		=> 'Gramedia'

        		],

        		[

        			'title'			=> 'Ketika Mozard Kecil Memainkan Jemarinya',

        			'author'		=> 'It Pin Arifin',

        			'publisher'		=> 'Gramedia'

        		]

        	]

        );

    }

setelah itu jangan lupa tambahkan class seeder kita di file DatabaseSeeder.php

1

2

3

4

public function run()

{

    $this->call(BooksSeeder::class);

}

Jika sudah, lakukan migrasi dan seeding ke database dengan sintaks

1

php artisan make:migration --seed

dan pastikan database anda sudah terisi.

Berikutnya kita akan menggunakan plugin datatable bernama yajra/laravel-datatables. Mari kita tambahkan ke project kita dengan menggunakan composer

1

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

dan tunggu hingga proses installasi selesai lalu lakukan konfigurasi dengan menambahkan service provider datatable di file config/app.php

1

2

3

4

5

6

7

8

9

10

11

'providers' => [

...

        /*

         * Package Service Providers...

         */

        Yajra\Datatables\DatatablesServiceProvider::class,

        //

...

    ],

settingan ini juga nantinya akan memuat alias otomatis bernama Datatables pada fascade kita. Setelah itu jalankan

1

php artisan vendor:publish --tag=datatables

Selanjutnya kita buat view untuk master templatenya. Buat folder baru bernama layouts di resource/views. Lalu buat file baru bernama app.blade.php dengan isian sebagai berikut :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

    <title>Datatables Demo</title>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">

</head>

<body>

@yield('content')

<!-- jQuery -->

<script src="//code.jquery.com/jquery.js"></script>

<!-- DataTables -->

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Bootstrap JavaScript -->

<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- App scripts -->

@yield('scripts')

</body>

</html>

pada dokumen tersebut kita menggunakan cdn dari jquery dan datatable nya supaya ringkas. Namun ketika sudah development saya sarankan agar asset tersebut dapat diunduh dan diambil secara local untuk meningkatkan performa aplikasi.

sampai disini persiapan sudah selesai.

Penggunaan Laravel Datatable dengan Ajax

Pada metode ini kita akan menggunakan ajax untuk pemanggilan data yang akan ditampilkan datatable dari server. Langkah pertama yang harus dilakukan adalah membuat controller yang akan kita gunakan.

1

php artisan make:contoller BookAjaxController

lalu buatlah dua method bernama index dan books

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

...

use App\Book;

use Datatables;

class BookAjaxController extends Controller

{

    public function index(){

    	return view('books-ajax.index');

    }

    public function books(){

    	$books = Book::select('title','author','publisher')->get();

    	return Datatables::of($books)->make(true);

    }

}

method index akan kita gunakan untuk menampilkan view, sedangkan method books akan kita gunakan untuk pemaggilan ajaxnya.

Selanjutnya tambahkan route sebagai berikut :

1

2

Route::get('/book-ajax', 'BookAjaxController@index');

Route::get('/book-ajax/get-book', 'BookAjaxController@books');

setelah itu kita buat viewnya. Buat folder baru bernama books-ajax di resource/views. Lalu buat file bernama index.blade.php dengan isian sebagai berikut :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

@extends('layouts.app')

@section('content')	

<div class="col-md-8 col-md-offset-2">

	<h3>Data Buku</h3>	

	<table class="table" id="books">

		<thead>

			<tr>

				<td>Judul Buku</td>

				<td>Penulis</td>

				<td>Penerbit</td>

			</tr>

		</thead>

	</table>

</div>

@endsection

@section('scripts')	

<script type="text/javascript">

	$(function(){

		$("#books").DataTable({

			 processing: true,

		        serverSide: true,

		        ajax: '{{ url("book-ajax/get-book") }}',

		        columns: [

		            { data: 'title', name: 'title' },

		            { data: 'author', name: 'author' },

		            { data: 'publisher', name: 'publisher' }

		        ]

		});

	});	

</script>

@endsection

Kalau sudah kita akan jalankan aplikasi

1

php artisan serve

secara default laravel akan berjalan pada port 8000. Coba kita buka di browser http://localhost:8000/book-ajax. Jika muncul tampilan seperti ini berarti anda sudah berhasil menampilkan data di laravel datatable dengan ajax.

Penggunaan Laravel Datatable dengan Builder

Berbeda dengan cara penampilan menggunakan ajax, pada cara ini kita akan menggunakan Html Builder bawaan dari package yang tadi sudah kita install. Adapun cara sebagai berikut:

Buat Controller

1

php artisan make:controller BookBuilderController

lalu isi sebagai berikut

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

...

use Datatables;

use Yajra\Datatables\Html\Builder;

class BookBuilderController extends Controller

{

	public function index(Request $request, Builder $htmlBuilder)

	{

		if ($request->ajax()) {

			$books = Book::select('title','author','publisher')->get();

			return Datatables::of($books)->make(true);

		}

		$html = $htmlBuilder

		->addColumn(['data' => 'title', 'name' => 'title', 'title' => 'Judul'])

		->addColumn(['data' => 'author', 'name' => 'author', 'title' => 'Penulis'])

		->addColumn(['data' => 'publisher', 'name' => 'publisher', 'title' => 'Penerbit']);

		return view('books-builder.index', compact('html'));

	}

}

Selanjutnya tambahkan route sebagai berikut :

1

Route::get('/book-builder', 'BookBuilderController@index');

setelah itu kita buat viewnya. Buat folder baru bernama books-builder di resource/views. Lalu buat file bernama index.blade.php dengan isian sebagai berikut :

1

2

3

4

5

6

7

8

9

10

11

12

@extends('layouts.app')

@section('content')	

<div class="col-md-8 col-md-offset-2">

	<h3>Data Buku</h3>	

	{!! $html->table() !!}

</div>

@endsection

@section('scripts')

{!! $html->scripts() !!}

@endsection

Kalau sudah kita akan jalankan aplikasi

1

php artisan serve

secara default laravel akan berjalan pada port 8000. Coba kita buka di browser http://localhost:8000/book-builder . Jika muncul tampilan seperti ini berarti anda sudah berhasil menampilkan data di laravel datatable dengan menggunakan builder.

Bisa Code

Penggunaan Datatable di Laravel

Persiapan Project

Penggunaan Laravel Datatable dengan Ajax

Penggunaan Laravel Datatable dengan Builder

You May Also Like

No comments:

Recent Posts

Blog Archive

Popular Posts

Categories

Artikel Pilihan

Random Posts

Tags

Recent Posts