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

Buatlah database dengan nama via_ajax. Jika anda belum mengerti cara pembuatan database, silahkan kunjungi artikel berikut XAMPP Talk: How To Make A Database and Table on MySQL. Setelah itu, copykan query SQL berikut kedalam phpmyadmin SQL Compiler.

CREATE TABLE `via_ajax`.`students` (

`name` VARCHAR( 50 ) NOT NULL ,
`number` INT( 9 ) NOT NULL ,
PRIMARY KEY ( `number` ) ,
UNIQUE (

`name`

)

) ENGINE = INNODB;

Query diatas digunakan untuk membuat table students dengan field(nim sebagai primary key dan nama yang unik). Sudah? ok mari lanjut.

4. HTML Coding time

Untuk menggunakan jQuery library pada file jquery.js kita dapat gunakan script berikut.

<script type=”text/javascript” src=”jquery.js”></script>

Tambahkan script HTML berikut kedalam file index.php anda.

<div id=”replaceme”>
<label>Number : </label>
<input type=”text” id=”number”/>
<label>Name : </label>
<input type=”text” id=”name”/>
<input type=”button” onclick=”send()” value=”Submit me via AJAX!”/>
</div>

Dikarenakan kita mengunggah data secara asinkron, maka disini kita tidak menggunakan tag form pada HTML. Yang berbeda lagi dari struktur HTMLnya dengan struktur form yang biasa adalah adanya atribut onclick pada button  dimana onclick ini akan menjalankan fungsi send() ketika button yang bersangkutan diklik.

Berikut adalah deklarasi fungsi send() pada header file index.php

<script type=”text/javascript”>
function send(){
var number = $(document.getElementById(‘number’)).attr(‘value’);
var name = $(document.getElementById(‘name’)).attr(‘value’);
$.ajax({
type: “POST”,
url: “requestme.php”,
data: {
‘number’: number,
‘name’: name
},
dataType: “text”,
success: function(data){
$(“#replaceme”).animate({height: “0”}, 1000, function() {
document.getElementById(“replaceme”).innerHTML = data;
}).animate({height: “100”}, 1000);
}
});
}
</script>

Ehmm.. cukup panjang ya? mari kita bahas satu persatu. Pertama-tama variabel number dan name di-assign dengan nilai yang diambil menggunakan jQuery, dimana pertama kali DOM mengambil element document berdasarkan ID lalu hasil element tersebut dipakai oleh jQuery untuk mendapatkan value dari element tersebut.

$.ajax adalah fungsi HTTP request yang sudah disimplifikasi oleh jQuery sehingga memudahkan kita dalam penggunaannya. Disini saya menggunakan beberapa konfigurasi yaitu type yang mendeskripsikan method pengiriman data, url target file yang akan menerima data, data adalah objek yang berisikan nama variable berikut nilainya dan yang terakhir adalah dataType yaitu jenis data yang akan dikembalikan oleh target file. Sedangkan success  digunakan untuk mendeskripsikan fungsi yang akan dipanggil setelah proses HTTP request selesai dilakukan selesai dengan sukses, fungsi ini biasa dipanggil dengan callback function. Untuk lebih mengenal jauh tentang fungsi $.ajax, silahkan kunjungi link ini.

Didalam callback function  yang didefinisikan diatas, kita menerima nilai balikan dari target file yang ditampung dalam variable data. Lagi-lagi disini kita menggunakan jQuery untuk membuat suatu animasi yaitu pertama-tama menyembunyikan element html dengan ID replaceme setelah disembunyikan, script HTML dalam element tersebut kita isi dengan nilai balikan dari file target, lalu element tersebut diperlihatkan kembali.

Sulit menyatukan potongan script diatas kedalam satu file? Oke silahkan copy saja script complete-nya berikut ini..

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Tutorial AJAX – Submit Form</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
function send(){
var number = $(document.getElementById(‘number’)).attr(‘value’);
var name = $(document.getElementById(‘name’)).attr(‘value’);
$.ajax({
type: “POST”,
url: “requestme.php”,
data: {
‘number’: number,
‘name’: name
},
dataType: “text”,
success: function(data){
$(“#replaceme”).animate({height: “0”}, 1000, function() {
document.getElementById(“replaceme”).innerHTML = data;
}).animate({height: “100”}, 1000);
}
});
}
</script>
</head>
<body>
<div id=”replaceme”>
<label>Number : </label>
<input type=”text” id=”number”/>
<label>Name : </label>
<input type=”text” id=”name”/>
<input type=”button” onclick=”send()” value=”Submit me via AJAX!”/>
</div>
</body>
</html>

5. PHP Coding time

Isikan file requestme.php dengan script berikut:

<?php
include “config.php”;
$number = $_POST[‘number’];
$name = $_POST[‘name’];
mysql_select_db(“via_ajax”, $con) or die(“Databasenya Error”);

$query = mysql_query(“INSERT INTO students VALUES (‘$name’,’$number’)”);
if($query)
{
echo “You’ve succesfuly insert a student($number – $name) to database via AJAX!”;
}
else
echo “Something wrong with database, try again..”;
mysql_close($con);
?>

Pada target file ini, pertama kali server mengeksekusi file config.php untuk membuat koneksi dengan database, setelah itu server mengambil data yang dikirimkan melalui AJAX. Difungsi mysql_select_db ini server memilih database yang akan dijadikan tujuan. Lalu dengan fungsi mysql_query server memasukan data yang dikirimkan tadi kedalam tabel students. Jika proses insert berhasil, maka server akan mengembalikan kalimat “You’ve succesfuly insert a student($number – $name) to database via AJAX!” dimana $number dan $name adalah variable yang sudah didefinisikan diatas. Jika proses insert gagal, maka server akan mengembalikan kalimat “Something wrong with database, try again..”

Sudah selesai dengan stuff diatas? Jika sudah, saatnya melakukan pengujian.. Buka halaman web ini http://localhost/tutorialajax_submitform/, isikan data yang diminta, lalu tekan tombol “Submit me via AJAX!”. Lihat apa yang terjadi. Jika status berhasil dikembalikan oleh server, periksalah database anda melalui phpmyadmin dan pastikanlah data yang anda inputkan terdapat disana.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

2 thoughts on “AJAX Talk : Submitting form on the fly

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s