Simpan Gambar Mysql.pdf

Galberto Tuwondila 2010

Simpan dan Tampilkan Gambar ke/dari MySQL menggunakan JAVA Ketentuan Program : 1. Netbeans IDE 6.1 , 6.7 atau 6.8. 2. Tentunya sudah harus terinstall program JAVA 6 (jdk-6u13-windows-i586-p). 3. Database yang digunakan adalah MySQL 5. 4. Install semua program tersebut. Ketentuan lainnya adalah mendownload beberapa Library yang dibutuhkan. Teman” bisa dapatkan library tersebut melalui Blog : www.sourcevisual.wordpress.com pada artikel tentang Cara Menyimpan Gambar ke MySQL dengan JAVA. Setelah itu ikuti langkah-langkah berikut : Langkah I : -

Buka MySQL yang sudah terinstall sebelumnya lalu buatkan sebuah database baru yang diberi nama “dbimages”. Setelah itu buatkan sebuah table baru dengan nama “gambar” dan field-field nya sebagai berikut :

-

Setelah itu simpan pengaturan table lalu tutup kembali MySQLnya.

Langkah II : -

Buka Netbeans IDE yang juga sudah terinstal, lalu buatkan sebuah project baru dengan nama “SimpanImage”. Disini tentunya saya berharap teman” sudah pernah menggunakan JAVA.

-

Setelah itu tambahkan sebuah JFrame Form baru kedalam project. Caranya klik kanan project kemudian pilih New
JFrame Form. Beri nama Form tersebut dengan “FormImages” dan untuk Packagenya diberi nama Galtox.Util.Manage.

-

Desainlah tampilan Form tersebut seperti gambar dibawah. Untuk mengedit tampilan tersebut caranya klik dan Drag komponen yang terdapat pada Palette ke atas Desain Form.

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

Gambar 1. (Untuk Tab Input Gambar).

Gambar 2. (Untuk Tab Tampil Gambar).

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

Keterangan komponen : Terdapat 2 buah Tab yang terdiri dari tab Input Gambar dan tab Tampil Gambar . sedangkan yang berwarna putih adalah Komponen Canvas. -

Untuk tab Input Gambar komponennya antara lainnya : Palette / Komponen

Edit Text

Change Variable Name

Canvas

-

CanvasInsert

Button1

Upload

btnUpload

Button2

Simpan

btnSimpan

-

Untuk tab Tampil Gambar komponennya antara lain : Palette / Komponen

Edit Text

Change Variable Name

-

CanvasTampil

Label

Kode Gambar

-

Button

Load Kode

btnLoadKode

-

cmdKode

Canvas

Combo Box

Setelah semua komponen diletakan ke atas Desain Form, anda boleh mengatur tata letaknya sesuai dengan kebutuhan atau bisa mengikuti tampilannya seperti pada gambar diatas. Langkah III : - Import ke dalam project semua Library yang sudah didownload sebelumnya melalui weblog. Termasuk Library MySQL Connector. -

Lalu Buat sebuah Java Class Baru dan beri nama “ImageCanvas” dengan packagenya yaitu Galtox.Util.model. kemudian ubah Source code programnya menjadi sebagai berikut : public class ImageCanvas extends Canvas { Image image; public void setImage(String file) throws MalformedURLException { URL url = null; image = null;

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

url = new File(file).toURI().toURL(); image = getToolkit().getImage(url); repaint(); } @Override public void paint(Graphics g) { try { double d = image.getHeight(this) / this.getHeight(); double w = image.getWidth(this) / d; double x = this.getWidth() / 2 - w / 2; g.drawImage(image, (int) x, 0, (int) (w), this.getHeight(), this); } catch (Exception e) { } } } -

Setelah itu Buatkan lagi sebuah Java Class baru dan beri nama “ImageModel” dengan Package yang sama dengan ImageCanvas. Lalu ubah lagi source codenya seperti ini : public class ImageModel { private int kode; private InputStream image; public int getKode() { return kode; } public void setKode(int kode) { this.kode = kode; } public InputStream getImage() { return image; } public void setImage(InputStream image) { this.image = image; } }

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

-

Sekarang saatnya beralih ke koneksi databasenya. Buat sebuah Java Class baru yang berfungsi sebagai koneksi database dan beri nama “connection”. Dan untuk packagenya diberi nama Galtox.Util.SQL. lalu ubah kode programnya seperti ini :

