ASP.NET Berbagai Teknik Menampilkan Data dari Database

[M]ulai 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

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

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

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

file : Repository/CategoryRepository

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

file : Default.aspx

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

file : Default.aspx.cs

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

Next, pada file view tambahkan sebuah Repeater sebagai berikut

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

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

[followme]

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

8 thoughts on “ASP.NET Berbagai Teknik Menampilkan Data dari Database

  1. saya mau tanya nih, kalo cara menampilkan data , khusus hanya kategori saja , misal nya kategori : laptop , yang akan muncul data kategori yang bernama laptop saja, sedang kan data yang bernama printer tidaak muncul , tolong berikan contoh porgam nya yah , pake bahasa asp.net / aspx

    trimakasih

  2. Saya tertarik dengan tulisan anda mengenai Dunia Teknik, menurut saya bidang studi teknik merupakan bidang studi yang sangat menarik
    juga banyak hal yang bisa dipelajari di dunia teknik.
    Saya juga mempunyai tulisan yang sejenis
    mengenai bidang teknik yang bisa anda kunjungi di Lembaga Teknik

Leave a Reply

Your email address will not be published. Required fields are marked *