JQuery

Actual Training

Seri Tutorial : ASP.NET dengan JQuery (Part 3)

Tutorial ini adalah sambungan dari Tutorial “ASP.NET dengan JQuery” : Part1, Part2

Pada bagian ketiga ini akan dibahas beberapa topik yaitu:

  • JQuery UI
  • JQuery Plugin

JQuery UI

Jika anda pernah menggunakan Ajax Control Toolkit pada ASP.NET AJAX maka anda tentu sudah familiar dengan control-control seperti Accordion, DateTimePicker, HTMLEditor, dll. JQuery juga mempunyai JQuery UI yang juga memiliki widget/control yang serupa dengan ACT, bahkan mungkin lebih banyak dan bervariasi. Untuk menggunakan JQuery UI anda dapat mendownload library-nya di http://jqueryui.com. JQuery UI mendukung beberapa fitur menarik diantaranya :

Interactions

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

Widget

  • Accordion
  • Dialog
  • Slider
  • Tab
  • DatePicker
  • ProgressBar

Effect

  • Blind
  • Bounce
  • Clip
  • Drop
  • Explode
  • Fold
  • Highlight
  • Pulsate
  • Scale
  • Shake
  • Slide
  • Transfer

 

Fitur Draggable

Dengan menggunakan JQuery UI anda dapat menambahkan fitur draggable kedalam aplikasi anda.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Menggunakan JQuery UI Draggable</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 src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>   

 

    <script language="javascript" type="text/javascript"> 

        $(document).ready(function() { 

            $("#drag").draggable();

        }); 

    </script> 

    

    <style type="text/css"> 

        #drag  

        {  

            width:150px; 

            height:150px; 

            border:solid 2px #000; 

            padding:15px; 

            color:White; 

            font-weight:bold;

            background-color:Blue; 

        } 

    </style> 

</head>

<body>

    <form id="form1" runat="server">

    <div id="drag"> 

        <p>Drag saya dunk !!</p> 

    </div> 

    </form>

</body>

</html>

 

Fitur Dropable

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Dropable Feature</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 src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

 

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <script language="javascript" type="text/javascript">

        $(document).ready(function() {

            $("#drag").draggable();

            $("#drop").droppable({

                drop: function() {

                    $(this).find('p').html('Dropped!');

                }

            });

        }); 

    </script> 

    

      <style type="text/css"> 

        #drag  

        {  

            width:150px; 

            height:150px; 

            border:solid 2px #000; 

            padding:15px; 

            color:White; 

            font-weight:bold;

            background-color:Blue; 

        } 

        #drop 

        {  

            width:400px; 

            height:400px; 

            border:solid 2px #000; 

            padding:15px; 

            color:White; 

            font-weight:bold;

            background-color:Red; 

        } 

    </style> 

</head>

<body>

    <form id="form1" runat="server">

    <div id="drag"> 

        <p>Drag saya dunk !</p> 

    </div> 

     

    <div id="drop"> 

        <p>Drop ke saya</p> 

    </div>

    </form>

</body>

</html>

 

Tab Widget

Anda juga dapat menambahkan tab dengan menggunakan JQueryUI.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Membuat Tab</title>

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <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 src="lib/ui/ui.core.js" type="text/javascript"></script>

    <script src="lib/ui/ui.tabs.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function() {

            $("#tabs").tabs();

        });

    </script>

    

</head>

<body>

    <form id="form1" runat="server">

    <div id="tabs">

    <ul>

        <li><a href="#tabs-1">Tab 1</a></li>

        <li><a href="#tabs-2">Tab 2</a></li>

        <li><a href="#tabs-3">Tab 3</a></li>

    </ul>

    <div id="tabs-1">

        <p>Bla bla bla bla bla</p>

    </div>

    <div id="tabs-2">

        <p>Bla bla bla bla…</p>

    </div>

    <div id="tabs-3">

        <p>bla bla bla</p>

    </div>

</div>

    </form>

</body>

</html>

 

Accordion Widget

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Menggunakan Accordion</title>

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <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 src="lib/ui/ui.core.js" type="text/javascript"></script>

    <script src="lib/ui/ui.accordion.js" type="text/javascript"></script>

    

    <script type="text/javascript">

    $(function() {

        $("#accordion").accordion();

    });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="accordion">

    <h3><a href="#">Section 1</a></h3>

    <div>

        <p>

        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

        </p>

    </div>

    <h3><a href="#">Section 2</a></h3>

    <div>

        <p>

        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

        </p>

    </div>

    <h3><a href="#">Section 3</a></h3>

    <div>

        <p>

        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

        </p>

        <ul>

            <li>List item one</li>

            <li>List item two</li>

            <li>List item three</li>

        </ul>

    </div>

    <h3><a href="#">Section 4</a></h3>

    <div>

        <p>

        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

        </p>

        <p>

        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

        </p>

    </div>

