Tutorial Submit Form berbasis Ajax

Kebanyakan tutorial PHP form di website ini menggunakan teknik submit biasa. Kali ini, kita akan membahas tkenik submit form berbasis Ajax dengan jQuery. Kelebihan teknik ini adalah lebih cepat dan terasa nyaman dilihat dari sisi user.  Untuk tutorial kali ini, kita akan membuat halaman kritik saran dengan kolom email dan isi pesan. Tampilan halamannya seperti di screenshoot.

Saat user menekan tombol submit, halaman mengirim data dibelakang layar dan jika sukses, maka akan muncul pesan “Pesan telah kami Terima, Terimakasih!”.

Rancangan Tabel

CREATE TABLE IF NOT EXISTS `kritik` (
  `idkritik` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(50) NOT NULL,
  `isi` varchar(250) NOT NULL,
  PRIMARY KEY (`idkritik`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Kode Form HTML

Kode ini cukup sederhana, hanya terdiri dari satu input dan satu textarea.

<h2>Masukan kritik dan saran </h2>

<div id='kirim-ok'></div>

  </div>

<form id='form1' method='POST'  action='simpan.php'>

   <label for="email">Email</label>
  <input id='email'  class="u-full-width"  name='email'  	  type="email" placeholder="[email protected]" >

  <label for="exampleMessage">Message</label>

	  <textarea id='isi' class="u-full-width" name='isi'  placeholder="Hi Bro …" ></textarea>

  <input class="button-primary" type="submit" value="Submit">
</form>

Perhatikan untuk form, email dan textarea harus punya id. ID ini nanti dipanggil oleh jQuery saat di submit.

Kode jQuery submit

<script>
/* attach a submit handler to the form */
	$("#form1").submit(function(event) {

		/* stop form from submitting normally */
		event.preventDefault();

		/* get some values from elements on the page: */
		var $form = $(this), url = $form.attr('action');
	/* kode utuk mengirim data lewat POST menggunakan jQuery */
		var posting = $.post(url, {
			email : $('#email').val(),
			isi : $('#isi').val()

		});

		/* jika posting sukses, tambahkan pesan ke div kirim-ok */
		posting.done(function(data) {
			$("#kirim-ok").append(data);

		});
	});
</script>

Letakan kode ini dibawah form. Untuk lebih jelasnya lihat komentar kode.

Kode disisi Server

Pemrograman berbasis Ajax membebaskan anda untuk mengimplementasikan kode. Anda bisa menggunakan PHP,Ruby ataupun Java. Namun karena saya bisanya PHP ya saya buat kode simpan data di server dengan PHP.

error_reporting(0);
if ($_POST) {
/* koneksi database */
mysql_connect('localhost','root','');
mysql_select_db('candralab');

	$email = $_POST['email'];
	$isi = $_POST['isi'];
	$sql = "insert into kritik(email,isi)
		values('$email','$isi')";
	$result = mysql_query($sql) or die(mysql_error());	

	if ($result):
		echo "Pesan Telah kami terima, terimakasih!";
	else:
		echo " Maaf, pesan gagal dikirim, silahkan ulangi lagi!";
	endif;	

} //end $_POST

Simpan data yang dikirimke mysql, jika suskses, kirimkan kembali “pesan telah kami terima dst”. Jika gagal kirimkan pesan ” Maaf, pesan gagal dikirim dst”.

Source code

bagi yang ingin mencoba sendiri, silahkan download kode lengkapnya disini. Jangan lupa baca README.TXT setelah anda mengektrak file zipnya.