Menyimpan Bitmap ke Database dengan ADO.NET (dan menampilkannya di web)

Pada saat bekerja jadi programmer dulu penulis pernah diminta untuk membuatkan sistem
pengelolaan kumpulan file citra bitmap GIS yang dapat dikelompokkan (grouping), diurutkan
(sorting) dan dicari (querying) menurut berbagai kriteria, dan dapat ditampilkan di halaman web,
termasuk kemungkinan integrasi di masa depan. Solusinya adalah dengan memanfaatkan RDBMS.
Dalam hal ini, yang disimpan dalam record database tidak hanya metadata atau informasi tekstual
dari suatu file bitmap, tetapi file bitmap yang binary itu sendiri juga disimpan sekalian dalam record
database.
Masalahnya, tidak semua produk RDBMS menyediakan fasilitas untuk menyimpan file bitmap
dalam record database. Dalam hal ini, sang pembuat aplikasi yang harus membuat mekanisme untuk
melakukan tugas tersebut.
File bitmap termasuk file binary, artinya file terbentuk atas byte array. Untuk menyimpan data
seperti ini kita dapat menggunakan salah satu dari tipe data SQL Server yaitu binary, varbinary, dan
image. Dalam tutorial ini kita menggunakan type data image, karena dapat menyimpan sampai 2GB
per-record.
Dalam tutorial ini, kita akan membuat aplikasi untuk menyimpan file bitmap ke database SQL
Server 2000, menampilkannya ke halaman web dengan ASP.NET, sekaligus membuat image gallery.
Persyaratan:
• Windows XP, Windows 2000 Server, Windows 2000 Professional
• .NET Framework 1.0 atau 1.1
• IIS / PWS dengan FrontPage Server Extensions
• Visual Studio.NET 2002 atau 2003
• SQL Server 2000 (SP3 +)
• Hardware kelas Pentium III – RAM 256MB +, HD 2GB+
FrontPage Server Extensions dan .NET Framework sudah termasuk dalam CD Visual Studio.Net
Lisensi Dokumen:
Copyright © 2003 – 2006 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara
bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah
atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari
IlmuKomputer.Com.
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
2
Keuntungan menyimpan file binary dalam database
Beberapa keuntungan penyimpanan file bitmap (atau file binary lain) dalam bentuk record database
antara lain:
1. Penyimpanan data terpusat yang reliable.
Seluruh bitmap disimpan dalam record database, sehingga memungkinkan untuk diakses dari
aplikasi desktop maupun web. Penyimpanan bitmap dalam struktur database juga lebih baik
dari pada menggunakan struktur file system karena adanya fitur full/incremental backup-restore ,
transactional-locking dan replication yang saat ini sudah menjadi fitur standar produk database.
Fitur Field Indexing juga akan mempercepat pencarian dan pengurutan record berdasarkan
kriteria tertentu. Volume data juga tidak dibatasi oleh file system (FAT32 atau NTFS tetap
memiliki jumlah maksimum file yang dapat disimpan dalam satu direktori), melainkan
tergantung dari kapasitas media penyimpanan.
2. Model kemanan yang lebih baik.
Model keamanan data sudah tidak tergantung lagi pada skema keamanan struktur file (apalagi
kalau masih pakai FAT32 yang keamanannya sangat terbatas). Kita dapat mengatur user
permission sampai di tingkat field. Penggunaan stored procedure untuk akses dan modifikasi
data juga sangat disarankan dalam memperketat keamanan data.
3. Mendukung integrasi antar sistem
Kunci sukses sebuah sistem saat ini adalah connectivity, artinya mudah dikoneksikan atau
diintegrasikan dengan sistem lain. Dengan adanya format XML yang universal, data bitmap yang
binary itu dapat diserialisasikan menjadi format Base64 String, kemudian dikirimkan dalam
bentuk stream ke sistem lain, sehingga berbagai sistem dapat saling berkomunikasi. Format
XML juga memungkinkan kita untuk bekerja secara offline, yaitu bekerja tanpa harus terkoneksi
ke sistem jaringan atau internet, hal ini berguna bagi para pemakai yang mobile. Data offline tadi
kemudian dapat disinkronisasikan dengan data di server pada saat kita terkoneksi lagi ke jaringan
atau internet.
Langkah 1: Mempersiapkan Database
Skrip berikut akan membuat database baru bernama dbBitmap dan satu tabel tblBitmap dengan
5 field. Copy Paste dan eksekusi skrip berikut pada SQL Query Analyzer:
USE MASTER
GO
CREATE DATABASE dbBitmap
GO
USE dbBitmap
GO
CREATE TABLE [tblBitmap] (
[BitmapId] [int] IDENTITY (1, 1) NOT NULL ,
[FileName] [nvarchar] (255) NOT NULL ,
[Bitmap] [image] NOT NULL ,
[FileSize] [int] NOT NULL ,
[SubmitDate] [datetime] NOT NULL ,
CONSTRAINT [PK_tblBitmap] PRIMARY KEY
(
[BitmapId]
)
)
GO
Langkah 2: Setup Sekuriti SQL Server
Agar suatu database dapat diakses melalui aplikasi ASP.NET secara anonymous (misalnya oleh user
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
3
Internet), user ASPNET harus memiliki hak akses ke database tadi. User ASPNET adalah user
Windows yang otomatis dibuatkan pada saat instalasi .NET Framework
Skrip berikut akan mendaftarkan user ASPNET ke SQL Server, kemudian memberi akses di tabel
tblBitmap.
USE MASTER
GO
sp_grantlogin ‘nama_domain\ASPNET’
GO
USE dbBitmap
GO
sp_grantdbaccess ‘nama_domain\ASPNET’ , ‘webuser’
GO
GRANT SELECT, INSERT, UPDATE, DELETE
ON tblBitmap TO webuser
GO
Perhatikan, nama_domain di atas harus diganti dengan nama domain atau nama komputer Anda.
Langkah 3: Menyimpan Bitmap ke Database
Buka Visual Studio.NET, buat project baru . Buka menu File | New | Project… Dari kotak dialog
New Project, bagian Project Types, pilih Visual Basic Project, kemudian pilih ASP.NET Web
Application dari kotak Templates.
Setelah project tercipta, tambahkan web form baru, kemudian beri nama insert.aspx (Buka menu
Project | Add Web Form… ).
Halaman insert.aspx ini digunakan untuk menginput file ke database, oleh sebab itu perlu HTML
input berupa file. Tambahkan kontrol File Field dan Submit Button dari Toolbox bagian HTML
(Kalau Toolbox belum tampil, pilih menu View | Toolbox atau Ctrl + Alt + X)
Gambar 1
Kedua kontrol tadi harus kita jadikan server control, karena eksekusi harus berjalan di sisi server :
Pilih kedua kontrol (diblok), klik kanan lalu pilih Run As Server Control.
File Input tadi digunakan untuk meng-upload file, oleh karenanya perlu ditambahkan atribut
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
4
enctype=”multipart/form-data” pada tag

