Author: Actual Training

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:

image

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

image

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.

image

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

image

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

image

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

image

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

image

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

image

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  ^_^

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 :)

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:

image  

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:

image 

happy coding ^_^

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

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>

image

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>

image

image

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>

image

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>

image_thumb3

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: }

image_thumb5

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 ^_^

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

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.

image

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>

image

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>

image

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.

image

bersambung next post ^_^

Actual Training

Seminar UKDW Jogja

Seminar “Technology Update” yang diselenggarakan pada hari 14 Februari 2009, di Auditorium kampus UKDW, Yogyakarta berjalan dengan lancar, biarpun awalnya pihak panita merasa ‘was-was’ karena acara dilangsungkan tepat pada ‘Valentine Day’ ^_^, tapi ternyata peserta yang hadir lumayan banyak sekitar 200 orang yang sebagian besar adalah mahasiswa. Acara ini didukung oleh MUGI, Gigabyte, UKDW, Inixindo, Penerbit Andi dan masih banyak sponsor lokal lain, materi yang dibawakan pada seminar tersebut adalah:

  • Motherboard Technology oleh Bapak Benny Lodewijk (Gigabyte, Lead Komunitas Overclock)
  • Berkarir dengan Sertifikasi IT Microsoft, oleh Bapak Mustofa (Manager Education Inixindo Jogja)
  • SAM (Software Asset Management), oleh Bapak David Yacobus (MUGI Jakarta)
  • Rich Internet Application with Silverlight 2.0, oleh Bapak Ridi Ferdiana (MIC Lead UGM, Dosen UGM)
  • JQuery with ASP.NET, oleh Bapak Erick Kurniawan (MUGI Jogja, Dosen UKDW)

Acara berlangsung dengan meriah dan seru dari awal sampai akhir walaupun waktu seminar cukup lama dari pukul 08.00 sd 16.00, tapi peserta tetap antusias dalam mengikuti jalannya acara, ini terbukti sampai sesi terakhir peserta belum meninggalkan ruang seminar.

Berikut oleh-oleh foto dari jogja…

CIMG3795

Poster di depan kampus UKDW

CIMG3765

Mahasiswa mendaftar Komunitas MUGI

CIMG3770

Ruang Auditorium UKDW tempat dilangsungkan acara seminar

CIMG3773

CIMG3806

Pak David Yacobus membawakan materi SAM

CIMG3811

Pak Ridi Ferdiana membawakan materi RIA with Silverlight

CIMG3819

Saya membawakan materi JQuery with ASP.NET

CIMG3833

Pak David, Pak Ridi, dan saya

CIMG3835

Foto-foto bersama tim Panitia

CIMG3840

CIMG3756

Bakmi Jawa “Kadin”, bakmi jawa paling top markotop di Jogja ^_^, bagi temen2 MUGI yang pengen nyoba ditunggu kedatangannya di jogja hehe ^_^

Materi seminar dan source code dapat didownload disini:

RIA with Silverlight 2.0 RIA with Silverlight 2.0

JQuery with ASP.NET JQuery with ASP.NET

Actual Training

Seminar Technology Update

Pada hari sabtu 14 Februari 2009 (pas hari valentine ^_^) diadakan seminar “Technology Update” yang membahas tentang teknologi hardware terbaru dan teknologi dari Microsoft, acara akan dilangsungkan dari jam 8.30 pagi sampai 16.00, kebetulan saya juga berkesempatan untuk menjadi pembicara dengan topik “JQuery with ASP.NET”.

 image