• 089666489801
  • dientrimedia@gmail.com
  • Opening: 08:00 - 21:00 WIB

Whatsapp089666489801

Penawarandientrimedia@gmail.com

LokasiPerumahan Griya Asri TMII Jati Makmur

TUTORIAL PHP MYSQL INTEGRASI CODEINITER DENGAN DATATABLE SERVERSIDE

Datatables adalah salah satu plugin jquery yang digunakan untuk menampilkan data dalam bentuk grid, selain menampilkan data, library ini juga akan otomatis menampilkan fitur lain yang sering digunakan seperti pencarian data, sorting data dan paging untuk menampilkan data dengan jumlah tertentu pada setiap halaman. sedangkan datatables serverside adalah sebuah konsep yang menginjek data json dalam dokument HTML sehingga proses menampilkan data menjadi lebih cepat.

Tutorial Cara Menggunakan Datatables ServerSide Pada Codeigniter

selain menggunakan class ssp.class.php yang merupakan bawaan datatatables untuk menggenerate data json yang akan ditampilkan pada konsep datatables serverside, sebenarnya ada cara yang lebih praktis yaitu menggunakan library bernama Ignited-Datatables yang ditulis oleh om Vincent Bambico, library  Ignited-Datatables dibuat khusus untuk mengintegrasikan datatables serverside dengan framework codeigniter.

codeigniter-datatable1

Membuat Database, Tabel Dan Insert Data Dummy

Sebelum masuk ke tahap ini, pastikanlah bahwa anda sudah selesai melakukan konfigurasi dasar dan konfigurasi database, langkah selanjutnya yang akan kita lakukan adalah membuat sebuah tabel yang akan kita gunakan untuk menyimpan data nantinya, silahkan buat sebuah tabel  karyawan dengan struktur tabel seperti berikut :

codeigniter-datatable-struktur-tabel

atau jika anda ingin cepat, saya juga menyediakan Query SQL untuk membat struktur tabel seperti di atas, silahkan copy script ini dan jalankan untuk meng eksekusinya :

Langkah selanjutnya kita akan menginput 1000 record ke tabel karyawan, dari pada input satu persatu lebih baik kita buat script yang akan menginsert 1000 data secara otomatis, silahkan buat sebuah file baru dengan nama Karyawan.php di dalam folder controller, lalu tulis lah script berikut :

selanjutnya kita akan memanggil fungsi tersebut, silahkan buka web browser dan masukan http://localhost/pos/index.php/karyawan/insert_dumy pada address bar  browser untuk mengjalankan fungsi di atas, jika berhasil maka akan muncul informasi seperti dibawah, kemudian silahkan chek data pada tabel karyawan.

codeigniter-insert-dummy

Cara Menggunakan Library Ignited-Datatables

Langkah selanjutnya adalah mengdownload library Ignited-Datatables, extrack file Ignited-Datatables-master.zip lalu pindahkan file Datatables.php ke folder library yang ada dibawah folder application, kemudian selanjutnya silahkan buat function baru dengan nama json dan silahkan tulis script berikut :

sekarang waktunya melakukan pengujian apakah libray ini sudah bekerja dengan baik atau belum, cara nya silahkan akses http://localhost/pos/index.php/karyawan/json pada web browser, jika semua tahapan yang anda lakukan sudah benar maka akan muncul tampilan seperti ini :

codeigniter-datatables-json

Membuat View Untuk Menampilkan Data

Sebelum memuat view untuk menampilkan data nya, kita akan melakukan sedikit modifikasi dengan menambahkan method baru dengan nama index pada controller karyawan, method ini yang nantinya akan bertugas memanggil view nantinya, silahkan buka controller Karyawan dan tambahkan method ini :

Selanjutnya pada tahap ini kita akan membuat view untuk menampilkan data pegawai, dalam view ini anntinya kita akan menggunakan beberapa library dari external, dalam hal ini saya menggunakan CDN, jadi pastikan anda mempunya koneksi internet untuk melakukan pengujian nantinya, sekarang silahkan buat sebuah view dengan nama karyawan.php dan tulis script berikut :

sekarang silahkan masukan http://localhost/pos/karyawan pada address web browser anda, jika semua langkah yang anda lakukan sudah benar maka akan muncul tampilan seperti ini :

hasil

Menampilkan Gambar Dan Menabahkan Link

Proses untuk menampilkan data sebenarnya sudah selesai sampai disini, tapi mungkin anda penasaran bagaimana caranya kalau data yang ingin ditampilkan berupa gambar atau link, pada konsep Datatables Serverside baik menggunakan codeigniter atau PHP native, bagian yang perlu kita modifikasi adalah controller nya bukan di view nya, sekarang silahkan modifikasi method json menjadi seperti ini :

seperti yang anda lihat, karna untuk field foto kita akan memberi perlakuan khusus, dimana data yang akan kita tampilkan nantinya adalah dalam bentuk gambar maka kita perlu memisahkan field foto dengan menggunakan method add_column, anda bisa menemukan informasi lengkap tentang method ini pada dokumentasi Ignited-Datatables. begitu juga untuk membuat link, kita menambahkan colum baru den membuat sebuah link untuk ditampilkan.

setelah semuanya selesai silahkan simpan, lalu kita akan melakukan modifikasi pada view nya, kita akan menambahkan kolom baru dengan nama ACTION  pada tabel dan script JS untuk column untuk menampilkan kolom edit tadi, sekarang script viewnya jadi seperti ini :

pastikan anda sudah melakukan save untuk menyimpan semua perubahan, lalu silahkan refresh pada halaman tadi, jika semua proses yang anda lakukan benar maka akan tampil seperti ini :

hasil-2

Kesimpulan

Dengan adanya library Ignited-Datatables membuat proses integrasi framework codeigniter dan datatables serverside processing menjadi lebih mudah, kelebihan lain dari konsep ini adalah proses menampilkan data menjadi lebih cepat, anda boleh melakukan perbandingan kecepatan menampilkan data dengan cara biasa dan cara ini. semoga artikel tutorial menampilkan data dengan codeigniter datatables serverside ini menambah wawasan ilmu anda.

One thought on “TUTORIAL PHP MYSQL INTEGRASI CODEINITER DENGAN DATATABLE SERVERSIDE

Tinggalkan Balasan

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