www.gecko.web.id
   Resource Untuk Pengembang Web, PHP, CSS, MySQL, ajax.

   Home · HTML dan CSS · Membuat Laporan dan Solusi Printing di Aplikasi Berbasis Web

7
Aug ’08
Membuat Laporan dan Solusi Printing di Aplikasi Berbasis WebTopik: html-dan-css | Tags: print, laporan web, css, dll

Banyak teman-teman di web ini yang bertanya tentang bagaimana cara bikin laporan dengan PHP. Berikut pertanyaan yang sering muncul:

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 <HEAD> pada kode HTML Anda.

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

Cara ini yang sering penulis gunakan. Cukup membuat 2 file CSS yang berbeda dan menempatkan tag tersebut di bagian <HEAD>. kemudian menyembunyikan <div> yang tidak ingin kita tampilkan. Lebih lengkapnya bisa dilihat di pembahasan selanjutnya.

3. Menggunakan @import url

Hampir sama dengan cara di atasnya, cuman beda kode.

4. Menggunakan satu file CSS untuk dua versi tampilan

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.

File di atas disimpan dengan nama layar.css

Berikut tampilannya:
layout buat layar monitor

layout simpegda

Kalau untuk printing tentunya kita harus menyingkirkan <div> yang tidak diperlukan. Dengan CSS kita bisa menyembunyikannya. Berikut CSS lengkapnya.

Selanjutnya disimpan menjadi print.css

Dan untuk format tampilan <div> yang masih kita tampilkan perlu mendapat beberapa perubahan, seperti lebar kita set 100% dan background gambar kita ubah menjadi background warna putih.

Untuk menampilkan 2 file CSS di atas kita menggunakan kode sebagai berikut:

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

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.

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.

Artikel yang sesuai:

Diskusikan Artikel Ini

* = required field

:

:

:





tujuh ditambah delapan sama dengan
(Sum of seven and eight)


 

 

 

 

Untuk mengetahui update blog ini, ada baiknya Anda
me-LIKE facebook page ini.




sulikan pada January 11, 2013 (9:28AM)
Terimakasih Artikelnya sangat membantu.
batakmusik pada January 7, 2013 (3:20AM)
bingung mas, ribet bgt
yunus sicoy pada July 14, 2012 (11:21AM)
mantaps om, teknik ini bisa jadi solusi selain fpdf....
Aini pada June 22, 2012 (6:19PM)
mas, mau nanya?
bagaimana membuat laporan dengan format seperti dibawah ini dalam PHP:

Laporan PT. ABC


| No | Keterangan | Jumlah | Harga | Total |
I. JAKARTA
| 1. | Buku | 2 | 5.000 | 10.000 |
| 2. | Amplop | 1 | 1.000 | 1.000 |
---------------------------------------------
Jumlah I 11.000
II. Bogor
| 1. | Meja | 3 | 10.000| 30.000 |
| 2. | Kursi | 5 | 1.000| 5.000 |
---------------------------------------------
Jumlah II 35.000
---------------------------------------------
Jumlah Total(Jumlah I+JumlahII) 46.000
Gajah
Giliran Admin ngomong.. :D
gecko pada February 3, 2012 (9:39AM)
dipraktekkan mas, diikuti satu per satu.
kalo cuman dibaca ya agak sulit mas
gunawan pada February 2, 2012 (3:15PM)
ga ngerti mas tutorialnya..jangan ngerti sendiri dunk kalo mo share ilmu.
itu c ga jelas penjelasannya..trims
Ian Maulana pada February 1, 2012 (11:40AM)
Webnya Keren Ajarin buat web gini donk.....
Sammy pada December 23, 2011 (5:03PM)
Thx atas info ilmunya....
Sekian waktu lamanya knpa koq sepi Komen ya?
franz pada December 21, 2011 (6:36PM)
mantap gan...... tolong satu lag,, mau nanya gimana sebenarnya konsep tampilan Header, isi , footer biar tampilan kaya bunya anda ini gan,,, tolong saya lg awam..
Gecko pada November 26, 2011 (8:25AM)
Coba pake browser lain gan. hasilnya beda
hengky pada November 25, 2011 (4:13PM)
nice article gan... lagi mau bikin laporan dari web langsung di print nih gan yg pake css,, ane coba berhasil tapi kok tetep yah,, perpotongan antar halamannya ga rapih,, maksudnya tulisannya juga kepotong gt gan kalo pas bgt ada di ganti halaman,,, any suggestion??

regards_

hengky
freddo pada November 8, 2011 (9:15PM)
kalau pake tools gak bisa ya boz???
freddo pada November 8, 2011 (9:14PM)
kalau pake tools gak ada ya bos?
joent pada May 20, 2011 (1:50AM)
gan nmpang tnya, kenapa kalau export ke ms.word ga bisa pake css?
css nya ga kebaca.
terus gimana biar pas donlotnya langsung kebaca file doc? jadi bukanya ga mesti pake open with.
mhon bantuannya.. trima kasih..
rozi pada March 18, 2011 (5:58AM)
kalo dalam bentuk tabel giman cara menghilangkan tabel yang laiinnya
Catatan Hery pada March 9, 2011 (5:04AM)
Terima kasih sharingnya. Sangat bermanfaat
muhammad pada December 23, 2010 (6:16PM)
gimana cara membuat tombol print?
learn html pada November 30, 2010 (5:22AM)
Thanks ya... artikelnya bener2 ngebantu saya
Nice post..
Aa_teguh pada November 18, 2010 (12:44AM)
tolong jelaskan pake study kasus dun gan..
ane blm ngerti nich..
Giriayoga pada November 4, 2010 (12:35AM)
wah,bagus nich gan....ane suka....tak coba e
bisnis pulsa? gabung sini aja pada August 10, 2010 (8:07PM)
wah makasih bos, lg belajar bikin report nih di web...
mail pada July 5, 2010 (4:00AM)
mantep boss
hery pada June 30, 2010 (12:37AM)
keren!!!!!!!!
gw udah bisa buat cms sendri tapi kalo ngprint pake crystal report gmn caranya????
Luthfi Emka pada June 25, 2010 (1:36AM)
perlu dilanjutkan artikel ini, top
hendra pada June 19, 2010 (8:29PM)
apabila saya membuat halaman terpisah untuk versi cetak,berarti saya membuat css untuk versi cetak.

dan bagaimana jika saya ingin membuat page:A4 dan portrait..

kode css y bagaimana??

terima kasih
Fazli Achmad Mauludi pada August 16, 2008 (5:15PM)
Saya ingin mendalami lagi tentang Aplikasi ini, tolong di posting lagi yang lebih mendalam dan jelas. agar para penggemar web dapat lebih memperlengkap aplikasinya. dan agar web tidak ketinggalan dengan aplikasi desktop lainya

Fazli

© 2008-2010 Eko Priyanto - www.gecko.web.id - Dapat dikopi secara bebas dengan mencantumkan sumber artikel.