Creating Web Application Using UniGUI – Utilizing FastReport

Setelah tulisan [1] Creating Web-Based Application Using UniGUI, With Ajax Support dan [2] Creating Web Application Using UniGUI, Zeos & MySQL,saatnya menjawab pertanyaan dari pengunjung, Bagaimana dengan reporting menggunakan FastReport di web-based application dengan uniGUI?

Masih dengan uniGUI, MySQL dan Zeos DBO, kita tambahkan lagi sebuah library: FastReport, ke dalam aplikasi kita.

Aplikasi yang akan kita buat adalah lanjutan dari aplikasi buku tamu berbasis web. Anda dapat mendownload source code di sana sebelum mengikuti tulisan ini. Anda juda dapat langsung mengikuti tulisan ini dan mengunduh source code di akhir tulisan ini nanti.

Download FastReport

Saya menggunakan FastReport v.4.7.8 pada tulisan ini.
Silahkan download FastReport Trial Version. Saran saya gunakanlah versi yang sama untuk menghindari masalah selama mengikuti tulisan ini.

Yang akan menjadi fokus tulisan kali ini adalah menampilkan output FastReport dalam format HTML dan PDF. HTML akan ditampilkan dalam sebuah window sedangkan PDF akan diberi link download.

Saya anggap Anda telah mendownload source code di tulisan sebelumnya, dan telah memiliki database uniguiweb serta tabel bukutamu. Bila belum, silahkan didownload dulu, ekstrak ke sebuah foder dan buat database di mysql dengan script SQL (dalam folder data-script):

DROP DATABASE IF EXISTS `uniguiweb`;
CREATE DATABASE IF NOT EXISTS `uniguiweb` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `uniguiweb`;

DROP TABLE IF EXISTS `bukutamu`;
CREATE TABLE IF NOT EXISTS `bukutamu` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`alamat` text NOT NULL,
`telp` varchar(15) DEFAULT '-',
`hp` varchar(15) DEFAULT '-',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

INSERT INTO `bukutamu` (`id`, `nama`, `alamat`, `telp`, `hp`) VALUES
(1, 'Rivalina Primadani Ambarwati', 'Bumi Tamalanrea Permai Blok E/239 Makassar', '581203', '081287861213');

Membuat Report

Membuat desain report di FastReport & web interface HTML report.

Kita mulai dengan menambahkan dua item menu ke main menu di MainForm. Lihat gambar berikut:

Kemudian kita tambahkan sebuah TfrxHTMLExport dan sebuah TfrxPDFExport ke MainForm. Kedua komponen ini adalah library untuk merender output FastReport ke format HTML atau PDF. Di FastReport, komponen-komponen ini disebuat Export Filter.

Kini kita tambahkan sebuah form baru dari menu File>New>Other…, klik item uniGUI di treeview dan pilih Form dari daftar. Klik OK. Sebuah dialog Select Form Type akan tampil, pilih Application Form. Klik OK. Beri nama form baru ini FReport, dan save dengan nama uReport. Form ini akan menjadi interface HTML report.

Tambahkan sebuah TfrxReport dan sebuah TfrxDBDataset ke form FBukuTamu. TfrxDBDataset akan menjadi pengubung sebuah dataset (ZQuery1) ke report, sedang TfrxReport merupakan komponen report dari FastReport yang memfasilitasi desain report dan sebagai engine untuk mengeksekusi report nantinya.

Kita hubungkan ketiga komponen untuk report: ZQuery1, frxDBDataset1 dan fxReport1. Properti DataSet pada frxDBDataset1 di-set ke ZQuery1, sedangkan untuk frxReport1 diatur properti-properti berikut: ShowProgress = False, StoreInDFM = False.

Saatnya mendesain report. Klik kanan pada frxReport1 dan pilih Edit Report. FastReport Designer akan tampil ke layar.

Di FastReport Designer, klik menu Report>Data…

Beri tanda centang pada frxDBDataset1 dan klik OK. Ini berarti bahwa report kita akan meload data dari frxDBDataset1, yang datanya berasal dari ZQuery1.

Setelahnya, silahkan desain report Anda – saya tidak menuliskan tentang desain report di FastReport, Anda dapat melakukan googling untuk tutorial desain report di FastReport. Desain yang saya buat kira-kira seperti berikut:

