June 22, 2009 Actual Training

Fitur VB10

Saya telah menulis tentang beberapa fitur baru pada VB10 dapat anda lihat pada link:

Nantikan update terbaru dari fitur-fitur VB9 di blog ini

April 27, 2009 Actual Training

Tutorial Object Oriented Programming with C#

Saya menulis beberapa artikel menarik tentang C# yang dapat anda akses di:

semoga bermanfaat ^_^

April 23, 2009April 23, 2009 Actual Training

Hands On Labs ASP.NET MVC

Hari sabtu kemaren, tanggal 18 april 2009, saya mengisi workshop di Universitas Atmajaya Jogjakarta, topiknya adalah “ASP.NET MVC”, workshop singkat ini berlangsung selama 2.5jam (sesi 1) dan di teruskan sesi 2 tentang “Enterprise Library” oleh Pak Ridi.

Jika anda berminat anda dapat mendownload HOL dan source code dari workshop singkat yang saya bawakan kemaren pada link dibawah ini:

HOL ASP.NET MVC

Source Code

Semoga bisa bermanfaat untuk teman-teman yang ingin mencoba menggunakan aplikasi ASP.NET MVC :)

regards,

Erick Kurniawan

April 23, 2009 Actual Training

Fitur VB9 (LINQ to XML dan XML Literal)

Halo ini adalah posting kesebelas saya tentang fitur dari VB9
tentang XML Literal. Ini adalah fitur dari VB9 yang “cool”, pada VB9
XML menjadi “first class citizen” yang berarti anda dapat menuliskan
XML secara Literal.

anda dapat melihat posting saya sebelumnya:

Pada jaman dahulu kala (VB8) untuk membuat file XML anda harus menggunakan System.Xml untuk DOM manipulation, contoh kodenya:

   1: Imports System.IO

   2: Imports System.Xml

   3: Module Module1

   4:     Sub Main()

   5:         Using fs As New FileStream("produksample.xml", FileMode.Create)

   6:             Using wt As XmlWriter = XmlWriter.Create(fs)

   7:                 wt.WriteStartDocument()

   8:                 wt.WriteStartElement("Products")

   9:                 wt.WriteStartElement("Product")

  10:                 wt.WriteAttributeString("Id", "KB001")

  11:                 wt.WriteElementString("Name", "Laptop Acer")

  12:                 wt.WriteElementString("Price", "7000000")

  13:                 wt.WriteEndElement()

  14:                 wt.Flush()

  15:             End Using

  16:         End Using

  17:     End Sub

  18: End Module

kode diatas akan menghasilkan file “produksample.xml” sebagai berikut:

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <Products>

   3:     <Product Id="KB001">

   4:     <Name>Laptop Acer</Name>

   5:     <Price>7000000</Price>

   6:     </Product>

   7: </Products>

LINQ to XML

Pada VB9 (.NET 3.5) anda dapat menuliskannya dengan cara yang baru. VB9 mendukung XElement
class yang terdapat pada namespace System.Xml.Linq, dengan menggunakan
cara penulisan ini code untuk pembuatan dokumen XML tampak menjadi
lebih “clean”. Class yang ada pada System.Xml.Linq adalah

Class	Deskripsi
XAttribute	Merepresentasikan attribut yang dibuat
XDocument	Merepresentasikan Complete XML Tree
XElement	Merepresentasikan XML Element, dan sebagai dasar untuk mengkonstruksi XML Tree
XName	Merepresentasikan attribut dan element names
XNode	Merepresentasikan base class dari XML Node

Untuk membuat dokumen xml seperti contoh sebelumnya dengan menggunakan XElement anda dapat menuliskan kode berikut:

   1: Imports System.Xml.Linq

   2: Module ContohXElement

   3:     Sub Main()

   4:         Dim xmlProd = New XElement("Products", _

   5:                           New XElement("Product", _

   6:                               New XAttribute("Id", "KB001"), _

   7:                               New XElement("Name", "Laptop Acer"), _

   8:                               New XElement("Price", "7000000")))

   9:         xmlProd.Save("xelementProd.xml")

  10:     End Sub

  11: End Module

XML Literal

VB9 juga menawarkan cara yang lebih simple dan clean selain
menggunakan XElement yaitu XML Literal, saat ini XML Literal hanya
disupport oleh VB9, C# 3.0 belum menssuport fitur ini (C# 4.0? Maybe
^_^). dengan XML Literal anda dapat menuliskan kode berikut:

   1: Imports System.Xml.Linq

   2: Module ContohXElement

   3:     Sub Main()

   4:         Dim xmlProd = <Products>

   5:                           <Product Id="KB001">

   6:                               <Name>Laptop Acer</Name>

   7:                               <Price>7000000</Price>

   8:                           </Product>

   9:                       </Products>

  10:         xmlProd.Save("literalprod.xml")

  11:     End Sub

  12: End Module

Anda juga dapat mengambil nilai dari attribute atau elemen dalam dokumen tersebut dengan iterasi

   1: Dim xmlProd = <Products>

   2:                   <Product Id="KB001">

   3:                       <Name>Laptop Acer</Name>

   4:                       <Price>7000000</Price>

   5:                   </Product>

   6:                   <Product Id="KB002">

   7:                       <Name>Laptop Toshiba</Name>

   8:                       <Price>9000000</Price>

   9:                   </Product>

  10:               </Products>

  11: For Each produk In xmlProd.<Product>

  12:     Console.WriteLine("Id {0}, Nama {1} dan harganya Rp.{2}", _

  13:                       produk.@Id, _

  14:                       produk.<Name>.Value, _

  15:                       produk.<Price>.Value)

  16: Next

