Menu Search

Pydeepy WeblogDi Blog ini aku mencurahkan apa yang aku lakukan

Cetak laporan dengan CSS dan PHP

Kalau anda menjadi web programmer, masalah utama yang akan anda hadapi adalah ketika anda dihadapkanuntuk 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 kitabisa memformat halaman dengan tepat sebelum di cetak pada kertas. Namun, menggunakan PDFmembutuhkan penggunaan sumber daya komputer yang cukup besar, selain pembuatannya rumit danmenghabiskan 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. Namunpenggunaan cara ini masih harus menggunakan sebuah file exe di sisi client untuk melakukan interpretasiterhadap perintah-perintah text pada mesin-mesin printer dot matrik.

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

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

Version 2.1 of the Cascading Style Sheet standard includes many CSS properties aimed at better formatting aprinted Web page: from setting the orientation of the page to defining margins and paper size. (You can see the fulllist at http://www.w3.org/TR/CSS21/page.html.) Unfortunately, todays Web browsers recognize very few of theseprint 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 padakertas 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 loopingyang bisa dilihat pada contoh skrip dibawah. Pada setiap 40 loop, saya melakukan ganti halaman (lihatlampiran bawah). Hasilnya bisa dilihat dari tangkapan layar berikut.

Kesimpulan yang saya ambil sebagai berikut :

1. Sintak page-break-after, untuk membuat ganti halaman sudah berjalan di IE6, Firefox 1.5, dan Opera 92. 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. Jadiuntuk 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 yangkurang mulus , beberapa garis mempunyai ketebalan yang terlihat agak beda. Berbeda dengan tampilanyang ada pada browser.

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

Lampiran : Contoh CSS yang siap dicetak dengan printer.

< !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>< ?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();?>

Source :

Previous Next

Leave a ReplyYour email address will not be published. Required fields are marked *

November 25, 2008 5 Replies

http://theeqush.wordpress.com/2008/05/26/cetak-laporan-dengan-css/

You May Like

1.

About these ads

Like

Be the first to like this.

Related

Tutorial Konsep Ajax I Tutorial MySQL - Pengenalan Lebih dalam dengan OOPIn "Ajax" In "MySQL" In "PHP"

Name

Email

*

*

Post Comment

Notify me of new comments via email.

Website

Comment

kangjeri on January 27, 2009 at 3:34 am

Oke tak cobanya dulu!Thanks!

v19 on March 6, 2009 at 7:39 am

contoh aplikasinya upload donk mas.makasih banget

apw on October 25, 2009 at 1:48 am

Hello!

*{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;}

Daftar BarangSupermarket Sampun Manteb

Jalan Arif Rahman Hakim Sukolilo Surabaya 60111

Halaman

NoNama BarangJumlahHargaTotalKeterangan

Yoppi Yahoo Messenger

Archives

February 2009December 2008November 2008August 2008July 2008

Categories

AjaxArtikelCSSJavaScriptLirik LaguMySQLPHPRenungan HatiUncategorized

Recent PostsTutorial Konsep AjaxIYang Terlewatkan Shelia On7

?>

iiuuuu on August 25, 2010 at 6:51 am

ko ga da pnjelasan lengkapnya siimana bisa di coba ..ia ga ?mhon pnjelasannya trimz

128bit on April 27, 2011 at 12:31 am

http://achedy.penamedia.com/2007/02/24/cetak-laporan-dengan-css/kayanya sourcenya dari sini ya gan???atau kebalikannya.mantaf, tapi kurang jelas.

Hasil Survey Skill dan Gaji Pekerja ITIndonesiaTrend survey cari uang diinternetTutorial MySQL Pengenalan

BisNis PULSA Murah

Bisnis Pulsa Murah

Forum Diskusi

diskusiweb.comForum PHP

Referensi Website

Framework MVCilmuwebsite.com

Recent Comments

128bit on Cetak laporan dengan CSS dan P

indra on Tutorial Konsep Ajax I

iiuuuu on Cetak laporan dengan CSS dan P

apw on Cetak laporan dengan CSS dan P

v19 on Cetak laporan dengan CSS dan P

Statistik Blog

8,639 hits

Banner

Reviewmu.com

KapanLagi.com Trailer

Live Traffic

View Full Site

Create a free website or blog at WordPress.com.

Now Available! Download WordPress for Android