Cetak Laporan Dengan CSS

Feb 24, 2007

Kalau anda menjadi web programmer, masalah utama yang akan anda hadapi adalah ketika anda dihadapkan untuk melakukan pencetakan laporan di kertas dengan format tertentu. Dalam format cetakan, besar font, ukuran kertas, dan letak “page break” harus dipertimbangkan dengan tepat.

Selama ini, ada beberapa cara yang dilakukan. Pertama menggunakan format PDF. Dengan format PDF kita bisa memformat halaman dengan tepat sebelum di cetak pada kertas. Namun, menggunakan PDF membutuhkan penggunaan sumber daya komputer yang cukup besar, selain pembuatannya rumit dan menghabiskan waktu.

Kedua menggunakan teks biasa yang hasilnya seperti hasil cetak aplikasi lama yang menggunakan foxpro. Fungsi str_pad() digunakan untuk urusan ini, dan hasilnya dilemparkan ke printer “dot matrix”. Namun penggunaan cara ini masih harus menggunakan sebuah file exe di sisi client untuk melakukan interpretasi terhadap perintah-perintah text pada mesin-mesin printer dot matrik.

Ketiga dengan menggunakan CSS. Sebenarnya ide ini sudah lama. Menurut saya menggunakan CSS akan lebih mudah, powerful dan lebih ringan. Namun dulu kendalanya pada “pagebreak”. Selama ini, halaman web akan mencetak dokumen pada kertas secara kontinyu, dimana kita tidak bisa memaksa sebuah halaman web untuk berhenti di tengah dan berganti halaman ketika dicetak.

Mimipi itu menjadi kenyataan ketika saya membaca buku “CSS – The Missing Manual”. Dikatakan bahwa pada CSS 2.1 ada fungsi-fungsi pengaturan printer seperti ganti halaman, dan pengaturan margin meskipun saat ini masih sangat sedikit browser yang mengimplementasikan ini.

Version 2.1 of the Cascading Style Sheet standard includes many CSS properties aimed at better formatting a printed Web page: from setting the orientation of the page to defining margins and paper size. (You can see the full list at www.w3.org/TR/CSS21/page.html.) Unfortunately, today’s Web browsers recognize very few of these print styles.

Karena kertas membutuhkan ukuran-ukuran pasti, maka gunakan batasan-batasan berikut,

Gunakan ukuran yang berhubungan dengan jarak atau panjang dengan satuan-satuan ukuran pada kertas seperti cm, mm atau inchi.
Gunakan ukuran pt untuk ukuran font, bukan em atau px, karena ukuran pt dirancang untuk ukuran-ukuran cetakan.
Gunakan “page-break-after: always” atau “page-break-after: always” untuk berganti halaman.
Gunakan “@page” sebagaimana yang ada pada contoh untuk mengatur margin halaman.

Saya mencoba riset kecil-kecilan dengan membuat report sederhana. Data saya hasilkan dari proses looping yang bisa dilihat pada contoh skrip dibawah. Pada setiap 40 loop, saya melakukan ganti halaman (lihat lampiran bawah). Hasilnya bisa dilihat dari tangkapan layar berikut.

Image Hosted by ImageShack.us

Kesimpulan yang saya ambil sebagai berikut :

Sintak page-break-after, untuk membuat ganti halaman sudah berjalan di IE6, Firefox 1.5, dan Opera 9
Sedangkan @page yang digunakan untuk mengatur margin hanya berjalan di Opera 9. Pada IE 6 dan Firefox 1.5 atau 2 margin cetakan hanya berjalan jika kita mengubah magin pada “Page Setup”. Jadi untuk saat ini, urusan cetak mencetak report yang menggunakan CSS, serahkan saja kepada Opera 9.
Pemberian border bawah (border-bottom) pada “td” dengan CSS menghasilkan cetakan printer yang kurang mulus , beberapa garis mempunyai ketebalan yang terlihat agak beda. Berbeda dengan tampilan yang ada pada browser.

Secara umum, solusi yang disuguhkan CSS 2.1 ini cukup luar biasa. Paling tidak bisa menggantikan peran PDF yang selama ini menjadi solusi format cetakan. Hanya, saya tidak menjumpai fungsi untuk menentukan ukuran kertas, sehingga penentuan ukuran kertas kita lakukan secara manual misalnya dengan mengganti halaman ketika baris telah mencapai 40 baris (row).

Lampiran : Contoh CSS yang siap dicetak dengan printer.


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Hello!</title>
  <style type="text/css">
