Menampilkan Gambar di Database dengan JasperReports

Yap.. sesuai judul diatas kali ini saya ingin mengembangkan lagi artikel sebelumnya. Saya ingin menampilkan data karyawan menjadi sebuah report, dan tool yang saya gunakan adalah JasperReports. JasperReports merupakan sebuah reporting engine yang sifatnya open source. Jasper Reports bisa didapatkan disini. Untuk mendesain reportnya saya menggunakan plugin iReport yang telah terpasang di Netbeans komputer saya, dan bisa didownload disini.

Hal pertama yang harus dibuat, seperti biasa adalah entity, namun entity disini adalah field-field apa saja yang akan ditampilkan dalam report nanti. Untuk kasus ini saya ingin menampilkan semua field dari table karyawan kecuali field Id. Kemudian saya juga melakukan sedikit perubahahan pada property foto, yang mana sebelumnya saya menggunakan array yang bertipe byte, untuk pembuatan report ini saya menggunakan Image, untuk memudahkan ketika akan menampilkan gambar di JasperReport. Kode entity ini saya letakkan didalam package arya.entity, sehingga entity reportnya menjadi seperti ini.

package arya.entity;

import java.awt.Image;
import java.util.Date;

/**
 *
 * @author arya
 */
public class LaporanKaryawan {
    private String nama;
    private String alamat;
    private String jenisKelamin;
    private Date tglLahir;
    private Image foto;

    public String getAlamat() {
        return alamat;
    }

    public void setAlamat(String alamat) {
        this.alamat = alamat;
    }

    public Image getFoto() {
        return foto;
    }

    public void setFoto(Image foto) {
        this.foto = foto;
    }

    public String getJenisKelamin() {
        return jenisKelamin;
    }

    public void setJenisKelamin(String jenisKelamin) {
        this.jenisKelamin = jenisKelamin;
    }

    public String getNama() {
        return nama;
    }

    public void setNama(String nama) {
        this.nama = nama;
    }

    public Date getTglLahir() {
        return tglLahir;
    }

    public void setTglLahir(Date tglLahir) {
        this.tglLahir = tglLahir;
    }

}

Untuk selanjutnya seperti biasa kita membuat dulu DAOnya, bagi yang lupa, bisa liat dulu disini atau bisa membaca dari berbagai artikel lainnya. Untuk Dao saya hanya mendeklarasikan method untuk membaca data dan saya letakkan pada package arya.dao, seperti ini.

package arya.dao;

import arya.entity.LaporanKaryawan;
import java.util.List;

/**
 *
 * @author arya
 */
public interface LaporanKaryawanDao {
    public List<LaporanKaryawan> getByName(String nama);
}

Skenarionya adalah user bisa menampilkan seluruh data karyawan atau karyawan tertentu saja berdasarkan nama karyawan tersebut. Sehingga dalam method tersebut saya isi dengan parameter nama yang bertipe String. Jika nama karyawan tidak diinputkan maka secara default yang muncul adalah seluruh data karyawan. Nah berikutnya adalah implementasi dari interface diatas dan saya letakkan pada package arya.dao.impl.

package arya.dao.impl;

import arya.dao.LaporanKaryawanDao;
import arya.entity.LaporanKaryawan;
import java.awt.Image;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.ObjectInputStream;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.swing.ImageIcon;

/**
 *
 * @author arya
 */
public class LaporanKaryawanDaoImpl implements LaporanKaryawanDao{
private Connection connection;