public class connection { private connection conn = null; private Statement stm = null; public boolean getConnection() { boolean cek = false; try { Class.forName("com.mysql.jdbc.Driver"); Conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/dbimag es", "root", "admin"); cek = true; } catch (Exception e) { JOptionPane.showMessageDialog(null, "Koneksi Database Gagal\nPeriksa kembali pengaturan Koneksinya"); System.exit(1); } return cek; } public ResultSet QueryTampil(String query) throws SQLException { ResultSet rs = null; try { getConnection(); stm = conn.createStatement(); rs = stm.executeQuery(query); return rs; } catch (Exception e) { e.printStackTrace(); } return rs; } public void closeConnection() { try { conn.close(); } catch (Exception ex) { System.err.println("tutup koneksi gagal...." + ex); Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

} } public Connection getConn() { return conn; } } -

Sesuaikan nama database yang telah dibuat sebelumnya. Sedangkan untuk username dan password, sesuaikan dengan database MySQL pada komputer kalian masing”.

-

Kemudian buatkan lagi sebuah Java Class baru dan beri nama “ImageManager”. Untuk Packagenya sesuaikan dengan class ImageCanvas. Lalu ubah kode programnya seperti ini :

public class ImageManager { private connection conn = new connection(); public boolean simpan(ImageModel im) throws Exception { boolean cek = false; try { conn.getConnection(); PreparedStatement st = conn.getConn().prepareStatement("insert into gambar(image) values(?)"); st.setBinaryStream(1, im.getImage()); st.executeUpdate(); cek = true; } catch (Exception e) { conn.closeConnection(); } return cek; } public List getID() throws SQLException { List imageALLId = new ArrayList(); ResultSet rs = null; try { rs = conn.QueryTampil("select id from gambar"); while (rs.next()) { ImageModel im = new ImageModel(); im.setKode(rs.getInt(1)); imageALLId.add(im); Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

} } catch (Exception e) { conn.closeConnection(); } finally { if (rs != null) { rs.close(); } } return imageALLId; } public InputStream getImagebyId(String id) throws SQLException { ResultSet rs = null; InputStream is = null; try { rs = conn.QueryTampil("select image from gambar where id=" + id + ""); if (rs.next()) { is = rs.getBinaryStream(1); } } catch (Exception e) { conn.closeConnection(); } finally { if (rs != null) { rs.close(); } } return is; } }

-

perlu dipastikan bahwa database yang telah dibuat sebelumnya sudah benar. mulai dari nama table maupun colomnya.

Langkah IV -

tahap ini merupakan pengkodean pada FormImages. Yang juga merupakan tahap akhir sebelum program dijalankan.

-

Langkah pertama yang dilakukan adalah membuka source FormImage dan tambahkan beberapa kode program dibawah ini.

private ImageFile iFile = new ImageFile(); private ImagePreview iPreview = new ImagePreview(); Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

private ImageManager imger = new ImageManager(); private JFileChooser fc = new JFileChooser(); private FileInputStream fist = null; private ImageModel image = null; private List listImage = null;

-

Lalu tambahkan sebuah method untuk mengambil ID gambar dari database dan menampungnya ke dalam ComboBox yang sudah dideklarasikan. Method tersebut diberi nama getImageID dan ubah source codenya menjadi :

private void getImageID() { try { listImage = imger.getID(); } catch (Exception ex) { JOptionPane.showConfirmDialog(this, "Error Nie yee !!"); } String[] data = new String[listImage.size()]; for (int x = 0; x < listImage.size(); x++) { ImageModel im = listImage.get(x); data[x] = im.getKode() + ""; } ComboBoxModel model = new DefaultComboBoxModel(data); cmdKode.setModel(model); } -

Lalu tambahkan lagi sebuah method baru sebagai operasi untuk menampilkan gambar pada saat ID pada combobox dipilih. method tersebut diberi nama getIDByComboBox dengan tipe method String lalu ubah kode program menjadi : private String getIDByComboBox() { String id = null; try { image = new ImageModel(); image = listImage.get(cmdKode.getSelectedIndex()); id = image.getKode() + ""; return id; } catch (Exception e) { } return id; }

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

-

