Laporan JasperReport Pada Web

Assalamualaikum...

Kita ketemu lagi didalam pembuatan visual akuntansi 3 NetBeans 8.2

Nah kali ini kami akan lanjutan dengan pembuatan Laporan pada JasperReport berdasarkan akun yang sudah dibuat sebelumnya.

Sebelum memulai kita harus mendownload plugin iReport nya dulu melalui link
(http://plugins.netbeans.org/plugin/4425/ireport) dan library-library dari jasperReport.

Langkah selanjutnya adalah menginstall plugin dan menambahkan library-library pada project yang kami buat, tahapannya adalah: 

1.  Masuk ke aplikasi Netbeans, kemudian klik Tools pada menu bar lalu pilih Plugins
maka akan muncul kotak dialog seperti ini :

2.  Pilih Tab Downloaded lalu klik Add Plugins 
3.  Setelah itu buka file Plugins Jasper Reports yang telah di download

4.  Pilih file iReport semua file (*.nbm) yang ada disana, dan Klik Open
 

5.  Klik Install, dan ikuti petunjuk selanjutnya yang tampil

Apabila ada peringatan dibawah klik Continue

Pilih Restart IDE Now lalu klik Finish

Membuat Laporan dengan iReport

Sekarang kami akan membuat laporannya dengan iReport. Sebelumnya, persiapkan/ tambahkan terlebih dahulu libraries yang sudah di download ke dalam setiap project yang ingin dibuat laporannya.

1.  Klik  kanan pada project yang ingin dibuat laporannya, lalu pilih properties, kemudian pilih libraries dan pilih Add JAR/Folder > ok
 

2.  Library-library yang ditambahkan (pilih semua library dari file yang sudah di download di dalam folder _lib_fix) lalu klik open
 

3.  Maka akan tampil gambar seperti dibawah ini lalu klik Ok

4.  Dalam pembuatan laporan data akun dengan iReport Wizard, lebih baik semua file laporan dijadikan kedalam 1 folder agar tidak tercecer, untuk itu kami perlu membuat terlebih dahulu folder laporannya.

      -  Langkah-langkahnya adalah :
          Klik kanan pada Web Pages --> pilih New --> Folder

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

Klik kanan di Laporan1 --> pilih New --> pilih Other (jika pilih New sudah ada pilihan Report Wizard langsung di klik saja)

Maka akan tampil gambar ini lalu pilih folder report untuk Categories dan pilih Report Wizard untuk File Types lalu klik Next

Pilih Layout dengan tema Cherry (Tema yang sudah disediakan oleh aplikasi) lalu klik Next

 

Berikan nama untuk laporan (wajib ada ekstension .jrxml) dan pastikan penyimpanannya sudah di dalam folder Laporan1, 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.

Dalam membuat DataSource, pilih datasource type Database JDBC connection lalu klik Next

 

Kemudian isi dengan seperti tampilan di bawah ini :
 
  

Klik Test untuk mencoba koneksi apakah sudah benar atau belum (pastikan xampp untuk Apache dan MYSQL sudah running), jika sukses maka akan tampil gambar 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 menampilkan laporan klik Preview, seperti gambar berikut 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)
 

Catatan : pada tampilan design apabila ada kata dengan awalan $F harap jangan diganti karena itu merupakan nama field yang digunakan untuk menampilkan data, jika diubah akan menjadi eror

Menampilkan Laporan JasperReport (.pdf) pada Web JSP

Langkah selanjutnya adalah menampilkan laporan pada web jsp dengan format pdf.

Berikut langkah-langkahnya:

 

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

 2.  Kemudian buatlah file dengan nama cetaklaporanakun.jsp dengan coding di bawah ini : 

Hasil laporan yang ditampilkan


 

Membuat Laporan dengan Parameter

Selanjutnya kami akan membuat laporan dengan menggunakan parameter, pada contoh kali ini adalah menampilkan laporan data akun menggunakan kriteria jenis akun dan report yang didesain secara manual.

Ikuti langkah-langkah pembuatannya:

1.  Disini kami hanya akan menambahkan Script ke dalam file laporanakun.jsp yang sudah dibuat sebelumnya 

Dan tampilan programnya saat di running

2.   2.  Mendesain Laporan Data Akun secara Manual: Laporan_Parameter.jrxml Buatlah File baru: New > Report Wizard dan pilih tipe laporan Blank Letter  > Next

  

Berikan nama laporan : Laporan_Parameter.jrxml  > Next

 

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).

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 kami 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 kami 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 
     Berikut  codingannya :

Demikianlah langkah-langkah di dalam pembuatan Laporan dengan JasperReport pada Web, semoga bermanfaat. 

Dan sebelumnya kami mohon maaf jika ada tahapan-tahapan di dalam pembuatan kami yang kurang sempurna, karena kami masih dalam taraf pembelajaran.

Insha Allah di waktu mendatang kami akan memberikan tutorial mengenai topik yang lain…Terimakasih. 

Wassalam ✋😀🙏