Hasilnya:

Mudah ya? ^_^ jika kita perhatikan ketika anda melakukan iterasi
dokumen xml diatas, VS 2008 sudah cukup memberikan intellisense

namun intellisense tersebut tidak dapat menampilkan keterangan nama
elemen atau attribut yang ada pada dokumen XML yang anda buat, karena
IDE tidak memiliki informasi tentang XML Schema anda, untuk
menyelesaikan masalah ini anda dapat mengimports xml shema dari
dokumen. Caranya tambahkan XML Schema, cara yang paling mudah adalah
dengan menggunakan fitur pada VS 2008.

Tambahkan file xml yang sudah anda buat sebelumnya kedalam project,
kemudian buka dengan VS, pilih “Create Schema”. Copykan hasil schema
yang digenerate kedalam clipboard.

Tambahkan file XML Schema pada project, dan beri nama “ProdShema.xsd”.

Kemudian copykan hasil schema yang digenerate pada langkah
sebelumnya kedalam file “ProdShema.xsd”, jangan lupa untuk mengisi
atribut “targetNamespace”

Setelah itu kembali ke kode, dan anda dapat mengimports schema yang sudah anda buat.

Dengan begitu ketika anda mengetikan kode maka bantuan intellisense
akan lebih jelas karena dapat mengenali schema dari dokumen anda

wow programming xml dokumen jadi asik klo ada intellisense gini ^_^

Embedded Expression

Anda juga dapat menambahkan embedded expression dalam XML Literal,
jika anda pernah menggunakan ASP.NET pasti familiar dengan cara
penulisan embedded expression menggunakan keyword <%= %>. Contoh
penggunaannya.

   1: Imports System.Xml.Linq

   2: Module EmbeddedExpression

   3:     Sub Main()

   4:         Dim mahasiswa() = {New With {.Nim = "23082321", .Nama = "Erick", .Ipk = 3.5}, _

   5:                      New With {.Nim = "23082322", .Nama = "Bejo", .Ipk = 3.2}, _

   6:                      New With {.Nim = "23082323", .Nama = "Anton", .Ipk = 3.3}}

   7:         Dim xmlStudent = <Students>

   8:                              <%= From mhs In mahasiswa _

   9:                                  Select _

  10:                                  <Student Nim=<%= mhs.Nim %>>

  11:                                      <Nama><%= mhs.Nama %></Nama>

  12:                                      <Ipk><%= mhs.Ipk %></Ipk>

  13:                                  </Student> _

  14:                              %>

  15:                          </Students>

  16:         xmlStudent.Save("students.xml")

  17:         Console.WriteLine(xmlStudent.ToString())

  18:     End Sub

  19: End Module

jika dijalankan programnya akan menampilkan

Pada kode diatas kita menggenerate dokumen xml menggunakan nilai
yang diambil dari anonymous types yang sudah kita buat sebelumnya, anda
juga dapat menggenerate dokumen XML dengan data yang anda ambil dari
database, dll. Embedded Expression juga dapat digunakan untuk
menggenerate “VB View” secara dinamis pada ASP.NET MVC.

Selamat mencoba XML Literal dari VB9 ^_^

April 13, 2009 Actual Training

Fitur VB9 (LINQ Query)

Halo ini adalah posting kesepuluh saya tentang fitur dari VB9
tentang LINQ Query. LINQ (Language Integrated Query) adalah fitur yang
mensupport sintaks query pada general purpose programming language,
anda dapat melakukan query ke berbagai sumber data seperti object,
Database, XML, dll. Mungkin anda sudah sering melihat kode-kode LINQ di
C#, nah kali ini saya akan mencoba mencontohkan versi VB-nya :)

anda dapat melihat posting saya sebelumnya:

LINQ to Object / LINQ to Memory

Misal anda akan mengambil data dari object Array, anda dapat menuliskan kode:

Dim nilai() = {12, 34, 56, 11, 45, 66}
Dim query = From n In nilai _
            Where n Mod 2 = 0 _
            Select n
For Each bil In query
    Console.WriteLine(bil)
Next

query diatas akan mengembalikan bilangan yang genap, anda dapat menuliskannya dalam bentuk Lambda sebagai berikut:

Dim query = nilai.Where(Function(x) x Mod 2 = 0).Select(Function(x) x)
For Each bil In query
    Console.WriteLine(bil)
Next

Object yang dapat diquery dengan LINQ harus bertipe IEnumerable(Of
T), Select() dan Where() adalah Extension Method yang ditambahkan ke
IEnumerable(Of T), asal dari Select() dan Where() sebenarnya dari
System.Linq.Enumerable, aslinya anda dapat menuliskan:

Dim query = Enumerable.Select(Enumerable.Where(nilai, Function(x) x Mod 2 = 0), Function(x) x)
For Each bil In query
    Console.WriteLine(bil)
Next

LINQ to SQL

Selain query ke object, anda dapat juga melakukan query ke database
SQL Server, menggunakan OR Mapping tools yang bernama LINQ to SQL. ORM
digunakan untuk mapping dari database relational ke object. Misal anda
mempunyai database dengan nama MhsDb, kemudian dalam database tersebut
terdapat satu table dengan nama Mahasiswa dan fields berikut (nim
char(8) primary key, nama varchar(50), dan ipk float).

Pertama buat class dengan nama Mahasiswa.vb, kemudian mapping table Mahasiswa kedalam class:

