Menampilkan Gambar Dari Database Ke dalam Visual Studio C#

Halo sobat Rujak, Apa Kabar Hari ini?
Seperti  yang teman-teman ketahui pada postingan sebelumnya kita membahas bagaimana caranya menampilkan gambar dari storage computer kita ke visual studio dan bagaimanan caranya menyimpan alamat gambar tersebut ke dalam database.
Pada postingan kali ini kita akan membahas bagaimana caranya menampilkan gambar yang tersimpan di dalam database ke visual studio.
Dari pengalaman saya pertanyaan ini adalah pertanyaan yang paling banyak di tanyakan oleh para anak it yang baru mulai mempelajari bahasa C# ini. Tentu saja saya juga termasuk dari orang yang menanyakan hal ini waktu itu.
Sebenarnya menampilkan gambar ke dalam visual studio dari database bukan lah suatu hal yang sulit. Seperti yang sudah di jelaskan pada postingan sebelumnya, yang kita simpan ke dalam database adalah alamat gambar bukan gambarnya. Logikanya yang kita tampilkan adalah di visual studio adalah alamat gambarnya dan kita hanya perlu menyetting agar visual studio yang kita jalankan meload alamat gambar tersebut menjadi gambar yang akan di tampilkan.
Yah daripada ribet ngejelasin teori kita langsung aja ke prakteknya.
Disini saya akan menggunakan sebuah form yang saya ambil dari salah satu program yang pernah saya bikin. Teman-teman hanya perlu menyesuaikan saja, yang terpentingkan adalah logika dan codingnya aja.
Berikut adalah bentuk formnya,….

Teman-teman  bisa lihat dari form di atas. Yang perlu di perhatikan adalah yang sudah saya kasih anak panah merah itu.
PictureBox Untuk Menampilkan gambar, Textboxt tempat mengambil alamat gambar dari database, dan button tampilkan untuk mengeksekusi agar alamat gambar dapat tampil di textbox. 
Ketiga komponen di atas adalah yang terpenting.

Pada form ini sebenarnya menampilkan data dari databasenya adalah menggunakan semacam form pop up lalu memilih data dengan mengklik data agar muncul dalam tempat yang sudah di sediakan di form, tapi saat ini bukan itu yang kita bahas, nanti untuk materi itu kita bahasnya kapan-kapan saja.

Oke pertama-tama teman-teman silahkan buat validasinya aja dulu. yaitu apabila textbox cari judul kosong maka akan muncul validasi data yang akan di cari masih kosong. Saya rasa teman-teman bisa membuatnya sendiri. jika belum silahkan baca postingan-postingan yang sebelumnya atau silahkan bertanya aja.
Oke jika sudah silahkan tambahkan ini  using System.Data.SqlClient; tepat di bawah kode using System.Windows.Forms; yang berada di bagian atas program anda.
 Kode yang di tambahkan di atas berfungsi untuk mengaktifkan fungsi sql sobat. Jika sudah di tambahkan silahkan hubungkan visual anda dengan SQL Server sobat. Untuk yang belum tau cara menghubungkannya silahkan baca postingan ini "Menghubungkan SQL Server dengan Visual Studio C# Dan Simpan Update Delete di C#".
Sip deh kalo udah terhubung sekarang kita mulai untuk menampilkan data dari databasenya ke dalam visualnya.
Pertama klik 2 X pada button tampilkan lalu mulai tambahkan kode sql di bawah ini kedalamnya.
kode saya seharusnya agak panjang karena di sesuaikan dengan data dari database yang saya punya. 
Tapi saya ringkas kodenya jadi hanya untuk tampilin gambarnya saja,
private void btntampil_Click(object sender, EventArgs e)
        {

                System.Data.SqlClient.SqlConnection conn = konn.GetConn();
                conn.Open();
                SqlCommand cmd = new SqlCommand();  
                SqlDataReader rdr;

                cmd.CommandText = "select * from tb_film where judul ='" + txtcari.Text +"'";
                cmd.Connection = conn;
                rdr = cmd.ExecuteReader();

                while (rdr.Read())
                {
                   
                    pBoxSimpan.Image = Image.FromFile(rdr[5].ToString());
                    txtsavefile.Text = rdr[5].ToString();

                  
                }
                conn.Close();
            }
        }



Penjelasan kode di atas: 
SqlCommand cmd = new SqlCommand(); ==> Ini untuk mendefinisikan sql commandnya fungsinya untuk eksekusi query sql yang sudah di buat. 
                
SqlDataReader rdr; ==> mendefinisikan sql reader, fungsinya untuk membaca dan menampilkan data yang di eksekusi sebelumnya.

cmd.CommandText = "select * from tb_film where judul ='" + txtcari.Text +"'"; ==> ini adalah query sql yang di eksekusi.
pBoxSimpan.Image = Image.FromFile(rdr[5].ToString()); ==> Menampilkan data kedalam textbox dan tulisan array"[5]" ini adalah lokasi urutan data gambar pada databasenya, teman-teman hanya perlu menyesuaikannya dengan urutandata di database yang sobat bikin.
                     
