Ionic 6 CRUD PHP MySQL

Update Data
 Persiapan

Node JS versi 18.12.0

NPM versi 18.19.2
Ionic versi 6.20.3
 Cek Versi
Cek versi Node JS
node -v atau node --version
Cek versi NPM
npm -v atau npm --version
Cek versi Ionic
ionic -v atau ionic --version
 END POINT UPDATE DATA

Catatan: perhatikan penulisan query update data!

 END POINT GET ONE DATA

Catatan: perhatikan penulisan query get one data data!

 Buat Halaman Baru
Untuk membuat halaman baru bisa mengetikkan sintaks berikut pada
terminal/command prompt.

ionic generate page update-penduduk

 Tampilan Update

Pilihan Ubah dan Hapus akan muncul setelah Nama Penduduk di geser ke kiri
Tampilan Halaman Update
Halaman disamping adalah
halaman ubah data penduduk,
terdiri dari tiga label, tiga input
teks dan satu tombol ubah.
Sumber kode bisa dilihat pada
slide berikutnya!
Form Update Data
Cari file update-
penduduk.page.html
di folder src -> app ->
update-penduduk,
kemudian modifikasi
seperti kode
disamping
Buat Fungsi API Service getOnePenduduk()
Cari file api.service.ts di folder
src -> app, kemudian
modifikasi seperti kode
disamping.
fungsi getOnePenduduk()
dibuat untuk bisa mengakses
end point get_one_penduduk.php
dengan satu parameter, yakni
id
Buat Fungsi API Service updatePenduduk()
Cari file api.service.ts di folder
src -> app, kemudian
modifikasi seperti kode
disamping.
fungsi updatePenduduk()
dibuat untuk bisa mengakses
end point update_penduduk.php
dengan 2 parameter, yakni id
dan data
Update
Cari file update-penduduk.page.ts
di folder src -> app -> update-
penduduk, kemudian modifikasi
seperti kode disamping:
Buat Fungsi
getOnePenduduk()
Cari file update-penduduk.page.ts
di folder src -> app -> update-
penduduk, kemudian tambahkan
fungsi getOnePenduduk() dibawah
fungsi ngOnInit()
Buat Fungsi
updatePenduduk()
Cari file update-penduduk.page.ts
di folder src -> app -> update-
penduduk, kemudian tambahkan
fungsi updatePenduduk() dibawah
fungsi getOnePenduduk()
 Routing Halaman Update Penduduk
Cari file app-routing.module.ts di
folder src -> app, kemudian
modifikasi seperti kode berikut.

Catatan: perhatikan penomoran

pada setiap baris kode
Terima Kasih !