Menampilkan Data Format JSON dan TXT ke dalam Datatables dengan Ajax

Hai ketemu lagi dengan saya, dan pada postingan kali ini saya akan membahas tentang datatables lagi yaitu lanjutan dari kemarin. Sebenarnya ini sama seperti kemarin pada contoh menampilkan datatables menggunakan ajax. Pada kali ini saya juga akan mencontohkan cara menampilkan data ke dalam datatable namun bukan dari database atau menggunakan query. Pada kali ini menggunakan file .json dan file.txt yang mana isinya adalah data yang berformat json. Karena terkadang ada website yang tidak mempunyai akses ke database sehingga website tersebut hanya membaca file saja. Aplikasi lain lah yang membuat file json sehingga pada website kita membaca file json tersebut dan menampilkannya ke dalam tabel. Hal ini tentunya akan lebih aman ketimbang kita harus koneksi ke database. Website kita akan terbebas dari sql injection karena bagaimana mau inject orang koneksi database juga ngga hehe…

Namun tentu bukan faktor itu saja kita menggunakan file .json atau .txt ini. Pada contoh kali ini kita tidak menggunakan bahasa pemrograman untuk backend aplikasi ya. Jadi murni hanya front-end seperti html, css dan javascript saja. Langsung saja saya jelaskan cara membuatnya ya. Ikuti step-step dibawah ini :

Baca juga :

Membuat Autocomplete / Live Search dari File JSON dengan JQuery

 

Menampilkan Data .json ke Datatables

Untuk mempercantik tampilannya saya menggunakan bootstrap 4. Tidak usah berlama-lama, saya akan memberikan contohnya, yaitu sebagai berikut

1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-datatables2. Setelah itu sobat siapkan file dengan format file .json yang isinya tentu data dengan format json. File ini seharusnya bukan dibuat manual ya.. melainkan sistem yang membuat mungkin dengan cronjob atau sebagainya. Untuk contoh sobat bisa copy ini dan pastekan di notepad atau lainnya dengan format file .json dan beri nama data.json.

 

2. Untuk mempercantik tambahkan librari bootstrap dan saya menggunakan fontawesome untuk icon-nya dan tentunya library datatables. Jika aplikasi yagn sedang sobat buat sudah ada librari-librari tersebut tentu tidak perlu menambahkan lagi. Kode dibawah letakkan pada tag <head> dan saya mencontohkan degan librari cs dan js online. Jika sobat ingin menggunakan untuk keperluan development tentu sobat harus mendownloadnya terlebih dahulu siwebsite resminya atau pada project ini di akhir postingan. Kodenya adalah sebagai berikut

kode diatas baru kode css-nya saja, agar lebih rapi saya anjurkan agar dipisah untuk css & js-nya. Selanjutnya tambahkan kode dibawah ini di dalam tag <body> paling bawah yang berarti di atas </body>

 

3. Pada file index.php tag <body> kita tambahkan kode berikut

Kode diatas adalah kode untuk membuat tabel yang nantinya akan diisi melalui Ajax.

Kemudian dibawahnya berikan script dibawah untuk menampilkan detailnya pada modal sama seperti contoh sebelumnya

 

4. kemudian inilah yang paling penting yaitu mengisi tabelnya. Masukkan kode ini pada tag <body> paling bawah yang berarti diatas penutup tag </body>