: Masuklah ke tampilan HTML Source (dari menu
View | HTML Source atau Ctrl + PgDn), edit-lah pada tag sbb:

Kembalilah ke halaman desain (menu View | Design atau Ctrl + PgDn), klik-ganda tombol Submit,
Anda akan masuk tampilan code insert.aspx.vb, sekaligus dibuatkan event handler
Submit1_ServerClick.
Kita akan menggunakan namespace System.Data.SqlClient untuk koneksi ke SQL Server dan
namespace System.IO untuk menangani file upload, oleh karenanya untuk memudahkan coding
kita tambahkan Imports System.Data.SqlClient dan Imports System.IO pada baris
paling atas (sebelum deklarasi Public Class insert ) pada file insert.aspx.vb tadi.
Untuk membaca file yang di-upload kita dapat menggunakan class BinaryReader, class ini yang
akan membaca file dan hasilnya ditampung dalam suatu array bertipe data Byte, array inilah yang
akan dimasukkan dalam parameter query.
Dalam event handler Submit1_ServerClick sisipkan kode sehingga hasilnya sebagai berikut:
Private Sub Submit1_ServerClick(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles Submit1.ServerClick
Dim sFName As String = File1.PostedFile.FileName.Substring( _
File1.PostedFile.FileName.LastIndexOf(“\”) + 1)
Dim iLen As Integer = File1.PostedFile.ContentLength
Dim sCnStr As String = _
“Data Source=(local);Initial Catalog=dbBitmap;” _
& “Integrated Security=True;”
Dim sQuery As String = _
” INSERT tblBitmap ” _
& ” (FileName, Bitmap, FileSize, SubmitDate) ” & _
” VALUES ” _
& ” (‘” & sFName & “‘ ,@Bitmap,” & iLen & “,GETDATE())”
Dim br As New BinaryReader(File1.PostedFile.InputStream)
Dim arBytFile() As Byte = br.ReadBytes(iLen)
Dim oCn As New SqlConnection(sCnStr)
Dim oCm As New SqlCommand(sQuery, oCn)
oCm.Parameters.Add(“@Bitmap”, SqlDbType.Image).Value = arBytFile
oCn.Open()
oCm.ExecuteNonQuery()
oCn.Close()
End Sub
Untuk menjalankan, tampilkan Solution Explorer (menu View | Solution Explorer atau Ctrl + R),
klik kanan pada file insert.aspx lalu pilih Build and Browse, setelah masuk ke tampilan Browse
cobalah untuk meng-upload beberapa file bitmap. Sampai di sini kita baru dapat menyimpan file ke
database.
Penjelasan kode
Baris deklarasi variabel string sFName kita pakai untuk mengambil file name dari file yang
di-upload, di sini kita menggunakan operasi string untuk mengambil file name saja, bukan full
path-nya:
Dim sFName As String = File1.PostedFile.FileName.Substring( _
File1.PostedFile.FileName.LastIndexOf(“\”) + 1)
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
5
Dim iLen As Integer = File1.PostedFile.ContentLength
Variabel integer iLen di atas untuk menyimpan ukuran dari file bitmap (file size).
Untuk menangani file yang di-upload kita perlu klas BinaryReader dari namespace System.IO
yang akan menerjemahkannya menjadi array byte dengan memanggil method ReadBytes:
Dim br As New BinaryReader(File1.PostedFile.InputStream)
Dim arBytFile() As Byte = br.ReadBytes(iLen)
Selanjutnya array byte tadi dimasukkan ke database dengan menggunakan SQL parameter:
oCm.Parameters.Add(“@Bitmap”, SqlDbType.Image).Value = arBytFile
Langkah 4: Menampilkan Bitmap dari Database
Untuk menampilkan bitmap dari database kita perlu satu halaman web form lagi. Tambahkan satu
web form baru dengan nama show.aspx (Buka menu Project | Add Web Form… ).
Klik-ganda pada halaman kosong show.aspx tersebut untuk masuk ke tampilan code show.aspx.vb.
Tambahkan Imports System.Data.SqlClient pada baris paling atas (sebelum deklarasi
Public Class show) pada file show.aspx.vb tadi.
Untuk menampilkan bitmap dari database, kita perlu array bertipe data Byte yang menyimpan hasil
query yang ditampung oleh SqlDataReader. Kode kerangkanya adalah sebagai berikut:
(copy & paste baris berikut ini di halaman web form Anda setelah region Web Form Designer
Generated Code dan sebelum End Class)
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles MyBase.Load
‘Put user code to initialize the page here
Dim sQuery As String = _
“SELECT Bitmap,FileName FROM tblBitmap WHERE BitmapId = ” _
& Request.QueryString(“id”)
Dim sCnStr As String = _
“Data Source=(local);Initial Catalog=dbBitmap;” _
& “Integrated Security=True;”
Dim oCn As New SqlConnection(sCnStr)
Dim oCm As New SqlCommand(sQuery, oCn)
oCn.Open()
Dim oDr As SqlDataReader = oCm.ExecuteReader()
oDr.Read()
Dim byteArray() As Byte = CType(oDr(“Bitmap”), Byte())
Dim sFileName As String = oDr(“FileName”)
oDr.Close()
oCn.Close()
Response.ContentType = “image/jpeg”
Response.AppendHeader(“content-disposition”, “inline; filename=” _
& sFileName)
Response.BinaryWrite(byteArray)
End Sub
Untuk melihat hasilnya, dari Solution Explorer (menu View | Solution Explorer atau Ctrl + R),
klik kanan pada file show.aspx lalu pilih Build and Browse. Mulanya akan muncul error, oleh sebab
itu, pada kotak URL browser coba tambahkan kata ?id=1 pada alamat web, sehingga menjadi seperti
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
6
http://localhost/webBitmapDb/show.aspx?id=1
Penjelasan kode
Baris program di dalam event handler Page_Load akan dijalankan pada saat halaman ditampilkan.
Pertama kita deklarasikan dulu variabel sQuery untuk menampung SQL query dan memuat value
dari Request.QueryString(“id”).
Apabila Request.QueryString(“id”)kosong maka SQL query menjadi tidak valid, oleh
sebab itu variabel ini harus ada isinya dengan cara memanggil halaman seperti ini
http://localhost/webBitmapDb/show.aspx?id=1 di mana id=1 adalah record tabel
dengan nilai field BitmapId = 1
Dim sQuery As String = _
“SELECT Bitmap,FileName FROM tblBitmap WHERE BitmapId = ” _
& Request.QueryString(“id”)
Query di atas menghasilkan 1 record dalam 2 field, field pertama adalah Bitmap (binary), field ke
dua adalah FileName (nvarchar). Untuk menampung kolom Bitmap tadi kita perlu array bertipe
data Byte. Objek oDr(“Bitmap”) memiliki value bertipa data object sehingga perlu secara
eksplisit dikonversi menjadi byte array:
Dim byteArray() As Byte = CType(oDr(“Bitmap”), Byte())
Baris berikut digunakan untuk menginstruksikan browser agar stream dianggap sebagai image, dan
memiliki filename sesuai dengan nama file aslinya:
Response.ContentType = “image/jpeg”
Response.AppendHeader(“content-disposition”, “inline; filename=” _
& sFileName)
Bila baris di atas tidak ada, gambar kemungkinan tetap tampil (pernulis hanya mencoba browser
MSIE 6), namun pada saat di-Save Picture As… nama file-nya adalah show.aspx bukan nama file
bitmap-nya.
Akhirnya, hasilnya dikirimkan ke output stream pada dengan cara menuliskan array byte secara
binary ke klas HttpResponse:
Response.BinaryWrite(byteArray)
Langkah 5: Menampilkan Bitmap secara Thumbnail
Pengertian thumbnail adalah bitmap dengan ukuran yang lebih kecil secara proporsional dari ukuran
aslinya. Umumnya thumbnail digunakan untuk membuat galeri gambar (image gallery). .NET
Framework menyediakan namespace System.Drawing untuk melakukan operasi Bitmap, yang
meliputi translasi, operasi pixel, konversi warna, efek visual, dan lain-lain. Untuk itu pembuatan
galeri gambar tidak perlu lagi dilakukan secara manual melainkan dapat dengan mudah diprogram,
hal ini lebih efisien kalau kita punya banyak gambar.
Thumbnail dihasilkan dengan memanggil method GetThumbnailImage dari objek
System.Drawing.Image :
Image.GetThumbnailImage(lebar, panjang, fungsiCallback, dataCallback)
Parameter lebar dan panjang menentukan ukuran bitmap thumbnail, parameter
fungsiCallback diisi pointer menuju fungsi lain apabila terjadi pembatalan permbuatan
thumbnail, parameter dataCallback harus diisi dengan nilai IntPtr.Zero.
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
7
Untuk menerjemahkan array byte tadi menjadi objek System.Drawing.Image atau
System.Drawing.Bitmap kita perlu bantuan objek System.IO.MemoryStream.
Prosedur CreateThumbnail berikut ini contoh untuk menghasilkan thumbnail proporsional:
Sub CreateThumbnail(ByVal arrayBytes As Byte())
Dim oMs As New MemoryStream(arrayBytes)
Dim oImg As Drawing.Image = Bitmap.FromStream(oMs)
Dim iW As Integer = oImg.Width
Dim iH As Integer = oImg.Height
Dim iScale As Integer = oImg.Height / 120
oImg = oImg.GetThumbnailImage(iW / iScale, iH / iScale, _
New Drawing.Image.GetThumbnailImageAbort( _
AddressOf cbThumbnailAbort), IntPtr.Zero)
oImg.Save(Response.OutputStream, _
Drawing.Imaging.ImageFormat.Jpeg)
End Sub
Function cbThumbnailAbort() As Boolean
Return False ‘tidak melakukan apa-apa
End Function
Fungsi cbThumbnailAbort dijalankan apabila penciptaan thumbnail dibatalkan, dalam hal ini
kita tidak melakukan apa-apa (hanya Return False). Pembahasan mengenai pointer fungsi
(dalam .NET Framework disebut juga sebagai delegate) akan penulis usahakan pada artikel yang
lain.
Bukalah file show.aspx tadi, masuk ke tampilan kode (pilih menu View | Code atau F7), kemudian
carilah baris deklarasi query, dan gantilah menjadi:
Dim sQuery As String
If IsNothing(Request.QueryString(“id”)) Then
sQuery = _
” SELECT TOP 1 Bitmap,FileName FROM tblBitmap ” _
& ” ORDER BY SubmitDate DESC”
Else
sQuery = _
” SELECT Bitmap,FileName FROM tblBitmap WHERE BitmapId = ” _
& Request.QueryString(“id”)
End If
Baris di atas digunakan untuk mencegah error apabila show.aspx ditampilkan tanpa menggunakan
QueryString, mis.: http://localhost/webBitmapDb/show.aspx , sebagai gantinya
yang ditampilkan adalah gambar yang terbaru (yang di-upload terakhir).
Selanjutnya kita akan membuat halaman tadi bisa menampilkan bitmap secara thumbnail atau
ukuran aslinya dengan memanfaatkan Request.QueryString:
If Request.QueryString(“t”) = 1 Then
CreateThumbnail(byteArray) ‘versi thumbnail
Else
Response.BinaryWrite(byteArray) ‘versi asli
End If
Sehingga kalau kita mau menampilkan gambar versi thumbnail-nya kita dapat memanggil halaman
show.aspx dengan cara http://localhost/webBitmapDb/show.aspx?id=2&t=1
Kode selengkapnya – show.aspx.vb
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
8
(copy & paste baris berikut ini di halaman web form Anda setelah region Web Form Designer
Generated Code dan sebelum End Class)
Private Sub Page_Load(ByVal sender As System.Object _
, ByVal e As System.EventArgs) Handles MyBase.Load
‘Put user code to initialize the page here
Dim sQuery As String
If IsNothing(Request.QueryString(“id”)) Then
sQuery = _
” SELECT TOP 1 Bitmap,FileName FROM tblBitmap ” _
& ” ORDER BY SubmitDate DESC”
Else
sQuery = _
” SELECT Bitmap,FileName FROM tblBitmap WHERE BitmapId = ” _
& Request.QueryString(“id”)
End If
Dim sCnStr As String = _
“Data Source=(local);Initial Catalog=dbBitmap;” _
& “Integrated Security=True;”
Dim oCn As New SqlConnection(sCnStr)
Dim oCm As New SqlCommand(sQuery, oCn)
oCn.Open()
Dim oDr As SqlDataReader = oCm.ExecuteReader()
If oDr.Read() Then ‘record ada?
Dim byteArray() As Byte = CType(oDr(“Bitmap”), Byte())
Dim sFileName As String = oDr(“FileName”)
oDr.Close()
oCn.Close()
Response.ContentType = “image/jpeg”
Response.AppendHeader(“content-disposition”, _
“inline; filename=” & sFileName)
If Request.QueryString(“t”) = 1 Then
CreateThumbnail(byteArray) ‘versi thumbnail
Else
Response.BinaryWrite(byteArray) ‘versi asli
End If
End If
End Sub
Sub CreateThumbnail(ByVal arrayBytes As Byte())
Dim oMs As New MemoryStream(arrayBytes)
Dim oImg As Drawing.Image = Bitmap.FromStream(oMs)
Dim iW As Integer = oImg.Width
Dim iH As Integer = oImg.Height
Dim iScale As Integer = oImg.Height / 120
oImg = oImg.GetThumbnailImage(iW / iScale, iH / iScale, _
New Drawing.Image.GetThumbnailImageAbort( _
AddressOf cbThumbnailAbort), IntPtr.Zero)
oImg.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg)
End Sub
Function cbThumbnailAbort() As Boolean
Return False ‘tidak melakukan apa-apa
End Function
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
9
Untuk melihat hasilnya, dari Solution Explorer (menu View | Solution Explorer atau Ctrl + R),
klik kanan pada file show.aspx lalu pilih Build and Browse. Kini tidak muncul error lagi, melainkan
yang tampil adalah gambar yang terbaru. Ketikkan pada URL browser ke alamat
http://localhost/webBitmapDb/show.aspx?id=1&t=1 untuk menampilkan versi
thumbnail-nya.
Lalu ketikkan http://localhost/webBitmapDb/show.aspx?id=1 untuk menampilkan
ukuran aslinya.
Langkah 6: Membuat Image Gallery
Sekarang kita akan membuat galeri gambar (image gallery) dengan memanfaatkan kontrol
DataList dari namespace System.Web.UI.WebControls. Tambahkan satu web form baru,
beri nama nama gallery.aspx (Buka menu Project | Add Web Form… ). Image Gallery ini cukup
dengan beberapa langkah visual dengan minimal kode program:
1. Buka Server Explorer (menu View | Server Explorer atau Ctrl + Alt + S), expand SQL
Server, cari database dbBitmap sampai kita mendapatkan tabel tblBitmap, kemudian drag-drop
(tarik) tabel tblBitmap tadi ke halaman gallery.aspx}
2. Setelah itu akan terbentuk objek SqlConnection1 dan SqlDataAdapter1, klik kanan
dan Generate Dataset…
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
10
3. Pada kotak dialog Generate Dataset, pilihlah New, beri nama dsBitmap untuk nama Dataset
kita, kemudian klik OK (llihat gambar berikut)
Di Solution Explorer akan tercipta file dsBitmap.xsd, dan di halaman gallery.aspx akan tercipta
objek dsBitmap1
4. Dari Toolbox klik ganda ListItem dari bagian Web Form, kemudian akan tercipta objek
DataList1 di halaman gallery.aspx
5. Di halaman gallery.aspx, klik kanan objek ListItem1 , pilih Property Builder… , kemudian
isi Data Source dengan dsBitmap1, DataMember = tblBitmap, Data key field
(optional) = BitmapId
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
11
Pada bagian Repeat layout, isikan 3 pada kotak teks Columns untuk membuat image gallery
Anda terdiri atas 3 kolom. Anda bisa bereksperimen sendiri untuk Direction dan Layout, juga
pada tab Format atau Borders. Kemudian tekan tombol OK
6. Untuk menghias Datalist dengan cepat, di halaman gallery.aspx klik kanan objek DataList1,
pilih Auto Format…
7. Di halaman gallery.aspx klik kanan objek DataList1, pilih Edit Template | Template
Items…
8. Dari Toolbox, tarik (drag & drop) kontrol Hyperlink ke DataList1 di bagian ItemTemplate
(lihat gambar berikut)
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
12
9. Pindahlah ke Properties window, kemudian pilih properti (DataBindings):
10. Dari property (DataBindings) tadi, tekan tombol . Akan tampil kotak dialog berikut:
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
13
11. Dalam kotak dialog Hyperlink1 DataBindings di sebelah kiri adalah kotak Bindable
Properties yang berisi daftar property yang bisa di-bind ke data source, dan di sebelah kanan
adalah data source-nya.
Di kotak Bindable Properties tadi, pilihlah property NavigateUrl, kemudian pada bagian
Simple Binding pilihlah (expand) Container/DataItem/BitmapId (lihat gambar)
Dari kotak dropdown Format ketiklah dengan show.aspx?id={0}. Notasi {0} maksudnya
adalah sebagai placeholder, yang nantinya pada saat run-time akan diisi data dari data source.
Untuk melihat contohnya pindahlah ke kotak Sample di sebelah kanan kotak dropdown
Format di situ akan muncul show.aspx?id=1. Sampai di sini jangan menekan tombol OK dulu,
biarkan kotak dialog Hyperlink1 DataBindings terbuka.
12. Ulangi langkah 11, untuk property ImageUrl, dan ToolTip sbb:
ImageUrl
Simple Binding: Container/DataItem/BitmapId
Format: show.aspx?id={0}&t=1
ToolTip
Simple Binding: Container/DataItem/FileName
Format: Click to show {0}
Setelah selesai kotak dialog menjadi seperti ini:
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
14
Perhatikan lambang pada daftar Bindable Properties yang berarti property tersebut adalah
data-bound (isinya tergantung dari data).
Tekan tombol OK untuk menutup kotak dialog Hyperlink1 DataBindings.
13. Klik ruang kosong di DataList1 pada bagian ItemTemplate tepat di sebelah kanan
Hyperlink1, kemudian tekan Enter untuk membuat baris baru. Dari Toolbox tambahlan lagi
kontrol Hyperlink tepat di bawah Hyperlink1. Lihat Gambar:
14. Ulangi Langkah 9 sampai 12 untuk mengatur property DataBindings untuk Hyperlink2.
Kali ini hanya perlu dua property yang diubah yaitu NavigateUrl dan Text sbb:
NavigateUrl
Simple Binding: Container/DataItem/BitmapId
Format: show.aspx?id={0}
Text
Simple Binding: Container/DataItem/FileName
Format: {0}
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
15
15. Pada halaman gallery.aspx klik kanan DataList1, kemudian pilih End Template Editing.
Tampilan DataList1 akan berubah menjadi seperti ini
Di halaman gallery.aspx klik ganda pada ruang kosong di luar objek DataList1, ini akan
membawa kita ke tampilan code behind gallery.aspx.vb. Carilah event handler Page_Load
kemudian ketikkan kode berikut
Private Sub Page_Load(ByVal sender As System.Object _
, ByVal e As System.EventArgs) Handles MyBase.Load
‘Put user code to initialize the page here
Me.SqlDataAdapter1.Fill(Me.DsBitmap1)
Me.DataList1.DataBind()
End Sub
16. Untuk melihat hasilnya, dari Solution Explorer (menu View | Solution Explorer atau Ctrl +
R), klik kanan pada file gallery.aspx lalu pilih Build and Browse
17. Halaman hasil:
Selamat! Anda sudah bisa membuat image gallery sederhana untuk menampilkan gambar-gambar
favorit Anda dan menyimpannya dalam database.
Artikel Populer IlmuKomputer.Com
Copyright © 2003 – 2006 IlmuKomputer.Com
16
Perhatian!
Tutorial ini dimaksudkan hanya untuk sarana edukasi dan tidak dianjurkan untuk
penggunaan dalam skenario produksi (production scenarios) karena di sini kita tidak
menerapkan masalah keamanan IIS atau Web Form, object dan output caching,
penggunaan stored procedures, penanganan eksepsi (exception handling), aspek
viewstate, pemanfaatan asynchrounous programming, dan lain-lain.
Biografi Penulis
Eri Airlangga lahir di Surabaya ,15 Agustus 1974. Praktisi TI selama 7 tahun
di bidang IT Infrastruktur, database, programming, web dan data warehouse.
Saat ini bekerja sebagai konsultan TI.
Kontak:
Email: erlange@yahoo.com