</div>

</div>

    </form>

</body>

</html>

 

DatePicker Widget

DatePicker widget dapat digunakan untuk memilih tanggal yang diinginkan.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Menggunakan DatePicker Widget</title>

    <link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

    

    <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 src="lib/ui/ui.core.js" type="text/javascript"></script>

    <script src="lib/ui/ui.datepicker.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function() {

            $("#datepicker").datepicker();

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <p>Date: <input type="text" id="datepicker"></p>

    </div>

    </form>

</body>

</html>

 

JQuery Plugin

Selain menggunakan JQueryUI anda juga dapat mendownload berbagai macam plugin yang dapat anda gunakan pada aplikasi anda tanpa harus membuat dari awal. Plugin yang disediakan dapat didownload dan digunakan secara gratis. Anda dapat mengunjungi alamat berikut untuk mendownload JQuery Plugin http://plugins.jquery.com/.

Menggunakan Form Validator Plugin

Anda juga dapat melakukan validasi untuk inputan dengan menggunakan salah satu plugin gratis yang disediakan oleh JQuery.

Untuk menggunakan validation plugin copykan folder ‘formValidator’ kedalam folder ‘lib’ pada website anda, kemudian tulis kode berikut.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Menggunakan Validation Plugin</title>

    <link href="lib/formValidator/css/template.css" rel="stylesheet" type="text/css" />

    <link href="lib/formValidator/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />

    

    <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 src="lib/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>

    <script src="lib/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>

 

    <script type="text/javascript">

        $(function() {

            $("#form1").validationEngine();

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <h2>Menggunakan Validation Plugin</h2>

    <fieldset>

        <legend>User informations</legend>

                <label>

                    <span>First name</span>

                    <asp:TextBox  CssClass="validate[required,custom[onlyLetter],length[0,100]] text-input" ID="firstname" runat="server" />

                </label><br />

                <label>

                    <span>Last name</span>

                    <asp:TextBox  CssClass="validate[required,custom[onlyLetter],length[0,100]] text-input" ID="TextBox1" runat="server" />

                </label><br />

                <label>

                    <span>Date : (format YYYY-MM-DD)</span>

                    <asp:TextBox CssClass="validate[required,custom[date]] text-input" ID="date" runat="server" />

                </label><br />

                <label>

                    <span>Age : </span>

                    <asp:TextBox  CssClass="validate[required,custom[onlyNumber],length[0,3]] text-input" ID="age" runat="server" />

                </label><br />

                <label>

                    <span>Telephone : </span>

                    <asp:TextBox CssClass="validate[required,custom[telephone]] text-input" ID="telephone" runat="server" />

                </label><br />

               

    </fieldset>

    <fieldset>

                <legend>Password</legend>

                <label>

                    <span>Password : </span>

                    <asp:TextBox CssClass="validate[required,length[6,11]] text-input" ID="password" runat="server" />

                </label><br />

                <label>

                    <span>Confirm password : </span>

                    <asp:TextBox  CssClass="validate[required,confirm[password]] text-input" ID="password2" runat="server" />

                </label>

            </fieldset>

             <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

    </div>

    </form>

</body>

</html>

Actual Training

Seri Tutorial : ASP.NET dengan JQuery (Part2)

Tutorial ini adalah sambungan dari Tutorial “ASP.NET dengan JQuery” : Part1

Pada Bagian yang kedua akan dibahas beberapa topik yaitu:

  • Mengambil nilai dari HTML Control
  • Menggunakan JQuery pada MasterPage
  • AJAX dengan JQuery pada Aplikasi ASP.NET

Mengambil nilai dari HTML Control dengan JQuery

1. Buat ‘web form’ baru dengan nama SimpleCalculator.aspx

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Simple Calculator</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 Calculate() {

            var bil1 = $("#txtBil1").val();

            var bil2 = $("#txtBil2").val();

            var hasil = parseInt(bil1) + parseInt(bil2);

            alert("Hasilnya :" + hasil);

        }

 

        $(document).ready(function() {

            $("#btnProses").click(function() {

                Calculate();

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        Bilangan 1 :<br />

        <asp:TextBox ID="txtBil1" runat="server"></asp:TextBox><br /><br />

        Bilangan 2 :<br />

        <asp:TextBox ID="txtBil2" runat="server"></asp:TextBox><br /><br />

        <asp:Button ID="btnProses" runat="server" Text="Proses" />

    </div>

    </form>

</body>

</html>

 

Menggunakan JQuery pada MasterPage

Jika anda pernah menggunakan ASP.NET Web Form, maka anda pasti pernah menggunakan Masster Page. Server Control yang terdapat pada Master Page ketika ditampilkan di browser maka nilai id-nya akan berbeda dengan nama id pada server control-nya.

Contoh anda memiliki server control yang ada dalam master page sebagai berikut:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

  <asp:Label ID="lblNama" runat="server" Text="Erick Kurniawan" /><br />

  <asp:TextBox ID="txtNama" runat="server" Text="Erick Kurniawan" />

</asp:Content>

Sesudah diproses oleh server dan dikirimkan ke browser maka hasilnya:
<span id="ctl00_ContentPlaceHolder1_lblNama">Erick Kurniawan</span><br />

<input name="ctl00$ContentPlaceHolder1$txtNama" type="text" id="ctl00_ContentPlaceHolder1_txtNama" />

Dapat dilihat bahwa nilai id yang dihasilkan mendapatkan tambahan ‘ctl00_ContentPlaceHolder1_’ jika dibandingkan dengan nilai id pada server control. Untuk mengakses control yang ada dalam master page anda dapat menggunakan cara berikut:

<script type="text/javascript" language="javascript">

      var nama = $('#<%=txtNama.ClientID%>').val();

      alert("Nama anda :" + nama);

</script>

Menggunakan JQuery AJAX di ASP.NET

JQuery mendukung interaksi berbasis AJAX menggunakan JSON Communication. JSON (Javascript Object Notation) adalah format standar yang digunakan untuk pertukaran data pada AJAX. JQuery mendukung dua metode pengiriman data menggunakan GET dan POST.

Buat halaman dengan nama JqueryAjax.aspx, kemudian tulis kode berikut:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>JQuery AJAX</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">

        $(function() {

 

            $("#txtTiketGet").change(function() {

                $("#Error1").html("");

                var ticketsReq = $("#txtTiketGet").val();

                $.get("CekTiket.aspx", function(result) {

                    var ticketsavailable = parseInt(result);

                    if (ticketsReq > ticketsavailable) {

                        $("#Error1").html("Hanya " + ticketsavailable + " yang tersedia!");

                    }

                });

            });

 

 

            $("#txtTiketPOST").change(function() {

                $("#Error2").html("");

                var ticketsReq = $("#txtTiketPOST").val();

                $.post("CekTiketPOST.aspx", { TicReq: ticketsReq }, function(result) {

                    if (result != "") {

                        $("#Error2").html(result);

                    }

                });

            });

 

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    Waktu Load :<asp:Label ID="lblDate" runat="server"></asp:Label><br /><br />

    <strong>By GET</strong><br />

    Jumlah Pembelian Tiket :<asp:TextBox ID="txtTiketGet" runat="server"></asp:TextBox>

    <div id="Error1" style="color:Red;"></div> 

    </div>

    <br />

    <strong>By POST</strong><br />

    Jumlah Pembelian Tiket :<asp:TextBox ID="txtTiketPOST" runat="server"></asp:TextBox>

    <div id="Error2" style="color:Red;"></div> 

    </form>

</body>

</html>

Kemudian buat web form dengan nama CekTiket.aspx untuk menangani request menggunakan method GET. Tulis kode sebagai berikut:

protected void Page_Load(object sender, EventArgs e)

{

        int JmlTiket = 12;

        Response.Write(JmlTiket.ToString());

        Response.End();

}

Buat juga web form dengan nama CekTiketPOST.aspx untuk menangani request menggunakan method POST. Tulis kode sebagai berikut:

protected void Page_Load(object sender, EventArgs e)

{

        string ticReq = Request["TicReq"];

        int tics = int.Parse(ticReq);

        int jmlTiket = 5;

 

        if (tics > jmlTiket)

        {

            Response.Write("Hanya " + jmlTiket.ToString() + " yang tersedia!");

            Response.End();

        }

}

Pada tutorial selanjutnya kita akan membahas penggunaan JQuery UI (bersambung ke part3)..
Actual Training

Seri Tutorial : ASP.NET dengan JQuery (Part1)

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>

 
Bersambung ke tutorial selanjutnya..