Pada kesempatan ini, kita akan membuat sebuah aplikasi sederhana sebagai salah satu contoh penggunaan LazReport untuk mencetak suatu laporan, tanpa perlu menggunakan database.
Aplikasi yang akan kita buat kira-kira seperti sebuah aplikasi pencatat penerimaan barang sederhana. Aplikasi ini hanya akan mencatat tanggal barang diterima, supplier yang mengirim, keterangan, lalu nama barang-barang dan jumlah yang diterima. Aplikasi ini tanpa fitur save, dan hanya dapat mempreview dan mencetak laporan.
Hal-hal yang perlu disiapkan.
1. Lazarus versi 1.x
Anda sebenarnya bisa menggunakan sembarang Lazarus, akan tetapi sangat saya sarankan anda menggunakan Lazarus yang terbaru, atau minimal versi 1 ke atas. Alasannya, pada versi 1 atau yang paling baru, LazReport sudah cukup layak digunakan karena sudah jarang error.
2. LazReport
Pastikan komponen/package LazReport sudah terinstall. Silahkan anda lihat pada panel Components, apakah di sana terdapat tab bernama LazReport. Jika tidak ada, maka LazReport belum terinstall. Silahkan install terlebih dahulu dengan cara ini.
Jangan lupa bersihkan nilai text dari memo1 dan edit1. Untuk StringGrid1, ubah RowCount menjadi 1 dan pastikan goEditing bernilai True pada property Options. Simpan Form tersebut misalnya menjadi form1.
Sekarang tambahkan 2 buah MemDataset. MemDataset1 akan menyimpan informasi header yang berupa tanggal, nama supplier dan keterangan. Sedangkan MemDataset2 akan mencatat nama dan qty barang-barang yang diterima.
Ubah/tentukan field-field dari MemDataset1 dengan cara klik MemDataset1, lalu pada property editor klik tombol ... dari property FieldDefs. Maka Fields editor akan muncul.
Dengan menggunakan field editor tersebut, tambahkan 3 buah field dengan ketentuan sbb:
NOTE:
Selanjutkan lengkapi kode tombol (+) dan (-) untuk menambah dan mengurangi barir. Letakkan kode pada Event OnClick pada Button3 untuk tambah dan Button4 untuk mengurangi.
OK, sekarang kita kembali ke form designer. Tambahkan 1 TfrReport, 1 TfrDesigner dan 1 TrfDBDataset, masing-masing dari dari tab komponen LazReport, seperti gambar di bawah ini.
Klik rfDBDataset1, ubah/arahkan property DataSet ke MemDataset2.
Klik kanan pada frReport1, lalu pilih Desain Report.
Tambahkan Judul Laporan, misalnya LAPORAN PENERIMAAN BARANG, dengan cara klik tombol Rectangle Object lalu klik ke dalam band report title. Maka akan muncul kotak dialog Text Editor. Silahkan tulis judul laporan ini. Lalu tekan OK.
NOTE:
Anda dapat menentukan format tampilan tanggal sesuai dengan yang anda inginkan, yaitu dengan double klik tombol rectangle object dari Tanggal di atas. Pada Text Editor, klik tombol Format. Lalu pada bagian Available Format, pilih Date, lalu pilih format tanggal yang anda inginkan.
Ulangi cara di atas untuk menampilkan data Supplier dan Keterangan dari dataset.
NOTE:
Khusus untuk data Keterangan, pastikan anda mengubah property WordBreak menjadi true. Dengan WordBreak ini, jika suatu string memiliki karakter newline, maka akan tampil pada baris yang baru. Jika false, maka string akan tetap muncul 1 baris saja.
Tekan F11 untuk menampilkan property editor.
OK, bagian judul laporan sudah selesai, sekarang kita akan menambahkan bagian data. Seperti di awal, tambahkan band baru dengan cara klik tombol insert band. Kali ini pilih Master Header. Master Header ini biasanya digunakan untuk menampilkan nama kolom. Kemudian pada band master header tersebut, tambahkan rectangle object dan atur seperti gambar di bawah ini.
Selanjutnya tambahkan band Master Data. Pada saat menambahkan band master data ini, ada yang sedikit berbeda, kali ini anda juga harus menentukan source nya. Pilih frDBDataset1 pada pilihan data band source. Kenapa harus menentukan sourcenya ? Hal ini dikarenakan band Master Data akan menampilkan banyak data, oleh karena itu harus tahu dataset manakah yang digunakan sebagai acuan pada waktu melakukan looping data.
Kemudian seperti sebelum-sebelumnya, tambahkan rectangle object untuk menampilkan data Nama Barang dan Qty.
Sampai disini, desain Laporan sudah selesai. Jika anda mencoba preview, maka hasilnya hanya akan muncul judulnya saja. Hal ini dikarenakan datanya belum terisi. Data baru akan terisi pada saat program berjalan. Silahkan simpan laout laporan ini ke dalam folder yang sama dengan program ini, misalkan dengan nama report.lrf. Tutup Report Design Editor.
Kembali pada coding. Tambahkan kode untuk menampikan design editor pada Button1 dan Preview Report pada Button2, dengan kode seperti di bawah ini.
Ok, sekarang silahkan compile dan run. Jika tidak ada error, maka program akan berjalan seperti gambar di bawah ini. Silahkan isi data-data yang diperlukan.
Tekan tombol preview untuk menampilkan preview laporan.
Nah, sampai disini program sederhana sebagain besar sudah selesai. Selanjutnya kita akan melakukan beberapa perbaikan yang berhubungan dengan tampilan laporan. Sedangkan untuk hal-hal yang yang berhubungan dengan kemungkinan bug, adalah tugas anda :D.
Apa problem dari program kita ini ? Salah satu problem utamanya adalah, jika user menginput data keterangan atau nama barang dengan sangat panjang, maka akan terpotong. Seperti terlihat pada bagian keterangan pada screenshot di atas. Hanya tampak baris pertamanya saja kan.
Solusinya bagaimana ? Anda bisa saja melebarkan ukuran rectangle object keterangan, akan tetapi ini tidak benar-benar menyelesaikan masalah, karena bisa saja tetap kurang lebar atau bahkan terlalu lebar. Solusi yang benar adalah dengan mengubah property stretch Rectangle Object dan band yang melingkupinya dari false menjadi true.
Pada contoh data keterangan, maka silahkan setting property stretch dari rectangle object Keterangan dan band title menjadi true. Lakukan ini juga pada band master data dan rectangle object nama barang dan qty.
Dengan ditambah beberapa garis, hasil akhirnya seperti gambar di bawah ini.
NOTE:
Untuk mengubah desain laporan, anda tidak perlu kembali ke Lazarus, cukup klik tombol Desain yang kita buat tadi.
Bagaimana, mudah-mudahan tidak terlalu rumit ya.
Sekian tip dan trik kali ini. Jika ada yang kurang jelas, silahkan meninggalkan jejak di komentar.
Kode sumber lengkap dapat di download di sini.
Terimakasih, selamat mencoba, semoga yang sedikit ini bermanfaat.
Aplikasi yang akan kita buat kira-kira seperti sebuah aplikasi pencatat penerimaan barang sederhana. Aplikasi ini hanya akan mencatat tanggal barang diterima, supplier yang mengirim, keterangan, lalu nama barang-barang dan jumlah yang diterima. Aplikasi ini tanpa fitur save, dan hanya dapat mempreview dan mencetak laporan.
Hal-hal yang perlu disiapkan.
1. Lazarus versi 1.x
Anda sebenarnya bisa menggunakan sembarang Lazarus, akan tetapi sangat saya sarankan anda menggunakan Lazarus yang terbaru, atau minimal versi 1 ke atas. Alasannya, pada versi 1 atau yang paling baru, LazReport sudah cukup layak digunakan karena sudah jarang error.
2. LazReport
Pastikan komponen/package LazReport sudah terinstall. Silahkan anda lihat pada panel Components, apakah di sana terdapat tab bernama LazReport. Jika tidak ada, maka LazReport belum terinstall. Silahkan install terlebih dahulu dengan cara ini.
3. MemDataset
Komponen ini akan digunakan sebagai penyedia data untuk LazReport. MemDataset adalah komponen seperti Dataset TSQLQuery akan tetapi tidak memerlukan komponen database. Jadi, silahkan anda install MemDataset ini jika anda belum menginstallnya. Caranya sama seperti pada waktu menginstall komponen LazReport di atas, tetapi kali ini cari package memdslaz.
Setelah hal-hal di atas siap, maka langsung saja kita mulai.
Pertama, tentu saja membuat project baru, misalkan project1. Pada form yang otomatis terbuat/muncul, silahkan buat desain seperti tampilan di bawah ini.
Komponen ini akan digunakan sebagai penyedia data untuk LazReport. MemDataset adalah komponen seperti Dataset TSQLQuery akan tetapi tidak memerlukan komponen database. Jadi, silahkan anda install MemDataset ini jika anda belum menginstallnya. Caranya sama seperti pada waktu menginstall komponen LazReport di atas, tetapi kali ini cari package memdslaz.
Setelah hal-hal di atas siap, maka langsung saja kita mulai.
Pertama, tentu saja membuat project baru, misalkan project1. Pada form yang otomatis terbuat/muncul, silahkan buat desain seperti tampilan di bawah ini.
Jangan lupa bersihkan nilai text dari memo1 dan edit1. Untuk StringGrid1, ubah RowCount menjadi 1 dan pastikan goEditing bernilai True pada property Options. Simpan Form tersebut misalnya menjadi form1.
Sekarang tambahkan 2 buah MemDataset. MemDataset1 akan menyimpan informasi header yang berupa tanggal, nama supplier dan keterangan. Sedangkan MemDataset2 akan mencatat nama dan qty barang-barang yang diterima.
Ubah/tentukan field-field dari MemDataset1 dengan cara klik MemDataset1, lalu pada property editor klik tombol ... dari property FieldDefs. Maka Fields editor akan muncul.
Dengan menggunakan field editor tersebut, tambahkan 3 buah field dengan ketentuan sbb:
- nama : MemDataset1Tgl
Datatype : ftDate
Precision : 0
Size : 0 - nama : MemDataset1Supplier
Datatype : ftString
Precision : 0
Size : 300 - nama : MemDataset1Ket
Datatype : ftString
Precision : 0
Size : 500
NOTE:
Untuk field tipe ftString, pastikan anda isi nilai property size > 0. Size untuk tipe ftString menentukan panjang maksimal dari String yang mungkin.
Seperti cara di atas, tambahkan juga field-field untuk MemDataSet2 dengan ketentuan sbb:
OK, sampai disini field-field yang kita perlukan sudah siap. Sekarang aktifkan MemDataSet1 dan MemDataSet2 dengan mengubah property Active menjadi True.
Nah, sekarang kita akan membuat sebuah prosedur yang bertugas untuk mengisikan data tanggal dan lain-lain ke dalam MemDataset1 serta data-data barang dari StringGrid1 ke dalam memDataset2. Prosedur tersebut misalkan bernama PrepareDataset. Prosedur ini boleh ditaruh di private atau protected atau bahkan public, terserah anda. Kodenya seperti di bawah ini.
Seperti cara di atas, tambahkan juga field-field untuk MemDataSet2 dengan ketentuan sbb:
- nama : MemDataset2Barang
Datatype : ftString
Precision : 0
Size : 300 - nama : MemDataset2Qty
Datatype : ftInteger
Precision : 0
Size : 0
OK, sampai disini field-field yang kita perlukan sudah siap. Sekarang aktifkan MemDataSet1 dan MemDataSet2 dengan mengubah property Active menjadi True.
Nah, sekarang kita akan membuat sebuah prosedur yang bertugas untuk mengisikan data tanggal dan lain-lain ke dalam MemDataset1 serta data-data barang dari StringGrid1 ke dalam memDataset2. Prosedur tersebut misalkan bernama PrepareDataset. Prosedur ini boleh ditaruh di private atau protected atau bahkan public, terserah anda. Kodenya seperti di bawah ini.
procedure TForm1.PrepareDataset;
var
lIdx: Integer;
lQty: Integer;
begin
// isi header
// bersihkan dulu isi dari dataset
MemDataset1.Clear(False);
// False = field-field tidak akan dihapus
// True = field-field akan dihapus
// ISikan tanggal dll dan cara append record dulu ke dalam dataset
MemDataset1.Append;
MemDataset1.FieldByName('MemDataset1Tgl').AsDateTime :=DateEdit1.Date;
MemDataset1.FieldByName('MemDataset1Supplier').AsString :=Trim(Edit1.Text);
MemDataset1.FieldByName('MemDataset1Ket').AsString :=Trim(Memo1.Text);
// isi detail barang-barang
MemDataset2.Clear(False);
for lIdx := 1 to StringGrid1.RowCount - 1 do
begin
MemDataset2.Append;
MemDataset2.FieldByName('MemDataset2Barang').AsString :=StringGrid1.Cells[0,lIdx];
// lakukan konversi qty dari string menjadi int
// dengan TryStrToInt agar tidak langsung exception jika
// gagal mengkonversi
// Jika gagal konversi, maka ubah menjadi 0
if not TryStrToInt(StringGrid1.Cells[0,lIdx],lQty) then
lQty:=0;
MemDataset2.FieldByName('MemDataset2Qty').AsInteger :=lQty;
end;
end;Selanjutkan lengkapi kode tombol (+) dan (-) untuk menambah dan mengurangi barir. Letakkan kode pada Event OnClick pada Button3 untuk tambah dan Button4 untuk mengurangi.
procedure TForm1.Button3Click(Sender: TObject);
begin
// tambahkan baris dan langsung isi default qty menjadi 0
StringGrid1.RowCount:=StringGrid1.RowCount+1;
StringGrid1.Cells[1,StringGrid1.RowCount-1] :='0';
end;
procedure TForm1.Button4Click(Sender: TObject);
begin
// hapus baris ditempat seleksi berapa
// saat ini tanpa melakukan konfirmasi
if (StringGrid1.RowCount>1) then
StringGrid1.DeleteRow(StringGrid1.Row);
end;
OK, sekarang kita kembali ke form designer. Tambahkan 1 TfrReport, 1 TfrDesigner dan 1 TrfDBDataset, masing-masing dari dari tab komponen LazReport, seperti gambar di bawah ini.
Klik rfDBDataset1, ubah/arahkan property DataSet ke MemDataset2.
Klik kanan pada frReport1, lalu pilih Desain Report.
Maka akan muncul Report Designer.
Sesuai dengan namanya, tools ini digunakan untuk membuat layout report. Report yang akan kita buat sederhana saja, hanya terdiri atas 3 bagian, yaitu:
- Title, untuk menampilkan judul report dan data tanggal, supplier dan keterangan
- Master Header, untuk menampilkan nama kolom
- Master Data, untuk menampilkan data barang-barang
Dari pilihan yang muncul, pilih Report Title. Klik OK.
Maka akan muncul sebuah band untuk menampilkan judul laporan. Apapun yang anda tuliskan pada bagian tersebut, pasti akan muncul dibagian paling atas dari laporan.
Tambahkan Judul Laporan, misalnya LAPORAN PENERIMAAN BARANG, dengan cara klik tombol Rectangle Object lalu klik ke dalam band report title. Maka akan muncul kotak dialog Text Editor. Silahkan tulis judul laporan ini. Lalu tekan OK.
Seperti cara di atas, berturut-turut tambahkan tulisan Tanggal, Supplier dan Keterangan seperti gambar di bawah ini.
Selanjutnya kita akan menampilan data Tanggal, Supplier dan Keterangan yang nilainya berasal dari Dataset yang diisi dari input User. Caranya hampir sama saja dengan sebelumnya, hanya saja kali ini isinya tidak kita tulis langsung, melainkan diambil dari DataSet.
Klik Rectangle Object dan posisikan seperti biasa. Pada text editor, klik tombol DB Field.
Pada pilihan Available DB, pilih MemDataset1 karena data Tanggal, Suplier dan Keterangan tersimpan pada dataset itu.
Kemudian bouble klik MemDataSet1Tgl agar muncul di text editor.
NOTE:
Anda dapat menentukan format tampilan tanggal sesuai dengan yang anda inginkan, yaitu dengan double klik tombol rectangle object dari Tanggal di atas. Pada Text Editor, klik tombol Format. Lalu pada bagian Available Format, pilih Date, lalu pilih format tanggal yang anda inginkan.
Ulangi cara di atas untuk menampilkan data Supplier dan Keterangan dari dataset.
NOTE:
Khusus untuk data Keterangan, pastikan anda mengubah property WordBreak menjadi true. Dengan WordBreak ini, jika suatu string memiliki karakter newline, maka akan tampil pada baris yang baru. Jika false, maka string akan tetap muncul 1 baris saja.
Tekan F11 untuk menampilkan property editor.
OK, bagian judul laporan sudah selesai, sekarang kita akan menambahkan bagian data. Seperti di awal, tambahkan band baru dengan cara klik tombol insert band. Kali ini pilih Master Header. Master Header ini biasanya digunakan untuk menampilkan nama kolom. Kemudian pada band master header tersebut, tambahkan rectangle object dan atur seperti gambar di bawah ini.
Selanjutnya tambahkan band Master Data. Pada saat menambahkan band master data ini, ada yang sedikit berbeda, kali ini anda juga harus menentukan source nya. Pilih frDBDataset1 pada pilihan data band source. Kenapa harus menentukan sourcenya ? Hal ini dikarenakan band Master Data akan menampilkan banyak data, oleh karena itu harus tahu dataset manakah yang digunakan sebagai acuan pada waktu melakukan looping data.
Kemudian seperti sebelum-sebelumnya, tambahkan rectangle object untuk menampilkan data Nama Barang dan Qty.
Sampai disini, desain Laporan sudah selesai. Jika anda mencoba preview, maka hasilnya hanya akan muncul judulnya saja. Hal ini dikarenakan datanya belum terisi. Data baru akan terisi pada saat program berjalan. Silahkan simpan laout laporan ini ke dalam folder yang sama dengan program ini, misalkan dengan nama report.lrf. Tutup Report Design Editor.
Kembali pada coding. Tambahkan kode untuk menampikan design editor pada Button1 dan Preview Report pada Button2, dengan kode seperti di bawah ini.
procedure TForm1.Button1Click(Sender: TObject);
begin
// menampikan report designer
PrepareDataset;
frReport1.LoadFromFile('report.lrf');
frReport1.DesignReport;
end;
procedure TForm1.Button2Click(Sender: TObject);
begin
// preview report
PrepareDataset;
frReport1.LoadFromFile('report.lrf');
frReport1.ShowReport;
end;
Ok, sekarang silahkan compile dan run. Jika tidak ada error, maka program akan berjalan seperti gambar di bawah ini. Silahkan isi data-data yang diperlukan.
Tekan tombol preview untuk menampilkan preview laporan.
Nah, sampai disini program sederhana sebagain besar sudah selesai. Selanjutnya kita akan melakukan beberapa perbaikan yang berhubungan dengan tampilan laporan. Sedangkan untuk hal-hal yang yang berhubungan dengan kemungkinan bug, adalah tugas anda :D.
Apa problem dari program kita ini ? Salah satu problem utamanya adalah, jika user menginput data keterangan atau nama barang dengan sangat panjang, maka akan terpotong. Seperti terlihat pada bagian keterangan pada screenshot di atas. Hanya tampak baris pertamanya saja kan.
Solusinya bagaimana ? Anda bisa saja melebarkan ukuran rectangle object keterangan, akan tetapi ini tidak benar-benar menyelesaikan masalah, karena bisa saja tetap kurang lebar atau bahkan terlalu lebar. Solusi yang benar adalah dengan mengubah property stretch Rectangle Object dan band yang melingkupinya dari false menjadi true.
Pada contoh data keterangan, maka silahkan setting property stretch dari rectangle object Keterangan dan band title menjadi true. Lakukan ini juga pada band master data dan rectangle object nama barang dan qty.
Dengan ditambah beberapa garis, hasil akhirnya seperti gambar di bawah ini.
NOTE:
Untuk mengubah desain laporan, anda tidak perlu kembali ke Lazarus, cukup klik tombol Desain yang kita buat tadi.
Bagaimana, mudah-mudahan tidak terlalu rumit ya.
Sekian tip dan trik kali ini. Jika ada yang kurang jelas, silahkan meninggalkan jejak di komentar.
Kode sumber lengkap dapat di download di sini.
Terimakasih, selamat mencoba, semoga yang sedikit ini bermanfaat.