*{
font-family: Arial;
margin:0px;
padding:0px;
}
@page {
 margin-left:3cm 2cm 2cm 2cm;
}
table.grid{
font-size: 10pt;
border-collapse:collapse;
}
table.grid th{
padding-top:1mm;
padding-bottom:1mm;
}
table.grid th{
background: #F0F0F0;
border-top: 0.2mm solid #000;
border-bottom: 0.2mm solid #000;
text-align:left;
padding-left:0.2cm;
}
table.grid tr td{
padding-top:0.5mm;
padding-bottom:0.5mm;
padding-left:2mm;
border-bottom:0.2mm solid #000;
}
h1{
font-size: 18pt;
}
h2{
font-size: 14pt;
}
.header{
display: block;
width:15.6cm ;
margin-bottom: 0.3cm;
text-align: center;
}
.attr{
font-size:9pt;
width: 100%;
padding-top:2pt;
padding-bottom:2pt;
border-top: 0.2mm solid #000;
border-bottom: 0.2mm solid #000;
}
.pagebreak {
page-break-after: always;
}
</style>
</head>
<body>
< ?
function myheader(){
?>
  <div class="header">
   <h1>Daftar Barang </h1>
   <h2>Supermarket Sampun Manteb</h2>
   <div class="attr">
        Jalan Arif Rahman Hakim Sukolilo Surabaya 60111
   </div>
  </div>
  <table class="grid">
  <tr>
  <th style="width:1cm">No</th>
  <th style="width:5cm">Nama Barang</th>
  <th style="width:1cm">Jumlah</th>
  <th style="width:2cm">Harga</th>
  <th style="width:2cm">Total</th>
  <th style="width:3cm">Keterangan</th>
  </tr>
< ?
}
function myfooter(){
    echo "</table>";
}
for($i=1;$i< =60;$i++){
$jumlah = $i * 1000;
if(($i%40) == 1){
   if($i > 1){
        myfooter();
        echo "<div class=\"pagebreak\"> </div>";
   }
   myheader();
}
echo "<tr>";
echo "<td>$i</td>";
echo "<td>Item Barang ke $i</td>";
echo "<td>$i</td>";
echo "<td>1000</td>";
echo "<td>$jumlah</td>";
echo "<td>Tidak ada</td>";
echo "</tr>";
}
myfooter();
?>
</table></body>
</html>

-- ooo0oo --

Catatan yang mungkin berhubungan :

Print Artikel ini

Diposting oleh achedy pada CSS, PHP

27 Comments, Comment or Ping

1. Dhika

oot: posting ini kok gak ketangkep aggr imb ya?

Mar 1st, 2007
2. achedy

#1. Soalnya saya niru pak Harry, cuman bagian catatan saja yang saya agregasi ke situs IMB. Tapi kalau tulisan2 kayak gini ada manfaatnya gak apa2 saya share juga. Gimana menurutmu ?

Mar 1st, 2007
3. Dhika

#achedy,
hayah, untuk aggr imb yg open ndak perlu difilterlah. saya rasa ketika kita menuliskan sesuatu, toh kita sudah memfilternya masak2, bahwa tulisan tersebut (mudah2an) layak dan bermanfaat buat publik tho?

Mar 1st, 2007
4. Donny

Sip, kebetulan lagi nyari tentang ‘ini’ Thanks.

Mar 3rd, 2007
5. Joe

Info yang bagus…mungkin di project lain akan saya coba.

Selama ini laporan saya buatnya pake crystal report jadi ngga perlu css lagi.

Mar 6th, 2007
6. achedy

#5. Memangnya dari program web bisa di eksport ke cristal report ? Gimana caranya ?

Mar 6th, 2007
7. Yan

Permasalahan yang masih timbul dengan cara ini adalah pada kasus, kita sudah tetapkan n row untuk setiap halaman. Lalu ternyata ada beberapa row yang membutuhkan lebih dari satu baris. Tentu data akan melebihi ukuran kertas.

Mar 6th, 2007
8. A3

@achedy
PHP bisa kok manggil Crystal Report. manggilnya pake lib COM punya PHP. Ada bbrp tutorial di internet yg ngebahas ini,silahkah googling. Tapi saya sendiri lom coba…

Mar 8th, 2007
9. aysia

akhirnya terlihat juga keahlian CSS nya; katanya ga bisa, emang Master selalu merendah didepan ane

Mar 12th, 2007
10. okhass

kebetulan ini lagi nyari and butuh .. Makasih atas share ilmunya .

