trik-crud-mysql-query-update-dengan-javascript-dan-php-part-3-edit-data
trik-crud-mysql-query-update-dengan-javascript-dan-php-part-3-edit-data

Trik CRUD Mysql Query Update dengan Javascript dan Php – Part 3 ( Edit Data )

Diposting pada

Dalam tutorial ke 3 ini saya akan membahas mengenai Trik CRUD Mysql Query Update dengan Javascript dan Php. Yang akan saya bahas pada part 3 ini adalah bagaimana cara nya merubah data yang kita tampilkan dalam modal. Tentunya merubah data tersebut ke database mysql ya dengan perintah mysql query update.

Bagi anda baru saja menyimak artikel kami, anda bisa membaca dulu artikel sebelumnya pada part1 dan part2. Agar lebih mengerti untuk melanjutkan di part 3 ini. Saya akan jelaskan sedikit mengenai flow data yang terjadi. Pertama adalah kita klik datanya di tombol SHOW pada tabel data. Lalu setelah itu muncul data nya di modal, setelah itu kita rubah semua data yang ad di textbox dan klik tombol simpan. Setelah klik tombol simpan, maka data akan di kirim ke Javascript dan di eksekusi langsung dengan method POST. Jika berhasil maka halaman tampil.php akan direct. Jika gagal akan muncul sebuah pesan error.

Membuat Function Button Simpan

Pada tahap awal kita membuat id dahulu pada tombol SIMPAN ( di dalam modal ) dengan Nama btnfinish.

<button  class="btn btn-primary" id="btnfinish" name="btnfinish"  >SIMPAN</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="nobtn()">Close</button>

Tujuan dari saya buat id tersebut adalah agar saat saya klik tombol tersebut, maka di dalam script javascript nantinya akan membaca event id button SIMPAN tersebut saat onclick.

Selanjutnya kita buat event onclick dari id button SIMPAN tersebut. Seperti gambar di bawah ini. Sialahkan copikan saja pada source javascriptnya ya.

$(document).ready(function () { 
          $('#btnfinish').click(function(){
            var nama = $("#txfirtsname").val(); var alamat = $("#txaddress").val(); 
            var pekerjaan = $("#txPekerjaan").val(); var id = $("#txID").val();
                $.ajax({
                    type: "POST", 
                    url: "controller/exec_update.php",
                    data:  "nama="+nama + "&alamat="+alamat + "&pekerjaan="+pekerjaan+"&id="+id,
                    dataType: "JSON",
                    beforeSend:function(){
                          
                    },
                    success: function(data){
                         window.location="tampil.php";
                    },
                    error: function(data)
                    {

                    }           
              });

          });
        }); 

Seperti yang sudah saya jelaskan tadi, bahwa id dari button SIMPAN yang bernama btnfinish, akan melakukan event onclick -> $(‘#btnfinish’).click(function(){ event } . Dimana nati event tersebut akan mengirimkan semua data yang dibutuhkan untuk melakukan edit data. Tentunya dengan menggunakan method POST dan url controller/exec_update.php. Setelah proses tersebut selesai, jika berhasil maka halaman akan melakukan refresh -> window.location=”tampil.php”; .

Membuat file Eksekusi Mysql Query Update di Php File

Pada step terakhir ini kita akan membuat file eksekusi untuk Query update ke database mysql nya. tujuanya adalah agar data dapat berubah otomatis di database. Adapun langkahnya adalah kita buat saja langsung sebuah file bernama exec_update.php dan letakan di dalam folder controller ya.

Jika sudah, maka silahkan copikan Source di bawah ini :

<?php
require_once('../config/config.php');
$query = mysqli_query($CON, "UPDATE datauser
		set  
		nama='$_POST[nama]',Alamat='$_POST[alamat]',Pekerjaan='$_POST[pekerjaan]'
		where id='$_POST[id]'");  
	if($query){
    	echo json_encode(array('message'=>'Data successfully Edit.'));
  	}else{
    	echo json_encode(array('message'=>'Data failed to Edit.'));
  	}
?>

Pada source di atas terdapat script config.php, artinya adalah kita melakukan load koneksi ke database mysql ( lihat part1 untuk penjelasannya ). Setelah itu pada $query disana kita akan melakukan kegiatan atau event yang kita bahas yaitu mysql query update. Akhir dari eksekusi tersebut adalah sebuah response json.

Silahkan anda simpan hasil perubah source tersebut dengan cara tekan di keyboard CTRL+S. Setelah itu anda run kembali aplikasi anda, dan mulailah edit datanya. Jika berhasil, maka halaman akan melakukan refresh.

Modal View saat lekaukan edit pada textbox
List tabel data sebleum dilakukan perubahan mysql query update
Modal View saat lekaukan edit pada textbox
Modal View saat lekaukan edit pada textbox
List tabel data setelah dilakukan perubahan mysql query update
List tabel data setelah dilakukan perubahan mysql query update

Kesimpulan

Demikianlah tutorial kami di part 3 ini, semoga ini bermanfaat bagi anda semua. Jika kalian merasa terbantu dengan artikel yang saya buat. Silahkan kalian share artikel saya ini.

Jika kalian membutuhkan artikel lainnya yang perlu di bahas terkait dunia programing, silahkan coment di kolom komentar ya. Insha allah akan saya buatkan tutorialnya. Terima kasih.