Setelah itu tambahkan sebuah Class baru didalam FormImages yang berfungsi untuk mengkonversi gambar berdasarkan ID yang dipilih. Class baru tersebut dinamai Paintly. Letakan class tersebut dibawahnya method getIDByComboBox Kurang lebih kode programnya seperti ini :

private class Paintly extends Canvas { @Override public void paint(Graphics g) { try { Image image = ImageIO.read(imger.getImagebyId(getIDByComboBox())); double d = image.getHeight(this) / this.getHeight(); double w = image.getWidth(this) / d; double x = this.getWidth() / 2 - w / 2; g.drawImage(image, (int) x, 0, (int) (w), this.getHeight(), this); } catch (Exception e) { } } }

Langkah V -

Sekarang kita membuat operasi untuk setiap komponennya.

-

Langkah berikutnya adalah kembali ke Form Desain kemudian lakukan klik kanan pada Button Upload lalu pilih Events
Action
ActionPerformed. Tambahkan kode program ini didalamnya. private void btnUploadActionPerformed(java.awt.event.ActionEvent evt) { fc.setAccessory(iPreview); fc.addPropertyChangeListener(iPreview); fc.setAcceptAllFileFilterUsed(false); fc.addChoosableFileFilter(iFile); if (fc.showOpenDialog(iPreview) == JFileChooser.APPROVE_OPTION) { try { String file = null; fist = null; fist = new FileInputStream(fc.getSelectedFile()); file = fc.getSelectedFile().toString(); ((ImageCanvas) CanvasInsert).setImage(file); btnSimpan.setEnabled(true); } catch (Exception ex) {

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

} } -

} Lakukan hal yang sama untuk Button Simpan. Lalu ubah kode programnya menjadi : private void btnSimpanActionPerformed(java.awt.event.ActionEvent evt) { try { if (fist == null) { JOptionPane.showMessageDialog(null, "Gambar gak boleh kosong !!"); } else { image = new ImageModel(); image.setImage(fist); if (imger.simpan(image)) { btnSimpan.setEnabled(false); } else { JOptionPane.showMessageDialog(null, "Periksa Kembali Koneksi Databasenya !!"); } } } catch (Exception e) { } }

-

Dan untuk Button Load Kode ubah source code programnya menjadi : private void btnLoadActionPerformed(java.awt.event.ActionEvent evt) { getImageID(); }

-

Untuk Langkah terakhir yang anda lakukan adalah klik kanan pada ComboBox kemudian pilih Events
Item
ItemStateChanged. Lalu ubah kode programnya seperti : private void cmdKodeItemStateChanged(java.awt.event.ItemEvent evt) { getIDByComboBox(); ((Paintly) CanvasTampil).repaint(); }

Langkah VI -

Klik Kanan pada CanvasInsert yang terdapat pada tab Insert Gambar yang sudah dimasukan sebelumnya pada Langkah II, kemudian pilih properties sehingga

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

muncul dialog box seperti gambar dibawah ini lalu pilih tab code pada dialog tersebut. Cari nama code “Custom Creation Code“ kemudian isikan nilainya dengan “New ImageCanvas();”. Lalu tutup kembali dialog Boxnya.

-

Langkah Berikutnya adalah klik kanan juga pada CanvasTampil yang terdapat pada tab Tampil Gambar kemudian lakukan hal yang sama dengan CanvasInsert namun pada code “Custom Creation Code“ isikan nilainya dengan “New Paintly();”. Lalu tutup kembali dialog Boxnya.

Copyright © 2009-2010 by www.sourcevisual.wordpress.com

Galberto Tuwondila 2010

Langkah VII -

Langkah ketujuh adalah klik kanan pada project lalu pilih Clean and Build. Setelah sukses silahkan jalankan programnya dengan cara klik kanan lalu pilih RUN.

-

Jika programnya sukses dijalankan maka akan tampil seperti gambar berikut :

Gambar 1. Pada saat menyimpan Gambar. Gambar 2. Pada Saat Menampilkan Gambar.

Mudah-Mudahan Tutorialnya Membantu !!! Selamat Mencoba Have Fun with JAVA.

Penulis Galberto Tuwondila – mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana. Jurusan Sistem Informasi. Facebook

: http://www.facebook.com/galberto.T

Blog

: www.sourcevisual.wordpress.com

Email

: [email protected]

YM

: [email protected]

Copyright © 2009-2010 by www.sourcevisual.wordpress.com