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.
|
1 |
[{"id":28,"nama_mahasiswa":"Septian","alamat":"Purwokerto","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":27,"nama_mahasiswa":"Dery","alamat":"Purbalingga","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":26,"nama_mahasiswa":"Luna Maya","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":25,"nama_mahasiswa":"Raisa","alamat":"Riau","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":24,"nama_mahasiswa":"Prabowo","alamat":"Palangkaraya","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":23,"nama_mahasiswa":"Megawati","alamat":"Medan","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":22,"nama_mahasiswa":"Jokowi","alamat":"Jakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":21,"nama_mahasiswa":"Adele","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":20,"nama_mahasiswa":"John Gundulmu","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":19,"nama_mahasiswa":"Meriam Belina","alamat":"Cilacap","jurusan":"Sistem Informasi","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":18,"nama_mahasiswa":"Titik Puspa","alamat":"Purwokerto","jurusan":"Sistem Informasi","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":17,"nama_mahasiswa":"Indro","alamat":"Purbalingga","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":16,"nama_mahasiswa":"Kasino","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":15,"nama_mahasiswa":"Dono","alamat":"Riau","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":14,"nama_mahasiswa":"Komeng","alamat":"Palangkaraya","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":13,"nama_mahasiswa":"Adul","alamat":"Medan","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":12,"nama_mahasiswa":"Suprapto","alamat":"Jakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":11,"nama_mahasiswa":"Ahmad Yani","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":10,"nama_mahasiswa":"Sudirman","alamat":"Jakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":7,"nama_mahasiswa":"Adam Levine","alamat":"Prapatan Ciamis","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":6,"nama_mahasiswa":"John Smith","alamat":"Njojog","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":5,"nama_mahasiswa":"Andre","alamat":"Purwokerto","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":4,"nama_mahasiswa":"Siti","alamat":"Semarang","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-01"},{"id":3,"nama_mahasiswa":"Maemunah","alamat":"Yogyakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-01"},{"id":2,"nama_mahasiswa":"Sule","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-01"},{"id":1,"nama_mahasiswa":"Dewan Komputer","alamat":"Cilacap","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-01"}] |
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
|
1 2 3 4 5 6 |
<!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <!-- Datatable --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> |
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>
|
1 2 3 4 5 6 7 |
<!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- DataTable --> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> |
3. Pada file index.php tag <body> kita tambahkan kode berikut
|
1 2 3 4 |
<div class="table-responsive"> <table id="data" class="table table-striped table-bordered" style="width:100%"> </table> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div id="viewModal" class="modal fade mr-tp-100" role="dialog"> <div class="modal-dialog modal-lg flipInX animated"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel" >View Data</h4> <button type="button" class="close" data-dismiss="modal" > <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label>ID</label> <input type="text" id="id" class="form-control" readonly=""> </div> <div class="form-group"> <label>Nama Mahasiswa</label> <input type="text" id="nama_mahasiswa" class="form-control" readonly=""> </div> <div class="form-group"> <label>Alamat</label> <input type="text" id="alamat" class="form-control" readonly=""> </div> <div class="form-group"> <label>Jurusan</label> <input type="text" id="jurusan" class="form-control" readonly=""> </div> <div class="form-group"> <label>Jenis Kelamin</label> <input type="text" id="jenis_kelamin" class="form-control" readonly=""> </div> <div class="form-group"> <label>Tanggal Masuk</label> <input type="text" id="tgl_masuk" class="form-control" readonly=""> </div> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal"> Close </button> </div> </div> </div> </div> |
4. kemudian inilah yang paling penting yaitu mengisi tabelnya. Masukkan kode ini pada tag <body> paling bawah yang berarti diatas penutup tag </body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<script type="text/javascript"> $(document).ready(function() { var table = $('#data').DataTable({ responsive: true, "ajax": { "type": "POST", "url": "data.json", "timeout": 120000, "dataSrc": function (json) { if(json != null){ return json } else { return ""; } } }, "sAjaxDataProp": "", "width": "100%", "order": [[ 0, "asc" ]], "aoColumns": [ { "mData": null, "title": "No", render: function (data, type, row, meta) { return meta.row + meta.settings._iDisplayStart + 1; } }, { "mData": null, "title": "Nama Mahasiswa", "render": function (data, row, type, meta) { return data.nama_mahasiswa; } }, { "mData": null, "title": "Alamat", "render": function (data, row, type, meta) { return data.alamat; } }, { "mData": null, "title": "Jurusan", "render": function (data, row, type, meta) { return data.jurusan; } }, { "mData": null, "title": "Jenis Kelamin", "render": function (data, row, type, meta) { return data.jenis_kelamin; } }, { "mData": null, "title": "Tanggal Masuk", "render": function (data, row, type, meta) { return data.tgl_masuk; } }, { "mData": null, "title": "Aksi", "sortable": false, "render": function (data, row, type, meta) { let btn = ''; if(data.nama_mahasiswa != "Dery"){ btn += "<button style='font-size: 11px;' class='btn btn-primary' id='detail' name='detail' title='Lihat Detail'><i class='fa fa-search'></i></button>"; } return btn; } } ] }); $('#data tbody').on( 'click', '#detail', function () { var current_row = $(this).parents('tr'); if (current_row.hasClass('child')) { current_row = current_row.prev(); } var data = table.row( current_row ).data(); document.getElementById("id").value = data["id"]; document.getElementById("nama_mahasiswa").value = data["nama_mahasiswa"]; document.getElementById("alamat").value = data["alamat"]; document.getElementById("jurusan").value = data["jurusan"]; document.getElementById("jenis_kelamin").value = data["jenis_kelamin"]; document.getElementById("tgl_masuk").value = data["tgl_masuk"]; $("#viewModal").modal("show"); }); }); </script> |
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
|
1 |
if(data.nama_mahasiswa != "Dery"){ |
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.
|
1 |
document.getElementById("nama_mahasiswa").value = data["nama_mahasiswa"]; |
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
|
1 |
[{"id":28,"nama_mahasiswa":"Septian","alamat":"Purwokerto","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":27,"nama_mahasiswa":"Dery","alamat":"Purbalingga","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":26,"nama_mahasiswa":"Luna Maya","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":25,"nama_mahasiswa":"Raisa","alamat":"Riau","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":24,"nama_mahasiswa":"Prabowo","alamat":"Palangkaraya","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":23,"nama_mahasiswa":"Megawati","alamat":"Medan","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":22,"nama_mahasiswa":"Jokowi","alamat":"Jakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":21,"nama_mahasiswa":"Adele","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":20,"nama_mahasiswa":"John Gundulmu","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":19,"nama_mahasiswa":"Meriam Belina","alamat":"Cilacap","jurusan":"Sistem Informasi","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":18,"nama_mahasiswa":"Titik Puspa","alamat":"Purwokerto","jurusan":"Sistem Informasi","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-22"},{"id":17,"nama_mahasiswa":"Indro","alamat":"Purbalingga","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":16,"nama_mahasiswa":"Kasino","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":15,"nama_mahasiswa":"Dono","alamat":"Riau","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":14,"nama_mahasiswa":"Komeng","alamat":"Palangkaraya","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":13,"nama_mahasiswa":"Adul","alamat":"Medan","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":12,"nama_mahasiswa":"Suprapto","alamat":"Jakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":11,"nama_mahasiswa":"Ahmad Yani","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":10,"nama_mahasiswa":"Sudirman","alamat":"Jakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":7,"nama_mahasiswa":"Adam Levine","alamat":"Prapatan Ciamis","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":6,"nama_mahasiswa":"John Smith","alamat":"Njojog","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":5,"nama_mahasiswa":"Andre","alamat":"Purwokerto","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-22"},{"id":4,"nama_mahasiswa":"Siti","alamat":"Semarang","jurusan":"Teknik Informatika","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-01"},{"id":3,"nama_mahasiswa":"Maemunah","alamat":"Yogyakarta","jurusan":"Sistem Informasi","jenis_kelamin":"Perempuan","tgl_masuk":"2019-01-01"},{"id":2,"nama_mahasiswa":"Sule","alamat":"Jakarta","jurusan":"Teknik Informatika","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-01"},{"id":1,"nama_mahasiswa":"Dewan Komputer","alamat":"Cilacap","jurusan":"Sistem Informasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-01"}] |
2. Sama seperti diatas kita membuat tag <table> seperti ini
|
1 2 3 4 |
<div class="table-responsive"> <table id="data" class="table table-striped table-bordered" style="width:100%"> </table> </div> |
3. Pada javascriptnya kita isikan seperti ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<script type="text/javascript"> $(document).ready(function() { var table = $('#data').DataTable({ responsive: true, "ajax": { "type": "POST", "url": "data.txt", "timeout": 120000, "dataSrc": function (json) { if(json != null){ return json } else { return ""; } } }, "sAjaxDataProp": "", "width": "100%", "order": [[ 0, "asc" ]], "aoColumns": [ { "mData": null, "title": "No", render: function (data, type, row, meta) { return meta.row + meta.settings._iDisplayStart + 1; } }, { "mData": null, "title": "Nama Mahasiswa", "render": function (data, row, type, meta) { return data.nama_mahasiswa; } }, { "mData": null, "title": "Alamat", "render": function (data, row, type, meta) { return data.alamat; } }, { "mData": null, "title": "Jurusan", "render": function (data, row, type, meta) { return data.jurusan; } }, { "mData": null, "title": "Jenis Kelamin", "render": function (data, row, type, meta) { return data.jenis_kelamin; } }, { "mData": null, "title": "Tanggal Masuk", "render": function (data, row, type, meta) { return data.tgl_masuk; } }, { "mData": null, "title": "Aksi", "sortable": false, "render": function (data, row, type, meta) { let btn = ''; if(data.nama_mahasiswa != "Dery"){ btn += "<button style='font-size: 11px;' class='btn btn-primary' id='detail' name='detail' title='Lihat Detail'><i class='fa fa-search'></i></button>"; } return btn; } } ] }); $('#data tbody').on( 'click', '#detail', function () { var current_row = $(this).parents('tr'); if (current_row.hasClass('child')) { current_row = current_row.prev(); } var data = table.row( current_row ).data(); document.getElementById("id").value = data["id"]; document.getElementById("nama_mahasiswa").value = data["nama_mahasiswa"]; document.getElementById("alamat").value = data["alamat"]; document.getElementById("jurusan").value = data["jurusan"]; document.getElementById("jenis_kelamin").value = data["jenis_kelamin"]; document.getElementById("tgl_masuk").value = data["tgl_masuk"]; $("#viewModal").modal("show"); }); }); </script> |
yang membedakan desan .json file hanya pada urlnya yaitu
|
1 |
"url": "data.txt", |
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 :