txtsavefile.Text = rdr[5].ToString();==> menampilkan alamat gambar pada textbox dari database. kurang lebih penjelasannya sama seperti di atas.

Jika codingnya teman-teman udah benar seperti di atas makan saat programnya di F5 atau di jalankan maka hasilnya akan seperti gambar di bawah ini.

Pada gambar di atas data-data pada form semuanya masih kosong.
tapi saat button tampilkan di klik maka datanya aka muncul semua seperti yang terlihat pada gambar di bawah.
Demikianlah bagaimana caranya menampilkan gambar dari database ke dalam visual.
Seperti biasa jika ada yang kurang paham jangan segan untuk bertanya,
makasih.....

5 komentar:

  1. Makasih banyak gan... Sangat membantu untuk tugas kuliah saya...

    BalasHapus
    Balasan
    1. sama-sama... thanks udah datang ke blog ane yg sederhana,,, :)

      Hapus
  2. mas saya mengikuti simpan gambar di database dengan tutorial anda buat bisa. db yg saya pake sql server, tipe data image nya image, jadi value nya berubah binary ketika di simpan di db. nah lalu saya menggunakan teknik tampil gambar yg disini tidak bisa erorrnya di bagian pBoxSimpan.Image = Image.FromFile(rdr[5].ToString()); tidak dapat menampilkan data binary ke string. yg saya tanyakan jika value saya binary data di image nya dan ingin di tampilkan datanya apa yang harus di ubah?

    BalasHapus
  3. Mas, saya boleh minta coding database seperti contoh diatas?

    BalasHapus
  4. Selamat Malam Mas Tufik.
    Saya perlu bantuan untuk mentelesaikan Coding program java dengan Array dua dimensi. Saya berharap mas Tufik berkenan menbantu.
    Input Scanner sbb:
    >>> Masukkan Jumlah Mata Kuliah yang akan di-entry : 5

    INPUT DATA MAHASISWA
    --------------------
    Nama Mahasiswa : Bagus Suryadana
    Nomor Induk Mahasiswa : TI-2014.007
    Semester : III

    INPUT DATA NILAI PER MATA KULIAH
    --------------------------------
    1. Kode Mata Kuliah : MKW-009
    Nilai UTS : 70
    Nilai UAS : 85
    2. Kode Mata Kuliah : MKW-010
    Nilai UTS : 63
    Nilai UAS : 78
    3. Kode Mata Kuliah : MKW-011
    Nilai UTS : 87
    Nilai UAS : 91
    4. Kode Mata Kuliah : MKW-012
    Nilai UTS : 40
    Nilai UAS : 65
    5. Kode Mata Kuliah : MKW-013
    Nilai UTS : 73
    Nilai UAS : 45
    Hasil Output sbb:
    0 1 2 3 4 5 6 7 8 8
    1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678
    ****************************************************************************************
    STMIK
    Program Teknik Informasi dan Ilmu Komputer
    Jl. A Yani No. 88 D
    Tangerang - Banten
    ========================================================================================

    KARTU HASIL STUDI
    ( KHS )
    TAHUN AKADEMIK 2015/2016


    Nama Mahasiswa : Bagus Suryadana Program Studi : Teknik Informartika
    NIM : TI-2014.007 Semester : III
    ========================================================================================
    | | | | | Nilai |
    | NO. | Kode MK | Nama Mata Kuliah | SKS |--------------|
    | | | | | HM | AM | NM |
    ========================================================================================
    | 1. | MKW-009 | Sistem Basis Data | 4 | A | 4 | 16 |
    | 2. | MKW-010 | Sistem Operasi | 4 | B | 3 | 12 |
    | 3. | MKW-011 | Interaksi Manusia dan Komputer | 3 | A | 4 | 12 |
    | 4. | MKW-012 | Probabilitas dan Statistika | 4 | C | 2 | 8 |
    | 5. | MKW-013 | Pemodelan Berorientasi Objek | 3 | C | 2 | 6 |
    ----------------------------------------------------------------------------------------
    | Jumlah | 18 | | 54 |
    ----------------------------------------------------------------------------------------
    | Indeks Prestasi Kumulatif (IPK) : 3.00 |
    | Prestasi : Sangat Memuaskan |
    ========================================================================================

    Keterangan: BAGIAN ADMINISTRASI KEMAHASISWAAN
    * HM : Huruf Mutu STMIK KARYA PUTRA BANGSA
    * AM : Angka Mutu
    * NM : Nilai Mutu


    Muhammad Thohir, S.Kom
    ----------------------
    ****************************************************************************************
    1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678
    0 1 2 3 4 5 6 7 8 8
    Terima kasih sebelumnya.

    BalasHapus

Ada pertanyaan atau sekedar ninggalin jejak silahkan comment di bawah
==komen anda berarti buat kami==