    public LaporanKaryawanDaoImpl(Connection connection){
        this.connection = connection;
    }
    public List <LaporanKaryawan> getByName(String nama) {
        String SQL = "SELECT nama,alamat,jenisKelamin,tglLahir,foto FROM Karyawan WHERE nama LIKE ?";
        List <LaporanKaryawan> list = new ArrayList();
        LaporanKaryawan laporanKaryawan = null;
        try {
            PreparedStatement statement = connection.prepareStatement(SQL);
            statement.setString(1, "%"+nama+"%");
            ResultSet rs = statement.executeQuery();
            while (rs.next()){
                laporanKaryawan = new LaporanKaryawan();
                laporanKaryawan.setNama(rs.getString(1));
                laporanKaryawan.setAlamat(rs.getString(2));
                laporanKaryawan.setJenisKelamin(rs.getString(3));
                laporanKaryawan.setTglLahir(rs.getDate(4));
                ByteArrayInputStream inputStream = new ByteArrayInputStream(rs.getBytes(5));
                ObjectInputStream stream = new ObjectInputStream(inputStream);
                ImageIcon icon = (ImageIcon) stream.readObject();
                Image image = icon.getImage();
                laporanKaryawan.setFoto(image);
                list.add(laporanKaryawan);
                inputStream.close();
                stream.close();
            }
        } catch (SQLException ex) {
            Logger.getLogger(LaporanKaryawanDaoImpl.class.getName()).log(Level.SEVERE, null, ex);
        }catch (IOException ex){
            Logger.getLogger(LaporanKaryawanDaoImpl.class.getName()).log(Level.SEVERE, null, ex);
        }catch (ClassNotFoundException ex) {
                    Logger.getLogger(LaporanKaryawanDaoImpl.class.getName()).log(Level.SEVERE, null, ex);
        }
        return list;
    }
}

Ada sedikit perbedaan antara DAO untuk laporan dengan DAO karyawan, dimana untuk DAO laporan ini saya langsung mengubah data foto di database yang bertipe biner atau BLOB menjadi Image. Ini untuk memudahkan ketika akan menampilkan gambar di JasperReportnya. Kemudian mari kita mulai untuk mendesain reportnya. Untuk mendesain report, saya menggunakan iReport yang telah terpasang pada netbeans di komputer saya. Pilih New File —–> Report —–> Empty Report.

Kemudian klik Next, lalu saya beri nama LaporanKaryawan. Lalu pilih dimana kita akan menempatkan report kita. Hal ini penting sekali, karena pada saat kita akan menampilkan reportnya, kita harus mendefinisikan path dimana report itu berada. Untuk itu saya letakkan didalam folde src/arya/Report.

Kemudian klik finish, maka akan muncul sebuah tampilan seperti ini,

Selanjutnya, saya definisikan field apa saja yang akan ditampilkan didalam report ini. Sebagai catatan pada saat membuat field yang akan ditampilkan ke dala report, nama field – field tersebut harus sama dengan nama entity laporan yang telah kita buat sebelumnya. Pilih Report Inspector kemudian klik kanan pada Fields pilih add field. Lalu kita ubah nama field tersebut.Lalu kita definisikan tipe data dari field tersebut, secara default tipe data dari field diatas adalah String. Karena tidak semua field bertipe String maka kita akan menggantinya dengan cara klik field yang akan diganti, lalu pada side bar sebelah kanan pilih properties. Gambar dibawah ini adalah settingan untuk field tglLahir.

Dibawah ini merupakan daftar field yang saya gunakan beserta tipe datanya.

No	Nama Field	Field Class
1	nama	java.lang.String
2	alamat	java.lang.String
3	jenisKelamin	java.lang.String
4	tglLahir	java.util.Date
5	foto	java.lang.Object

Jika sudah selesai, kita drag drop field – field tersebut ke dalam reportnya, lalu desain menjadi seperti ini.Khusus untuk field foto, karena yang ditampilkan adalah gambarnya, maka kita harus menambahkan Image dari Palette, akan muncul sebuah dialog untuk mencari file gambar di komputer anda, klik cancel. Lalu pada properties Image tersebut ganti Image Expression menjadi $Foto dan Expression Class menjadi java.awt.Image. Lalu atur Scale Image menjadi Fill Frame.

