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>

Penjelasan :

– Kode diatas merupakan kode untuk menampilkan datanya pada tabel menggunakan Ajax walaupun datanya adalah dari file dengan tipe file .json. Header kolom pada tabel adalah pada kode ini “title”: “Alamat, dst…

– Pada kode diatas juga saya contohkan untuk tidak menampilkan tombol detail jika nama_mahasiswa adalah Dery seperti pada kode dibawah

Sobat bisa menggantinya jika status=’Tidak Aktif’ atau sebagainya.

– Untuk pemanggilan nama kolomnya juga bisa menggunakan nama kolom yang ada pada kolom datatabase atau yang di deklarasikan di jsonnya.

Jika dijalankan maka akan muncul tampilan seperti dibawah

Jika klik tombol detail maka akan muncul modal seperti dibawah

 

Menampilkan Data .txt ke Datatables

Selanjutnya adalah cara menampilkan data dari file txt ke dalam datatables. Sebenarnya ini sama saja karena data yang ada di file txt juga data dengan format json namun hanya filenya saja yang berformat .txt.

1. Plugin css dan javascript masih sama seperti diatas dan sobat hanya perlu menyiapkan file .txt yang mana file ini juga dibuat oleh sistem seperti menggunakan cronjob atau lainnya. Jadi tidak mungkin jika kita manusia disuruh mengetik sebanyak itu dengan format json dengan benar. Buat file data.txt dan isikan dengan kode dibawah

 

2. Sama seperti diatas kita membuat tag <table> seperti ini

 

3. Pada javascriptnya kita isikan seperti ini

yang membedakan desan .json file hanya pada urlnya yaitu

Untuk detailnya juga sama saja.

 

Sperti yang sudah sobat lihat dengan cara ini tidak perlu sobat pakai php, java, atau asp dan framework apapun tidak perlu yang diperlukan hanya .html, .css dan .js. Tentunya cara ini akan aman dari sql injection karena website atau aplikasi kita tidak terkoneksi dengan database. Untuk file .json atau .txt bisa digenerate otomatis oleh sistem lain yang berjalan di server yang sama tapi tidak bisa di akses oleh pihak luar dan dibuat cronjob untuk update tiap beberapa menit. Karena website tidak konek dengan database maka hacker tidak bisa melakukan sql injection namun pihak luar tetap bisa mengakses data kita. Terus bagaimana jika ada hacker bisa mengganti data di dalam file .json tersebut? Tentu tidak masalah karena jika cronjob berjalan beberapa menit kemudian dan menimpa file json yang sudah dimodif oleh hacker tersebut sehingga menjadi normal kembali.

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

One thought on “Menampilkan Data Format JSON dan TXT ke dalam Datatables dengan Ajax

Leave a Reply

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

nineteen − ten =