Edit Data Merupakan salah satu fiture yang pasti ada dalam sebuah applikasi. Edit data merupakan proses perubahan data yang di lakikan oleh user untuk memperbaharui data yang sudah ada , para programer yang masih pembelajaran akan menggunakan metode biasa yakni klik edit lalu muncul form edit data . bagaimana kalo edit data langsung pada kolom tabel data yang di tampilkan . Sekarang saya akan membahas bagaimana cara membuat edit data secara live tanpa me-load form edit ... tentunya menggunakan bahasa pemograman Mr Php dan dibantu sama 0m Javascript ..heheheheh langsung simak artikel berikut :
Langkah pertama silahkan buka code editor kesayangan kita kemudian buat code seperti dibawah ini: - Buat script Untuk menampilkan data yang akan kita edit dan simpan dengan nama form.php :
<table class="table table-bordered table-hover"> <tr> <th>No</th> <th>Nama Kegiatan</th> <th>Jumlah</th> <th>Satuan</th> <th>Usulan</th> <th>Kebutuhan</th> </tr> <?php $query ="SELECT * FROM tb_realisasi WHERE id_bencana='$_GET[id]'"; $sql = @mysql_query( $query ) or die( mysql_error() ); while ($fetch = mysql_fetch_array( $sql )){ $no++; if($i%2==0) $class = 'even'; else $class = 'odd'; echo'<tr class="'.$class.'"> <td>'.$no.'</td> <td class="xedit" id="'.$fetch['id'].'" maz="nama_kegiatan">'.$fetch['nama_kegiatan'].'</td> <td class="xedit" id="'.$fetch['id'].'" maz="jumlah">'.$fetch['jumlah'].'</td> <td class="xedit" id="'.$fetch['id'].'" maz="satuan">'.$fetch['satuan'].'</td> <td class="xedit" id="'.$fetch['id'].'" maz="usulan">'.$fetch['usulan'].'</td> <td class="xedit" id="'.$fetch['id'].'" maz="kebutuhan">'.$fetch['kebutuhan'].'</td> </tr>'; } ?> </table> 2. buat script javascript untuk mengkondisikan live edit dan simpan dengan nama liveEdit.js jQuery(document).ready(function() { $.fn.editable.defaults.mode = 'popup'; $('.xedit').editable(); $(document).on('click','.editable-submit',function(){ var maz = $(this).closest('.editable-container').prev().attr('maz'); var x = $(this).closest('.editable-container').prev().attr('id'); var y = $('.input-sm').val(); var z = $(this).closest('.editable-container').prev().text(y); $.ajax({ url: "process.php?id="+x+"&data="+y+'&maz='+maz, type: 'GET', success: function(s){ if(s == 'status'){ $(z).html(y);} if(s == 'error') { alert('Error Processing your Request!');} }, error: function(e){ alert('Error Processing your Request!!'); } }); }); }); 3. Terakbir buat file php untuk proses penyimpanan data dan simpan dengan nama process.php <?php require_once('koneksi.php');//panggil file koneksi dulu if($_GET['id'] and $_GET['data']) { $id = $_GET['id']; $data = $_GET['data']; $key = $_GET['maz']; if(mysql_query("update tb_realisasi set $key='$data' where id='$id'")) echo 'success'; } ?> oke selesai .... mudah bukan?? silahkan terapkan pada applikasi yang anda buat semoga bermanfaat : NOTE : Silahkan Sesuaikan field Database anda dan koneksi.php anda .. terimakasih . salam Coder!!
EmoticonEmoticon