Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
membuat edit dan delete , mengambil id dari JSON
file js
<script>
function actionFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Cetak">',
'<i class="glyphicon glyphicon-print"></i>',
'</a>',
'<a id="edit" class="edit ml10 " href="javascript:void(0)" title="Edit" >',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove ml10 " href="javascript:void(0)" title="Hapus">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.actionEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
</script>
file php
<div class="panel-heading">Pasien</div>
<div class="panel-body">
<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-default" data-toggle='modal' data-target='#tambah'>
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<table
data-filter-control="true"
data-mode="popup"
data-toggle="table"
data-url="tables/pasien.json"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-search="true"
data-select-item-name="toolbar1"
data-pagination="true"
data-sort-name="name"
data-sort-order="desc"
data-click-to-select="true"
data-single-select="true"
>
<thead>
<?php
$a=mysql_query("select * from pasien");
$pasien=array();
while($kolom =mysql_fetch_assoc($a))
{
$pasien[] = $kolom;
}
$fp = fopen('tables/pasien.json', 'w');
fwrite($fp, json_encode($pasien));
fclose($fp);
?>
<tr>
<th data-field="id" >ID Pasien</th>
<th data-field="nama" data-sortable="true">Nama Pasien</th>
<th data-field="tl" data-sortable="true">Tanggal Lahir</th>
<th data-field="tpl" data-sortable="true">Tempat Lahir</th>
<th data-field="alamat" data-sortable="true">Alamat Lahir</th>
<th data-field="goldar" data-sortable="true">Golongan Darah</th>
<th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Aksi</th>
</tr>
</thead>
</table>
file render json
[{"id":"1","nama":"khoirul zakariyah","tl":"0000-00-00","tpl":"swerw","alamat":"fgdfg","goldar":"O"},{"id":"2","nama":"coba","tl":"0000-00-00","tpl":"jakhsd","alamat":"jshdf","goldar":"A"},{"id":"4","nama":"sad","tl":"0000-00-00","tpl":"asf","alamat":"fdga","goldar":"B"},{"id":"77","nama":"tes","tl":"0000-00-00","tpl":"lksjdla","alamat":"jsdhfk","goldar":"AB"}]
pertanyaanya , saya ingin membuat form edit dan delete dari json(pluggin dari boostraps table) tapi masih bingung.
pop up seperti gambar ini
ingnnya di model seperti ini
tapi belum bisa proses
3 Jawaban:
pas di click kan tinggal trigger modal popupnya mas, yang ditanya apa ya?
kalo mau buat form dengan fitur add, edit, delete memang paling mudah dengan database. menggunakan json file hanya mudah saat persiapan data awal, kedepannya untuk prosesing data bisa bikin pusing. tapi kalao memang mau tetap pakai json file, lebih baik format jsonnya diubah sedikit, ditambahin 'key' untuk tiap objectnya. misalnya json asli seperti ini
[{"id":"1","nama":"khoirul zakariyah","tl":"0000-00-00","tpl":"swerw","alamat":"fgdfg","goldar":"O"},{"id":"2","nama":"coba","tl":"0000-00-00","tpl":"jakhsd","alamat":"jshdf","goldar":"A"}]
diganti menjadi
[{"1":{"id":"1","nama":"khoirul zakariyah","tl":"0000-00-00","tpl":"swerw","alamat":"fgdfg","goldar":"O"}},{"2":{"id":"2","nama":"coba","tl":"0000-00-00","tpl":"jakhsd","alamat":"jshdf","goldar":"A"}}]
dengan bantuan key diatas untuk akses ke masing2 object jadi lebih mudah. contoh bila mau edit nama 'khoirul zakariyah' untuk object pertama menjadi 'nama'editan', kita bisa bikin fungsi seperti ini
function editJson($obj, $key, $prop, $value)
{
return $obj[$key]->{0}->$prop = $value;
}
editJson($jsonData, 1, "nama", "nama editan");
untuk delete object pun jadi lebih mudah
function deleteJson($obj, $key)
{
unset($obj[$key]);
return $obj;
}
$jsonData = deleteJson($jsonData , 1);
untuk penambahan data baru mesti dicek dulu key terakhir yang ada, baru masukkan key baru (lastkey + 1)
//cek key terakhir
$key = key((array)$jsonData[count($jsonData)]);
$newKey = $key+1;
$jsonData[$newKey] = ....// masukkan object data baru
yang sangat perlu diperhatikan adalah error handling, kalau pada saat fwrite terjadi error dan data tidak tersimpan dengan sempurna maka data akan hilang.
sori kalo kepanjangan xD, tolong dikoreksi juga kalau ada yang salah infonya
@rachmatsasongko itu kalau ngambil variabel json ke modal gimana ya mas, apa pakai function yang berisi $key? :D kan variabelnya biar bisa masuk di form edit pada elemen modal. masih bingung