Jul 20th, 2007
11. ariel

coba pake script css ini:

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

utk htmlnya:

HEADER (judul dsb)

FOOTER

isi, tabel barang dsb

isi tbody baru diloop, ambil dari db.

Jul 28th, 2007
12. ariel

coba pake script css ini:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
utk htmlnya:
<table border=0 align="center" width="100%">
<thead>
<tr>
<th width=100%>HEADER (judul dsb)
</thead>
<tfoot>
<tr>
<td width=100%>FOOTER
</div>
</tfoot>
<tbody>
<tr>
<td width="100%">isi, tabel barang dsb</td>
</tr>
</tbody>
</table>
isi tbody baru diloop, ambil dari db.

Jul 28th, 2007
13. Xander83

Mau tanya bos… Kalau client menggunakan Printer LX-300 gimana ya ?? (Soalnya untuk mencetak kertas rangkap 3)..
Saya coba menggunakan perintah diatas, hasilnya kok jadi mengecil dan tidak sesuai dengan ukuran kalau saya mencetak dengan printer tinta..???

Nov 30th, 2007
14. achedy

#13. Untuk printer LX 300 tidak saya sarankan menggunakan cara ini.

Printer dot matrik hanya cocok jika kita menggunakan text dan rumus printer yang ada pada manual printer.

Nov 30th, 2007
15. heru

mas klo mau nyetak ke printer dot matrix menggunakan continues form, spy kertasnya gak menggulung terus gimana ? sy coba cetak hanya beberapa baris tapi printernya gak berhenti, malah ganti halaman baru, pinginnya berhenti kayak cetak struk yg ada di super market

Dec 8th, 2007
16. fitriyani

mas maaf maklum newbie …
ini extensionnya *.php apa *.css

trus cara menjalankan aplikasinya gimana ?

trims

Apr 27th, 2008
18. Kereayem

Segera di coba.. saya punya masalah itu juga untuk cetak nota.. ke dotmatrik.. bisa gak ya…

Jun 6th, 2008
19. fajar

mas, kalau mau cetak halaman sekaligus gimana ya???misalkan kita mau cetak biodata 50 orang sekaligus….bagaimana cara nyettingnya???trus untuk mengubah page dari bentuk portrait ke landscape gimana caranya??

Jul 1st, 2008
20. iel

@ HERU, XANDERS83
sedikit saran wat yang mo ngeprint pake dot matrik, terutama LX 300
dari pada ribet pake manual bawaan printer (escp/2), mending dirubah aja mode-nya, jangan pake mode grafik, karena output akan mengecil.
trus gimana dunk ?? ya pake mode text lah….
caranya ?? report dibuat ke file word (*.doc) baru dicetak dari wordnya, hasilnya ?? insha allah akurat….. kmaren baru bikin soalnya , emang si katanya lebih lambat dibanding kalo pake escp,tapi masih wajar ko…..
semoga membantu….
btw “missing manual CSS”nya format chm kah ?? boleh dishare dunk
dulu pernah punya,tapi skarang da bener2 “missing” neh, thanx

Aug 15th, 2008
21. Ponco

Mas kulo nuwun, mohon maaf nyelonong.
Kalo saya mo cetak pakai printer tinta pake msword ato apalah tapi output cetakan diprinter tinta tadi seperti hasil cetakan printer dot matrik (hasilnya kan titik2) , pake font apa ya ?
Sebelum dan sesudah nya matur suwun banyak.

Aug 24th, 2008
22. yuyus

Mas, saya minta contohnya yang lengkap yach. Kalau boleh, please di kirim ke email saya. Terima Kasih…

Sep 8th, 2008
23. andy juwata

aku butuh skripnya bang kalo gitu aku bingung pake skrip itu

Jan 27th, 2009
24. najmakeysa

bang, gw ada masalah,
sy buat sys lembaga keuangan pake php, tp bingung mau ngeprint ttransaksi buku tabungan yang hrs milih print dibaris mana…
saya orng br di php.. sblmnya bnyak di fox
tolong bgt ya bang..

Feb 16th, 2009
25. tukangmonggame

mampir cak, emang bener css sangat bagus utk solusi permasalahan cetak via web

Jun 10th, 2009
26. abi

untuk pencetakan laporan via web kayanya generate ke PDF deh solusi yang selama ini cukup bisa diandalkan …referensi bisa dilihat di http://www.fpdf.org/

Jun 15th, 2009
27. DENI

yang nyari ebook, monggo : google keyword = css+the missing manual+ebook

Jul 14th, 2009