Menampilkan data pada GridView berdasarkan user yang sedang login
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-