February 14th, 2008
Membuat form dengan AJAX
Membuat form adalah hal biasa dalam sebuah pemograman web. Dan AJAX, sebagai metode yang baru-baru ini mencuat ke permukaan, menjadikan dunia web lebih beragam dan lebih dinamis. Perlu diingat, tutorial ini menggunakan bahasa pemrograman PHP.
AJAX, bukanlah sebuah bahasa sendiri. Dia hanya sebuah metode bagaimana mengirimkan data-data yang ada di sebuah form ke server tanpa melalui proses refresh. Prosesnya sendiri dikendalikan oleh browser lewat pintu belakang. Dan sebelum adanya JQuery, AJAX adalah hal yang cukup rumit diwujudkan. Ketika JQuery muncul, AJAX cuma seujung jari kelingking. Hehe… :D
HTML Form dengan CSS
Untuk mempersingkat waktu, saya tidak akan membahas HTML Form dan CSS. Karena fokus kita saat ini adalah di bagian Javascript, dan sedikit bagian server. Untuk itu, halaman HTML Form dan CSS bisa di download sendiri.
[Download HTML Form, CSS dan Loader image]
Sebagai preview HTML Form-nya yang akan kita bahas di tutorial ini, bisa dilihat di kode di bawah ini:
[source:html]
<div id=”contactform”>
<h2>Contact Form</h2>
<form name=”frm” action=”#” method=”post”>
<div class=”form-item”>
<label>Your Name*</label>
<input type=”text” name=”txtname” />
<br class=”clear” />
</div>
<div class=”form-item”>
<label>Email Address*</label>
<input type=”text” name=”txtemail” />
<br class=”clear” />
</div>
<div class=”form-item”>
<label>Website</label>
<input type=”text” name=”txtwebsite” />
<br class=”clear” />
</div>
<div class=”form-item”>
<label>Messages*</label>
<textarea name=”txtmessages” rows=”10″ cols=”40″></textarea>
<br class=”clear” />
</div>
<br class=”clear” />
<input type=”button” class=”submit” name=”cmdsubmit” value=”Submit” />
</form>
</div>
[/source]
Langkah pertama, tambahkan JQuery line
Buka file index.html yang sudah anda download, dan tempatkan kursor anda di antara tag <head>, dan tambahkan baris yang sangat wajib jika ingin menggunakan JQuery seperti di bawah ini:
<script src="jquery.js" type="text/javascript"></script>
Langkah kedua, mulai berkreasi dengan JQuery
Setelah menambahkan baris wajib, sekarang kita butuh menambahkan baris ini. Ini juga hal yang wajib ketika menggunakan JQuery.
[source:html]<script type="text/javascript">[/source]
$(document).ready(function() {
// ... start jquery from here
}
</script>
Bentuk umum JQuery sendiri adalah seperti ini: $(nama_objek).properti(); Nama objek, hampir sama ketika kita memperlakukan objek HTML di CSS.
$(document).ready(function() { ... }); adalah sebuah kode yang mengecek apakah sebuah halaman sudah siap untuk dikomandoi kode JQuery.
Langkah ketiga, Validasi Form
Sebelum mengirimkan dokumen, akan lebih baik jika kita memvalidasi masukan dari user terlebih dahulu. Hal ini untuk menghindari kesalahan ketika data akan diproses. Tapi tentu saja hal ini tidak akan berguna, ketika Javascript di browser user dimatikan. Dan saya sekarang ini tidak membahas tentang browser yang tanpa javascript.
Sebagai awalnya, kita akan memeriksa apakah tombol submit sudah di klik.
[source:javascript]$("input[@name=cmdsubmit]").click(function() {[/source]
return false;
});
$("input[@name=cmdsubmit]") berarti, mencari sebuah tag input, yang mempunyai nama cmdsubmit. Ini tentunya bisa dimodifikasi menyesuaikan dengan form yang dibuat. Kata kunci click berarti menunggu sampai objek di klik. Penggunaan return false; dimaksudkan untuk tidak dulu mengirimkan data.
Validasi kosongnya inputbox
[source:javascript]$("input[@name=cmdsubmit]").click(function() {[/source]
// Telusuri semua objek inputbox
var i = 0;
$("input[@type=text]").each(function() {
if($(this).val() == "") {
alert($(this).attr("name") + " Ngga boleh kosong");
return false;
}
else i++;
});
if(i==3) {
alert("Validasi berhasil");
}
});
Penjelasan
Logika sederhananya, di form yang sudah saya sediakan terdapat 5 objek, yang terdiri dari 3 Input berupa teks, 1 Textarea, dan 1 tombol submit. Nah, untuk belajar memvalidasi awal, maka semua input berupa text wajib diisi.
Karena kita punya 3 input berupa teks, maka kita bisa menelusuri satu persatu objek tersebut dengan kata kunci each di JQuery seperti di bawah ini:
[source:javascript]$("input[@type=text]").each[/source]
Karena objek yang bertipe teks ada 3, maka kita dimungkinkan mengakses 1 persatu objek dengan properti each. Setelah dapat mengakses objek masing-masing, kita sekaligus mengecek, apakah objek tersebut masih kosong dari isian user dengan baris kode di bawah ini:
[source:javascript]if($(this).val() == "")[/source]
Objek $(this) merujuk ke objek yang sedang di akses oleh JQuery. Properti val() berarti mengakses isi dari objek tersebut. Ketika kondisi di atas benar (yaitu, ketika isian objek teks kosong), maka kita bisa mengeluarkan peringatan dengan perintah alert. Dan perintah return false; berarti kita keluar dari peng-aksesan tiap objek teks. Ini demi meringankan beban kerja browser yang user pakai.
[source:javascript]alert("Semua ngga boleh kosong");[/source]
return false;
Sedangkan variabel i, adalah variabel penunjuk yang bisa memberitahukan kita, apakah semua form sudah di isi. Buktinya, di luar properti each, kita bisa mengecek, apakah variabel i sudah mengakses sebanyak 3 objek input teks.
[source:javascript]if(i==3) {[/source]
alert("Validasi berhasil");
}
Untuk sementara ini, segini dulu tutorialnya. Besok-besok di lanjut. Sudah malam ini. Mau tidooor…
Saya sendiri gag tau, apakah yang baca ngerti apa ngga. Tapi saya sudah berusaha untuk menggunakan bahasa manusia yang sebenar-benarnya. Kalau memang masih ada yang ngga ngerti, berarti itu salah saya. Ternyata saya belum bisa menjadi seorang manusia… :p
Lihat Demonya aja deh kalo gag ngerti.
23 Responses
ada yg tau plugin bagus buat code gag sih?
ini kok bermasalah mulu yak!
*beginner*
plugin? gak tau :)
tapi cuma mau komentar aja soal wordpress blog nya. bagus jugaaa…
gimana nih kehidupan berkeluarga? asoy geboy yaaa… hehe!
:D programer for hire
Ooo gitu….
Dats, bisa ga belajar Ajax dari JQuery langsung tanpa harus tau Ajax terlebih dahulu?
Mo belajar, tapi blom dapet referensi yang pas nih :(
#5 BISA!
Situs2 referensi JQuery banyak kok. Tapi yang bahasa inggris. Buat elu gag masalah kan?
sip lah kalo gitu :D
*semangat.. mulai gugling*
ko ga bs d download????
#8 duh, maap…
sekarang udah bisa…
Wah G Ada Yang Lenih Keren Ta?
Untuk memudahkan belajar posting jquery sebenarnya lebih baik menggunakan plugin yaitu jquery.form (www.malsup.com/jquery/form/)
menurut saya kurangggg jelassssssssssssss
bingung euy!!!bisa jelasin lagi ga?lbih jelas!!!
assalamuallaikum
saya baru belajar framework codeigniter and sekarang baru otak ati MVC di codeigniter … tapi aku masih bingung apa itu ajax and jquery, soalnya baru belajar sih masih banyak yang belum tahu.. mohon infonya ya bang.. apa sih hubungan antara codeigniter and jquery, trimakasih
@Krida : hmm…kalo codeigniter itu…framework buat PHP,, sedangkan kalo jquery itu framework buat javascript…kalo ditanya hubungannya…gak ada hubungannya..tapi bisa digabungkan…
@author : wahh…koq gw lebih sreg sama mootools yaa daripada sama jquery…coba mootools deh..lebih rapi…abis itu..enak…dikasih demonya…jadi kita bisa liat codingnya dari demo itu…
Thanks infonya om, btw kok linknya tidak bisa didownload y..
Bahasanya enak di baca kok Mas, sip jadi sedikit faham mengenai konsep jQuery ini.
Makasih infonya
mas ini bisa di adopsi buat blog ga ? thx
Mantap dah
bukannya udah ada plugins nya dat ?
asik…jadi semangat koding lagi…
kok g bisa didownload bro???
Pak Didats… kontak email langsung kmana yah… mo tanya2 langsung…,, info blk yup pliz…