Imports System.Data.Linq.Mapping
<Table(Name:="dbo.Mahasiswa")> _
Public Class Mahasiswa
    Private _nim As String
    <Column(IsPrimaryKey:=True)> _
    Public Property Nim() As String
        Get
            Return _nim
        End Get
        Set(ByVal value As String)
            _nim = value
        End Set
    End Property

    Private _nama As String
    <Column()> _
    Public Property Nama() As String
        Get
            Return _nama
        End Get
        Set(ByVal value As String)
            _nama = value
        End Set
    End Property

    Private _ipk As Single
    <Column()> _
    Public Property Ipk() As Double
        Get
            Return _ipk
        End Get
        Set(ByVal value As Double)
            _ipk = value
        End Set
    End Property
End Class

Anda dapat juga melakukan mapping secara otomatis menggunakan fasilitas “LINQ to SQL Class” atau “SQL Metal”.

Untuk mengakses data menggunakan LINQ to SQL kita harus membuat
object DataContext terlebih dahulu, kemudian ambil table yang akan kita
query

Imports System.Data
Imports System.Linq
Imports System.Data.Linq

Sub Main()

        Dim strConn = "Data Source=.\SQLEXPRESS;Integrated Security=SSPI;Initial Catalog=MhsDb;"
        Dim db As New DataContext(strConn)
        Dim tMahasiswa = db.GetTable(Of Mahasiswa)()

        Dim query = From m In tMahasiswa _
                    Select m

        For Each mhs In query
            Console.WriteLine(mhs.Nim & " " & mhs.Nama & " " & mhs.Ipk)
        Next
End Sub

LINQ Query Operator

Beberapa operator LINQ yang dapat digunakan adalah:

From : source dari query yang akan digunakan

From <tampung> [As<type>] In <source>

tampung berisi variable tampung yang akan digunakan dalam query
type berisi tipe data dari tampung (tapi tidak harus
disebutkan karena vb akan secara otomatis menggunakan local type
inference untuk menentukan tipenya). biasanya dapat berupa
IEnumerable(Of T) atau IQueryable(Of T)
source berisi referensi ke object source, dapat berupa in-memory collection atau IQueryable(Of T) object

Select : mendefinisikan projection clause dalam query

Select <projection>

projection dapat berisi expression yang mengembalikan satu object,
dapat juga berupa tampung dari From clause, atau object yang lebih
kompleks.

[alias = ] <column>

anda juga dapat mendefinisikan alias (sifatnya optional),
mengindikasikan nama dari property yang akan digenerate oleh anonymous
type yang mewakili projection.
column mengacu ke fields atau property pada tampung, tapi dapat juga berupa expression yang lebih kompleks

Contoh:

'mencetak 9 8 7 6 5 4
Dim bil = From i In New Integer() {9, 8, 7, 6, 5, 4} Select i
For Each i In bil
    Console.WriteLine(i)
Next

'menghasilkan anonymous type {Dobel=2,Tripel=3},{Dobel=4,Tripel=6}
Dim bil2 = From i In New Integer() {1, 2} Select Dobel = 2 * i, Tripel = 3 * i
For Each i In bil2
    Console.WriteLine(i.Dobel & " " & i.Tripel)
Next

Order By : digunakan untuk mengurutkan hasil query

Order By <ordering> [Ascending] [Descending]

ordering berisi expression key yang digunakan untuk proses pengurutan

Contoh:

Dim mhs() = {New With {.Nim = "22081234", .IPK = 3.2}, _
             New With {.Nim = "23081235", .IPK = 3.5}, _
             New With {.Nim = "23081231", .IPK = 2.5}}
Dim query = From m In mhs Order By m.Nim Acending Order By m.IPK Select m.Nim, m.IPK
For Each m In query
    Console.WriteLine(m.Nim & " " & m.IPK)
Next

Distinct : melakukan filter terhadap nilai yang terduplikasi dari query

Contoh:

'menghasilkan 1 2 3 4
Dim bil = From i In New Integer() {1, 1, 1, 2, 3, 4} Select i Distinct
For Each b In bil
   Console.Write(b & " ")
Next

Skip dan Take: untuk memfilter range dari nilai hasil query

Take<number> : poisisi
Skip <number> : banyak nilai yang diambil

Contoh:

'menghasilkan 5,6 (ambil dari posisi ke 4 sebanyak 2 nilai)
Dim bil = From i In New Integer() {1, 2, 3, 4, 5, 6, 7, 8, 9, 10} _
          Select i Skip (4) Take (2)
For Each b In bil
    Console.Write(b & " ")
Next

Aggregate : digunakan untuk operasi aggregation, contoh agregation

Count
Sum
Min
Max
Average

Aggregate <tampung> In <source> Into <aggregation list>

Contoh:

'penggunaan Sum
Dim tot = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Total = Sum()
Console.WriteLine(tot)

'penggunaan Count
Dim jml = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Jumlah = Count()
Console.WriteLine(jml)

'penggunaan Min
Dim min = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Minimal = Min()
Console.WriteLine(min)

'penggunaan Average
Dim rata = Aggregate i In (From i In New Integer() {1, 2, 3, 4, 5, 6} Select i) Into Minimal = Average()
Console.WriteLine(rata)

Grouping : digunakan untuk membuat group berdasarkan group expression yang dibuat

Group By <key> Into Aggregate

Contoh:

