membuat laporan dan solusi printing di aplikasi berbasis web

7/21/2019 Membuat Laporan Dan Solusi Printing Di Aplikasi Berbasis Web

1/7

Membuat Laporan dan Solusi Printing di

Aplikasi Berbasis Web

Banyak teman-teman di webiniyang bertanya tentang bagaimana cara bikin laporan denganPHP. Berikut pertanyaan yang sering muncul:

Gimana cara bikin laporan di web?

Gimana sih cara bikin laporan dengan PDF ile?

Gimana sih cara e!port web ke "# $!cel?

Gimana sih cara e!port web ke "# %ord?

#aya pusing dengan FPDF. Harus main koordinat. &pa ada penyelesaian yang lebih

mudah?

'ara print di web yang mudah?

Baiklah pada artikel kali ini gw akan memberi masukan mengenai pertanyaan-pertanyaan diatas. %alaupun tidak men(awab semua pertanyaan tapi gw berharap penyelesaian ini bisamenyelesaikan masalah &nda.

)alo men(awab pertanyaan *Gimana cara bikin laporan di web?* kayaknya penulis sedikitbingung. #oalnya menurut penulis+ kalau datanya udah tampil di web ya itulah laporannyadan itu (uga yang akan kita cetak. "ungkin bedanya kalo di aplikasi berbasis desktop adayang namanya *data grid* dan ada yang namanya *laporan*. Di aplikasi berbasis desktoplaporan biasanya menggunakan 'rystal ,eport.

"ungkin &nda berpendapat bahwa tampilan untuk monitor dan untuk print harusnya berbedakarena tidak mungkin kita membuat laporan cetak dan di situ terdapat menu naigasi+ belum

lagi background yang menggangu. up+ setu(u. /ntuk itu kita harus membuat 0 ersi halamankita. 1ersi layar monitor dan ersi cetak.

Berikut cara-cara membuat dua ersi halaman+ yakni: ersi layar monitordan versi cetakyang bisa &nda pilih salah satunya:

2. menggunakan tag PHP untuk memanggil 0 ile '##

0. menggunakan tag H3"4 untuk memanggil 0 ile '##

5. menggunakan 6import url

7. menggunakan satu ile '## untuk dua ersi tampilan
http://www.gecko.web.id/http://www.gecko.web.id/http://www.gecko.web.id/http://www.gecko.web.id/


2/7

1 Menggunakan tag P!P untuk memanggil " #ile $SS

Berikut kode PHPnya dan letakkan di bagian 8H$&D9 pada kode H3"4 &nda.

iew plain print

2. 8?php i ;>@ AA *printme* C ?9

0. 8p9

5. 8link relA*stylesheet* typeA*te!tcss* hreA*print.css* 9

7. 8?php E else C ?9

. 8link relA*stylesheet* typeA*te!tcss* hreA*deault.css* 9

)elemahan dari cara ini adalah harus load ulang halaman. bayangkan (ika halaman yang akankita cetak merupakan bentuk rekapitulasi dengan banyak uery dan loadnya sangat lama.%ew tidak praktis. 'ara ini sama sa(a dengan membuat link ke halaman baru+ dengan desainhalaman baru yang minimalis+ yang senga(a disiapkan untuk cetak laporan.

" Menggunakan tag !%ML untuk memanggil " #ile $SS

iew plain print

2. 84) relA*stylesheet* type*te!tcss* hreA*style.css* mediaA*screen*9

0. 84) relA*stylesheet* type*te!tcss* hreA*print.css* mediaA*print*9

'ara ini yang sering penulis gunakan. 'ukup membuat 0 ile '## yang berbeda danmenempatkan tag tersebut di bagian 8H$&D9. kemudian menyembunyikan 8di9 yang tidakingin kita tampilkan. 4ebih lengkapnya bisa dilihat di pembahasan selan(utnya.

& Menggunakan 'import url

iew plain print

2. 6import urlprint.css print+pro(ectionI

Hampir sama dengan cara di atasnya+ cuman beda kode.

( Menggunakan satu #ile $SS untuk dua versi tampilan

iew plain print

2. 8#34$ typeA*te!tcss*9

0. 6media screen C

5. BJD Cont-siKe: mediumI line-height: 2emI background: silerIE
http://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htm


3/7

7. E

. 6media print C

L. BJD Cont-siKe: 2MptI line-height: 20MNI background: whiteIE

O. E

. 8#34$9

cara ini (uga bagus dan bahkan hanya menggunakan 2 ile '##. up+ style untuk dua ersitampilan layar dan printing dalam satu ile '##.

Baiklah+ sekarang kita mulai praktek membuat laporan di web yang bisa langsung kita cetak.

3api sebelumnya mari kita lihat ersi layar untuk aplikasi #"P$G yang penulis buat.

iew plain print

2. QatasC

0. height: 2MMp!I RHeight o top sectionR

5. background:urlitemsheader.(pg repeat-! Q0D2O02I

7. E

.

L. Qatas h2C

O. margin: MI

. padding-top: 2p!I

S. E

2M.

22. QwrapperC

20. loat: letI

25. width: 2MMNI

27. E

2.
http://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htmhttp://gecko.web.id/detail/membuat-laporan-dan-solusi-printing-di-aplikasi-berbasis-web_ee2.htm


4/7

2L. QisiC

2O. margin-right: 2OMp!I

2. E

2S.

0M. QkananC

02. loat: letI

00. width: 2OMp!I R%idth o right column in pi!elsR

05. margin-let: -2OMp!I R#et let margin to -,ight'olumn%idth R

07. E

0.

0L. QbawahC

0O. clear: letI

0. width: 2MMNI

0S. background: blackI

5M. color: QFFFI

52. te!t-align: centerI

50. padding: 7p! MI

55. E

File di atas disimpan dengan nama layarcss


5/7

Berikut tampilannya:

)alau untuk printing tentunya kita harus menyingkirkan 8di9 yang tidak diperlukan.Dengan '## kita bisa menyembunyikannya. Berikut '## lengkapnya.

iew plain print


6/7

2. Qatas+ Qkanan+ Qbawah

0. Cdisplay:noneIE

5.

7. QwrapperC

. loat: letI

L. width: 2MMNI

O. E

.

S. QisiC

2M. width: 2MMNI

22. E

#elan(utnya disimpan men(adi printcss

Dan untuk ormat tampilan 8di9 yang masih kita tampilkan perlu mendapat beberapaperubahan+ seperti lebar kita set 2MMN dan background gambar kita ubah men(adi background

warna putih.

/ntuk menampilkan 0 ile '## di atas kita menggunakan kode sebagai berikut:

iew plain print

2. 84) relA*stylesheet* type*te!tcss* hreA*layar.css* mediaA*screen*9

0. 84) relA*stylesheet* type*te!tcss* hreA*print.css* mediaA*print*9

5. 8p9


7/7

'ukup begitu sa(a. &pabila dilihat melalui print preiew hasilnya seperti ini:

&pabila &nda menginginkan ile '## yang standar &nda bisa meru(uk ke !arti)a $ss Print*ramework.

membuat laporan dan solusi printing di aplikasi berbasis web

Documents