Script Ajax Sederhana menggunakan jQuery

AJAX adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dipanggil ulang hanya untuk mengganti sebagian kecil dari isi halaman.

Terimakasih kepada framework jQuery, proses development ajax bisa menjadi lebih mudah.
Salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), yang memiliki 3 buah parameter sbb:

load(url, params, callback)

keterangan:

• url (String): URL dari file html yang akan di load
• params (Object): Data yang akan dikirimkan ke server (optional)
• callback (Function): Fungsi yang akan dijalankan ketika data berhasil di load (optional)

Contoh penggunaan pada sebuah link:

1 2 3 4 5

$(document).ready(function() { $('#link').click(function() { $('#container').load('content.php'); }); });

keterangan:

• link adalah id dari link/tombol yang akan diklik
• container adalah id dari element yg akan memuat isi dari script content.php

Contoh penggunaan yang lebih dinamis (dengan mengambil nilai dari attribute href) :
Misalnya ada sekumpulan link di dalam sebuah div

1 2 3 4 5 6 7 8

<div id="menu"> <ul> <li><a href="content.php?id=1">Menu 1</a></li> <li><a href="content.php?id=2">Menu 2</a></li> <li><a href="content.php?id=3">Menu 3</a></li> <li><a href="content.php?id=4">Menu 4</a></li> </ul> </div>

Tanpa penambahan script, link-link tersebut akan diproses sebagai link biasa.
Supaya semua link-link tersebut bisa diproses dengan ajax, tambahkan script sbb:

1 2 3 4 5 6 7

$(document).ready(function() { $('#menu a').click(function() { var url = $(this).attr('href'); $('#container').load(url); return false; }); });

Untuk lebih jelasnya silakan lihat demo:
Demo AJAX

Anda bisa mendownload source code nya di sini:

Validasi Form Menggunakan jQuery Validation Plugin

jQuery Validation adalah sebuah plugin jQuery yang berfungsi untuk mempermudah validasi form client-side. Cara penggunaannya adalah dengan memanggil script jquery dan jquery-validate di dlm kode html anda (biasanya diletakkan di bagian head) :

1 2	<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>

Ketikkan script validate nya:

1 2 3 4 5

<script type="text/javascript"> $(document).ready(function() { $("#myForm").validate(); }) </script>

Di mana myForm adalah id dari form yg akan divalidasi.

1	<form id="myForm" method="post">

Kemudian di bagian input yg akan kita beri validasi tambahkan class=”required”

1 2 3 4

Nama: <input type="text" name="nama" class="required" /> Alamat: <input type="text" name="alamat" class="required" />

Jika field masih kosong, kemudian kita tekan tombol submit, maka akan muncul peringatan bahwa field tsb harus diisi, dan form tidak akan di submit.

Pesan yang muncul di sebelah kanan input “This field is required.” itu adalah pesan default. Pesan tersebut bisa kita ganti dengan menambahkan attribute title di input, misalnya:

1	<input type="text" name="nama" class="required" title="Nama harus diisi" />

Maka pesan akan berganti menjadi pesan anda sendiri.

Validasi menggunakan jQuery Validation Plugin juga bisa diterapkan di semua jenis input, seperti radio button, checkbox, textarea, select option, dan lain-lain. Anda juga bisa menambahkan validasi yang lebih kompleks, seperti pengecekan alamat email, pengecekan URL, pengecekan jumlah minimal & maksimal karakter, pengecekan jenis file yang akan di upload, dan lain-lain.

Demo Validasi Form

Anda bisa mendownload source code nya di sini:

Downloaded a total of 1925 times

CATATAN: Validasi form menggunakan javascript/jQuery hanya berguna untuk mempermudah proses pengisian form, namun tidak akan melindungi aplikasi web anda. Untuk keamanan yang lebih baik, anda tetap harus menambahkan validasi secara server-side.