Dim mhs() = {New With {.Nim = "22081234", .Jurusan = "TI", .IPK = 3.2}, _
             New With {.Nim = "23081235", .Jurusan = "SI", .IPK = 3.5}, _
             New With {.Nim = "23081231", .Jurusan = "SI", .IPK = 2.5}}
Dim query = From m In mhs Group By m.Jurusan Into Anggota = Group
For Each jur In query
   Console.WriteLine(jur.Jurusan)
   For Each m In jur.Anggota
       Console.WriteLine("- NIM :" & m.Nim & " IPK :" & m.IPK)
   Next
Next

Join : menggabungkan multiple source bersama berdasarkan kondisi join tertentu

Join <tampung> In <source> On <key1> equals <key2> and ….

Dim mhs() = {New With {.Nim = "22081234", .Jurusan = "TI", .IPK = 3.2}, _
             New With {.Nim = "23081235", .Jurusan = "SI", .IPK = 3.5}, _
             New With {.Nim = "23081231", .Jurusan = "SI", .IPK = 2.5}}

Dim kul() = {New With {.Kode = "IM2043", .Nama = "Web Database"}, _
             New With {.Kode = "IM2033", .Nama = "Rekayasa Web"}}

Dim ambil() = {New With {.Id = 1, .Kode = "IM2043", .Nim = "22081234"}, _
               New With {.Id = 2, .Kode = "IM2033", .Nim = "23081235"}, _
               New With {.Id = 3, .Kode = "IM2043", .Nim = "23081231"}}

Dim query = From m In mhs _
           Join a In ambil On m.Nim Equals a.Nim _
           Join k In kul On a.Kode Equals k.Kode _
           Select m.Nim, k.Nama

For Each hsl In query
       Console.WriteLine("Mahasiswa dengan Nim : " & hsl.Nim & " mengambil Matakuliah : " & hsl.Nama)
Next

demikian beberapa contoh penggunaan LINQ Query di VB9, untuk
contoh-contoh lebih detail tentang penggunaan LINQ (VB) akan dibahas di
posting2 selanjutnya, viva VB :)

April 13, 2009 Actual Training

Fitur VB9 (Lambda Expression)

Halo, setelah lama absen posting tentang VB kangen juga untuk
membahas fitur-fitur baru VB :), posting ini adalah posting kesembilan
saya tentang fitur dari VB9 yaitu Lambda Expression, Mungkin anda sudah
sering menggunakan Lambda Expression di C# 3.0, pada posting kali ini
akan ditunjukan juga beberapa perbedaan fitur di VB dan C#.

anda dapat melihat posting saya sebelumnya:

Lambda Expression adalah istilah yang diambil dari functional
programming, Lambda Expression digunakan untuk memudahkan anda membuat
fungsi/method. contoh penulisan Lambda Expression

Function (e) e + 1

fungsi diatas mempunyai satu parameter e, dan mengembalikan e+1.

Untuk menunjukan penggunaan Lambda Expression pada VB, maka sebagai
contoh saya akan membuat array berisi integer dan memfilter yang
nilainya > 6 dengan Lambda Expression

Sub Main()
        Dim arrBil() = {4, 5, 7, 9, 12, 3, 2}
        Dim filter = arrBil.Where(Function(b) b > 5)
        For Each i In filter
            Console.WriteLine(i)
        Next
End Sub

Lambda Expression dan Delegates

Lambda Expression dapat digunakan untuk mempermudah penggunaan delegates di VB. Tanpa Lambda anda dapat menuliskan:

'deklarasi delegates
Public Delegate Function UbahInt(ByVal x As Integer) As Integer

'buat fungsi yang akan ditunjuk oleh delegates
Function Gandakan(ByVal x As Integer) As Integer
        Return x * 2
End Function

Kemudian buat instance delegates sebagai berikut

Sub Main()
        Dim mydel As UbahInt = New UbahInt(AddressOf Gandakan)
        Console.WriteLine("{0}", mydel(5))
End Sub

Maka program diatas akan mencetak 10.

Dengan menggunakan Lambda Expression anda dapat menuliskan :

Public Delegate Function UbahInt(ByVal x As Integer) As Integer

Sub Main()
        Dim mydel As UbahInt = Function(x) x * 2
        Console.WriteLine(mydel(5))
End Sub

Program diatas juga akan mencetak 10 sama dengan sebelumnya, tapi
dengan menggunakan Lambda Expression penambahan method menjadi lebih
mudah :)

Menggunakan Lambda dengan Dua Parameter

Anda juga dapat menggunakan Lambda dengan dua parameter, cara penulisannya:

'delegates dengan dua parameter
Public Delegate Function Kali(ByVal x As Integer, ByVal y As Integer) As Integer

'mencetak 5*6=30
Sub Main()
      Dim mydel = Function(x, y) x * y
      Console.WriteLine(mydel(5, 6))
End Sub

Anda juga dapat menggunakan Select() extension method dengan Lambda
Expression yang mempunyai dua parameter, parameter pertama untuk nilai
sedangkan parameter kedua untuk index

Dim nama() = {"erick", "wely", "sony", "ridi"}
Dim filter = nama.Select(Function(x, i) "Nama ke " + i.ToString() + " : " + x)
For Each i In filter
     Console.WriteLine(i)
Next

jika program dijalankan akan mencetak:

Statement Lambda Expression

VB9 belum mendukung Statement Lambda Expression seperti yang ada
pada C# 3.0, VB akan mensupport fitur ini pada versi VB10. Jika
menggunakan Statement Lambda Expression di C# anda dapat menuliskan:

