Subscribe:Posts Comments
Share |

You Are Here: Home » Elearning, Programing, Uncategorized » Tutorial ASP.NET Berbagai Teknik Menampilkan Data dari Database

asp dot net

asp dot net

Mulai akhir bulan Februari kemarin saya memiliki sebuah rutinitas baru yang mengharuskan saya untuk belajar ASP.NET baik itu Web Form maupun MVC. Untungnya dulu sekali sekitaran tahun 2010 saya pernah sedikit belajar .NET framework dan jauh lebih untung lagi karena saya punya background pemrograman di Java jadi.. ya.. prosesnya tidak terlalu sulit hehe. Jadi apa yang saya tulis kali ini adalah pengalaman pribadi saya dalam belajar ASP.NET untuk menampilkan data yang terdapat pada database Sql Server.

asp.net

Berdasarkan informasi yang saya dapatkan dari sini setidaknya ada 3 cara yang biasa digunakan untuk melakukan binding data ke server control pada ASP.NET

Pada tulisan ini maupun tulisan saya yang lain jika saya hanya menyebutkan ASP.NET berarti yang dimaksud adalah ASP.NET Web Form

Berikut adalah ketiga cara tersebut :
– Data Source Control (Declarative)
– Code by Hand
– Model Binding

Ketiga teknik di atas akan saya bahas satu persatu pada bagian selanjutnya di bawah.

Web.config


Sebelum masuk ke pembahasan utama ada baiknya saya informasikan terlebih dahulu bahwa connection string yang digunakan untuk berkomunikasi dengan database terdapat pada file konfigurasi “Web.config“. Berikut adalah isinya

file : Web.config

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version=”1.0″?>
<configuration>
<connectionStrings>
<add name=”belajar_webConnectionString” connectionString=”Data Source=SOFT-ENGINEER;Initial Catalog=belajar_web;Integrated Security=True”
providerName=”System.Data.SqlClient” />
</connectionStrings>
<system.web>
<compilation debug=”true” targetFramework=”4.5″ />
<httpRuntime targetFramework=”4.5″ />
</system.web>
</configuration>

Desain Database


Databse yang digunakan pada tulisan ini hanya menggunakan satu buah tabel yang sangat sederhana dengan nama “Category

category table design

Data Source Control


Data Source Control digunakan sebagai penghubung antara database dengan kontrol untuk menampilkan data. Dengan menggunakan pendekatan ini berarti yang kita lakukan adalah mendapatkan data secara declarative bukan secara programmatic. Supaya lebih gamblang maka berikut adalah contoh kodenya

file : Default.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”BelajarWebForm.Default” %>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Data Source Control</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<p>The Declarative Way</p>
<asp:SqlDataSource ID=”sdsCategory” runat=”server” ConnectionString=”<%$ ConnectionStrings:belajar_webConnectionString %>”
SelectCommand=”SELECT [id], [name_category] FROM [Category]“/>
<asp:GridView ID=”gvCategoryDeclarative” runat=”server” DataSourceID=”sdsCategory” />
</div>
</form>
</body>
</html>

Seperti terlihat pada kode di atas, control “SqlDataSource” membutuhkan sebuah connection string dan sebuah perintah query untuk dieksekusi. Secara magic control ini akan melakukan koneksi ke database dan menjalan perintah query dan hasilnya dilempar ke “GridView” dengan mengisi property “DataSourceID” dengan Id dari control SqlDataSource yang bersangkutan. Gambar di bawah ini adalah hasilnya

ss data source control

See? dengan cara segampang itu kita sudah bisa menarik data dari database sekaligus menampilkannya ke hadapan pengguna bahkan tanpa mengetikkan kode dalam bahasa C#, yang kita lakukan hanyalah menulis tag-tag pada ASP.NET secara declarative.

Cara gampang biasanya ada kekurangannya, salah satunya dari cara di atas adalah akan banyak sekali perulangan kode yang dilakukan. Misal nanti di suatu tempat membutuhkan daftar category lagi dalam bentuk drop down maka berarti SqlDataSource seperti di atas akan ditulis kembali. Hal ini tentu saja menyalahi prinsip DRY (Don’t Repeat Yourself).

Code By Hand


Bagi mereka yang sudah terbiasa dengan cara coding untuk melakukan query ke database, mungkin cara declarative akan membuat mereka merasa “meh”. Golongan ini akan sangat suka jika melakukannya dengan menuliskan kode program menggunakan bahasa C# (saya termasuk dalam golongan ini :D ).

Cara ini memungkinkan kita untuk menerapkan berbagai macam pattern dan best practice yang ada dalam dunia software engineering seperti misalnya Repository Pattern dan prinsip DRY tadi. Sebelumnya buat terlebih dahulu kelas entity untuk mapping ke tabel sebagai berikut

file : Model/Category.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace BelajarWebForm.Model
{
public class Category
{
public int CategoryId { get; set; }
public string CategoryName { get; set; }
}
}

