Membuat Data Table dengan jQueryDataTable dan Bootstrap

Selamat pagi semuanya, apa kabar? Semoga semuanya tetap dalam keadaan sehat wal’afiat amin!. Pada kesempatan ini saya akan berbagi mengenai bagiamana caranya membuat tampilan tabel pada website menjadi lebih cantik dan komunikatif, salah satu caranya dengan menggunakan data table plugin pada jQuery.

#Buat Database

Pertama, kita akan buat databasenya, ini digunakan untuk menyimpan data yang nantinya akan di load oleh data table. Untuk database sebenarnya bebas saja, tetapi di sini saya akan contohkan untuk nama databasenya “my_db” dengan menambahkan 1 tabel dengan struktur seperti di bawah ini :

Kemudian tambahkan beberapa entry data ke dalam tabel. Sehingga ketika nanti kita load, data tersebut akan muncul di data table.

#Buat Folder Project Di htdoc

Silahkan buat folder baru di htdoc dengan nama bebas.

#Mulai Proses Coding

#Buat File db_config.php

Sekarang saatnya buka textEditor, di sini saya menggunakan sublime text, tapi kalian juga bisa menggunakan program yang lain sesuai keinginan kalian. Silahkan buat file baru dengan nama db_config.php, kemudian salin kode program di bawah ini ke dalam file db_config.php.

#Buat File index.php

Silahkan buatlah file  index.php, kemudian salin code program dibawah ini ke dalam file index.php. Untuk penjelasan setiap bagian kode yang terdapat pada file index.php, sudah saya sisipkan penjelasan untuk setiap bagian-bagian kode program.

#Jika Penasaran Saja

Sampai pada tahap ini kita sebenarnya sudah memiliki data table, akan tetapi ketika dijalankan pada browser tidak akan ada data yang ter-load pada data table. Hal ini karena kita belum membuat source.php file sehingga data yang terdapat pada database tidak akan pernah muncul. Fungsi dari file source.php adalah sebagai penyedia sumber bagi data table, di mana source.php akan mengambil data dari database yang kemudian hasil yang didapat akan di encode ke dalam bentuk json. Kenapa json? Karena memang data table menggunakan data berformat json sebagai sumber data.

#Buat source.php

Sekarang buat file baru dengan nama source.php, kemudian salin kode program dibawah ini lalu tempelkan pada file source.php. Untuk penjelasan per-bagian kode program sudah saya sisipkan dalam bentuk comment.

Jika file index.php dan source.php sudah siap, kalian bisa coba buka atau jalankan file index.php pada browser. Jika kalian mengikuti langkah-langkah dengan benar maka tabel akan terlihat seperti di bawah ini.

Nah... itu adalah salah satu cara untuk membuat tampilan tabel kita lebih dinamis, cantik dan juga terlihat lebih rapi. Semoga tutorial ini bisa memberikan manfaat bagi yang membutuhkan. See you in the next tutorial!.

File Project dan Database bisa di download disini.

2 thoughts on “Membuat Data Table dengan jQueryDataTable dan Bootstrap”

Leave a Reply

Your email address will not be published. Required fields are marked *