Form input data biasa, penulisannya sebagai berikut :
nah setelah disubmit biasanya akan page akan langsung tertuju pada
page target dari form tersebut (pada contoh adalah “postkary.php”. kali
ini kita akan membuat suatu form yang proses input datanya di belakang
layar dan halaman tidak perlu pindah.
Untuk membuat proyek form dinamis, kita akan menggunakan jquery.
dalam hal ini kita perlu untuk mengetahui dasar-dasar penggunaan
javascript.database yang kita gunakan adalah mysql.
Langkah awal kita download terlebih dahulu JQuery disini kemudian kita buat database baru bernama “plearning” dimana field-fieldnya adalah sebagai berikut :
CREATE TABLE IF NOT EXISTS `karyawan` ( `nip` varchar(10) NOT NULL, `nama` varchar(30) NOT NULL, PRIMARY KEY (`nip`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Lalu kita akan membuat suatu form input dengan desain untuk karyawan.php sebagai berikut :
pada gambar diatas terdapat 2 input data yaitu nip dan nama, script untuk form adalah sebagai berikut :
Pada kode diatas terlihat bahwa form akan mensubmit data ke
postkary.php dan kemudian postkary.php akan submit data ke database yang
telah kita buat. script untuk postkary.php sendiri adalah sebagai
berikut :
input data error!'. mysql_error()); echo 'Input data berhasil!'; ?>
Pada kode postkary.php diatas terlihat bahwa berisi script-script untuk input data kedalam database.
Secara umum dengan kedua file ini sudah dapat menginputkan data,
alurnya adalah ketika kita mengeksekusi karyawan.php dan mensubmitnya
maka akan memanggil postkary.php dan akan meload file tersebut, sekarang
kita akan mengubahnya supaya submit data dilakukan dibackground dan
mengambil nilai output dari postkary.php untuk ditampilkan di
karyawan.php sehingga tidak perlu transisi halaman.
Untuk membuat suatu web yang interaktif, kita gunakan jquery. caranya
adalah dengan mengexport script jquery ke dalam karyawan.php, tempelkan
script berikut pada tag <head> :
Perhatikan untuk path jquery sesuaikan dengan tempat dimana anda
menyimpannya. Kemudian dibawah tag <form> yang sudah kita buat
tadi, kita buat tag <div> yang berfungsi untuk menempelkan hasil
output dari submitting postkary.php, berikut adalah scriptnya :
Setelah itu kita akan membuat dan menggantikan event handler
untuk proses submit form sehingga nantinya ketika submitting form akan
mengeksekusi script yang telah kita buat, berikut ini adalah scriptnya :
Dari script diatas dapat kita lihat bahwa form tersebut telah
dihandler untuk proses submittingnya. apabila telah benar maka hasilnya
adalah sebagai berikut :
Apabila anda masih merasa kesulitan, berikut saya lampirkan file projectnya.anda dapat mendownloadnya disini.
Demikian tutorial ini semoga bermanfaat bagi teman-teman sekalian.
0 komentar:
Posting Komentar