Sabtu, 24 Februari 2007

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

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.

[code='php']
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Hello!



< ?
function myheader(){
?>

Daftar Barang


Supermarket Sampun Manteb



Jalan Arif Rahman Hakim Sukolilo Surabaya 60111











< ?
}
function myfooter(){
echo "
No Nama Barang Jumlah Harga Total Keterangan
";
}
for($i=1;$i< =60;$i++){
$jumlah = $i * 1000;
if(($i%40) == 1){
if($i > 1){
myfooter();
echo "
";
}
myheader();
}
echo "";
echo "$i";
echo "Item Barang ke $i";
echo "$i";
echo "1000";
echo "$jumlah";
echo "Tidak ada";
echo "";
}
myfooter();
?>


[/code]

27 komentar:

  1. oot: posting ini kok gak ketangkep aggr imb ya?

    BalasHapus
  2. #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 ?

    BalasHapus
  3. #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?

    BalasHapus
  4. Sip, kebetulan lagi nyari tentang 'ini' :) Thanks.

    BalasHapus
  5. Info yang bagus...mungkin di project lain akan saya coba.

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

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

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

    BalasHapus
  8. @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...

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

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

    BalasHapus
  11. 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.

    BalasHapus
  12.  
    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.

    BalasHapus
  13. 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..???

    BalasHapus
  14. #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.

    BalasHapus
  15. 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

    BalasHapus
  16. mas maaf maklum newbie ...
    ini extensionnya *.php apa *.css

    trus cara menjalankan aplikasinya gimana ?

    trims

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

    BalasHapus
  18. 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??

    BalasHapus
  19. @ 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

    BalasHapus
  20. 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.

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

    BalasHapus
  22. aku butuh skripnya bang kalo gitu aku bingung pake skrip itu

    BalasHapus
  23. 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..

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

    BalasHapus
  25. 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/

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

    BalasHapus

ShareThis

Search in this Blog