* Gimana cara bikin laporan di web?
* Gimana sih cara bikin laporan dengan PDF file?
* Gimana sih cara export web ke MS Excel?
* Gimana sih cara export web ke MS Word?
* Saya pusing dengan FPDF. Harus main koordinat. Apa ada penyelesaian yang lebih mudah?
* Cara print di web yang mudah?
Baiklah pada artikel kali ini gw akan memberi masukan mengenai pertanyaan-pertanyaan di atas. Walaupun tidak menjawab semua pertanyaan tapi gw berharap penyelesaian ini bisa menyelesaikan masalah Anda.
Kalo menjawab pertanyaan "Gimana cara bikin laporan di web?" kayaknya penulis sedikit bingung. Soalnya menurut penulis, kalau datanya udah tampil di web ya itulah laporannya dan itu juga yang akan kita cetak. Mungkin bedanya kalo di aplikasi berbasis desktop ada yang namanya "data grid" dan ada yang namanya "laporan". Di aplikasi berbasis desktop laporan biasanya menggunakan Crystal Report.
Mungkin Anda berpendapat bahwa tampilan untuk monitor dan untuk print harusnya berbeda karena tidak mungkin kita membuat laporan cetak dan di situ terdapat menu navigasi, belum lagi background yang menggangu. Yup, setuju. Untuk itu kita harus membuat 2 versi halaman kita. Versi layar monitor dan versi cetak.
Berikut cara-cara membuat dua versi halaman, yakni: versi layar monitor dan versi cetak yang bisa Anda pilih salah satunya:
1. menggunakan tag PHP untuk memanggil 2 file CSS
2. menggunakan tag HTML untuk memanggil 2 file CSS
3. menggunakan @import url
4. menggunakan satu file CSS untuk dua versi tampilan
1. Menggunakan tag PHP untuk memanggil 2 file CSS
Berikut kode PHPnya dan letakkan di bagian pada kode HTML Anda.
view plain print
1.
2.
3.
4.
5.
Kelemahan dari cara ini adalah harus load ulang halaman. bayangkan jika halaman yang akan kita cetak merupakan bentuk rekapitulasi dengan banyak query dan loadnya sangat lama. Wew tidak praktis. Cara ini sama saja dengan membuat link ke halaman baru, dengan desain halaman baru yang minimalis, yang sengaja disiapkan untuk cetak laporan.
2. Menggunakan tag HTML untuk memanggil 2 file CSS
view plain print
1.
2.
Cara ini yang sering penulis gunakan. Cukup membuat 2 file CSS yang berbeda dan menempatkan tag tersebut di bagian . kemudian menyembunyikan
3. Menggunakan @import url
view plain print
1. @import url(print.css) print,projection;
@import url(print.css) print,projection;
Hampir sama dengan cara di atasnya, cuman beda kode.
4. Menggunakan satu file CSS untuk dua versi tampilan
view plain print
1.
cara ini juga bagus dan bahkan hanya menggunakan 1 file CSS. Yup, style untuk dua versi tampilan (layar dan printing) dalam satu file CSS.
Baiklah, sekarang kita mulai praktek membuat laporan di web yang bisa langsung kita cetak. Tapi sebelumnya mari kita lihat versi layar untuk aplikasi SIMPEG yang penulis buat.
view plain print
1. #atas{
2. height: 100px; /*Height of top section*/
3. background:url(items/header.jpg) repeat-x #2D1721;
4. }
5.
6. #atas h1{
7. margin: 0;
8. padding-top: 15px;
9. }
10.
11. #wrapper{
12. float: left;
13. width: 100%;
14. }
15.
16. #isi{
17. margin-right: 170px;
18. }
19.
20. #kanan{
21. float: left;
22. width: 170px; /*Width of right column in pixels*/
23. margin-left: -170px; /*Set left margin to -(RightColumnWidth) */
24. }
25.
26. #bawah{
27. clear: left;
28. width: 100%;
29. background: black;
30. color: #FFF;
31. text-align: center;
32. padding: 4px 0;
33. }
#atas{ height: 100px; /*Height of top section*/ background:url(items/header.jpg) repeat-x #2D1721; } #atas h1{ margin: 0; padding-top: 15px; } #wrapper{ float: left; width: 100%; } #isi{ margin-right: 170px; } #kanan{ float: left; width: 170px; /*Width of right column in pixels*/ margin-left: -170px; /*Set left margin to -(RightColumnWidth) */ } #bawah{ clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; }
File di atas disimpan dengan nama layar.css
Berikut tampilannya:
layout buat layar monitor
layout simpegda
Kalau untuk printing tentunya kita harus menyingkirkan
view plain print
1. #atas, #kanan, #bawah
2. {display:none;}
3.
4. #wrapper{
5. float: left;
6. width: 100%;
7. }
8.
9. #isi{
10. width: 100%;
11. }
#atas, #kanan, #bawah {display:none;} #wrapper{ float: left; width: 100%; } #isi{ width: 100%; }
Selanjutnya disimpan menjadi print.css
Dan untuk format tampilan
Untuk menampilkan 2 file CSS di atas kita menggunakan kode sebagai berikut:
view plain print
1.
2.
3.
Cukup begitu saja. Apabila dilihat melalui print preview hasilnya seperti ini:
hasil print laporan
Apabila Anda menginginkan file CSS yang standar Anda bisa merujuk ke Hartija Css Print Framework.
Artikel-artikel ini membahas tentang bagaimana membuat printer frendly webpage:
1. CSS Design: Going to Print
2. Back To The Future of Print
3. Five Simple Steps to Typesetting on the web: Printing the web
4. What is a Printer-Friendly Web Page?
5. Printing the Web
6. A Print CSS Primer
Export Laporan ke Format File Lain
Export ke PDF:
Untuk export file ke bentuk *.pdf kita bisa menggunakan Free PDF library atau dikenal sebagai FPDF (www.FPDF.org). Sedikit ribet memang dan butuh kesabaran untuk mencoba-coba membuat laporan. Tapi kalo keperluannya cuman sekadar mencetak laporan apa tidak mudah dengan cara di atas? ga tahu lagi kalo tujuannya lain.
Export ke MS Word:
Untuk export ke MS Word kita bisa memanfaatkan sebuah class dari phpclass.org dengan nama clsWord. Apabila Anda menginginkan bisa search di paman google dengan kata kunci: mswordphp-2006-12-26
Tapi akan lebih mudah dengan cara memanipulasi header file PHP Anda. Tambah beberapa baris kode berikut di bagian atas sendiri pada kode Anda
view plain print
1. 2. header("Content-Type: application/download'");
3. header("Content-Disposition: inline; filename="word.doc"");
4. header("Expires: 0");
5. header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
6. header("Pragma: public");
7. ?>
Export ke MS Excel:
Kita bisa memanfaatkan excel stream. Cari xlsstream-2005-01-20.zip dengan paman google, apabila Anda tertarik dengan class ini. Penulis juga mendapatkannya di phpclass.org .
Sama seperti word kita juga bisa memanipulasi header di script PHP kita.
view plain print
1. 2. header("Content-Type: application/download");
3. header("Content-Disposition: inline; filename="excel.xls"");
4. header("Expires: 0");
5. header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
6. header("Pragma: public");
7. ?>
Saya kira cukup sekian penjelasan tentang laporan, printing dan lain-lain. Sebenernya masih banyak cara-cara lain yang bisa kita pakai dalam membuat laporan. tergantung kreatifitas kita. Coba luangkan waktu untuk baca-baca artikel mengenai OWC (Office Web Component) mungkin bisa banyak membantu. Biar tambah penasaran, kita juga bisa menfaatkan Crystal Report untuk membuat laporan pada aplikasi berbasis web. Udah dulu ah, kalo ada pertanyaan atau koreksi jangan ragu buat ngasih comment or japri gw.
Semoga bermanfaat.
Sumber Aslinya
No comments:
Post a Comment