Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Select, Insert, Update, Delete Tanpa Kode dengan SqlDataSource, DetailsView dan GridView

GridView merupakan web control pada ASP.NET 2.0 yang digunakan untuk menampilkan data dalam format tabel, disajikan dalam format baris dan kolom. GridView akan dirender pada browser sebagai HTML table. GridView memiliki kemampuan untuk menampilkan, megubah (edit) dan menghapus (delete) data hanya dengan beberapa langkah tanpa menuliskan satu baris kode pun. GridView dapat dengan mudah dikonfigurasi untuk membuat tampilan yang dibagi menjadi beberapa halaman (pagging), pengurutan (sorting) dan pengubahan (editing) tanpa menuliskan banyak kode.

GridView tidak memiliki kemampuan untuk melakukan penambahan data (insert), maka untuk melakukan penambahan data digunakan DetailsView control. DetailsView control digunakan untuk menampilkan satu record data dalam format tabel. Tiap field dalam row ditampilkan sebagai baris pada tabel.

Binding Data

Binding Data ke SqlDataSource

Binding data ke database dapat dilakukan dengan menggunakan SqlDataSource. SqlDataSource merupakan representasi data pada database relasional SQL yang digunakan pada data-bound control. SqlDataSource bersama dengan data-bound control dapat digunakan untuk menampilkan, edit, dan pengurutan data pada halaman web dengan kode yang singkat atau bahkan tanpa kode program sama sekali.

SqlDataSource dapat dihubungkan dengan semua database yang menggunakan ADO.NET provider seperti SqlClient, OleDb, Odbc, atau OracleClient. Set property ConnectionString untuk dapat berhubungan dengan database. ConnectionString dapat diambil dari Web.config. Untuk mengambil data dari database, cukup dengan menuliskan query pada property SelectCommand. Demikian juga untuk insert, update dan delete cukup dengan memasukkan query ke dalam InsertCommand, UpdateCommand dan DeleteCommand. Jika database yand diguakan mendukung stored procedure, property SelectCommand, InsertCommadn, UpdateCommand dan DeleteCommand juga dapat diisi dengan nama stored procedure. Query SQL juga mendukung query yang mengandung parameter. Untuk menambahkan parameter cukup tambahkan object Parameter pada collection pada masing-masing command.

Langkah untuk membuat SqlDataSource sebagai berikut.

Sebelum membuat object SqlDataSource, buat dulu tabel yang akan digunakan. Buat tabel AddressBook sederhana yang menyimpan nama, alamat dan nomor telepon.


CREATE TABLE AddressBook (
    AddressId   int   IDENTITY(1,1) NOT NULL,
    FullName    nvarchar(50)   NOT NULL,
    Address      nvarchar(150) NOT NULL,
    PhoneNumber nvarchar(20)   NOT NULL )

Berikutnya, buat connectionstring. ConnectionString dapat ditulis langsung pada property SqlDataSource atau dapat juga dimasukkan ke dalam Web.config.


<connectionStrings>

    <add name="TestDBConnectionString"

        connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=TestDB;Integrated Security=True"

        providerName="System.Data.SqlClient" />

</connectionStrings>

Selanjutnya buat object SqlDataSource dengan memasukkan query insert, select, update dan delete dan connectionstring di ambil dari Web.config.


<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>"
        ProviderName="System.Data.SqlClient"
        SelectCommand="SELECT AddressId, FullName, Address, PhoneNumber FROM AddressBook ORDER BY FullName"
        UpdateCommand="UPDATE AddressBook SET FullName=@FullName, Address=@Address, PhoneNumber=@PhoneNumber WHERE AddressId=@AddressId"
        DeleteCommand="DELETE FROM AddressBook WHERE AddressId=@AddressId"
        InsertCommand="INSERT INTO AddressBook (FullName, Address, PhoneNumber) VALUES (@FullName, @Address, @PhoneNumber)">
</asp:SqlDataSource>

Setelah tabel dan SqlDataSource sudah siap, berikutnya adalah pembuatan GridView dan DetailsView

GridView dan DetailsView

Buat page baru dan tempatkan GridView dalam page. Tambahkan kolom FullName, Address dan PhoneNumber ke dalam GridView, set property DataSourceID dengan ID SqlDataSource yang dibuat sebelumnya. Kemudian set property DataKeyFields dengan primary key tabel dan set property AutoGenerateColumns menjadi false.


<asp:GridView ID="gridPhoneBook" runat="server"
DataKeyNames="AddressId"
AutoGenerateColumns="False"
AllowPaging="True"
Caption="Address Book"
DataSourceID="SqlDataSource1"
EmptyDataText="No data to display">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="FullName" HeaderText="Full Name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="PhoneNumber" HeaderText="Phone Number" />
</Columns>
</asp:GridView>

Selanjutnya buat DetailView untuk menambahkan record ke dalam tabel.


<asp:DetailsView ID="detailPhoneBook" runat="server"
AutoGenerateRows="False" DataKeyNames="AddressId"
DataSourceID="SqlDataSource1"
Caption="Details"
AllowPaging="true">
<Fields>
<asp:BoundField DataField="FullName" HeaderText="Full Name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="PhoneNumber" HeaderText="Phone Number" />
<asp:CommandField ShowInsertButton="True" />
</Fields>
<EmptyDataTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="New" Text="New">
</asp:LinkButton>
</EmptyDataTemplate>
</asp:DetailsView>

Pada declarative kode di atas, EmptyDataTemplate digunakan untuk menampilkan tombol New jika tabel masih dalam keadaan kosong. Jika tabel dalam keadaan kosong, tombol New yang dihasilkan dari CommandField ShowInsertButton="true" tidak akan muncul.

Demikian paparan singkat pemanfaatan GridView, DetailsView untuk manipulasi data dengan menggunakan SqlDataSource. Semoga bisa bermanfaat bagi yang baru mulai belajar ASP.NET.


Categories: ASP.NET
Permalink | Comments (7) | Post RSSRSS comment feed

Comments

ali Indonesia | Reply

Thursday, September 27, 2007 2:50 AM

ali

step-by-step.. pak masih belum mudeng aku... Frown

Boedy Indonesia | Reply

Monday, February 11, 2008 11:04 AM

Boedy

Saya punya dua field di Gridview dan Detailsview yang ingin saya hidden, tapi setiap kali dihidden. Insert /Update selalu error.

Kenapa ya?

busby seo challenge United States | Reply

Tuesday, August 26, 2008 11:26 AM

busby seo challenge

step by step codes.. thanks... http://pinayspeak.com | http://alaminos.net

islah Indonesia | Reply

Monday, September 22, 2008 6:51 PM

islah

Pak yang pake code C# bukan HTMLnya

deface United States | Reply

Thursday, January 15, 2009 12:17 PM

deface

pak kalau bisa code + images hasil layoutnya donk thks

Bolsa de trabajo Mexico | Reply

Sunday, February 01, 2009 4:44 AM

Bolsa de trabajo

Thanks you for sharing us your experience.

jeffrey Indonesia | Reply

Wednesday, May 06, 2009 11:39 PM

jeffrey

kl mau upload foto ke SQL table dengan menggunakan sqldatasource gmn? soalnya foto sbg object sql_variant ga bs diconvert ke binary waktu insert ke DB. ada masukan? tolong step2nya aja , jgn tulis scriptnya. gw malah bingung. tkx

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading