Technology, blog, programming, tutorial
Belajar Javascript lebih lanjut dengan JQuery (2)
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.
Daftar sekarang juga untuk cara gampang dapat uang lewat blog
ada yg tau plugin bagus buat code gag sih?
ini kok bermasalah mulu yak!
*beginner*