//menggunakan Statement Lamda pada C# 
string[] nama = new[] { "erick","wely","sony","ridi","eriawan" };

foreach (string n in nama.Where(
       x => {
           if (x.Contains("eri"))
                  return true;
           else
                  return false;
            }
         ))

Console.WriteLine(n);

dengan VB9 anda dapat menghasilkan output yang sama dengan menuliskan kode sebagai berikut:

Function CekNama(ByVal nama As String)
        If nama.Contains("eri") Then
            Return True
        Else
            Return False
        End If
End Function

Sub Main()
        Dim nama() = {"erick", "wely", "sony", "eriawan"}
        Dim filter = nama.Where(Function(x) CekNama(x))
        For Each n In filter
            Console.WriteLine(n)
        Next
End Sub

maka akan dicetak output:

happy coding ^_^

April 13, 2009 Actual Training

LIstView dan Data Pager Control (bagian 2)

Posting ini adalah lanjutan dari posting sebelumnya di

Topik yang akan dibahas pada posting kali ini:

Sorting dengan ListView
Edit, Delete data dengan ListView
Insert data dengan ListView
Sekilas DataPager Control
Contoh menggunakan DataPager
Custom Paging

Source code untuk contoh-contoh aplikasi dapat anda download di

download source code disini

Sorting Dengan ListView

Anda juga dapat menambahkan sorting pada ListView control dengan cara merubah property ‘CommandName’ menjadi ‘Sort’ dan ‘CommandArgument’ berisi nama kolom untuk yg akan disorting.

