VB

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..
Actual Training

ASP.NET MVC Hands On Labs (Part2 – Membuat Model dan Controller)

Tutorial ini adalah sambungan dari Hands On Labs ASP.NET MVC Part1

Membuat Product Repository

Pada small application tidak menjadi masalah jika kita mengakses LINQ to SQL DataContex class langsung dari Controller, namun jika aplikasinya bertambah kompleks maka akan sulit untuk di maintain dan melakukan tes terhadap kode-kode tersebut, akan terjadi duplikasi banyak code pada aplikasi kita (berlawanan dengan prinsip MVC yaitu DRY = Don’t Repeat Yourself).
Teknik yang dapat digunakan untuk membuat aplikasi kita lebih mudah di maintain adalah dengan menggunakan “repository pattern” yaitu membuat repository class yang mengenkapsulasi query dan persistance logic sehingga aplikasi kita menjadi lebih clean.
1.  Tambahkan class baru kedalam folder “Model”, beri nama “ProductRepository.cs”. kemudian tulis kode berikut:

   1: namespace ComputerStore.Models {

   2:     public class ProductRepository {

   3:         StoreDataContext db = new StoreDataContext();

   4:  

   5:         //menampilkan semua product, digunakan pada View Index

   6:         public IQueryable<Product> ShowAllProduct() {

   7:             var query = from p in db.Products

   8:                         orderby p.Id

   9:                         select p;

  10:             return query;

  11:         }

  12:  

  13:         //menambah product baru, digunakan pada View Create

  14:         public void CreateProduct(Product productToCreate) {

  15:             db.Products.InsertOnSubmit(productToCreate);

  16:         }

  17:  

  18:         //mengambil product berdasarkan id tertentu

  19:         public Product ShowProduct(int id) {

  20:             Product prod = db.Products.Where(p => p.Id == id).Single<Product>();

  21:             return prod;

  22:         }

  23:  

  24:         //mengedit product

  25:         public void EditProduct(Product productToEdit) {

  26:             Product prod = db.Products.Where(p => p.Id == productToEdit.Id).Single<Product>();

  27:             prod.Name = productToEdit.Name;

  28:             prod.Price = productToEdit.Price;

  29:             prod.Qty = productToEdit.Qty;

  30:             prod.BuyDate = productToEdit.BuyDate;

  31:         }

  32:  

  33:         //menghapus product

  34:         public void DeleteProduct(int id) {

  35:             Product prod = db.Products.Where(p => p.Id == id).Single<Product>();

  36:             db.Products.DeleteOnSubmit(prod);

  37:         }

  38:  

  39:         public void Save() {

  40:             db.SubmitChanges();

  41:         }

  42:     }

  43: }

2.  StoreDataContext adalah class yang digenerate oleh tools LINQ to SQL Classes, yang berisi object model dari table Products. Untuk mngakses data maka kita menggunakan standar query expression dari LINQ. Query expression tersebut akan diterjemahkan oleh LINQ to SQL menjadi T-SQL sintaks untuk dieksekusi oleh database.

Membuat Controller

Sesudah membuat Model, kemudian langkah selanjutnya adalam membuat Controller. Pada aplikasi MVC, Controller Berisi Control-flow logic. Controller berinteraksi dengan Model dan View untuk mengontrol jalannya aplikasi. 
1.  Pada solution explorer klik kanan folder “Controller”, pilih “Add” – “Controller”, beri nama “Home Controller”, kemudian check pada pilihan “Add action method  for create, update, and details scenario” untuk menambahkan secara otomatis ActionMethod yang akan kita buat untuk menghandle proses CRUD (create, read, update, dan delete) .

