Menampilkan Image Gambar Visual Basic

Menampilkan, Menyimpan, Mengedit Serta Pencarian Foto, Image atau Gambar Menggunakan Visualbasic

Banyak orang bertanya dan kesulitan mengenai bagaimanakah cara menyimpan gambar, foto atau image menggunakan program aplikasi Visualbasic .Net serta menggunakan database sebagai tempat penyimpanannya. Perlu diperhatikan bahwa menyimpan gambar (image) tidak sama dengan menyimpan teks, jadi yang sangat perlu diperhatikan adalah type field yang digunakan dalam tabel.

Jika menggunakan Microsoft SQL Server Anda bisa menggunakan Type data “Image”, untuk Microsoft Access Anda dapat menggunakan “Ole Object” dan untuk Mysql Server Anda bisa menggunakan type data “Long Blob”.Setelah mengetahui type datanya, sebelum membuat kode atau script menyimpan serta menampilkan foto menggunakan Visualbasic .Net yang perlu diperhatikan lagi adalah type gambar yang boleh untuk disimpan.

Artikel Lain: Mengetahui Kecepatan Blog

Ada banyak sekali jenis gambar, namun yang saya rekomendasikan adalah gambar (image) yang berekstensi .png .gif saja. Karena takutnya jika gambar (image) lain seperti .gif akan terlalu besar sehingga membebani basis data kita, belum lagi nanti jika ada masalah karena tidak kompatible.

Untuk itulah sebelum membuat kode programnya, nanti akan kita filter gambar apa saja yang boleh dimasukkan atau di inputkan pengguna.Sebelum membuat mari kita analogikan dahulu program yang akan kita buat ini menjadi sebuah kasus.

Dimana kita ingin membuat program yang bisa menyimpan Nim, Nama dan Foto mahasiswa. Dalam kasus ini kita menggunakan bahasa Pemrograman Visualbasic .Net dan Microsoft SQL Server sebagai tempat pembuatan dan penyimpanan databasenya. Setelah kita anggap rancangan kasusnya seperti itu, maka sekarang kita akan mencoba membuat Program Aplikasinya.

Untuk membuat script maupun kode program menyimpan gambar (image) silakan ikuti langkah-langkah dibawah dengan baik dan penuh ke hati-hatian agar tidak terjadi kesalahan dalam penulisan kodenya.

1. Pertama-tama siapkan sebuah Form beserta beberapa komponen yaitu 2 TextBox untuk NIM & Nama, 1 PictureBox sebagai wadah fotonya, 5 Button untuk Simpan,Ubah,Hapus,Cari, dan Buka Foto, 1 DataGridView untuk hasil outputnya, untuk Labelnya bisa terserah Anda karena hanya berfungsi sebagai keterangan. Setelah selesai dengan komponen, sekarang kita buat databasenya terlebih dahulu, dalam kasus ini saya menggunakan Microsoft SQL Server, sudah saya jelaskan diatas mengenai perbedaan type data dalam berbagai sistem basis data. Karena menggunakan Microsoft SQL Server untuk field gambarnya kita pilih dengan type image. Jadi struktur dari database kita nantinya seperti ini. Nama database=foto, Nama table=tbfoto, dan dalam tabel tbfoto terdapat 3 field yaitu (nim bertype varchar), (nama bertype varchar) dan (gambar bertype image).

2. Setelah Form, Komponen dan Databasenya telah kita buat, kembali lagi ke Project kita. Tambahkan sebuah module, bisa Anda lakukan dengan cara lihat bagian solution explorer di sebelah kanan Project, klik kanan pada Project Anda dan tambahkan dengan cara Add >> Module, setelah itu Anda klik Ok. Pada module1 Anda tambahkan kode atau script penghubung database dengan program Anda seperti berikut.

