AJAX Talk : Submitting form on the fly

Pernahkan anda mengalami kesulitan dalam mengunggah form secara asinkron? Jika pernah, google tidak salah membawa anda ke halaman blog ini. 🙂

Terdapat banyak cara untuk memecahkan masalah tersebut, salah satunya dengan menggunakan AJAX(Asynchronous JavaScript and XML). Apakah istilah tersebut terdengar asing ditelinga teman2? Jika iya, silahkan ikuti dulu tutorial AJAX Talk: Simple XML HTTP Request Object Implementation. Jika sudah berkenalan dengan si AJAX(baca: ayaks) mari kita coba tutorial berikut ini.

1. Starter

Tutorial ini saya buat mengharuskan anda untuk membuat webserver local. Jika anda belum menginstalnya silahkan instal terlebih dahulu. Saya anjurkan anda menggunakan XAMPP. Silahkan lihat tutorialnya disini XAMPP Talk: How to instal XAMPP. Jika sudah menginstal, buatlah folder tutorialajax_submitform pada c:\xampp\htdocs. Buatlah juga beberapa file berikut:

  1. index.html digunakan sebagai homepage. Dimana kita akan membuat halaman ini sebagai halaman utama.
  2. config.php digunakan untuk mengkonfigurasi koneksi database.
  3. requestme.php file ini akan kita gunakan sebagai target file yang akan menerima hasil submit dari form yang ada di homepage secara asynchronous.
  4. jquery.js ini adalah jQuery library. Salah satu fungsi yang kita gunakan adalah $.ajax yang akan membantu kita dalam mengirikan form.

2.  Download jQuery Library

Jika anda belum mempunyai jQuery Library, silahkan download disini. Copy semua scriptnya dan paste pada file jquery.js. Jangan lupa untuk menyimpan file tersebut.

3. Membuat database

Continue reading

Advertisements