Tutorial AJAX : Load Halaman dan Submit Form Dengan AJAX Menggunakan jQuery

Sampai 2 hari ke depan, saya akan ngebut untuk membuat siakad (sistem akademik) perwalian untuk di kampus tercinta. Gara-gara kurikulum baru, otomatis semua mata kuliah berubah dan ada beberapa yang dikonversikan. Mau gak mau, sistem perwaliannya juga berubah karena di semester depan sudah mulai ada penjurusan. Nah, di sistem perwalian yang baru ini saya akan menerapkan konsep full AJAX dengan bantuan jQuery. “Kenapa pakai AJAX?”. Yaw biar servernya tidak jeblok pas diakses oleh ratusan mahasiswa yang lagi KRS’an bareng. Pada postingan kali ini, saya akan menjelaskan sedikit bagaimana penerapan konsep load halaman dan submit data dari form dengan menggunakan AJAX, tentunya tanpa memanggil keseluruhan halaman dari awal lagi. Hitung-hitung nambah postingan tentang AJAX di blog kesayangan saya ini :D.

1. Di jQuery, terdapat fungsi load() untuk memanggil halaman. Dimana fungsi load() ini mempunyai 3 parameter, yaitu :

load(url, params, callback)

Keterangan :

  • url (String): Alamat url dari file yang akan di load
  • params (Object): Data yang akan dikirimkan ke server
  • callback (Function): Fungsi yang akan dipanggil ketika data berhasil di ambil dari server

2. Dan penggunaannya dalam sebuah halaman html, kira-kira seperti di bawah ini :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
	$('#loading').ajaxStart(function(){
		$(this).fadeIn();
	}).ajaxStop(function(){
		$(this).fadeOut();
	});

	$('#menu a').click(function() {
		var url = $(this).attr('href');
		$('#content').load(url);
		return false;
	});
});
</script>
  • #menu a adalah id dari link yang akan memanggil halaman sesuai URL ketika di klik
  • #content adalah sebuah kanvas dimana halaman yang dipanggil akan ditempatkan
  • var url = $(this).attr(‘href’) akan memberikan informasi bahwa ketika tag html dengan atribut href di klik, maka halaman akan dipanggil dan ditempatkan di tag #content.

3. Syntax html untuk memanggil halamannya, seperti di bawah ini :

	<div id="menu">
		<a href="isi.php?modul=home"><div id="bg-menu">Beranda</div></a>
		<a href="isi.php?modul=about"><div id="bg-menu">Tentang Saya</div></a>
		<a href="isi.php?modul=guestbook"><div id="bg-menu">Guestbook</div></a>
		<a href="isi.php?modul=hubungi"><div id="bg-menu">Hubungi Saya</div></a>
	</div>

4. Agar terlihat lebih keren, jangan lupa untuk menambahkan animasi loading dengan syntax d bawah ini :

<div id="loading" style="display:none"><img src="images/loading.gif" /><br />Mohon tunggu. Data sedang dimuat.....</div>

Langkah-langkah di atas, bertujuan untuk memanggil halaman dengan fungsi load() yang dimiliki oleh jQuery. “Lantas bagaimana caranya mengirimkan data dari form/submit form dengan jQuery?”. Prinsipnya sama saja dengan cara di atas, hanya saja sekarang kita akan memanfaatkan fungsi post() yang sudah disediakan oleh jQuery. Berikut penerapannya :

1. Karena data yang di kirimkan melalui form, maka semua kolom inputan harus valid. Disini juga saya menambahkan fungsi dari jQuery untuk melakukan validasi :

<script type="text/javascript" src="js/jquery.validate.min.js"></script>
 <script type="text/javascript">
	$(document).ready(function(){
		$("#formkirim").validate({
			debug: false,
			rules: {
				nama: "required",
				pesan: "required",
				email: {
					required: true,
					email: true
				}
			},
			messages: {
				nama: " * Masih kosong",
				email: " * Tidak Valid",
				pesan: " * Masih Kosong",
			},
			submitHandler: function(form) {
				$.post('isi.php?modul=kirim', $("#formkirim").serialize(), function(data) {
					$('#content').html(data);
				});
			}
		});
	});