Sudah? Masih di FastReport Designer, klik menu File>Save As… dan simpan report ini di %FOLDERAPLIKASI%\reports\bukutamu.fr3. Kemudian tutup FastReport Designer. Kembali ke Delphi. Pilih form yang baru dibuat (form FReport) dan tekan F12 sampai tampilan form muncul di layar. Dari Component Palette, page uniGUIAdditional, tambahkan sebuah TUniURLFrame ke form FReport.

Komponen ini akan merender iframe ke UI web, menampilkan konten dari sebuah halaman web yang diisi lewat properti URL. Atur properti Align dari komponen ini ke alClient. Nantinya, report kita akan ditampilkan di form FReport lewat komponen UniURLFrame1 ini.

Kini kita ke form utama, MainForm. Klik frxHTMLExport1 dan atur properti Navigator = True, OverwritePrompt = False, PicsInSameFolder = False, ShowDialog = False, ShowProgress = False. Klik item menu Data>Report HTML dan isi event OnClick dengan kode seperti berikut:

procedure TMainForm.Report1Click(Sender: TObject);
var
FName,
HTML:String;
begin

FName := ExtractFileDir(Application.ExeName)+'\reports\bukutamu.fr3';
HTML  := ExtractFileDir(Application.ExeName)+'\reports\bukutamu.html';
if not FBukuTamu.ZQuery1.Active then
FBukuTamu.ZQuery1.Open;
FBukuTamu.Show;
FBukuTamu.frxReport1.LoadFromFile(FName);
FBukuTamu.frxReport1.PrepareReport();
frxHTMLExport1.FileName := HTML;
FBukuTamu.frxReport1.Export(frxHTMLExport1);
FBukuTamu.Hide;
HTML := '/reports/'+ExtractFileName(HTML);
FReport.UniURLFrame1.URL := HTML;
FReport.Show;
end;

Kode di atas akan merender report, mengekspornya sebagai HTML dan menampilkannya di FReport.UniURLFRame1.

Untuk PDF, klik item menu Data>Report (Download PDF), isi event OnClick-nya dengan kode berikut:

</pre>
procedure TMainForm.ReportDownloadPDF1Click(Sender: TObject);
var
FName,
PDF:String;
begin

FName := ExtractFileDir(Application.ExeName)+'\reports\bukutamu.fr3';
PDF  := ExtractFileDir(Application.ExeName)+'\reports\bukutamu.pdf';
if not FBukuTamu.ZQuery1.Active then
FBukuTamu.ZQuery1.Open;
FBukuTamu.Show;
FBukuTamu.frxReport1.LoadFromFile(FName);
FBukuTamu.frxReport1.PrepareReport();
frxPDFExport1.FileName := PDF;
FBukuTamu.frxReport1.Export(frxPDFExport1);
FBukuTamu.Hide;
Pdf := '/reports/'+ExtractFileName(Pdf);
ShowMessage('<b>Berikut Daftar Entri Buku Tamu</b><br /><a href="'+pdf+'">Download PDF Report</a>');
end;

Sekarang kita dapat menjalankan aplikasi. Tekan F9 dan buka alamat berikut di browser: http://localhost:8077.

Berikut tampilan HTML report buku tamu:

Dan ini untuk download PDF:

Dan berikut, tampilan file PDF yang telah di-download:

Download Source Code

Silahkan download source code untuk tulisan ini

Creating Web Application Using UniGUI – Utilizing FastReport (0.0 B)

Jangan lupa tinggalkan komentar jika Anda ada pertanyaan atau saran, atau sekedar “nyasar” ke sini

Related Topic

Creating Web-Based Application Using UniGUI, With Ajax SupportRefresh Data Pada FastReport UniGUICreating Web Application Using UniGUI, Zeos & MySQLTutorial Membuat Aplikasi Upload File Dengan UniGUI dan DelphiTutorial Membuat Aplikasi UniGUI ISAPI Mode Pada Apache Dengan Delphi

Incoming search terms:

• unigui
• unigui fastreport
• unigui for delphi 7
• unigui fastrrport
• fastreport di unigui
• uniurlframe1
• script sikd berbasis web
• unigui_web rar
• unigui vs intraweb
• unigui uniimage check exist

Comments

comments

Powered by Facebook Comments