2.  Kemudian tambahkan kode berikut pada Controller: 

   1: namespace ComputerStore.Controllers

   2: {

   3:     public class HomeController : Controller

   4:     {

   5:         private ProductRepository productRepo = new ProductRepository();

   6:         //

   7:         // GET: /Home/

   8:  

   9:        public ActionResult Index() {

  10:             return View(productRepo.ShowAllProduct());

  11:        }

  12:  

  13:         public ActionResult About() {

  14:             return View();

  15:         }

  16:  

  17:  

  18:         //

  19:         // GET: /Home/Details/5

  20:  

  21:         public ActionResult Details(int id)

  22:         {

  23:             return View();

  24:         }

  25:  

  26:         //

  27:         // GET: /Home/Create

  28:  

  29:         public ActionResult Create()

  30:         {

  31:             return View();

  32:         } 

  33:  

  34:         //

  35:         // POST: /Home/Create

  36:  

  37:         [AcceptVerbs(HttpVerbs.Post)]

  38:         public ActionResult Create([Bind(Exclude="Id")] Product productToCeate)

  39:         {

  40:             if (ModelState.IsValid) {

  41:                 try {

  42:                     // TODO: Add insert logic here

  43:                     productRepo.CreateProduct(productToCeate);

  44:                     productRepo.Save();

  45:                     return RedirectToAction("Index");

  46:                 }

  47:                 catch {}

  48:             }

  49:             return View(productToCeate);

  50:         }

  51:  

  52:         //

  53:         // GET: /Home/Edit/5

  54:  

  55:         public ActionResult Edit(int id)

  56:         {

  57:             return View(productRepo.ShowProduct(id));

  58:         }

  59:  

  60:         //

  61:         // POST: /Home/Edit/5

  62:  

  63:         [AcceptVerbs(HttpVerbs.Post)]

  64:         public ActionResult Edit(Product productToEdit)

  65:         {

  66:             if (ModelState.IsValid) {

  67:                 try {

  68:                     // TODO: Add update logic here

  69:                     productRepo.EditProduct(productToEdit);

  70:                     productRepo.Save();

  71:                     return RedirectToAction("Index");

  72:                 }

  73:                 catch {}

  74:             }

  75:             return View(productToEdit);

  76:         }

  77:  

  78:         public ActionResult Delete(int id) {

  79:             Product prod = productRepo.ShowProduct(id);

  80:             return View(prod);

  81:         }

  82:  

  83:         [AcceptVerbs(HttpVerbs.Post)]

  84:         public ActionResult Delete(int id,string confirmButton) {

  85:             try {

  86:                 productRepo.DeleteProduct(id);

  87:                 productRepo.Save();

  88:             }

  89:             catch {}

  90:             return View("Deleted");

  91:         }

  92:  

  93:     }

  94: }

Kemuadian langkah selanjutnya adalah pembuatan “View” yang akan dijelaskan di bagian selanjutnya ..

Actual Training

ASP.NET MVC Hands On Labs (Part1)

Pada tutorial kali ini saya akan mengajak anda mencoba framework terbaru untuk mengembangkan aplikasi berbasis web menggunakan Model View Controller Pattern yaitu ASP.NET MVC. Tutorial ini berisi langkah-langkah praktis yang disertai studi kasus untuk membangun aplikasi sederhana (katalog product) menggunakan ASP.NET MVC. Selain menggunakan fitur-fitur yang ada di ASP.NET MVC, tutorial ini juga membahas sedikit integrasi ASP.NET MVC dengan salah satu javascript framework yang banyak digunakan yaitu JQuery.

Adapun beberapa software yang harus diinstal untuk menjalankan HOL ini adalah:

  • Visual Studio 2008 SP1
  • ASP.NET MVC 1.0
  • SQL Server Express 2005
  • JQuery 1.3
  • JQuery UI 1.7.1

Topik yang akan dibahas pada contoh ini:

  • Membuat Model (LINQ to SQL)
  • Membuat Class Repository
  • Membuat Controller 
  • Membuat View (Helper, Validation) 
  • Simple JQuery Integration

 

Membuat Database dan Data Model

Pertama kita akan membat database yang akan kita gunakan dalam aplikasi ini, untuk itu ikuti
langkah-langkah dibawah ini:  

1.  Buka VS 2008, kemudian buat project ASP.NET MVC, beri nama “ComputerStore”

image

2.  Kemudian pada Solution Explorer, klik kanan folder “App_Data”

image

3.  Kemudian pada database tambahkan table dengan nama “Products”, dan tambahkan field-field berikut pada table “Products”. 

image

4.  Pada field “Id” ubah property “Identity Specification” menjadi “Yes” untuk menambahkan auto increment pada field tersebut.

image

 

Membuat Data Model (LINQ to SQL)

Setelah kita selesai membuat database, sekarang saatnya melakukan mapping table yang sudah kita buat menjadi object model dengan menggunakan LINQ to SQL. Object model ini akan kita simpan di dalam folder “Model”. Pada aplikasi MVC model berisi semua application logic (bussiness logic, data access logic).
1.  Pada Solution Explorer, klik kanan folder “Model”, kemudian pilih “Add” – “New Item” – pilih
“LINQ to SQL Classes” untuk membuat object model (mapping) secara otomatis. Anda dapat juga menggunakan “SQL Metal” atau melakukan mapping table secara manual.

