Menambahkan control DetailsView

1. Pada tampilan design tampilkan toolbox
2. Pada tab data pilih DetailsView, drag and drop control DetailsView ke area windows desidn view
   
3. Pada menu DetailsView Tasks pilih pada com box Chode Data Source, akan muncul Choose Data Source Wizard
   
4. Pilih Access Database, tentukan ID dari data source (secara default ID data source adalah AccessDataSource1), lalu klik tombol OK. Akan muncul dialog box Configure Data Source - AccessDataSource1
   
5. Klik tombol browse untuk memcari file database Microsoft Access. Akan muncul dialog box Select Microsoft Access Database
   
6. Pada klik pada folder App_Data, klik file Microsoft Access database HRD.MDB, lalu klik tombol OK. Dialog box Configure Data Source - AccessDataSource1 akan kembali tampil dengan sudah ada nama file HRD.MDB pada text box Microsoft Access data file.
7. Klik tombol Next, akan muncul dialog box Configure the select statement.
8. Pilih Specify column from a tabel or view. Pilih tabel Karyawan dari combo box Name dan aktifkan check box dengan tanda * untuk memilih semua field agar disertakan pada perintah Select. Seperti terlihat pada gambar berikut
   
9. Klik tombol Where pada kotak dialog, akan muncul dialog box ADD WHERE clause
   
10. Pada combo box Column pilih field NIK, pada pilihan Operator pilih tanda =, pada combo box Source pilih Session. Pada Parameter properties isi Session field dengan nama NIK lalu klik tombol Add. Lalu klik tombol OK.

Berikut adalah code program yang dibuat oleh Visual Web Developer dari melakukan langkah-langkah di atas.

<%@ Page Language="VB"
   MasterPageFile="~/MasterPage.master"
   AutoEventWireup="false"
   CodeFile="karyawan.aspx.vb"
   Inherits="karyawan"
   title="Karyawan web form" %>

<asp:Content
   ID="Content1"
   ContentPlaceHolderID="ContentPlaceHolder1"
   Runat="Server">
   <asp:DetailsView ID="DetailsView1"
       runat="server"
       DataSourceID="AccessDataSource1"

       Height="50px"
       Width="125px"
       AutoGenerateRows="False"
       DataKeyNames="NIK">
       <Fields>
           <asp:BoundField
           DataField="NIK"
           HeaderText="NIK"
           ReadOnly="True"
           SortExpression="NIK" />

           <asp:BoundField
           DataField="NAMA"
           HeaderText="NAMA"
           SortExpression="NAMA" />
           <asp:BoundField
               DataField="TITEL"
               HeaderText="TITEL"
               SortExpression="TITEL" />

           <asp:BoundField
               DataField="TEMPAT_LAHIR"
               HeaderText="TEMPAT_LAHIR"
               SortExpression="TEMPAT_LAHIR" />
           <asp:BoundField
               DataField="TANGGAL_LAHIR"
               HeaderText="TANGGAL_LAHIR"
               SortExpression="TANGGAL_LAHIR" />

           <asp:BoundField
               DataField="JENIS_KELAMIN"
               HeaderText="JENIS_KELAMIN"
               SortExpression="JENIS_KELAMIN" />
           <asp:BoundField
               DataField="AGAMA"
               HeaderText="AGAMA"
               SortExpression="AGAMA" />

           <asp:BoundField
               DataField="STATUS_PERNIKAHAN"
               HeaderText="STATUS_PERNIKAHAN"
               SortExpression="STATUS_PERNIKAHAN" />
           <asp:BoundField
               DataField="ALAMAT"
               HeaderText="ALAMAT"
               SortExpression="ALAMAT" />

           <asp:BoundField
               DataField="NOMOR_TELEPON"
               HeaderText="NOMOR_TELEPON"
               SortExpression="NOMOR_TELEPON" />
           <asp:BoundField
               DataField="PENDIDIKAN_TERAKHIR"
               HeaderText="PENDIDIKAN_TERAKHIR"

               SortExpression="PENDIDIKAN_TERAKHIR" />
           <asp:BoundField
               DataField="KODE_JABATAN"
               HeaderText="KODE_JABATAN"
               SortExpression="KODE_JABATAN" />

           <asp:BoundField
               DataField="KODE_BAGIAN"
               HeaderText="KODE_BAGIAN"
               SortExpression="KODE_BAGIAN" />
           <asp:BoundField
               DataField="KODE_CABANG"
               HeaderText="KODE_CABANG"
               SortExpression="KODE_CABANG" />

           <asp:BoundField
               DataField="NOMOR_ASTEK"
               HeaderText="NOMOR_ASTEK"
               SortExpression="NOMOR_ASTEK" />
           <asp:BoundField
               DataField="TANGGAL_MULAI_KERJA"
               HeaderText="TANGGAL_MULAI_KERJA"

               SortExpression="TANGGAL_MULAI_KERJA" />
           <asp:BoundField
               DataField="TANGGAL_DIANGKAT"
               HeaderText="TANGGAL_DIANGKAT"
               SortExpression="TANGGAL_DIANGKAT" />

           <asp:BoundField
               DataField="TANGGAL_KELUAR"
               HeaderText="TANGGAL_KELUAR"
               SortExpression="TANGGAL_KELUAR" />
           <asp:BoundField
               DataField="STR_FOTO"
               HeaderText="STR_FOTO"
               SortExpression="STR_FOTO" />

           <asp:BoundField
               DataField="NPWP"
               HeaderText="NPWP"
               SortExpression="NPWP" />
           <asp:BoundField
               DataField="PASSWORD"
               HeaderText="PASSWORD"
               SortExpression="PASSWORD" />

       </Fields>
   </asp:DetailsView>
   <asp:AccessDataSource
       ID="AccessDataSource1"
       runat="server"
       DataFile="~/App_Data/HRD.MDB"
       SelectCommand="SELECT * FROM [KARYAWAN] WHERE ([NIK] = ?)">

       <SelectParameters>
           <asp:SessionParameter
               Name="NIK"
               SessionField="NIK"
               Type="String" />
       </SelectParameters>

   </asp:AccessDataSource>
</asp:Content>

Pada script code program di atas terdapat 3 buah control yaitu:

1. Content
   Content adalah server control Content Place Holder yang berguna untuk menggabungkan file aspx yang kita buat dengan master file. Pada bagian awal ada code MasterPageFile="~/MasterPage.master", ini menunjukkan file karyawan.aspx meng-includekan file MasterPage.master yang berisi control Menu.
2. DetailsView
   Control ini adalah untuk menampilkan data yang diambil dari tabel database dalam bentuk details (kalau pada MS-Access tipe form Single Form). Jadi dalam satu tampilan hanya menampilkan satu record data.
3. AccessDataSource
   Control untuk meng-koneksikan form dengan database Microsoft Access. Control ini dilengkapi dengan nama file sumber data di mana database akan diambil. Untuk mengambil data juga harus dilengkapi dengan perintah Select. Sedangkan untuk memfilter data ditambahkan parameter sebagai variabel yang akan disertakan pada perintah Select.

Bersambung ke hasil tampilan DetailsView control

Artikel terkait dengan kategori ini: