May 2009 - Posts
Teman-teman yang biasa menggunakan ASP.NET pasti sudah kenal baik dengan GridView. Control yang satu ini memang sangat memanjakan kita dalam pembuatan modul yang berurusan dengan menampilkan data, mengubah data, dan menghapus data.
Bagi teman-teman lain, yang baru mengenal ASP.NET, saya sarankan Anda sering-sering bermain dengan GridView (walaupun saya sarankan juga untuk jangan menggantungkan hidup Anda pada GridView). Seperti yang telah saya katakan tadi, GridView adalah sebuah komponen yang erat kaitannya dengan pengolahan data.
Pada dasarnya, kisah tampilnya data dari database ke layar browser adalah seperti ini:
- Anda punya database.
- Anda mengambil data dari database melalui query SELECT pada komponen SqlDataSource atau melalui ADO.NET kemudian disimpan di objek DataTable, atau bisa juga melalui LINQ kemudian disimpan di objek bertipe collection. Jika Anda tidak mau repot dengan code behind, Anda bisa membuat SqlDataSource di Web Form (file .aspx) langsung, seperti pada step-by-step yang akan saya sampaikan pada Futorial ini nanti.
- Anda membuat sebuah GridView.
- Pada GridView tersebut, Anda harus menentukan sumber data yang akan ditampilkan oleh si GridView. Jika Anda menggunakan objek dari code behind, maka Anda menggunakan properti DataSource.
Contoh: var products = from eachProduct in database.Products select eachProduct;
GridViewProducts.DataSource = products;
Jika Anda menggunakan SqlDataSource, maka Anda menggunakan properti DataSourceID.
Contoh: <asp:SqlDataSource ID="SqlDataSourceProducts" runat="server" SelectCommand="SELECT * FROM [Products]" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" />
<asp:GridView ID="GridViewProducts" runat="server" DataSourceID="SqlDataSourceProducts" />
- Akhirnya data akan tampil di layar browser.
Studi Kasus
Sekarang kita kembali ke topik utama. Agar lebih memahami, saya sertakan skenario singkat. Kisahnya adalah seperti ini:
Skenario
Pada suatu perusahaan, ada beberapa Sales Person. Setiap Sales Person dibuatkan sebuah account pada web site yang akan dibangun, sehingga mereka bisa login dan logout. Pembuatan account ini adalah melalui ASP.NET Membership. Kemudian, perusahaan tersebut punya banyak Customer. Setiap satu Customer ditanganu oleh seorang Sales Person, namun seorang Sales Person bisa menangani beberapa Customer. Jadi hubungan mereka adalah One-To-Many.
Rencananya, kita akan membuat sebuah halaman web yang terdapat sebuah GridView yang menampilkan data Customer. Namun data Customer yang ditampilkan sesuai dengan siapa yang sedang login.
Data yang tersedia
Saya tidak akan menceritakan tentang ASP.NET Membership di Futorial ini. Jadi asumsi saya adalah, kita sudah mengatur konfigurasi ASP.NET sehingga menggunakan ASP.NET Membership. Pada ASP.NET Membership, kita buat dua account sebagai account Sales Person, misalnya fuady dan hidayat.
Kemudian, di database lain, kita buat sebuah tabel Customers untuk menyimpan data Customer. Beginilah data tabel Customers
Menampilkan data di halaman Default.aspx
Nah, sebagai awalan, kita coba tampilkan data tersebut di halaman Web dengan control GridView melalui SqlDataSource. Bukalah file Default.aspx, dan ubah sehingga menjadi seperti berikut:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridViewCustomers" runat="server"
AutoGenerateColumns="true"
DataKeyNames="ID"
DataSourceID="SqlDataSourceCustomers"
EmptyDataText="Tidak ada data customer.">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSourceCustomers" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT * FROM [Customers]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Sebenarnya Anda bisa melakukan sihir drag-and-drop. Silahkan lihat post saya sebelumnya untuk melakukan drag-and-drop.
Setelah itu, lihat hasilnya dengan menekan Ctrl+F5.
Nah, kalau dengan code di atas, siapapun yang sedang login, maka semua data Customer akan dapat melihatnya. Padahal kita ingin Customer yang ditampilkan adalah Customer yang berkaitan dengan Sales Person yang sedang melihat (yang sedang login).
Oke, untuk menyiapkan itu semua, kita buat sebuah Web Form bernama Login.aspx. Untuk memudahkan kita, namanya harus Login.aspx. Di Futorial ini, saya tidak sempat menjelaskan kenapa. Intinya adalah itu terkait dengan konfigurasi default dari ASP.NET Membership.
Membuat halaman Login.aspx
Ini adalah isi dari Login.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Login ID="Login1" runat="server">
</asp:Login>
</div>
</form>
</body>
</html>
Sangat sederhana, yaitu sebuah control Login.
Mengubah halaman Default.aspx
Sekarang kembali beralih ke Default.aspx. Ubah code di dalamnya sehingga menjadi seperti berikut:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:LoginStatus ID="LoginStatus1" runat="server" />
<br />
<asp:GridView ID="GridViewCustomers" runat="server"
AutoGenerateColumns="true"
DataKeyNames="ID"
DataSourceID="SqlDataSourceCustomers"
EmptyDataText="Tidak ada data customer.">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSourceCustomers" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT * FROM [Customers] WHERE ([SalesPersonUsername] = @SalesPersonUsername)">
<SelectParameters>
<asp:Parameter Name="SalesPersonUsername" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Saya menambahkan sebuah control LoginStatus, mengubah isi properti SelectCommand pada SqlDataSourceCustomers, dan menambahkan properti SelectParameters di SqlDataSourceCustomers.
Menambahkan code di Default.aspx.cs
Seperti yang dapat Anda lihat di atas, bahwa SqlDataSourceCustomers dapat menerima parameter SalesPersonUsername pada klausa WHERE. Untuk itu, kita isi parameter tersebut pada code behind. Ubahlah code di dalam Default.aspx.cs sehingga menjadi seperti berikut:
using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlDataSourceCustomers.SelectParameters["SalesPersonUsername"].DefaultValue = User.Identity.Name;
}
}
Maksud dari code di atas adalah mengisi parameter SalesPersonUsername dengan username dari user yang sedang login, yaitu melalui properti name pada objek User.Identity.
Menguji hasil
Lihat hasilnya dengan menekan Ctrl+F5.
Klik tombol Login. Pada halaman Login.aspx, isi dengan username dan password yang benar, kemudian klik tombol “Log In”. Misalkan saya login sebagai fuady.
Maka sekarang tampil Customer milik fuady.
Di lain sisi, kalau saya login sebagai hidayatm yang tampil adalah Customer milik hidayat.
Nah, begitulah kira-kira.
Ringkasan
Saya bisa ringkas menjadi seperti berikut:
Untuk menampilkan data di SqlDataSource sesuai dengan user yang sedang login, GridView Anda harus menggunakan SelectCommand yang memiliki klausa WHERE serta memiliki SelectParameters yang merujuk pada kolom yang menyatakan username.
<asp:SqlDataSource ID="SqlDataSourceCustomers" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT * FROM [Customers] WHERE ([SalesPersonUsername] = @SalesPersonUsername)">
<SelectParameters>
<asp:Parameter Name="SalesPersonUsername" Type="String" />
</SelectParameters>
</asp:SqlDataSource>Setelah itu, Anda harus mengisi parameter tadi di
code-behind dengan username si user yang sedang login.
SqlDataSourceCustomers.SelectParameters["SalesPersonUsername"].DefaultValue = User.Identity.Name;
Semoga bermanfaat,
-Fu-
Sambil menunggu AC Milan vs Juventus, saya iseng-iseng bikin Futorial yang ringan-ringan saja. Kali ini tentang penggunaan dua ASP.NET Control yang sudah sangat terkenal di dunia persilatan Web Programming, yaitu GridView dan DetailsView. Yaa.. mungkin teman-teman yang sudah berpengalaman telah sering melakukannya. Namun buat teman-teman pemula, semoga ini bermanfaat bagi Anda.
Pertama-tama, dengan menggunakan Visual Studio 2008 atau Visual Web Developer 2008 Express Edition, buatlah sebuah Web Site. Kita beri nama Web Site tersebut sebagai MilanClub.
Kalau mempraktekkan GridView dan DetailsView, kita nggak akan jauh-jauh dari database. Untuk kasus ini, buatlah sebuah database pada folder App_Data. Biarkan namanya sebagai Database.mdf.
Pada database tersebut, buatlah sebuah tabel yang berisi spesifikasi sebagai berikut
| Nama Kolom |
Tipe Data |
Primary Key |
Boleh Null |
| Number |
int |
Ya |
Tidak |
| Name |
varchar(50) |
Bukan |
Tidak |
| BirthDate |
datetime |
Bukan |
Tidak |
Simpan tabel tersebut dengan nama Players.
Isi data tabel Players dengan pemain-pemain sepakbola dari AC Milan. Saya ambil gambar di bawah ini dari halaman daftar pemain tim inti di situs resmi AC Milan.
Hohohoo.. pemainnya keren-keren semua.. mantap dahh..
Ehm.. kembali ke Futorial.
Misalnya saya isi dengan 5 pemain saja
Sekarang beralih ke halaman Default.aspx. Gunakan Design View atau Split View agar bisa melakukan sihir drag-and-drop. Nah, Anda bisa drag tabel Players dari Server Explorer (atau Database Explorer kalau di Visual Web Developer 2008 Express Edition) dan di-drop di visual design area. Otomatis Visual Studio akan membuatkan sebuah GridView (yang diberi ID GridView1) dan sebuah SqlDataSource (yang diberi ID SqlDataSource1) untuk Anda. Atur agar kita bisa melakukan Sorting, Paging, dan Selection pada GridView1.
Sekarang, masih dalam mode Design View ata SplitView, drag control DetailsView dari Toolbox ke visual design area. Biarkan ID DetailsView tersebut sebagai DetailsView1, dan lokasikan di bawah SqlDataSource1. Pada menu Choose Data Source, pilih <New data source…>
Pilih Database. Biarkan nama SqlDataSource sebagai SqlDataSource2. Klik tombol “OK”.
Pilih data connection yang sudah ada (gara-gara sebelumnya kita drag-and-drop tabel Players), yaitu DatabaseConnectionString1. Klik tombol “Next”.
Beri tanda centang pada pilihan *. Kemudian klik tombol “WHERE”.
Pada window “Add WHERE Clause”, pilih Number sebagai Column, = sebagai Operator, Control sebagai Source, dan GridView1 sebagai Control ID. Klik tombol “Add”.
Sebuah kondisi akan ditambahkan di WHERE clause (lihat panel bagian bawah). Klik tombol “OK”.
Kembali ke window “Configure Data Source – SqlDataSource2”. Sekarang klik tombol Advanced… Pilih Generate INSERT, UPDATE and DELETE statements serta Use optimistic concurrency. Klik tombol “OK”.
Kembali lagi ke window “Configure Data Source – SqlDataSource2”. Klik tombol “Next”. Setelah itu, klik tombol “Finish”.
Atur agar kita bisa melakukan Inserting, Editing, dan Deleting pada DetailsView1.
Simpan semua file dengan Ctrl+Shift+S. Jalankan web site dengan Ctrl+F5.
Pada saat pertama kali tampil, yang tampak hanya GridView1 saja. Karena kondisi WHERE pada DetailsView1 tidak terpenuhi (yaitu kita belum menekan link Select pada GridView1 sehingga nilai SelectedValue dari GridView1 masih null).
Selanjutnya, pilihlah salah satu pemain, misalnya Kaká. Pastinya setelah itu DetailsView1 akan tampak. Melalui DetailsView1, ubahlah namanya menja di Kaká Fu. Setelah Anda klik link Update, data yang di DetailsView1 menjadi Kaká Fu, namun kok yang di GridView1 masih Kaká. Ini berarti kita belum sinkronisasi antara kejadian yang ada di DetailsView1 untuk di-update juga ke GridView1.
Sekarang kita kembali ke Visual Studio. Tambahkan event handler ItemUpdated pada DetailsView1.
Rebind GridView1 pada method yang menjadi handler ketika data di DetailsView1 berhasil diubah.
protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
{
GridView1.DataBind();
}
Nah, tadi kan selain bisa Editing, kita juga bisa Inserting dan Deleting. Maka dari itu, tambahkan event handler ItemInserted dan ItemDeleted, kemudian lakukan hal yang sama pada method yang menjadi handler ItemInserted dan ItemDeleted tersebut.
protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
{
GridView1.DataBind();
}
protected void DetailsView1_ItemDeleted(object sender, DetailsViewDeletedEventArgs e)
{
GridView1.DataBind();
}
Simpan semua file dengan Ctrl+Shift+S. Jalankan kembali web site dengan Ctrl+F5.
Kali ini ketika saya edit salah satu pemain, misalnya Pato, kemudiang klik link “Update”, maka informasi Name yang ada di GridView juga berubah.
Begitu juga ketika saya menambahkan pemain baru. Langsung terisi pada GridView1.
Semuanya nampak lancar-lancar saja… Tapi tunggu dulu… ingat kan, bahwa ketika pertama kali halaman tampil, DetailsView1 tidak tampak. Setelah kita pilih salah satu pemain di GridView1, barulah DetailsView1 tampak. Apa yang terjadi kalau di GridView1 tidak ada data pemain sama sekali? Ya kita tambahkan pemain baru melalui DetailsView1. LHO! Tapi kan DetailsView1 tidak tampak?
Nah, begini triknya.. Pada code behind, tambahkan saja method ini
protected void Page_PreRender(object sender, EventArgs e)
{
if (GridView1.SelectedValue == null)
{
DetailsView1.ChangeMode(DetailsViewMode.Insert);
}
else
{
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
}
}
Jadi kalau tidak ada pemain yang sedang dipilih di GridView1, DetailsView1 akan berada dalam mode Insert. Kalau ada pemain yang dipilih, ya tampilkan data pemain tersebut. Ini contoh di mana tidak ada data pemain sama sekali di database (sehingga GridView1 juga jadi kosong):
Nah, sekarang bisa Insert deh!
Wah, tidak terasa sekarang AC Milan vs Juventus sudah kick-off. OK, selamat mencoba!
-Fu-
Baru saja saya selesai menginstall SQL Server 2008 Express Edition with Advanced Services di Windows Vista saya. Semuanya berjalan lancar. Oh iya, sebelum mengarah pada permission, saya perlu ingatkan tentang hal-hal berikut sebelum menginstall SQL Server 2008 Express Edition with Advanced Services:
- Jika Anda pernah menginstal SQL Server 2005 Management Studio Express, Anda harus meng-uninstall-nya terlebih dahulu.
- Jika Anda di komputer Anda terdapat Visual Studio 2008, Anda harus menginstal Service Pack 1 for Visual Studio 2008 terlebih dahulu.
Kalau Anda sudah instal Service Pack 1 tapi kok si installer-nya masih protes, itu pasti karena Anda punya salah satu atau lebih dari Visual Studio 2008 Express Edition yang tanpa Service Pack 1. Kalau pada kasus saya, ternyata saya punya Visual Web Developer 2008 Express Edition. Saya uninstall software tersebut, dan akhirnya berhasil menginstal SQL Server 2008 Express Edition with Advanced Services.
Nah, setelah selesai menginstal (kalau pada kasus saya, saya menginstalnya dengan nama Instance SQLEXPRESS2008), saya coba buka web dari SQL Server Reporting Services di http://localhost/reports_SQLEXPRESS2008. Kemudian muncul tampilan ini:
Yang artinya saya tidak bisa melihat apa-apa selain link Home, Help, serta tulisan SQL Server Reporting Services dan Home. Ini sudah saya duga karena saya yakin account saya (yaitu Fuady) belum dianggap sebagai account yang berhak mengakses situs tersebut. Saya buktikan dengan mencoba membuka situs Report Server di http://localhost/reportserver_SQLEXPRESS2008. Ternyata benar dugaan saya:
Yaitu bahwa account saya tidak mendapatkan permission untuk mengakses Report Server. Nah, saya tidak kaget karena pernah mengalami ini sebelumnya. Ini memang wajar karena saya login sebagai Fuady, sedangkan Fuady bukanlah Administrator. Pada kasus sebelumnya, saya solve dengan menjalankan Internet Explorer sebagai Administrator, kemudian pergi ke alamat Reporting Services Manager (http://localhost/reports_SQLEXPRESS2008), klik tab Properties, kemudian pada menu Security, pilih New Role Assignment, masukkan username Anda pada text box “Group or user name:”, kemudian beri tanda centang pada pilihan Content Manager. Ternyata langkah tersebut sesuai dengan yang ada di TechNet: How to: Configure a Report Server for Local Administration on Windows Vista and Windows Server 2008.
Akan tetapi, kasus yang kali ini membuat saya kaget. Karena, walaupun saya menjalankan Internet Explorer sebagai Administrator, tab Properties tetap tidak muncul. Tampaknya IE saya tidak menganggap dirinya dijalankan oleh Administrator. Saya mencari-cari solusinya ke sana-sini namun tetap tidak ada jawabannya. Akhirnya muncul ide konyol: kenapa nggak coba pakai browser lain aja.
Akhirnya saya coba pakai browser lain, run as Administrator, kemudian pergi ke http://localhost/reports_SQLEXPRESS2008. Daaannn.. akhirnya muncul juga halaman yang saya harapkan!
Saya lakukan hal yang sama dengan kasus saya sebelumnya, yaitu:
1. Klik tab Properties
2. Pada menu Security (memang hanya satu menu sih..), pilih New Role Assignment
3. Masukkan username, kemudian pilih permission yang Anda inginkan. (Kalau saya, saya pilih semuanya saja biar aman ^_^). Kemudian klik tombol “OK”.
Dan kemudian saya buka Internet Explorer tanpa run as Administrator. Dan hasilnya, saya diakui sebagai account yang berhak mengakses Report Server (dengan memasukkan username dan password terlebih dahulu).
Catatan: jangan lupa masukkan alamat Report Server tersebut ke dalam Trusted Sites di Internet Explorer (klik Tools > Internet Options > Security > Trusted Sites > Sites)
Semoga membantu,
-Fu-