Tutorial Penggunaan Datatable di Laravel

Assalamualaikum, semoga damai selalu menyertai kita semua.

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

selanjutnya kita sesuaikan konfigurasi database kita  di file .env

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

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 :

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

lalu isi sebagai berikut :

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

Jika sudah, lakukan migrasi dan seeding ke database dengan sintaks

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

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

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

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 :

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.

lalu buatlah dua method bernama index dan books

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

Selanjutnya tambahkan route sebagai berikut :

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 :

Kalau sudah kita akan jalankan aplikasi

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.

laravel-datatable-2

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

lalu isi sebagai berikut

Selanjutnya tambahkan route sebagai berikut :

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 :

Kalau sudah kita akan jalankan aplikasi

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.

laravel-datatable-3

Selesai sudah Tutorial Penggunaan Datatable di Laravel ini. Jadi metode mana yang akan andai pakai? komen dibawah ya.. hehe

Last but not least.. cheers and have a nice code

Widi Hastomo

Hai, Nama saya Widi Hastomo. Saya adalah seorang software enginer yang punya passion di bidang web development. Saya sudah berada di dunia web development sejak tahun 2014 dan saat ini berdomisili di semarang, Jawa Tengah.

Tutorial Penggunaan Datatable di Laravel

Tagged on:         
  • Immanuel Saragih

    https://uploads.disquscdn.com/images/691bd49621aba4afee57ea1fcf291e8b957e0e36bcdd65cad6a7534e13b5ca97.jpg

    gan gimana mengatasi tampilan data tablenya yang kurang rapi seperti berikut ini??

    • widiexesz

      Maaf baru balas.. itu sepertinya caranya bermasalah Mas.. masnya pake template apa?

      • Immanuel Saragih

        ga pake template mas

  • yoko watanabe

    kok punya saya datanya tidak keluar ya mas?

    • widiexesz

      Coba di dump datanya Mas..

      dd($nama_variable);

      • yoko watanabe

        dibagian controller atau view nya mas??
        kalo saya tarik langsung http://localhost:8000/book-builder/get-books, itu dapat databasenya. Tp tidak keluar di tabel datatable nya

        • widihastomo

          Di controllernya Mas..
          Masnya pake cara yang Ajax?
          Sudah di inisialisasi apa blm datatablenya?

          Seperti ini :

          $(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’ }
          ]
          });
          });

      • yoko watanabe

        Iya pakai yg ajax
        Sudah mas, sudah saya inisialisasi. Makanya bingung, tdk ada error lg kalau datatable 😅

        Jd pusing sndiri

        • widihastomo

          Bagian column nya udah sesuai apa blm namanya mas? Itu harus sama kayak nama kolom di databasenya

          • yoko watanabe

            Sudah sih td saya cocokin ulang.
            Coba deh saya build dri ulang haha

            Tp itu import databasenya gk mesti pake seeder kan?
            Dari phpmyadmin nya aja bisakan? Yg pnting ada data didalem databasenya

          • widihastomo

            Hehe di teliti lg Mas..

            Iya yg penting ada isinya

        • yoko watanabe

          ternyata punya saya versi 5.2 mas.
          ada yang perlu dirubah tidak ya kalau pakai 5.2, dikhawatirkan syntax nya ada yang berbeda dari v5.2 dengan v5.3