Kita sudah sampai pada proses update, dimana sebelumnya kita sudah membahas tentang mendelete mengguakan ajax jquery disini kita akan mencoba meng updatenya, cara update data menggunakan ajax juery cukup simple, dan hampir sama dengan ketika membuat proses delete, yaitu dimana kita mengambil sebuah atribute yang sudah kita isi dengan data-data apa saja yang kita ingin update, oke bagaimana caranya silahkan teman-teman ikuti terus artikel ini:

Kunci untuk cara update data menggunakan ajax juery terdapat pada data yang ingin kita update terdapat pada sebuah tombol event nya ketika kita ingin mengupdatenya jadi struktur proses updatenya seperti ini:

  1. kita tampilkan di form, data yang ingin di update,
  2. dan tombol berubah jadi tombol update
  3. kita rubah datanya sesuai kebutuhan
  4. lalu kita klik tombol update dan selesai

dan ini adalah tombol updatenya:

cara update data menggunakan ajax juery

bisa dilihat jadi saya memberikan sebuah attribute dimana attribute itu isinya adalah sebuah data yang ingin kita update dan data itu kita tampilkan di formnya, dan untuk prosesnya selanjutnya silahkan teman-teman ketikan seperti ini, di index.php nya:

cara update data menggunakan ajax juery

jadi ini lah cara saya untuk membuat event click nya, jika sudah silahkan teman-teman perhatikan ada app.showUpdateData dimana event itu ketika di klik akan memporses sebuah fungsi showUpdateData jadi kita buat juga showDatanya seperti ini:

cara update data menggunakan ajax juery

Dan ini adalah prosesnya untuk menampilkan data ke formnya, dan yang saya kotak biru itu adalah dimana disini saya membuat sebuah dua tombol yang satu untuk insert yang satu untuk update, dan disini yang update saya hide terlebih dahulu, lalu ketika saya click event showUpdate ini kita block supaya tampil, dan gantian yang insert kita hide.

cara update data menggunakan ajax juery

bisa teman-teman lihat ya tombol update itu saya berikan class updateMurid dan saya hide, seperti gambar di bawah

cara update data menggunakan ajax juery

dan sekarang kita buat event updatenya seperti gambar di bawah ini, dengan nama fungsi app.update

cara update data menggunakan ajax juery

dan ketika saya click tombol proses ajaxnya berjalan dengan cara seperti ini silahkan teman-teman tulis

cara update data menggunakan ajax juery

dan proses itu membawa data, dimana data itu akan di passing ke data.php yang saya buat sebagai web servicenya dengan isi seperti ini:

cara update data menggunakan ajax juery

Yang sudah belajar PHP mungkin tidak kesulitan ya tentang proses web service di atas dan sekarang kita lihat apakah berhasil, disini saya mencoba meng update satu data murid seperi gambar di bawah ini:

cara update data menggunakan ajax juery

cara update data menggunakan ajax juery

Disini berhasil ya, bagaimana dengan teman-teman apakah ada yang berhasil juga, jika tidak bisa tanya pada kolom komentar di bawah ini ya, dan saya rasa cukup sampai disini belajar kita tentang cara update data menggunakan ajax juery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.