Pada tutorial kali ini saya akan membahas integrasi Framework JQuery dengan ASP.NET Web Form.
Apa itu Jquery ?
JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien. JQuery mempunyai semboyan yaitu ‘Write Less Do More’, maksudnya dengan mengunakan JQuery maka penulisan program akan menjadi lebih singkat daripada membuat javascript dari awal.
Bagaimana Menggunakan JQuery pada ASP.NET
Untuk menggunakan JQuery anda dapat mendownload Library JQuery pada http://jquery.com. Saat ini versi terbaru dari JQuery adalah 1.4. Ada 2 macam Library JQuery yang dapat didownload yaitu :
- jquery-1.3.2.js: Library ini lebih ditujukan untuk fase development. File ini berisi kode javascipt yang tidak terkompres sehingga ukuran filenya lebih besar. Karena tidak terkompres maka lebih mudah bagi developer untuk membaca dan mempelajari fungsi-fungsi JQuery.
- jquery-1.3.2.min.js : Library ini lebih ditujukan untuk fase production. Jadi library tipe ini sudah dicompile / dikompres sehingga ukurannya menjadi kecil, tapi sudah tidak bisa dibaca lagi.
- Visual Studio 2008 SP1 juga mendukung ‘intellisense’ untuk mengetikan kode-kode JQuery untuk menambahkan fasilitas ini pada Visual Studio anda harus menambahkan file jquery-1.3.2-vsdoc2.js yang juga dapat anda downlod pada http://jquery.com.
Menggunakan JQuery Pertama Kali pada Visual Studio
1. Buat website baru dengan memilih File → New Website → ASP.NET Website, kemudian beri nama ‘LatihanJQuery1’.
2. Tambahkan folder ‘lib’ kedalam aplikasi anda, kemudian tambahkan pula library jquery-1.3.2.js dan jquery-1.3.2.min.js.
3. Tulis kode berikut pada tag <head> untuk menambahkan library JQuery:
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
4. Kemudian tambahkan definisi css pada tag <head>
<style type="text/css">
.cobaClass {
text-align:center;
color:Red; }
</style>
5. Tambahkan juga kode berikut pada tag <body> :
<div>old content</div>
<script type="text/javascript">
jQuery('div').hide();
jQuery('div').text('new content');
jQuery('div').addClass("cobaClass");
jQuery('div').show();
//$('div').addClass("cobaClass");
</script>
6. JQuery juga dapat dituliskan menggunakan ‘chaining’ sehingga tidak perlu mengulang penulisan sintaks.
$('div').hide().text("New Content").addClass("cobaClass").show();
Fungsi $JQuery() atau $()
Fungsi $() merupakan bagian dari JQuery Core yang mempunyai beberapa kegunaan yaitu:
· Selector Elemen
· Menambahkan elemen secara ‘on-the-fly’
· Menggantikan fungsi $(document).ready();
Contoh untuk menambahkan elemen secara ‘on-the-fly’ pada DOM.
<head runat="server">
<title>Latihan Selector</title>
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("<p style='color:blue;'>Hello World !!</p><br/>").appendTo("body");
$("Masukan Nama :<input type='text' /><br/>").appendTo("p");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div></div>
</form>
</body>
Anda juga dapat menambahkan element kedalam DOM dengan mentrigger event yang disediakan pada control tertentu.
<head runat="server">
<title>Menggunakan Selector 2</title>
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function TambahKomentar()
{
var komentar = $("#txtKomentar").val();
$("<p>" + komentar + "</p><hr/>").insertAfter("h2");
$("#txtKomentar").val("");
}
$(function() {
$("#btnTambah").click(function() {
TambahKomentar();
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Masukan Komentar Anda :<br />
<asp:TextBox ID="txtKomentar" runat="server" />
<input type="button" value="btnTambah" id="btnTambah" /> <br />
<h2>Komentar</h2>
</div>
</form>
</body>
Actual Training 
keren..mas buatin tulisan dunk mengenai kupas tuntas JQUERY berupa buku,,..he..he