image 

2.  Beri nama “Store.dbml”. Kemudian drag table “Products” dari server explorer kedalam LINQ to SQL Diagram. Kemudian save.

image

Setelah data model selesai kita buat, maka langkah selanjutnya adalah mendesain Product Repository yang adakan dijelaskan pada blog selanjutnya

Actual Training

Fitur VB9 (If Ternary Operator)

Halo, ini adalah posting kelima saya tentang fitur dari VB9 yaitu If Ternary operator, anda dapat melihat posting saya sebelumnya:

  • Implicitly typed local vaiable
  • Object initializer
  • Anonymous types
  • Nullable types

Pada VB versi sebelumnya anda pasti pernah menggunakan perintah IIF untuk penggunaan single IF

'penggunaan iif pada VB 
Dim bil1 As Integer = 999
Dim ket As String = IIf(bil1 Mod 2 = 1, "Ganjil", "Genap")
Console.WriteLine(ket) 'menghasilkan output Ganjil

Apakah ada yang salah dari kode diatas? memang tidak sih, outputnya benar dan sesuai yang kita harapkan. Tetapi sebenarnya IIF pada VB bukan merupakan built-in function tetapi hanya fungsi biasa yang dipanggil dari library. Seperti halnya regular fungsi maka ketika fungsi tersebut dipanggil maka semua argumen dalam fungsi tersebut akan dicek oleh VB compiler sebelum dijalankan.

Sub Main()
    Dim bil1 = 999
    Dim ket As String = IIf(bil1 Mod 2 = 1, Ganjil(), Genap())
End Sub
 
Function Ganjil() As String
    Return "Ganjil"
End Function
 
Function Genap() As String
    Throw New Exception("Error...")
    Return "Genap"
End Function

image

Jika kode diatas dijalankan maka akan menghasilkan error karna ada perintah Throw Exception pada function Genap(), meskipun hasil dari IIF diatas Ganjil() namun oleh Genap() juga dibaca oleh VB sehingga Throw Exception dipanggil. Jadi jika anda selama ini menganggap bahwa IIF sama dengan perintah IF biasa anda salah sangka :). Kode dibawah ini tidak sama dengan kode diatas

Sub Main()
   Dim bil1 = 999
   Dim ket = ""
   If bil1 Mod 2 = 1 Then
       ket = Ganjil()
   Else
       ket = Genap()
   End If
   Console.WriteLine(ket)
End Sub

Kode diatas tidak akan menghasilkan error ketika dijalankan, karena fungsi Genap() tidak dicek ketika IF dieksekusi. Ini juga sama dengan perintah IF Ternary pada VB9 (yang ini benar-benar ternary asli gak seperti IIF)

Sub Main()
    'Real IF Ternary pada VB 9
    Dim bil1 = 999
    Dim ket = If(bil1 Mod 2 = 1, Ganjil(), Genap())
    Console.WriteLine(ket) 'menghasilkan output Ganjil
End Sub

Kode diatas juga tidak akan menghasilkan error jika dijalankan karena menggunakan IF Ternary pada VB9. Dengan IF Ternary pada VB anda juga dapat menuliskan hanya 2 argumen dengan saja misal:

Dim nama As String = Nothing
Dim strnama = If(nama, "Kosong")
Console.WriteLine(strnama) 'outputnya Kosong
nama = "Erick Kurniawan"
strnama = If(nama, "Kosong")
Console.WriteLine(strnama) 'outputnya Erick Kurniawan
 
Dim bil1 As Integer? = Nothing
Dim nilai = If(bil1, -1)
Console.WriteLine(nilai)

Harap diperhatikan bahwa tipe data yang dihasilkan dari IF harus kompatibel dengan nilai yang dibandingkan, jika anda menulis kode sperti dibawah ini maka akan menghasilkan error

image

Actual Training

Fitur VB9 (Nullable types)

Halo, ini adalah posting keempat saya tentang fitur dari VB9 yaitu Nullable type, anda dapat melihat posting saya sebelumnya:

  • Implicitly typed local vaiable
  • Object initializer
  • Anonymous types