Imports System.Data
Imports System.Data.SqlClient
Imports System.Security.SecurityException
Module Module1
Public Function koneksi() As SqlConnection
Dim supernothing As New SqlConnection
supernothing = New SqlConnection(“server=SONISITEZSQLEXPRESS; database=foto; trusted_Connection=true”)
supernothing.Open()
Return (supernothing)
End Function
End Module

Keterangan:SONISITEZSQLEXPRESS” adalah Nama server Anda, jika menggunakan OleDB (Microsoft Access) Anda bisa lihat bentuk koneksinya di artikel Cara menyimpan data ke database. Sedangkan “database=foto” foto itulah nama database Anda atau yang sudah kita buat pada langkah pertama tadi.

3. Setelah itu kembali ke Form Project Anda, sebelumnya yang tidak kalah penting adalah klik pada komponen DataGridView Anda, ubah Properties SelectionModenya menjadi FullRowSelect. Fungsinya agar kita bisa melakukan klik disepanjang field yang ditampilkan pada DataGridView, sehingga akan memudahkan kita dalam melakukan proses update atau pengeditan. Setelah selesai klik dua kali pada Form Project Anda dan tambahkan kode (script) berikut diatas “Public Class” atau bisa dikatakan pada bagian atas sendiri dari kode program Anda.

Imports System.Data
Imports System.Data.SqlClient

Keterangan: Fungsi dari kode (script) ini adalah mengenalkan koneksi yang akan kita buat bahwa jenis basis data yang akan kita pakai menggunakan Microsoft SQL Server, jadi jika menggunakan Server basisdata lain tentunya kode koneksi ini akan berbeda.

4. Tahap selanjutnya adalah pembuatan Region beserta Sub agar program kita nantinya berjalan lebih rapi, dan menghemat baris kode karena akan kita pakai Subnya berulang-ulang. Taruh kode (script) Region berikut dibawah Public Class, kebalikan dari kode yang diatas tadi.

