Menampilkan Gambar Binner Dari Database – 2

Catatan ini masih merupakan kelanjutan dari catatan sebelumnya. Sebelumnya saya juga pernah menulis bagaimana menampilkan gambar yang tersimpan di database di ImageControl. Di tulisan sebelumnya, data gambar yang tersimpan di database di tampilkan di page (.aspx) khusus, kemudian url dari imagecontrol diarahkan ke page tersebut. Tulisan kali ini kurang lebih prinsipnya masih sama, tetapi saya tidak lagi menggunakan file aspx untuk menghandle gambar dari database. Disini saya menggunakan file generic handler (.ashx).

Untuk membaca data binary di database, pertama kita buat file handler yang berfungsi membaca data biner dari database. Tambahkan file generic handler ke website, dan beri nama ImageHandler.ashx.

Buat file generic handler

Tulis kode berikut di file handler (.ashx)

<%@ WebHandler Language="VB" Class="ImageHandler" %>

Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration

Public Class ImageHandler : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim konstring As String = ConfigurationManager.ConnectionStrings("DemoUploadImgConn").ToString()
        Dim sqlCon As New SqlConnection(konstring)
        Dim sqlCmd As New SqlCommand()
        sqlCmd.CommandText = "SELECT Gambar FROM Images WHERE Id= @id"
        sqlCmd.CommandType = Data.CommandType.Text
        sqlCmd.Connection = sqlCon

        Dim IDgbr As New SqlParameter("@id", Data.SqlDbType.Int)
        IDgbr.Value = context.Request.QueryString("ID")
        sqlCmd.Parameters.Add(IDgbr)

        sqlCon.Open()
        Dim SqlReader As SqlDataReader = sqlCmd.ExecuteReader()
        SqlReader.Read()
        context.Response.BinaryWrite(CType(SqlReader("Gambar"), Byte()))
        SqlReader.Close()

        sqlCon.Close()
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
End Class

Untuk bentuk databasenya silahkan baca catatan sebelumnya.

Sekarang tambahkan file aspx. Disini saya akan menampilkan gridview dan juga di image web control.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DisplayImage.aspx.vb" Inherits="DisplayImage" %>
<!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>Display Image Dari Database</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <!-- gambar di tampilkan di gridview -->
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="ID" />
                <asp:BoundField DataField="Name" HeaderText="Nama" />
                <asp:BoundField DataField="Size" HeaderText="Ukuran File" />
                <asp:BoundField DataField="Type" HeaderText="Type" />
                <asp:TemplateField HeaderText="Gambar">
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server"
                         ImageUrl='<%# "ImageHandler.ashx?ID=" & Eval("ID")%>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <!-- gambar di tampilan di imageweb control -->
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> &nbsp;
        <asp:Button ID="Button1" runat="server" Text="Tampilkan" /><br />
        <asp:Image ID="Image2" runat="server" />
    </div>
    </form>
</body>
</html>

Sekarang buka code behind. Tambahkan kode untuk mengikat data dari database ke gridview

Imports System.Data.SqlClient
Imports System.Configuration

Partial Class DisplayImage
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Me.Load
        If Not Page.IsPostBack Then
            'menampilkan image ke gridview
            Dim KonStr As String = ConfigurationManager.ConnectionStrings("DemoUploadImgConn").ToString()
            Dim dt As New Data.DataTable()
            Dim sqlCon As New SqlConnection(KonStr)

            sqlCon.Open()
            Dim da As New SqlDataAdapter("SELECT * FROM Images", sqlCon)
            da.Fill(dt)
            sqlCon.Close()

            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        'menampilkan image yang dipilih berdasarkan ID di textbox
        Dim id As Integer = Integer.Parse(TextBox1.Text)
        Image2.ImageUrl = "imagehandler.ashx?ID=" & id
    End Sub
End Class

Jalankan programnya, hasilnya kurang lebih seperti berikut

Semoga bermanfaat.
Happy coding

About these ads

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 8 Januari 2010, in ASP.net and tagged , , , , . Bookmark the permalink. 18 Komentar.

  1. makasih nih tutorialnya

  2. DemoUploadImgConn terdapat dmna ???

  3. klo ada 2 tabel dengan fungsi upload apakah harus membuat 2 handler atau bisa di satu handler saja ?

    tks.

    • Satu handler bisa, tinggal atur parameter2nya aja, untuk membedakan data dari tabel 1 ato tabel2 yang mo di ambil

      • mohon maaf saya masih bingung untuk menambahkan parameternya tu.
        misal saya mau menampilkan gambar2 dari tabel images2 bisa diberikan contoh penulisan codingnya ?

        tks.

  4. Parameter disini, misalnya (sperti contoh saya – kode bagian 3 baris 28)
    Image2.ImageUrl = “imagehandler.ashx?ID=” & id

    disini kan id adalah parameter. Kalo mo nambahin parameter ya tinggal ditambahin misalnya ditambahin paramter nama tabel

    Image2.ImageUrl = “imagehandler.ashx?ID=” & id & “&table=” &nmtabel

    Trus di file handlernya, gunakan parameter tsb untuk query ke db

  5. ok… terima kasih :)

    Sdikit OOT… apakah ada pengaruhnya terhadap website saya, bila saya memasukan lebih dari 1 file handler.aspx ?

    tks

  6. ok.. terima kasih atas ilmunya :)

  7. Mas, mau tnya donk, dah sminggu ini mentok..

    klo gambarnya mau di edit ato di update ganti dengan gambar yg baru tu gimana ya ?
    soalnya setelah di tampilkan secara gridview klo di edit yang terupdate hanya namadilenya saja.

    Tks.

    • Kalo gambarnya ada di database, kan mudah aja. Km tinggal bikin kueri update di databasenya, selain kamu update kolom nama, kamu juga update kolom (image) tempat km nyimpen gambarnya.

  8. halo mas, saya mau nanya ttg image2.imgurl = “imagehandler.ashx?ID=” & id.. itu hasil yg didapat hasil dari isi tabel yg fieldnya gambar ya?

    • Maksudnya hasil yang mana? parameter id disitu ya.. cuma id fotonya di db.
      Kalau field gambar (tipe Image) itu diproses di file imagehandlernya.

      • <asp:Image ID="Image1" runat="server"
        ImageUrl='’ />

        mas mau nanyak,kata Eval di atas di ambil dari mana yach….

        Terima kasih.

  9. andi syamsuddin

    mas mau tanya donk,kalau mau mmperkecil size imagenya gimana yaa caranya,

    tks

  10. Boleh minta soft copy’y gak gan ?
    ilhamaswad@ymail.com

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

%d bloggers like this: