Obrolan Cak Edy

Avatar

catatan ringan pendamping kopi, kriuk bergizi …

Metode Granada

Cetak Laporan Dengan CSS

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,

  1. Gunakan ukuran yang berhubungan dengan jarak atau panjang dengan satuan-satuan ukuran pada kertas seperti cm, mm atau inchi.
  2. Gunakan ukuran pt untuk ukuran font, bukan em atau px, karena ukuran pt dirancang untuk ukuran-ukuran cetakan.
  3. Gunakan “page-break-after: always” atau “page-break-after: always” untuk berganti halaman.
  4. 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
Image Hosted by ImageShack.us

Kesimpulan yang saya ambil sebagai berikut :

  1. Sintak page-break-after, untuk membuat ganti halaman sudah berjalan di IE6, Firefox 1.5, dan Opera 9
  2. 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.
  3. 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>

Metode Granada
  • http://dirgaa.com Dhika

    oot: posting ini kok gak ketangkep aggr imb ya?

  • http://achedy.penamedia.com 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 ?

  • http://dirgaa.com 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?

  • http://psychoavatar.blogspot.com Donny

    Sip, kebetulan lagi nyari tentang ‘ini’ :) Thanks.

  • Joe

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

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

  • http://achedy.penamedia.com achedy

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

  • http://daunsalam.net 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.

  • 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…

  • http://aysia.freefronthost.com aysia

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

  • http://- okhass

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

  • 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.

  • 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.

  • 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..???

  • http://achedy.penamedia.com 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.

  • http://- 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

  • fitriyani

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

    trus cara menjalankan aplikasinya gimana ?

    trims

  • Pingback: Cetak Laporan Dengan CSS « Be&Bu UNITED STATES WordPress

  • http://www.rumahmainan.com Kereayem

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

  • http://www.fajarmh.co.nr 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??

  • http://# 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 :D, 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 :D
    dulu pernah punya,tapi skarang da bener2 “missing” neh, thanx

  • 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.

  • yuyus

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

  • http://- andy juwata

    aku butuh skripnya bang kalo gitu aku bingung pake skrip itu

  • 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..

  • http://nggametukang.blogspot.com tukangmonggame

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

  • http://soemaryanto.blogspot.com/ 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/

  • http://- DENI

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