Pemograman Visual Akuntansi ke-4

3.     Report dengan JasperReport

Selanjutnya akan membahas pembuatan laporan dengan menggunakan JasperReport, sebelum memulai kita harus mendownload plugin iReport (http://plugins.netbeans.org/plugin/4425/ireport) dan library-library dari jasperReport.

A   Menambahkan Plugin iReport pada Netbeans

Setelah plugin dan library-library sudah di dapat(download) langkah selanjutnya adalah menginstall plugin dan menambahkan library-library pada project yang kita buat, langkah-langkahnya sebagai berikut:

1. Masuk ke aplikasi Netbeans, kemudian klik Tools pada menu bar lalu pilih  Plugins seperti gambar dibawah ini

2.      kemudian akan muncul kotak dialog seperti pada gambar

3.      Pilih Tab Downloaded lalu klik Add Plugins maka akan muncul tampilan seperti dibawah ini

4.      Setelah itu buka file Plugins Jasper Reports yang telah di download dan Pilih file iReport semua file (*.nbm) yang ada disana, dan Klik Open.

5. Klik Install, dan ikuti petunjuk selanjutnya yang tampil

6.    Membuat Laporan Sederhana dengan iReport

 Sebelum membuat laporan, persiapkan terlebih dahulu tambahkan terlebih dahulu libraries yang    sudah   di         download        ke        dalam   setiap  project yang ingin dibuat laporannya.

1.       Menambahkan libraries pada project. Klik kanan pada project yang ingin dibuat laporannya lalu pilih properties

2. Setelah tampil seperti dibawah ini lalu pilih libraries dan pilih Add JAR/Folder

3.      Library-library yang ditambahkan (pilih semua library dari file yang sudah di download di dalam folder _lib_fix) lalu klik open seperti gambar dibawah ini.      Library-library yang ditambahkan (pilih semua library dari file yang sudah di download di dalam folder _lib_fix) lalu klik open seperti gambar dibawah ini

4. Setelah tampilan seperti dibawah ini lalu klik Ok

5. Pembuatan laporan data akun dengan iReport Wizard, Lebih baik semua file laporan dijadikan kedalam 1 folder agar tidak tercecer, untuk itu kita perlu membuat terlebih dahulu folder laporannya dengan langkah sebagai berikut :

Klik Kanan Pada Web Pages masing masing > pilih new > Folder

Beri Nama Folder dengan nama Laporan (nama folder bebas/disesuaikan) lalu klik finish

6.  Lalu klik kanan di laporan > pilih new > pilih other (jika setelah pilih new sudah ada pilihan report wizard langsung pilih saja report wizard)

Setelah tampilan berubah lalu pilih folder report untuk categories nya dan pilih report wizard untuk file types nya seperti dibawah ini lalu klik next

7.  Pilih Layout Laporan dengan tema Cherry (Tema yang sudah disediakan oleh aplikasi) lalu klik next

Setelah itu berikan nama untuk laporan (wajib ada ekstension .jrxml) dan                     pastikanpenyimpanannya sudah di dalam folder laporan, jika sudah klik next

Membuat Query dan Koneksi database ke laporan, Klik New

Catatan : jika laporan yang ingin dibuat masih dalam 1 database yang sama dengan laporan lainnya maka gunakan koneksi yang sudah ada saja, jika laporan berbeda database buat baru lagi untuk koneksinya

Membuat DataSource, pilih datasource type Database JDBC connection lalu klik next

Membuat koneksi database

^ØName                   : koneksi_laporan_sia

^3.        JDBC Driver  : MySQL (com.mysql.jdbc.Driver)

^Ø  JDBC URL      : jdbc:mysql://localhost/sia (nama database disesuaikan)

^Ø   Username: root

^Ø  Pasword             : (kosongkan jika tidak menggunakan password di phpmyadmin)

^Ø   Save Password di ceklist

Klik Test untuk mencoba koneksi apakah sudah benar atau belum (pastikan xampp untuk Apache dan MYSQL sudah running), jika sukses maka tampil seperti berikut ini, lalu klik Save

Menuliskan perintah query (query disesuaikan dengan laporan yang ingin dibuat), berikut query untuk pembuatan laporan data akun)

Setelah query dibuat lalu klik Next untuk menampilkan field apa saja yang akan dimasukkan kedalam laporan. Pilih field yang ingin dimasukkan lalu klik panah kanan > atau klik panah kanan >> untuk memasukkan semua field yang ada

Setelah itu klik Next, untuk grouping Next (lakukan grouping jika laporan yang ingin ditampilkan berdasarkan kriteria tertentu)

Klik Finish

Setelah itu laporan akan tampil seperti dibawah ini

Untuk kembali ke tampilan Design klik Designer.

 Hasil diatas merupakan laporan saat di preview, lakukan perubahan pada title report designer sebagai berikut (double klik pada kata yang ingin diubah)

7        Menampilkan Laporan JasperReport (.pdf) pada Web JSP

 Langkah selanjutnya adalah menampilkan laporan yang telah dibuat, laporan yang akan ditampilkan pada web jsp dengan format pdf. Berikut langkah-langkahnya:

 a.      Buat file JSP baru di dalam Web Pages dengan nama laporanakun.jsp, lalu ketik script dibawah ini       

