CandraLab

IT Pro & Developer Resource

Menu Close

Membuat Print Preview dengan PHP

Laporan adalah suatu yang wajib dalam sebuah transaksi atau proses bisnis. Tidak jauh berbeda dengan aplikasi desktop, Aplikasi berbasis web juga membutuhkan laporan untuk di cetak atau di download dengan format lain seperti PDF atau XLS. Tiga artikel kedepan akan membahas tentang teknik membuat laporan berbasis web. Untuk teknik pertama adalah membuat laporan dengan format cetak. Biasanya teknik ini dipakai saat user ingin membuat laporan penjualan, laporan transaksi, laporan harian dan sebagainya.

Prasyarat
Dalam panduan ini, saya menggunakan CSS framework bernama Twitter Bootstrap dan XAMPP 1.7.4 di Windows XP. Twitter bootstrap sifatnya opsional karena dia hanya dipakai untuk memformat tampilan dan tabel data. Nama databasenya adalah upahdb dengan nama tabel umr2013. Berikut ini adalah tampilan dari Print preview.

Contoh print preview laporan data UMR tahun 2013

Soure code

Ini adalah potongan kode utama dari halaman laporan yang akan kia buat. Untuk penjelasan, lihat source codenya. Ingat, kalau mau belajar jangan asal comot, lihat penjelasan di source codenya


<html>
	<head>
	<!-- CSS bootstrap untuk menampilkan halaman secara cantik -->
	<link href="../assets/css/bootstrap.css" rel="stylesheet">
	<style type="text/css">	
	/* CSS untuk memformat halaman */	
	body {
			padding-top: 20px;
			padding-bottom: 40px;
			font-size: 0.7em;
	}
</style>
	</head>
	<body>
		<div class='span8  offset2'>
		<h2 style='text-align: center'> UMR 2013</h2>
		<hr>
		<table  class="table  table-condensed table-hover">
		<thead>
		<th><td><b>Propinsi </b></td><td class='pull-right'><b>Upah </b></td></th>
		</thead>
		<tbody>
		<?php
					
	require ('../inc/config.php');
	/* query SQL untuk mengambil data dari database */
$query="select * from umr2013";
$result=mysql_query($query) or die(mysql_error());
$no=1;
/*proses menampilkan data kedalam tabel 
 * perhatikan ada format_rupiah, fungsi ini agar data tampil dengan 
 * format rupiah, data aslinya hanya angka bisa, 
  lihat di file config.php  */
while($rows=mysql_fetch_object($result)){
?>
	<tr>
	</td><td><? echo $rows -> no;?></td>
	<td><?	echo $rows -> propinsi;?></td>			
	<td ><p class='pull-right'><? echo format_rupiah($rows -> upah);?></p></td>
	</tr>
<? }?>
	</tbody>
	</table>
	<p align='center'>
	<!-- kode untuk menampilkan tombol print dan saat di klik 
	 akan membuka printer dialog -->

<a href="umr2013_cetak.php" cls='btn' onClick="window.print();return false">
	 <i class='icon-print'></i>Cetak </a>
			</p>
		</div>
	</body>
</html>

Soure code

source code lengkap dan script SQL databasenya bisa anda download disini.