Selamat datang kembali di BLOG resmi Jambispirit.com
Maaf lama tidak berjumpa karena penulis disibukkan dengan proyek yang menumpuk dan disibukkan dalam penyusunan tesis. >,<
Baiklah, lalu apa artikel kali ini.?
Oke kali ini penulis akan membahas cara merapikan laporan dengan CSS. Lho.?? lalu apa bedanya dengan artikel sebelumnnya yang membahas cara mencetak laopran dengan FPDF.??
Baiklah, dalam beberapa kasus, terkadang kita sulit menggunakan FPDF khususnya untuk data-data yang panjang sekali dan data yang asimetris. Masih bingung.?? baiklah berikut akan saya uraikan.
Pernahkah Anda memiliki data yang cukup panjang, jika ya, apa yang akan terjadi jika data tersebut melewati garis yang ada pada table dalam FPDF anda.?? untuk lebih jelas perhatikan gambar dibawah ini :
define('FPDF_FONTPATH', 'fpdf/font/');
require('fpdf/fpdf.php');
include "config/koneksi.php";
$pdf=new FPDF('L','cm','A4');
$pdf->Open();
$pdf->AddPage();
$pdf->AliasNbPages();
$pdf->SetMargins(1,1,1);
$pdf->SetFont('courier','B',10);
$pdf->Image('image/jambispirit.jpg', 0.5 , 0.3, 10,2);
$pdf->SetY(0.4);
$pdf->Cell(0,0.9,' JAMBISPIRIT.COM',0,0,'L');
$pdf->SetFont('courier','B',8);
$pdf->SetY(0.8);
$pdf->Cell(0,0.9,' THE PASSION OF INFORMATION TECHNOLOGY',0,0,'L');
$pdf->SetY(1.2);
$pdf->Cell(0,0.9,' IT Solution Kelas Satu',0,0,'L');
$pdf->SetY(1.6);
$pdf->Cell(0,0.9,' Jl. Orang Kayo Pingai No.04 RT.05 RW.02, 081366020805',0,0,'L');
$pdf->SetFont('Arial','B',10);
$pdf->SetY(2.5);
$pdf->Cell(0,0.9,"LAPORAN PENJELASAN",0,0,'C');
$x=$pdf->GetY();
$pdf->SetY($x+1);
$i=1;
$pdf->SetFont('Arial','B',8);
$pdf->Cell(0.5,0.6,"No",1,0,'L');
$pdf->Cell(3,0.6,"Judul 1",1,0,'L');
$pdf->Cell(2,0.6,"Judul 2",1,0,'L');
$pdf->Ln();
$pdf->SetFont('Arial','',8);
$pdf->Cell(0.5,0.6,$i,1,0,'L');
$pdf->Cell(3,0.6,"Sample",1,0,'L');
$pdf->Cell(2,0.6,"Sample Sample",1,0,'L');
$pdf->Ln();
$pdf->Cell(0.5,0.6,$i,1,0,'L');
$pdf->Cell(3,0.6,"Sample Sample",1,0,'L');
$pdf->Cell(2,0.6,"Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample",1,0,'L');
$pdf->Output();
?>
Pada gambar diatas, dapat diketahui bahwa apabla terdapat data yang panjang, maka data tersebut akan melewati batas garis dari tabel. Hal ini tentu saja menjadi masalah karena selain merusak estetika dan dapat menimpa data yang ada disebelahnya sehingga dapat merusak mengaburkan informasi yang ada. Lho ?? bukannya di FPDF ada perintah MultiCell yang dapat membuat data terlipat jika melampai batas.??
define('FPDF_FONTPATH', 'fpdf/font/');require('fpdf/fpdf.php');
include "config/koneksi.php";
$pdf=new FPDF('L','cm','A4');
$pdf->Open();
$pdf->AddPage();
$pdf->AliasNbPages();
$pdf->SetMargins(1,1,1);
$pdf->SetFont('courier','B',10);
$pdf->Image('image/jambispirit.jpg', 0.5 , 0.3, 10,2);
$pdf->SetY(0.4);
$pdf->Cell(0,0.9,' JAMBISPIRIT.COM',0,0,'L');
$pdf->SetFont('courier','B',8);
$pdf->SetY(0.8);
$pdf->Cell(0,0.9,' THE PASSION OF INFORMATION TECHNOLOGY',0,0,'L');
$pdf->SetY(1.2);
$pdf->Cell(0,0.9,' IT Solution Kelas Satu',0,0,'L');
$pdf->SetY(1.6);
$pdf->Cell(0,0.9,' Jl. Orang Kayo Pingai No.04 RT.05 RW.02, 081366020805',0,0,'L');
$pdf->SetFont('Arial','B',10);
$pdf->SetY(2.5);
$pdf->Cell(0,0.9,"LAPORAN PENJELASAN",0,0,'C');
$x=$pdf->GetY();
$pdf->SetY($x+1);
$i=1;
$pdf->SetFont('Arial','B',8);
$pdf->Cell(0.5,0.6,"No",1,0,'L');
$pdf->Cell(3,0.6,"Judul 1",1,0,'L');
$pdf->Cell(2,0.6,"Judul 2",1,0,'L');
$pdf->Ln();
$pdf->SetFont('Arial','',8);
$pdf->MultiCell(0.5,0.6,"1",1,'L');
$pdf->MultiCell(3,0.6,"Sample",1,'L');
$pdf->MultiCell(2,0.6,"Sample Sample",1,'L');
$pdf->Ln();
$pdf->MultiCell(0.5,0.6,"2",1,0,'L');
$pdf->MultiCell(3,0.6,"Sample Sample",1,0,'L');
$pdf->MultiCell(2,0.6,"Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample",1,0,'L');
$pdf->Output();
?>
Wow.. What The Hell.?? dari gambar diatas, dapat Anda lihat bahwa fungsi MultiCell pada FPDF menampilkan data dengan tidak sempurna dimana data yangkira inginkan seharusnya terlihat sebagai berikut :
Berdasarkan pengamatan diatas dan setelah membaca contoh penggunaan MultiCell pada buku “Membuat Laporan PDF untuk Aplikasi Web dengan PHP” dimana dalam buku tersebut lebih mencontohkan penggunaan MultiCell pada paragraph bukan pada table, maka penulis menyimpulkan bahwa “FPDF memiliki kelemahan dalam menampilkan data yang panjang dan asimetris dalam bentuk TABEL”
oke.. Lalu.? Apa dong solusinya.??
Untuk kasus ini, penulis menawarkan salah astu solusi, yaitu solusi BACK TO NATURE dimana dalam beberapa kasus developer dapat bebas memilih salah satunya adalah menggunakan CSS.
Penggunaan CSS sangat berguna dalam menyeting tampilan pada saat melakukan percetakan dokumen melalui browser. Contoh..
Untuk kasus ini, penulis menawarkan salah astu solusi, yaitu solusi BACK TO NATURE dimana dalam beberapa kasus developer dapat bebas memilih salah satunya adalah menggunakan CSS.
Penggunaan CSS sangat berguna dalam menyeting tampilan pada saat melakukan percetakan dokumen melalui browser. Contoh..
contoh.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/laporan2.css"/>
<title>Laporan Polisi</title></head>
<body>
<div style="text-align:center; ">
<img src="image/jambispirit.jpg" height="100px" width="200px"/><br/>
<b>LAPORAN CONTOH</b>
<hr width="200px"/>
001/II/JS
</div>
<table width="100%" border="1">
<tr>
<td valign="top">
<strong>Sample </strong></td>
<td valign="top" align="justify">Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample </td>
</tr>
<tr>
<td valign="top">
<strong>Sample</strong></td>
<td valign="top" align="justify">Sample </td>
</tr>
<tr>
<td width="23%" valign="top">
<b>Sample</b></td>
<td width="77%" valign="top" align="justify">Sample <br/></td>
</tr>
<tr>
<td colspan="2" valign="top" align="justify">
Demikianlah Laporan ini dibuat dengan yang sebenarnya,_ _ _ _ _ _ _ _ _ _ _
</td>
</tr>
<td colspan="2" valign="top" style="padding-left:500px;">
Pembuat Laopran<br/><br/><br/>
Mr
</td>
</table>
<div class="tandatangan" >
<br/>
<b>CEO JAMBISPIRIT.COM</b><br/>
<br/><br/><br/><br/><br/><hr/>
Ronald Rusli
</div>
<div class="tandatangan2">
<br/>
Jambi,
25 Febuari 2011<br/><br/><br/><br/>
<br />
<br/><hr/>
Mr. Y
</div>
</body>
</html>
laporan2.css
@charset "utf-8";
/* CSS Document */
.laporan {
font-weight: bold;
color: #00F;
font-size: 18px;
}
.laporan table tr th {
color: #000;
}
.laporan table tr td {
color: #000;
font-weight: normal;
}
.laporan table {
font-size: 14px;
}
.tandatangan{
text-align:center; width:425px;float:left;
}
.tandatangan2{
text-align:center; margin-left:545px;
}
.kop{
text-align:center;
margin-left:0px;
width:270px;
margin-bottom:-10px;
}
Gambar diatas merupakan tampilan pada browser. Namun apabila kita melakukan preview, maka terdapat perbedaan tampilan dimana hasilnya akan menjadi sedikit kacau.
Pada gambar diatas, terlihat bahwa kolom tanda tangan disebelah kanan bwah tidak sesuai dengan hasil tampilan pada browser. Hal ini terjadi karena kertas cetakan dan layar browser memiliki lebar (width) yang berbeda.
Untuk merapikannya, Anda dapat menggunakan property @media print. property ini berguna untuk mengatur tampilan pada cetakan. Ini berarti Anda dapat membuat hasil tampilan pada browser dan kertas menjadi sinkron. Untuk itu, coba Anda tambahkan kode berikut pada laporan2.css pada bagian paling bawah.
@media print {
body{
font-size:11px;
}
.tandatangan{
text-align:center; width:325px;float:left;
}
.tandatangan2{
text-align:center; margin-left:345px;
}
}
Sekarang coba Anda refresh dan preview kembali.. apa yang terjadi.??
Pada gambar diatas dapat terlihat bahwa tampilan kolom tanda tangan kini telah sesuai dengan tampilan yang ada pada browser.. hehehe..
Jadi kesimpulannya adalah
“property @media print dapat dijadikan alternative dalam mencetak halaman pada browser dimana terdapat kasus yang tidak dapat diselesaikan dnegan FPDF seperti data yang panjang dan tidak asimetris”
Oke.. Sampai disini dulu tutorial kita, be creative, be inovatif, keep inform
Sampai jumpa.!
-Ronald Rusli-
CEO & CIO Jambispirit.com
jambispirit@ayhoo.co.id
http://jambispirit.com
Jadi kesimpulannya adalah
“property @media print dapat dijadikan alternative dalam mencetak halaman pada browser dimana terdapat kasus yang tidak dapat diselesaikan dnegan FPDF seperti data yang panjang dan tidak asimetris”
Oke.. Sampai disini dulu tutorial kita, be creative, be inovatif, keep inform
Sampai jumpa.!
-Ronald Rusli-
CEO & CIO Jambispirit.com
jambispirit@ayhoo.co.id
http://jambispirit.com
Posting Komentar