Untuk kali ini akan membahasa seputar membuat element html yang kita punya dimana ketika kita ingin mengedit biasanya ada sebuah tombol edit, dan disini kita akan coba membuat edit data tersebut tanpa menggunakan sebuah tombol edit, yang mana biasanya ketika kita menekan tombol edit akan muncul sebuah form, disini kita akan mencoba meringkasnya jadi tidak perlu menekan tombol, tetapi kita langsung mengklik 2x lalu tampilan form pun akan tampil, seperti apa simak terus ya teman-teman.

Untuk artikel ini merubah element html ke form kita akan focus ke perpindahan antara tampilan dan menampilkan form untuk mengeditnya, sebenarnya nantinya kami akan melanjutkan proses updatenya, karena data yang di tampilkan juga dari database, tidak salah jika saya sekalian untuk mengeditnya, oke cara ini kami dapatkan dari youtube weblesson ya.

Oke kita lanjutkan sebenarnya cara ini cukup simple, dimana sebenarnya kita menampilkan dua tampilan, dimana tampilan pertama ada tampilan utama yang bukan form edit, dan tampilan form editnya, jadi yang tampilan form edit tersebut kita sembunyikan terlebih dahulu, lalu ketika kita double click, baru tampilan form edit akan tampil, dan tampilan utama kita hide, langsung saja silahkan teman-teman lihat kodingan di bawah ini:

templatenya seperti ini, lalu karena kami menggunakan database, maka proses phpnya seperti ini

dan disini saya membuat database id, nama, alamat, dan nomot telephone, sudah bisa ya, jika teman-teman punya database lain juga bisa langsung di sesuaikan saja. Oke lanjut sekarang kita masuk ke dalam proses jQuernya untuk proses pergantian templatenya

Seperti yang saya tulis di atas, caranya cukup simple ya, kita tinggal memainkan hide dan show untuk mengeditnya, jika teman-teman coba maka hasilnya akan seperti ini

Cara Merubah Element HTML ke Form Untuk Mengedit Cara Merubah Element HTML ke Form Untuk Mengedit

Untuk materi dapat mengklik judul materi tersebut yah.

Bisa dilihat maka ketika kita double click form untuk mengedit akan tampil seperti gambar di atas, oke saya rasa untuk proses DOMnya cukup sampai belajar kita tentang Cara Merubah Element HTML ke Form Untuk Mengedit disini semoga bermanfaat dan selanjutnya kita akan coba melanjutkan proses updatenya.

WhatsApp chat