b. Buatlah File: cetaklaporanakun.jsp

Nama File: cetaklaporanakun.jsp

<%@page import="java.io.*, java.util.*, java.sql.*"%> <%@page import="net.sf.jasperreports.engine.*"%>

<%@page import="net.sf.jasperreports.view.JasperViewer.*"%> <%@page import="javax.servlet.ServletResponse"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Laporan Barang</title>

</head>

<body>

                 <%

Connection conn = null;

//--koneksi ke MySQL database: laporan

String url="jdbc:mysql://localhost:3306/sia";

String username="root";

String password="";

Class.forName("com.mysql.jdbc.Driver");

conn = DriverManager.getConnection(url, username, password);

File reportFile = new

File(application.getRealPath("/laporan/Laporan_Data_Akun.jasper"));

Map<String, Object> param=new HashMap<String, Object>();

byte[] bytes =

JasperRunManager.runReportToPdf(reportFile.getPath(),param,

conn);

response.setContentType("application/pdf"); response.setContentLength(bytes.length);

ServletOutputStream outStream = response.getOutputStream();

outStream.write(bytes, 0, bytes.length);

outStream.flush();

outStream.close();

%>

</body>

</html>

Hasil laporan yang ditampilkan:

8. .      Membuat Laporan dengan Parameter

 Selanjutnya membuat laporan dengan menggunakan parameter, pada contoh kali ini adalah menampilkan laporan data akun menggunakan kriteria jenis akun dan report yang didesain secara manual. Berikut langkah-langkah pembuatannya:

 a.       Tambahkan Script berikut ke dalam file laporanakun.jsp yang sudah dibuat sebelumnya

Dan tampilan programnya saat di running

b.       Mendesain Laporan Data Akun secara Manual: Laporan_Parameter.jrxml

·  Buatlah File baru: New > Report Wizard dan pilih tipe laporan Blank Letter

Berikan nama laporan : Laporan_Parameter.jrxml

Untuk Connection gunakan yang sudah pernah dibuat di laporan sebelumnya dikarenakan database yang digunakan masih sama. Masukkan query sesuai dengan gambar dibawah ini (select * from master_akun).

Menentukan field yang akan digunakan kedalam laporan dan dipindahkan ke kolom sebelah kanan

Finish, untuk grouping bisa di next (dilewatkan) 

Design report seperti dibawah ini:

Untuk judul Laporan Data Akun di dalam section band Title dan Tanggal di dalam section band page header dibuat menggunakan komponen dari pallete yaitu :

Ø Judul : Static Text

ØTanggal : Current Date (Format tanggal disesuaikan kebutuhan)

Untuk field yang ingin dimasukkan kedalam laporan menggunakan report inspector yang terdapat di sebelah kiri jendela netbeans (jika tidak ada report inspectornya bisa pilih window > reset window). Pilih Fields maka akan tampil field dari tabel yang sudah dipilih lalu masukkan field yang ingin digunakan ke dalam section band detail1 (dalam kasus ini kita memasukkan semua field nya). Klik nama field nya lalu drag dan drop pada section band detail1.

Menambahkan Parameter pada Report Query, perhatikan gambar berikut:

Setelah di klik tampilannya akan seperti dibawah ini, lalu klik new parameter di sebelah kanan untuk menambahkan parameter baru

Buat Parameter baru dengan Nama Parameter : jenis dan Value : Text, lalu klik Ok

Setelah parameter terbuat lalu kita ubah sedikit query yang digunakan untuk menyesuaikan dengan ketentuan parameter, ubah query seperti gambar dibawah ini, setelah selesai dan keterangan fields ready lalu klik OK.

Untuk melihat hasil report, klik preview lalu akan muncul tampilan seperti dibawah ini untuk memasukkan parameternya (parameter yang dimasukkan harus sama dengan yang ada di record tabel), lalu klik Ok

Tampilan akhir laporan dengan menggunakan parameter. Jika tampilan kosong berarti ada kesalahan dalam parameternya.

3. Membuat File: cetakLapAkunParameter.jsp

 Nama File: cetakLapAkunParameter.jsp

  

              <%@page import="java.io.*, java.util.*, java.sql.*"%>

<%@page import="net.sf.jasperreports.engine.*"%>

<%@page import="net.sf.jasperreports.view.JasperViewer.*"

 %>

<%@page import="javax.servlet.ServletResponse" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=UTF-8">

<title>JSP Page</title>

</head>

<body>

<%

Connection conn = null;

//--koneksi ke MySQL database: laporan

String url="jdbc:mysql://localhost:3306/sia";

String username="root";

String password="";

String jenis = request.getParameter("jenis");

Class.forName("com.mysql.jdbc.Driver");

conn = DriverManager.getConnection(url, username, password);

File reportFile = new File(application

.getRealPath("/Laporan/Laporan_Parameter.jasper")); Map param = new HashMap();

param.put("jenis", jenis);

byte[] bytes = JasperRunManager

.runReportToPdf(reportFile.getPath(), param, conn);

response.setContentType("application/pdf"); response.setContentLength(bytes.length);

ServletOutputStream outStream = response.getOutputStream();

outStream.write(bytes, 0, bytes.length);

outStream.flush();

outStream.close();

%>

</body>

</html>