#Region “deklarasisoni”
Sub baca()
Using sql As New SqlClient.SqlCommand(“select * from tbfoto”, Module1.koneksi)
Using dr As SqlClient.SqlDataReader = sql.ExecuteReader()
Using dt As New DataTable
dt.Load(dr)
DataGridView1.DataSource = dt
End Using
End Using
End Using
Module1.koneksi.Close()
End Sub
Sub cari()
Try
Using sql As New SqlClient.SqlCommand(“select * from tbfoto where nim='” & TCARI.Text & “‘”, Module1.koneksi)
Using dr As SqlClient.SqlDataReader = sql.ExecuteReader()
Using dt As New DataTable
dt.Load(dr)
If TCARI.Text = “” Then
MessageBox.Show(“Keyword masih kosong”, “coba lagi”, MessageBoxButtons.OK, MessageBoxIcon.Error)
TCARI.Focus()
ElseIf dt.Rows.Count <> 1 Then
MessageBox.Show(“NIM : ” & TCARI.Text & ” Belum ada di Record”, “Coba lagi”, MessageBoxButtons.OK, MessageBoxIcon.Error)
TCARI.Text = “”
TCARI.Focus()
Else
Dim row As DataRow = dt.Rows(0)
TNIM.Text = row(0)
TextBox1.Text = row(1)
Using ms As New IO.MemoryStream(CType(row(2), Byte()))
Dim img As Image = Image.FromStream(ms)
PictureBox1.Image = img
PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
End Using
End If
End Using
End Using
End Using
Module1.koneksi.Close()
Catch ex As Exception
MsgBox(ex.Message)
End Try
End Sub
Sub simpan()
Try
Using sql As New SqlClient.SqlCommand(“insert into tbfoto (nim,nama,gambar) values(@nim,'” & Me.TextBox1.Text & “‘,@gambar)”, Module1.koneksi)
sql.Parameters.Add(New SqlClient.SqlParameter(“@nim”, SqlDbType.VarChar)).Value = TNIM.Text()
If a.FileName = Nothing Then
sql.Parameters.Add(New SqlClient.SqlParameter(“@gambar”, SqlDbType.Image)).Value = IO.File.ReadAllBytes(“kosong.jpg”)
MsgBox(“Anda tidak memilih foto apapun!!”, MsgBoxStyle.Information, “Message”)
Else
sql.Parameters.Add(New SqlClient.SqlParameter(“@gambar”, SqlDbType.Image)).Value = IO.File.ReadAllBytes(a.FileName)
End If
sql.ExecuteNonQuery()
MessageBox.Show(“NIM Mahasiswa : ” & TNIM.Text & ” Telah disimpan”, “Data Sukses”, MessageBoxButtons.OK, MessageBoxIcon.Information)
Module1.koneksi.Close()
End Using
Catch ex As Exception
MsgBox(ex.Message)
End Try
End Sub
Sub ubah()
If MsgBox(“Apa mau diubah?”, MsgBoxStyle.Critical Or MsgBoxStyle.OkCancel, “Peringatan”) = MsgBoxResult.Ok Then
Try
Dim cmd As String = String.Empty
Dim adapter As New SqlDataAdapter(“select gambar from tbfoto where nim='” & TNIM.Text & “‘”, Module1.koneksi)
Dim dt As New DataTable(“tbfoto”)
adapter.Fill(dt)
Using sql As New SqlClient.SqlCommand(“update tbfoto set nim=@nim,nama=@nama,gambar=@gambar where nim='” + TNIM.Text + “‘”, Module1.koneksi)
sql.Parameters.Add(“@nim”, SqlDbType.VarChar).Value = TNIM.Text
sql.Parameters.Add(“@nama”, SqlDbType.VarChar).Value = TextBox1.Text
If a.FileName = Nothing Then
Dim row As DataRow = dt.Rows(0)
Using ms As New IO.MemoryStream(CType(row(0), Byte()))
Dim img As Image = Image.FromStream(ms)
PictureBox1.Image = img
sql.Parameters.Add(New SqlClient.SqlParameter(“@gambar”, SqlDbType.Image)).Value = (CType(row(0), Byte()))
Me.BackColor = Color.Red
End Using
Else
sql.Parameters.Add(New SqlClient.SqlParameter(“@gambar”, SqlDbType.Image)).Value = IO.File.ReadAllBytes(a.FileName)
End If
‘sebelum perintah update dieksekusi, maka kondisi diatas akan memerikasa apakah foto sebelumnya
‘tidak diganti dari database sehingga foto yang lama akan tetap disimpan kedalam database,tetapi jika foto diganti maka yang dijalankan adl else
sql.ExecuteNonQuery()
MessageBox.Show(“Nim Mahasiswa : ” & TNIM.Text & ” Sudah diupdate !!”, “Data Sukses”, MessageBoxButtons.OK, MessageBoxIcon.Information)
Module1.koneksi.Close()
End Using
Catch ex As Exception
MsgBox(ex.Message)
End Try
Else
Me.TNIM.Text = “”
Me.TNIM.Focus()
End If
Module1.koneksi.Close()
End Sub
Sub hapusdata()
Dim hapus As Integer
hapus = MsgBox(“Apa anda yakin ingin menghapus?” & vbCrLf & “Nim Mahasiswa = ” & TNIM.Text, vbYesNo, “Konfirmasi Hapus”)
If (hapus = vbYes) Then
Using sql As New SqlClient.SqlCommand(“delete from tbfoto where nim='” & TNIM.Text & “‘”, Module1.koneksi)
Using dr As SqlClient.SqlDataReader = sql.ExecuteReader()
End Using
End Using
MessageBox.Show(“Nim mahasiswa : ” & TNIM.Text & ” Sudah dihapus dari record !”, “Data Sukses”, MessageBoxButtons.OK, MessageBoxIcon.Information)
Module1.koneksi.Close()
End If
End Sub
#End Region

Keterangan: Terdapat 5 Sub dalam sebuah Region “deklarasisoni”, Sub yang pertama adalah “Sub baca” Fungsi dari sub baca ini adalah menampilkan hasil atau output dari penyimpanan data yang telah kita lakukan. Sub yang kedua adalah “Sub cari” fungsi dari Sub ini jelas adalah sebagai pencarian data yang ada dalam database, sama seperti artikel pencarian data yang dibahas sebelumnya. Sub yang ketiga adalah “Sub simpan”, sub ini berfungsi untuk menyimpan data yang telah kita inputkan, dalam kasus ini (nim,nama,foto). Sub yang keempat adalah “Sub ubah”, fungsi dari Sub ini adalah untuk melakukan pengeditan, kalau-kalau data yang kita inputkan nantinya ada yang salah. Sub yang terakhir atau Sub yang kelima adalah “Sub hapusdata” Sub yang terakhir ini tentu saja untuk menghapus data yang mungkin dalam penggunaannya nanti data tersebut sudah tidak digunakan, sehingga memudahkan pengguna program untuk menghapus data tersebut.

5. Setelah berkutat dengan region saatnya sekarang untuk membuat perintah membuka foto. Klik dua kali pada Button Buka Foto yang telah kita tambahkan tadi, lalu pastekan kode berikut tepat diatas “Private Sub” Button Buka Foto Anda. Dalam penempatan kode ini ada beberapa opsi yang dapat dilakukan, Anda dapat meletakkan kodenya dibawah region maupun diatas region tidak menjadi masalah.

Dim a As New OpenFileDialog

Keterangan: Fungsi dari kode atau script pendek ini adalah mendeklarasikan jika variabel “a” sebagai OpenFileDialog. OpenFileDialog sendiri adalah popup yang muncul yang biasa kita lihat jika ingin menyimpan sesuatu di Program Windows (ex: Photoshop). Walaupun kode scriptnya sangat pendek, ini sangat penting karena akan kita gunakan di kode-kode berikutnya!.

6. Mendeklarasikan Variabelnya telah selesai. Sekarang mengisi perintah di event kliknya Button Buka Foto, jika ragu klik dua kali pada Button Buka Foto Anda supaya lebih yakin tepat pada event klik. Lalu tambahkan (paste) kode perintah programnya dibawah.

Dim PictureLocation As String
a.Filter = “JPG Files (*.jpg)|*.jpg|JPEG Files (*.jpeg)|*.jpeg|GIF Files (*.gif)|*.gif|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|TIFF Files (*.tiff)|*.tiff”
PictureLocation = a.FileName
Try
If a.ShowDialog = Windows.Forms.DialogResult.OK Then
PictureBox1.Image = New Bitmap(a.FileName)
PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
End If
Catch ex As Exception
MsgBox(ex.Message)
End Try

Keterangan: Fungsi dari script atau kode program tersebut adalah untuk memfilter file apa saja yang boleh disimpan (.jpeg,.png,.bmp dan seterusnya) Jika Anda ingin merubah kodenya harus hati-hati agar Programnya nanti berfungsi dan berjalan dengan baik. Selain berfungsi untuk memfilter jenis file gambar, kode program tersebut juga berfungsi menampilkan gambar atau imagenya di komponen PictureBox1.

7. Setelah itu klik dua kali pada DataGridView Anda, Pilih eventnya “Click” jangan sampai salah. Setelah memilih event Click pastekan kode dibawah pada tepat pada event klik DataGridView tersebut.

Try
TNIM.Text = DataGridView1.SelectedCells(0).Value
TextBox1.Text = DataGridView1.SelectedCells(1).Value
Catch ex As Exception
‘MsgBox(“Ada kesalahan !!”, MsgBoxStyle.MsgBoxRight, “Message”)
End Try

Keterangan: Kode atau script tersebut berfungsi untuk menampilkan item yang ada pada Cell DataGridView kedalam TextBox. Agar ketika mengeditnya nanti lebih mudah dan tidak manual (karena nim adalah primary key, jadi merubah datanya berdasarkan nim). Indexnya selalu dimulai dario angka “0“. Jadi angka “0” itu adalah data pertama (awal) yang ada di baris field dan seterusnya.

8. Sekarang pada button cari tambahkan kode dibawah untuk memanggil Sub “cari” yang telah kita buat sebelumnya didalam region kita. Klik dua kali pada Button Cari lalu pastekan kode dibawah ini.

cari()

Keterangan: Untuk memanggil sub cari yang telah kita buat. Serta fungsi cari tersebut adalah melakukan pencarian data yang ada pada database berdasarkan primary key, dalam hal ini field (nim).

9. Kode pencarian telah kita pasang, sekarang saatnya memasang kode untuk menampilkan data yang ada pada database kita. Klik dua kali pada form anda, pada event Form Load pastekan kode dibawah agar saat program dibuka data-datanya ditampilkan.

baca()

Keterangan: Fungsinya adalah memanggil “Sub baca” yang telah kita buat. Didalam “Sub baca” terdapat script atau kode yang berfungsi menampilkan data yang ada pada database kita. “Sub baca” ini akan kita pakai dan pangggil berulang-ulang tentunya, karena setiap ada update atau penghapusan data agar yang ditampilkan adalah data yang terbaru.

10. Setelah memasang kode untuk menampilkan data dari dalam databasenya, sekarang saatnya Anda memasang script atau  kode untuk menyimpan data sekaligus gambar atau imagenya. Untuk memasangnya silakan klik dua kali pada Button Simpan, lalu pastekan kode dibawah untuk memanggil sub simpan.

simpan()
baca()

Keterangan: Setelah kita selesai menyimpan data, program secara otomatis akan menampilkan data terbaru yang ada dalam database, dikarenakan “Sub baca” kita panggil lagi setelah “Sub simpan”. Inilah yang saya katakan membuat Sub pada region lebih efektif dan efisien jika akan kita gunakan berulang-ulang.

11. Setelah simpan tentunya proses update (pengeditan data) yang akan kita pasang. Sama dengan metode sebelumnya sekarang klik dua kali pada Button Update Anda dan tambahkan script atau kode untuk memanggil Sub Updatenya sepeti dibawah.

ubah()
baca()

Keterangan: Sama seperti sebelumnya perintah ini berfungsi memanggil sub ubah yang telah kita buat diawal. Data yang sudah diubah akan ditampilkan kembali dalam bentuk yang telah diperbarui. Ingat sebelum mengupdate klik dulu DataGridViewnya sehingga didapatkan “nim” mana yang akan diupdate, karena “nim” bertindak seperti Primary Key.

12. Yang terakhir tentu saja kita sampai pada tahap penghapusan data. Untuk memanggil Subnya lakukan seperti langkah sebelumnya, tapi kali ini yang di klik adalah Button Hapus tentu saja, setelah itu masukkan kode (perintah) ini.

hapusdata()
baca()

Keterangan: Sama seperti sebelumnya kode ini berfungsi untuk menghapus data yang telah dipilih. Ingat untuk memilih nimnya dengan cara mengklik data pada DataGridViewnya sebelum menghapus. Setelah data dihapus maka program akan menampilkan data terbaru.

Akhirnya dari artikel yang panjang ini kita telah sampai pada saat yang berbahagia, yaitu pada tahap pengujian Program. Jika berhasil maka hasilnya akan seperti Video yang saya praktekkan dibawah, silakan di lihat sendiri. Jika belum berhasil silakan menanyakan lewat komentar dan akan Saya jawab semampu Saya. Semoga artikel ini bermanfaat dan Jangan lewatkan artikel sebelumnya tentang Cara Memasukkan Variabel Pada ListView Visualbasic.

Download Video
Download Code

 

Tags:

  • menampilkan file gambar di database menggunakan visual basic
Tags:

5 Comments

  1. Pingback: Option File Player 2015 untuk PES 2006

Leave a Reply

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