Seperti kita ketahui pada CLS terdapat dua tipe data yang disupport yaitu value type (integer,double,boolean,etc) dan reference type (String, StringBuilder, etc), untuk tipe reference jika anda tidak mau memberi nilai maka anda dapat mengesetnya menjadi “Nothing”, tapi lain halnya dengan value type anda tidak bisa tidak meberi nilai, anda harus memberi nilai yang sesuai dengan range nilainya (misal untuk tipe short dari -32000 sd 32000). Ini akan dapat menimbulkan masalah ketika kita melakukan mapping dan mengambil data dari database, misal pada table Mahasiswa field Ipk bernilai null, nah kita akan kesulitan untuk merepresentasikan nilai data field yang kosong tersebut dalam object Mahasiswa.

Nullable types digunakan agar anda dapat memberi nilai null pada value type, sebenarnya pada VB8 anda juga sudah dapat menggunakan nullabe type dengan generic Nullable(Of T)

Sub Main()
        'pada VB8
        Dim bil1 As Nullable(Of Integer)
        bil1 = Nothing
 
        Dim cek As Boolean = bil1.HasValue 'akan bernilai false
        bil1 = 999
        cek = bil1.HasValue 'akan bernilai true
End Sub

Tetapi dengan menggunakan nullable type di VB9 penulisannya menjadi lebih mudah

'nullable pada VB9
Dim i As Integer?
Console.WriteLine(i.HasValue) 'akan bernilai false
i = 999
Console.WriteLine(i.HasValue) 'akan bernilai true

Nullable types akan sangat berguna ketika anda melakukan mapping table pada LINQ to SQL

Actual Training

Fitur VB9 (Anonymous Type)

Halo, ini adalah posting ketiga saya tentang fitur dari VB9 yaitu Anonymous type, anda dapat melihat posting saya sebelumnya:

  • Implicitly typed local vaiable
  • Object initializer

Anonymous type sebenarnya dibutuhkan untuk penggunaan fitur LINQ statements. Sintaks dari anonymous type mirip dengan sintaks object initializer

Sub Main()
       Dim mhs = New With {.Nim = "22002321", .Ipk = 3.5}
       Console.WriteLine(mhs.Nim)
       Console.WriteLine(mhs.Ipk)
       Console.WriteLine(mhs.ToString())
End Sub

image

Dapat anda lihat bahwa variabel mhs dapat digunakan dan berisi property Nim dan Nama padahal anda tidak membuat object Mahasiswa dari class Mahasiswa. Anda juga dapat menggunakan object mhs dari anonymous type untuk membuat object baru:

Dim mhs2 = New With {.Nim = mhs.Nim, .Nama = "Erick", .Ipk = mhs.Ipk}
Console.WriteLine(mhs2.ToString())

Jika anda membandingkan dua object yang sama yang dibuat dengan anonymous type 

Dim mhs1 = New With {.Nim = "22002321", .Ipk = 3.5}
Dim mhs2 = New With {.Nim = "22002321", .Ipk = 3.5}
Console.WriteLine(mhs1.Equals(mhs2))

maka statement diatas akan mengahasilkan nilai false biarpun kedua object tersebut isinya sama persis. Hasilnya akan bernilai true hanya jika dibandingkan dengan referensi dari object itu sendiri

Dim mhs1 = New With {.Nim = "22002321", .Ipk = 3.5}
Dim mhs2 = mhs1
'menghasilkan nilai true
Console.WriteLine(mhs1.Equals(mhs2))

Ada fitur yang unik di VB9, yaitu anda dapat menggunakan keyword key jika anda ingin membandingkan nilai dari object tersebut sama atau tidak

'menggunakan keyword key
Dim mhs1 = New With {Key .Nim = "22002321", .Ipk = 3.5}
Dim mhs2 = New With {Key .Nim = "22002321", .Ipk = 3.5}
'menghasilkan nilai true
Console.WriteLine(mhs1.Equals(mhs2))
 
Dim mhs3 = New With {Key .Nim = "22002321", .Ipk = 3.5}
Dim mhs4 = New With {Key .Nim = "22002322", .Ipk = 3.4}
'menghasilkan false
Console.WriteLine(mhs3.Equals(mhs4))

Pada real world, anonymous types digunakan untuk mensupport LINQ statement, contohnya :

Dim mhs = From m In mahasiswa Select New With {m.Nim, m.Ipk}

menarik yaa…