</script>

2. Jangan lupa untuk membuat form yang akan mengirimkan data-data yang diinputkan user :

<form method="post" id="formkirim" name="formkirim" action="">
<table width="100%" cellpadding="5">
<tr><td valign="top">Nama</td><td><input type="text" name="nama" class="input" size="50"></td></tr>
<tr><td valign="top">Email</td><td><input type="text" name="email" class="input" size="50"></td></tr>
<tr><td valign="top">Pesan</td><td><textarea name="pesan" class="input" rows="8" cols="50"></textarea></td></tr>
<tr><td></td><td><input type="submit" value="Kirim Pesan" class="tombol"></td></tr>
</table></form>
<div id="content" style="display:none"></div>

3. Sekarang kita buat halaman prosesnya. Nah, karena saya menggunakan sistem modul untuk menghemat penggunaan file, maka kita sisipkan beberapa baris syntax php untuk menampilkan hasil yang dikirmkan oleh user :

else if($_GET[modul]=='kirim')
{
echo "Pesan anda Terkirim...!!!<br>";
echo "Nama : ".$_POST[nama]."<br>";
echo "Email : ".$_POST[email]."<br>";
echo "Pesan : ".$_POST[pesan]."<br>";
}

Mau tau hasil jadinya? Dibawah postingan ini sudah saya sediakan link demo dan link untuk men-download file jadinya. Semoga bisa membantu rekan-rekan yang sedang belajar AJAX dengan jQuery.

Happy Blogging and Keep Coding

Cheerrrsssโ€ฆ.!!!!

Download Aplikasi

19 comments

  1. newbie_webie Reply

    saya mau tanya deh kalo form itu saya masukin di blog data datanya itu dikirim kemana ya? saya ga punya website cuma punya blogger aja.

    mohon bantuannya ya ๐Ÿ™‚

  2. awan Reply

    mas… kalo maw buat form yang ngirim file image/upload
    ntuh gimana yah?…
    tolong ya mas..
    tanks

  3. anto Reply

    mas bagaimana caranya untuk load halaman yg berisi data yg dlempar pada data sebelumnya ? mohon bantuannya mas.. newbie nih ๐Ÿ˜€

  4. Heru Reply

    Bro..sip sukses terus..mau tanya bro..caranya submit saling berkaitan..jadi setelah kita submit form 1 kemudian form berikutnya muncul..sampai seterusnya..gmn caranya ya bro??thanks

  5. budi Reply

    mas untuk masuk ke admin pada PSB yang mas bikin apa ya username ama passwordnya mohon bantuannya mas

  6. menu dropdown dan form pencarian Reply

    brow mau tanya ne…
    sy lg coba buat program dengan menu utama menggunakn dropdown sintax yg dipake memanggil form

    waktu dihalam from ada tombol pencarian…..
    pas dipanggil formnya datanya tampil tp pas dilakukan pencarian datanya jd kosong
    di addres barx wktu
    lood pertama tampilkaya gini http://localhost/siakad/menu.php?page=Mahasiswa/TampilMhs.php (data tapil
    lood pencarian kaya gni http://localhost/siakad/menu.php?search='Ali'&submit=CARI (data tidak tampil)
    talong kasi solusix………..orang gaptek ne mas jd butuh pencerahann thanks sblmx

  7. ajo Reply

    mas saya mau tanya…ketika saya menambahkan script untuk menampilkan google map di isi.php ex : di module tentang saya, dan ketika dijalankan peta nya gak mau nampil ya..n untuk zoom photo yang ada juga menggunakan lib jquery jga gak mau jalan zoom photonya.. solusinya gimana tu mas?

    • Gede Lumbung Post authorReply

      itu ketika load file aboutnya (onLoad event), jangan lupa untuk memanggil fungsi google map untuk menjalankan petanya

  8. mizu Reply

    bro…gimana cara buat form untuk buat akun baru..jadi waktu user dah siap isi field username dan mau isi field lain..field bagian username langsung nampilin validasi (username udah ada atau belum)

  9. Cahaya Hijau Pandan Okaya Reply

    kerennnn isi blog nya. ini baru blog yg ga kacang-kacangan. Sangat bermanfaat