Kemudian buat kelas untuk menangani proses interaksi dengan database untuk tabel Category.

file : Repository/CategoryRepository

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;
namespace BelajarWebForm.Repository
{
public class CategoryRepository
{
string connectionString = ConfigurationManager.ConnectionStrings["belajar_webConnectionString"].ConnectionString;
SqlConnection connection;
SqlCommand command;
SqlDataReader reader;
public List<Model.Category> getAllCategories()
{
List<Model.Category> categories = new List<Model.Category>();
connection = new SqlConnection(connectionString);
connection.Open();
command = new SqlCommand(“SELECT * From Category”, connection);
reader = command.ExecuteReader();
while (reader.Read())
{
Model.Category category = new Model.Category
{
CategoryId = Convert.ToInt32(reader["id"]),
CategoryName = Convert.ToString(reader["name_category"])
};
categories.Add(category);
}
reader.Close();
connection.Close();
return categories;
}
}
}

Setelah itu pada halaman view masukkan GridView sebagai komponen untuk menampilkan data.

file : Default.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”BelajarWebForm.Default” %>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Code By Hand</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<p>The Code By Hand Way</p>
<asp:GridView ID=”gvCategoryByHand” runat=”server” />
</div>
</form>
</body>
</html>

Terakhir masuk ke code behind-nya dan gunakan objek dari kelas repository tadi untuk mengisi GridView. Kodenya adalah sebagai berikut

file : Default.aspx.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
namespace BelajarWebForm
{
public partial class Default : System.Web.UI.Page
{
Repository.CategoryRepository categoryRepository = new Repository.CategoryRepository();
protected void Page_Load(object sender, EventArgs e)
{
gvCategoryByHand.DataSource = categoryRepository.getAllCategories();
gvCategoryByHand.DataBind();
}
}
}

Jalankan pada browser dan hasilnya kurang lebih sama dengan cara pertama.

code by hand

Sampai sini ada pertanyaan?
Kalau ada bisa kita diskusikan melalui fitur komentar ya

Model Binding


Teknik terakhir adalah fitur baru yang diperkenalkan pada ASP.NET versi rilis 4.5. Menurut saya cara ini hampir mirip dengan Code By Hand namun sedikit dipadukan dengan cara ala declarative.

Oh iya barangkali ada yang protes kenapa menampilkan datanya selalu menggunakan kontrol GridView yang nota bene tinggal jadi aja secara magic dan bukan menampilkannya secara manual menggunakan perulangan seperti yang biasa ada pada framework web berbasis MVC. Untuk menanggapi protes tersebut maka pada bagian ini tidak lagi menggunakan GridView melainkan menggunakan kontrol lain yang disebut “Repeater“. Dengan Repeater ini kita bisa bebas membuat layout untuk menampilkan data tidak terpaku pada bentuk tabel seperti GridView.

Pada code behind buat sebuah method yang nantinya digunakan untuk mengisi data pada kontrol Repeater. Kode sebagai berikut

file : Default.aspx.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
namespace BelajarWebForm
{
public partial class Default : System.Web.UI.Page
{
Repository.CategoryRepository categoryRepository = new Repository.CategoryRepository();
protected void Page_Load(object sender, EventArgs e)
{
}
public List<BelajarWebForm.Model.Category> repeaterCategory_GetData()
{
return categoryRepository.getAllCategories();
}
}
}

Next, pada file view tambahkan sebuah Repeater sebagai berikut

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”BelajarWebForm.Default” %>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Code By Hand</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<p>The Model Binding Way</p>
<asp:Repeater ID=”repeaterCategory” runat=”server” ItemType=”BelajarWebForm.Model.Category”
SelectMethod=”repeaterCategory_GetData”>
<HeaderTemplate>
<table border=”1″>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Item.CategoryId %></td>
<td><%# Item.CategoryName %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>

Perhatikan bahwa pada Repeater terdapat property “ItemType” yang digunakan untuk membuat strongly typed pada variabel data yang ada pada Repeater itu sendiri sehingga kita bisa menuliskan seperti ini

1
2
<td><%# Item.CategoryId %></td>
<td><%# Item.CategoryName %></td>

Kalau kalian jeli maka bisa mengerti dari mana “CategoryId” dan “CategoryName” berasal. Selain itu terdapat juga property “SelectMethod” yang digunakan untuk memilih method mana yang terdapat pada code behind yang digunakan untuk mengisi data. Method tersebut sudah kita tulis pada langkah sebelumnya.

Coba jalankan pada browser dan hasilnya pun tidak jauh berbeda.

model binding

Penutup


Sampai di sini kita sudah bisa menggunakan 3 cara yang berbeda untuk mengambil data sekaligus menampilkannya pada halaman web. Soal cara mana yang terbaik maka pengalamanlah yang berbicara hahaa..
Semoga tulisan ini bermanfaat dan selamat belajar

© 2014 Bilcyber.com · Subscribe:PostsComments · Designed by Billy Wirawan ·