Untuk field – field yang lain juga sama, kita harus mengganti TextField Expressionnya beserta Class Expressionnya sesuai dengan apa tipe field yang ada. Contoh dibawah ini adalah untuk field tglLahir.

Setelah itu, saya akan memodifikasi kelas Koneksi yang ada pada artikel sebelumnya, yaitu dengan menambahkan LaporanKaryawanDao.

package arya.koneksi;

import arya.dao.KaryawanDao;
import arya.dao.LaporanKaryawanDao;
import arya.dao.impl.KaryawanDaoImpl;
import arya.dao.impl.LaporanKaryawanDaoImpl;
import com.mysql.jdbc.Driver;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
public class Koneksi {
    private static Connection connection;
    private static KaryawanDao karyawanDao;
    private static LaporanKaryawanDao laporanKaryawanDao;

    private Koneksi(){

    }

    private static Connection getConnection() {
        if (connection==null){
            try {
                DriverManager.registerDriver(new Driver());
                connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/Coba", "root", "bandenk");
            } catch (SQLException ex) {
                Logger.getLogger(Koneksi.class.getName()).log(Level.SEVERE, null, ex);
            }

        }
        return connection;
    }

    public static KaryawanDao getKaryawanDao() {
        if (karyawanDao==null){
            karyawanDao = new KaryawanDaoImpl(getConnection())
        }
        return karyawanDao;
    }
    public static LaporanKaryawanDao getLaporanKaryawanDao() {
        if (laporanKaryawanDao==null){
            laporanKaryawanDao = new LaporanKaryawanDaoImpl(getConnection())
        }
        return laporanKaryawanDao;
    }
}

Jika sudah, maka kita sudah selesai mendesain reportnya. Selanjutnya kita desain form untuk menampilkan reportnya. Desain form seperti gambar dibawah ini.

No	Jenis	Nama	Fungsi
1	JLabel	jLabel1	Menampilkan Nama
2	JTextField	txtCari	Menampung nama karyawan
3	JButton	btnCari	Menampilkan report
4	JPanel	jPanel1	Menampung komponen
5	JPanel	pnlReport	Menampilkan report

Jika sudah selesai kita langsung saja beri kode untuk event btnCari jika di klik. Kodenya adalah seperti dibawah ini.

private void btnCariActionPerformed(java.awt.event.ActionEvent evt) {
        List <LaporanKaryawan> list = Koneksi.getLaporanKaryawanDao().getByName(txtCari.getText());
        Map <String,Object> parameter = new HashMap();
        parameter.put("tanggal", new Date());
        InputStream is = FrameLaporan.class.getResourceAsStream("/arya/Report/LaporanKaryawan.jasper");
        JasperPrint print = null;
        try {
            print = JasperFillManager.fillReport(is, parameter, new JRBeanCollectionDataSource(list));
        } catch (JRException ex) {
            Logger.getLogger(FrameLaporan.class.getName()).log(Level.SEVERE, null, ex);
        }
        JRViewer viewer = new JRViewer(print);
        pnlReport.removeAll();
        pnlReport.add(viewer, BorderLayout.CENTER);
        pnlReport.updateUI();
    }

Pertama – tama saya menampung data hasil query ke dalam sebuah list, kemudian karena saya akan menampilkan tanggal kapan report itu ditampilkan maka saya membuat sebuah parameter yang bertipe Map dan saya isi dengan tanggal kapan report itu ditampilkan. Lalu kita load file reportnya menggunakan InputStream, sesuaikan dengan path dimana file report itu berada. Kemudian tinggal kita buat objek JasperPrint lalu kita masukkan ke dalam objek viewer yang bertipr JRViewer. Terakhir kita masukkan viewer tersebut ke dalam pnlReport. Lalu compile reportnya, kemudian Build projectnya dan jalankan. Jika berhasil maka akan seperti ini.

Oya, jangan lupa untuk menambahkan library JasperReports kedalam project anda. Selamat mencoba, Semoga bermanfaat 😀