Contoh sorting dengan ListView Control (ListSort.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM

   7:       Kategori"></asp:SqlDataSource>

   8:    <asp:ListView ID="lvBerita" runat="server"

   9:      DataSourceID="sdsKategori">

  10:      <LayoutTemplate>

  11:       <table border="1px" style="border-collapse:collapse;">

  12:         <thead>

  13:         <tr>

  14:           <th><asp:LinkButton ID="lnkId" Text="ID"

  15:             CommandName="Sort" CommandArgument="id_kat"

  16:             runat="server" /></th>

  17:           <th><asp:LinkButton ID="lnkNama" Text="Nama

  18:             Kategori" CommandName="Sort"

  19:             CommandArgument="nama_kat"

  20:             runat="server" /></th>

  21:         </tr>

  22:         </thead>

  23:         <tbody>

  24:           <asp:PlaceHolder ID="itemPlaceHolder"

  25:             runat="server" />

  26:         </tbody>

  27:       </table>

  28:      </LayoutTemplate>

  29:      <ItemTemplate>

  30:        <tr>

  31:          <td><%# Eval("id_kat") %></td>

  32:          <td><%# Eval("nama_kat") %></td>

  33:        </tr>

  34:      </ItemTemplate>

  35:    </asp:ListView>

  36: </div>

  37: </form>

Edit, Delete, Insert Data dengan ListView

ListView menggunakan tag-tag <EditItemTemplate>, <DeleteItemTemplate>, <InsertItemTemplate> untuk inser, edit, delete data. Didalam tag tersebut anda dapat membuat tampilan ketika tombol edit, insert, atau delete ditekan.

Contoh Edit dan Delete data menggunakan ListView (EditList.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM [Kategori]"

   7:     DeleteCommand="DELETE FROM [Kategori]

   8:       WHERE [id_kat] = @id_kat"

   9:     UpdateCommand="UPDATE [Kategori] SET [nama_kat] =

  10:       @nama_kat WHERE [id_kat] = @id_kat">

  11:     <DeleteParameters>

  12:       <asp:Parameter Name="id_kat" Type="Int32" />

  13:     </DeleteParameters>

  14:     <UpdateParameters>

  15:       <asp:Parameter Name="nama_kat" Type="String" />

  16:       <asp:Parameter Name="id_kat" Type="Int32" />

  17:     </UpdateParameters>

  18:   </asp:SqlDataSource>

  19:   <asp:ListView ID="lvKategori" runat="server"

  20:     DataKeyNames="id_kat" DataSourceID="sdsKategori">

  21:     <LayoutTemplate>

  22:      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />

  23:     </LayoutTemplate>

  24:     <ItemTemplate>

  25:       <div style="border:solid 1px black;width:250px">

  26:         <h3><%# Eval("nama_kat") %></h3>

  27:         <p>Id: <%# Eval("id_kat") %></p><hr />

  28:         <asp:LinkButton id="lnkEdit" Text="{Edit}"

  29:           CommandName="Edit" Runat="server" />

  30:         <asp:LinkButton id="lnkDelete" Text="{Delete}"

  31:           CommandName="Delete" Runat="server"

  32:           OnClientClick="return confirm('Anda yakin

  33:           mendelete data?')" />

  34:       </div>

  35:     </ItemTemplate>

  36:     <EditItemTemplate>

  37:       <div style="border:solid 1px black;width:250px">

  38:         Nama Kategori :<asp:TextBox ID="txtKat" Text='<%#

  39:           Bind("nama_kat") %>' runat="server" />

  40:         <asp:RequiredFieldValidator ID="rfvKat"

  41:           runat="server" ControlToValidate="txtKat"

  42:           ErrorMessage="{required}" /><hr />

  43:         <asp:LinkButton id="lnkUpdate" Text="{Update}"

  44:           CommandName="Update" Runat="server" />

  45:         <asp:LinkButton id="lnkCancel" Text="{Cancel}"

  46:           CommandName="Cancel" Runat="server" />

  47:       </div>

  48:       </EditItemTemplate>

  49:   </asp:ListView>

  50: </div>

  51: </form>

Contoh insert data menggunakan ListView (InsertList.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     InsertCommand="INSERT INTO [Kategori] ([nama_kat])

   7:       VALUES (@nama_kat)"

   8:     SelectCommand="SELECT * FROM [Kategori]">

   9:     <InsertParameters>

  10:       <asp:Parameter Name="nama_kat" Type="String" />

  11:     </InsertParameters>

  12:   </asp:SqlDataSource>

  13:   <asp:ListView ID="lvKategori" runat="server"

  14:     DataSourceID="sdsKategori"

  15:     InsertItemPosition="FirstItem">

  16:   <LayoutTemplate>

  17:     <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />

  18:   </LayoutTemplate>

  19:   <ItemTemplate>

  20:    <div style="border:solid 1px black;width:250px">

  21:     <h3><%# Eval("nama_kat") %></h3>

  22:     <p>Id Kategori : <%# Eval("id_kat") %></p><hr />

  23:    </div>

  24:   </ItemTemplate>

  25:   <InsertItemTemplate>

  26:    <div style="border:solid 1px black;width:250px">

  27:      <h3>Tambah Kategori</h3>

  28:      Nama Kategori :<asp:TextBox ID="txtKat" Text='<%#

  29:        Bind("nama_kat") %>' runat="server" /><hr />

  30:      <asp:LinkButton ID="lnkInsert" Text="{Insert}"

  31:        CommandName="Insert" runat="server" />

  32:    </div>

  33:   </InsertItemTemplate>

  34:   </asp:ListView>

  35: </div>

  36: </form>

DataPager Control

DataPager adalah pasangan dari ListView yang digunakan untuk paging halaman. DataPager dapat digunakan oleh semua control yang mengimplementasikan interface IPageableItemContainer. Di ASP.NET 3.5 baru ada satu control yang mengimplementasikan interface tersebut yaitu ListView ^_^

DataPager control mempunyai beberapa property yang penting yaitu:

PageSize: jumlah data yang akan ditampilkan.
PagedControlId: ambil atau set control pada halaman.
Fields: ambil fields yang ada pada DataPager.
StartRowIndex: ambil index dari item pertama yang ditampilkan.
MaximumRows: ambil maksimum row yang diambil dari data source.
TotalRowCount: ambil total number dari items yang ada pada data source.
NextPreviousPagerFields : untuk menampilkan link dalam bentuk next, previous, first dan last.
NumericPagerFileds: menampilkan link dalam bentuk numeric.
TemplatePagerField: membuat custom user interface pada paging.

Contoh menggunakan DataPager (ShowDataPager.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsBerita" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM

   7:       [Berita]"></asp:SqlDataSource>

   8:     <asp:ListView ID="lvBerita" runat="server"

   9:       DataSourceID="sdsBerita">

  10:     <LayoutTemplate>

  11:     <table border="2">

  12:     <thead>

  13:       <th>Judul</th><th>Berita</th><th>Tanggal</th>

  14:     </thead>

  15:     <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />

  16:     </table>

  17:     <asp:DataPager ID="dpBerita" PageSize="2"

  18:       runat="server">

  19:       <Fields>

  20:         <asp:NextPreviousPagerField

  21:           ShowFirstPageButton="true"

  22:           ShowPreviousPageButton="true"

  23:           ShowNextPageButton="false"

  24:           ShowLastPageButton="false" />

  25:         <asp:NumericPagerField />

  26:         <asp:NextPreviousPagerField

  27:           ShowFirstPageButton="false"

  28:           ShowPreviousPageButton="false"

  29:           ShowNextPageButton="true"

  30:           ShowLastPageButton="true" />

  31:       </Fields>

  32:     </asp:DataPager>

  33:     </LayoutTemplate>

  34:     <ItemTemplate>

  35:       <tr>

  36:         <td><%# Eval("judul_berita") %></td>

  37:         <td><%# Eval("detail_berita") %></td>

  38:         <td><%# Eval("tanggal") %></td>

  39:       </tr>

  40:     </ItemTemplate>

  41:   </asp:ListView>

  42: </div>

  43: </form>

Membuat Custom Paging

Jika anda tidak puas dengan default paging yang disediakan, anda dapat menggunakan TemplatePagerField.

Contoh menggunakan DataPager TemplatePagerField (PagerTemplate.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsBerita" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM

   7:       [Berita]"></asp:SqlDataSource>

   8:    <asp:ListView ID="lvBerita" runat="server"

   9:       DataSourceID="sdsBerita">

  10:     <LayoutTemplate>

  11:      <table border="1">

  12:      <thead>

  13:         <th>Judul</th><th>Berita</th><th>Tanggal</th>

  14:      </thead>

  15:      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />

  16:      </table>

  17:      <asp:DataPager ID="dpBerita" runat="server"

  18:        PageSize="2">

  19:        <Fields>

  20:          <asp:TemplatePagerField

  21:            OnPagerCommand="dpBerita_OnPagerCommand">

  22:          <PagerTemplate>

  23:            <asp:LinkButton ID="lnkPrev" Text="{Prev}"

  24:              CommandName="Previous" runat="server" />

  25:            <asp:LinkButton ID="lnkNext" Text="{Next}"

  26:              CommandName="Next" runat="server" />

  27:          </PagerTemplate>

  28:          </asp:TemplatePagerField>

  29:        </Fields>

  30:      </asp:DataPager>

  31:     </LayoutTemplate>

  32:     <ItemTemplate>

  33:       <tr>

  34:         <td><%# Eval("judul_berita") %></td>

  35:         <td><%# Eval("detail_berita") %></td>

  36:         <td><%# Eval("tanggal") %></td>

  37:       </tr>

  38:     </ItemTemplate>

  39:    </asp:ListView>

  40: </div>

  41: </form>

Kemudian tambahkan kode berikut pada event ‘OnPagerCommand’ pada TemplateFields.

   1: protected void dpBerita_OnPagerCommand(object sender,

   2: DataPagerCommandEventArgs e) {

   3:     e.NewMaximumRows = e.Item.Pager.MaximumRows;

   4:     switch (e.CommandName) {

   5:     case "Previous":

   6:       if (e.Item.Pager.StartRowIndex > 0)

   7:         e.NewStartRowIndex = e.Item.Pager.StartRowIndex - 2;

   8:       break;

   9:     case "Next":

  10:         e.NewStartRowIndex = e.Item.Pager.StartRowIndex + 2;

  11:       break;

  12:     }

  13: }

Dibandingkan dengan GridView, Kombinasi ListView dan DataPager menawarkan fleksibilitas yang lebih besar kepada programmer untuk memodifikasi tampilan dan program. Secara pribadi saya menyarankan penggunaan dua control baru ini daripada control lama seperti GridView, DataList, atau Repeater.

selesai ^_^

March 23, 2009 Actual Training

LIstView dan Data Pager Control (bagian 1)

Pada posting kali ini saya ingin membahas fitur yang menurut saya sangat menarik pada ASP.NET 3.5 yaitu ListView dan Data Pager

ListView dan DataPager adalah control baru pada ASP.NET 3.5. ListView adalah control yang amat sangat fleksible, anda dapat menggunakan ListView untuk kasus yang sama seperti ketika anda menggunakan GridView, DataList, FormView, dan Repeater control. Sedangkan DataPager adalah pasangan dari ListView yang digunakan untuk paging data.

Topik yang akan dibahas:

Sekilas ListView Control
Penggunaan Layout Template dan Item Template
Menampilkan tabular data dengan ListView
Menggunakan Group Template
Membuat Master/Detail dengan ListView

Source code untuk contoh-contoh aplikasi dapat anda download di

download source code disini

ListView Control

Anda dapat membayangkan bahwa LisView adalah GridView control yang amat sangat fleksible. Sama seperti GridView, ListView juga dapat digunakan untuk display, edit, delete select, dan sorting data, bedanya dengan GridView, ListView merupakan control yang berbasis template secara keseluruhan, ListView juga dapat digunakan untuk insert data.

ListView juga mirip dengan DataList karena dapat digunakan untuk menampilkan data yang terdiri dari beberapa kolom. ListView juga mirip dengan Repeater karena semuanya berbasis template.

ListView mempunyai beberapa tempalate yang dapat digunakan diantaranya:

LayoutTemplate
ItemTemplate
GroupTemplate
EmptyItemTemplate
EmptyDataTemplate
SelectedItemTemplate
AlternatingItemTemplate
EditItemTemplate
InsertItemTemplate

Contoh Penggunaan Layout Template dan Item Template (SimpleListView.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM

   7:       [Kategori]"></asp:SqlDataSource>

   8:     <asp:ListView ID="lvKategori" runat="server"

   9:       DataSourceID="sdsKategori">

  10:       <LayoutTemplate>

  11:         <div style="border:dotted 1px black; width:200px;">

  12:           <asp:PlaceHolder ID="itemPlaceHolder"

  13:             runat="server" />

  14:         </div>

  15:       </LayoutTemplate>

  16:       <ItemTemplate>

  17:         <div style="border:solid 1px black;">

  18:           <%# Eval("nama_kat") %>

  19:         </div>

  20:         </ItemTemplate>

  21:       <AlternatingItemTemplate>

  22:         <div style="border:solid 1px black; background-

  23:           color:Silver;">

  24:           <%# Eval("nama_kat") %>

  25:         </div>

  26:       </AlternatingItemTemplate>

  27:       <EmptyDataTemplate>

  28:           No Record Found

  29:       </EmptyDataTemplate>

  30:     </asp:ListView>

  31: </div>

  32: </form>

Pada contoh diatas LayoutTemplate digunakan untuk membuat <div> paling luar yang akan berisi semua data yang ditampilkan oleh ListView. LayoutTemplate hanya dirender sekali saja ketika halaman dibuat. Di dalam LayoutTemplate anda perlu menambahkan itemPlaceHolder yang nanti akan diganti oleh tag-tag yang ada dalam ItemTemplate.

ItemTemplate digunakan untuk merender data semua data yang ada pada data source. Jadi bagian yang dijalankan berulang-ulang adalah ItemTemplate sesuai dengan jumlah data yang ada di data source.

AlternatingItemTemplate bersifat opsional, pada program diatas digunakan untuk menampilkan data yang background colornya silver. EmptyDataTemplate akan ditampilkan jika tidak ada data pada data source alias kosong.

Jika biasanya anda menampilkan data tabular menggunakan GridView, maka sekarang anda dapat membuat yang lebih fleksible menggunakan ListView

Contoh menampilkan table pada ListView (TableList.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM

   7:      [Kategori]"></asp:SqlDataSource>

   8:     <asp:ListView ID="lvKategori" runat="server"

   9:       DataSourceID="sdsKategori">

  10:      <LayoutTemplate>

  11:       <table border="1px" style="border-collapse:collapse;">

  12:       <thead>

  13:         <tr><td>ID</td><td>Nama Kategori</td></tr>

  14:       </thead>

  15:       <tbody>

  16:         <asp:PlaceHolder ID="itemPlaceHolder"

  17:           runat="server" />

  18:       </tbody>

  19:       </table>

  20:      </LayoutTemplate>

  21:      <ItemTemplate>

  22:        <tr>

  23:          <td><%# Eval("id_kat") %></td>

  24:          <td><%# Eval("nama_kat") %></td>

  25:        </tr>

  26:      </ItemTemplate>

  27:      <EmptyDataTemplate>

  28:             No Record Found

  29:      </EmptyDataTemplate>

  30:     </asp:ListView>

  31: </div>

  32: </form>

Menggunakan GroupTemplate

Anda dapat menggunakan ListView GroupTemplate untuk mengelompokan beberapa item. GroupTemplate berguna ketika anda ingin menampilkan multiple column pada ListView.

Contoh menggunakan GroupTemplate (ListGroup.aspx’)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsPhoto" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM

   7:       [Photo]"></asp:SqlDataSource>

   8:   <asp:ListView ID="lvPhoto" runat="server"

   9:     GroupItemCount="3" DataSourceID="sdsPhoto">

  10:    <LayoutTemplate>

  11:     <asp:PlaceHolder ID="groupPlaceHolder" runat="server" />

  12:    </LayoutTemplate>

  13:    <GroupTemplate>

  14:    <div>

  15:      <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />

  16:    </div>

  17:    </GroupTemplate>

  18:    <ItemTemplate>

  19:      <asp:Image ID="imgPhoto" Width="200px" ImageUrl='<%#

  20:        Eval("namafile","~/Photo/{0}") %>' runat="server" />

  21:    </ItemTemplate>

  22:   </asp:ListView>

  23: </div>

  24: </form>

Contoh Membuat Master Details dengan ListView (ListMasterDetail.aspx)

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

   2: <div>

   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"

   4:     ConnectionString="<%$

   5:     ConnectionStrings:MhsConnectionString %>"

   6:     SelectCommand="SELECT * FROM

   7:       [Kategori]"></asp:SqlDataSource>

   8:   <asp:SqlDataSource ID="sdsBerita" runat="server"

   9:     ConnectionString="<%$

  10:     ConnectionStrings:MhsConnectionString %>"

  11:     SelectCommand="SELECT * FROM [Berita]

  12:       WHERE ([id_kat] = @id_kat)">

  13:     <SelectParameters>

  14:     <asp:ControlParameter ControlID="lvKategori"

  15:       Name="id_kat" />

  16:     </SelectParameters>

  17:   </asp:SqlDataSource>

  18:   <asp:ListView ID="lvKategori" runat="server"

  19:     DataSourceID="sdsKategori" DataKeyNames="id_kat">

  20:     <LayoutTemplate>

  21:      <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />

  22:     </LayoutTemplate>

  23:     <ItemTemplate>

  24:       <div>

  25:       <asp:LinkButton ID="lnkSelect" Text='<%#

  26:         Eval("nama_kat") %>' CommandName="Select"

  27:         runat="server" />

  28:       </div>

  29:     </ItemTemplate>

  30:     <SelectedItemTemplate>

  31:         <%# Eval("nama_kat") %>

  32:     </SelectedItemTemplate>

  33:     </asp:ListView><br /><br />

  34:     <asp:ListView ID="lstBerita" runat="server"

  35:       DataSourceID="sdsBerita"

  36:       onitemdatabound="lstBerita_ItemDataBound">

  37:     <LayoutTemplate>

  38:       <table border="1px" style="border-collapse:collapse;">

  39:         <thead>

  40:           <td>No</td><td>Judul</td>

  41:           <td>Berita</td><td>Tanggal</td>

  42:         </thead>

  43:         <tbody>

  44:           <asp:PlaceHolder ID="itemPlaceHolder"

  45:             runat="server" />

  46:         </tbody>

  47:       </table>

  48:       </LayoutTemplate>

  49:       <ItemTemplate>

  50:         <tr>

  51:           <td><asp:Label ID="lblNo" runat="server" /></td>

  52:           <td><%# Eval("judul_berita") %></td>

  53:           <td><%# Eval("detail_berita") %></td>

  54:           <td><%# Eval("tanggal") %></td>

  55:         </tr>

  56:       </ItemTemplate>

  57:     </asp:ListView>

  58: </div>

  59: </form>

Untuk menambahkan urutan pada kolom ‘No’, tambahkan kode pada event ‘ItemDataBound’.

   1: private int count = 0;

   2: protected void lstBerita_ItemDataBound(object sender,

   3:   ListViewItemEventArgs e) {

   4:         count++;

   5:         Label lblNo = (Label)e.Item.FindControl("lblNo");

   6:         lblNo.Text = count.ToString();

   7: }

Isi dari SelectItemTemplate akan ditampilkan ketika anda memilih salah satu link kategori. Anda dapat manampikan style berbeda pada SelectedItemTemplate.

Perhatikan bahwa linkButton pada ItemTemplate mempunyai property ‘CommandName’ yaitu ‘Select’, berarti jika link tersebut diklik maka perintah select dijalankan. Karena pada ‘lvKategori’ property ‘DataKeyNames’ berisi ‘id_kat’ maka jika user menekan select maka akan dikembalikan nilai ‘id_kat’ dari record yang dipilih.

bersambung next post ^_^