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.

Categories: PHPWeb

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

33 Comments

Anonymous · 9 July , 2018 at 9:55 am

mas kalo mau bikin hasil printnya jadi 2 kolom gimana ya?

hakim · 29 October , 2016 at 12:33 pm

mas, jika data nya banyak, ga cukup satu lembar biasanya header table nya ada dua dan gak beraturan, cara nya gimana ya biar bisa cuma satu header table

wawan · 26 February , 2016 at 10:50 am

terimaksih mas, jadi pencerahan

Mus Koto · 31 December , 2015 at 9:39 am

Salam kenal,
Mas Candra, saya sangat berterima kasih menemukan web candra ini. Saya sdg mencari fasilitas cetak. ALhamdulillah terjawab di sini. Semoga mas Candra sehat dan sukses slalu! telah ikhlas berbagi ilmunya.izinkan saya sedot utk dipelajari.

Oh, saya sedang membuat fasilitas cetak struk penjualan di kantor saya bekerja pakai kertas continuous form.. Tapi masih belum ketemu jurusnya. Mohon dibantu jika mas Candra punya coding/script cetak struk dengan PHP & MYSql. Jika ada boleh donk di-share di sini, atau kirim ke email saya: mus.koto@gmail.com.

Terima kasih mas Canda.
Mus Koto

Febrian · 11 November , 2015 at 2:19 am

Klo mau di cetak pakai dotprint bisa kah??

Kiki Setiawan · 25 July , 2015 at 1:23 pm

Bagus bahasannya Om Candra, Salam :D
Membantu sekali, saya sedang buat program untuk Kuliah ^_^

Deni Setiawan · 13 July , 2015 at 11:48 am

Nice info banget gan, semoga bisa tambah masukan buat website saya jadi lebih baik lagi SEOnya :D

Anonymous · 22 January , 2015 at 8:09 am

Sory mengganggu bang, kenapa hasil runnya no database selected padahal sudah import databasenya yang namanya upahdb

infonitas · 16 January , 2015 at 9:27 am

Terimakasih Infonya gan…

Baca jg Info Komunitas Online Megapolitan. http://www.infonitas.com

Anonymous · 4 August , 2014 at 2:40 pm

inikan pakai xampp ya?
kalau pakai apache2triad gmn ya ?

sempat coba metode lain, bisa proses di xampp tapi di apache2triad tidak bisa…

naufal · 9 May , 2014 at 10:12 am

Mas, saya sudah coba download filenya dan pada saat saya coba ada error. Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\test\print\umr2013\umr2013_view.php on line 35

kira-kira itu kesalahannya dimana yah mas,.
makasi sebelomnya

atiq azizi · 27 January , 2014 at 2:18 pm

wah… ini yang saya cari… sangat membantu mas!
sama mau tanya mas,
(1) gimana buat laporan di php seting orientasi kertas landscape? soalnya kolom yang mau ditampilkan banyak.
(2) gimana seting jika printer type kertas Rol?
.
mohon bantuannya!
terima kasih.

prima · 20 December , 2013 at 11:22 am

mas mo tanya donk
itu gmn kalau mau nyetting tampilan hasil cetakannya
misalnya di saya jadikan pdf biar tampilan hasil cetakannya ada kop suratnya misalkan

makasih

jeffry · 2 December , 2013 at 8:52 am

function LoadData($file)
{
// Read file lines
$lines = file($file);
$data = array();
foreach($lines as $line)
$data[] = explode(‘;’,trim($line));
return $data;
}

file diatas dalam file umr2012_pdf.php , fungsinya untuk apa ya.. kalau tanpa fungsi itu apa yang terjadi, maaf masih newbie

satbud · 22 November , 2013 at 11:22 am

Mas, saya sudah coba download filenya dan pada saat saya coba ada error. Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\test\print\umr2013\umr2013_view.php on line 53

kira-kira itu kesalahannya dimana yah mas,.
makasi sebelomnya

    Candra Adi Putra · 22 November , 2013 at 12:24 pm

    short_open_tag di php.ini di aktifkan…

    satbud · 22 November , 2013 at 1:26 pm

    sudah saya edit php.ini kira-kira seperti ini
    ; short_open_tag
    ; Default Value: On
    ; Development Value: On
    ; Production Value: On

    masih tidak bisa

    Candra Adi Putra · 22 November , 2013 at 1:56 pm

    itu bukan itu bro, itu kan komentar, setiap yang ada titik koma diawal baris itu komentar, ya ga ngefek lah, liat bari s
    sektiar 220-230
    short_open_tag = On
    itu yang benar…
    baru restart xamppnya

    satbud · 22 November , 2013 at 2:53 pm

    makasi mas, udah jalan…

    fajria · 21 April , 2014 at 11:50 am

    berarti ada kurung kurawal/tag buka lain yang blum ditutup. :)

Andika · 7 November , 2013 at 1:51 pm

matur nuwun mas menambah ilmu..

bakron · 20 September , 2013 at 12:30 am

tuker linkkk kang,, ni baru belajar coding…

jenny · 19 September , 2013 at 12:46 am

mantab , share2 ilmu lagi yaaa… ijin sedooot

heri · 30 August , 2013 at 10:57 pm

mantab gan, share ilmunya ga tanggung-tanggung…..
thanks….

riswan · 22 June , 2013 at 10:25 am

Ini baru mantap bank….
Ngasih kode program sekaligus dengan penjelasannya…..
Lanjut terus bang saya masih baru di php dan akan terus blajar php….
Tolong di bahas juga (dengan source codenya) pencetakan tabel laporan langsung (directly) ke printer dengan garis-garis horizontal dan vertikal seperti layaknya garis-garis di excel…
kalau bisa secepatnya bang………:) :)
Penjelasannya sangat membantu, trims…

    Candra Adi Putra · 23 June , 2013 at 12:26 am

    itu cuman mainan border aja.. seting tabelnya border=1

rendi pribadi · 7 June , 2013 at 7:04 pm

terimakasih ya bang, senang bisa ketemu sama web ini, semoga ilmunya makin bertambah

    Candra Adi Putra · 11 June , 2013 at 1:47 pm

    amin

    Rangga · 24 March , 2015 at 9:17 pm

    Mas pas waktu print preview kok kurang beraturan itu ngaturnya gimana ya Mas..,??

standrett · 13 March , 2013 at 11:49 am

T e r i m a k a s i h !!!!!

El Akbar · 24 February , 2013 at 11:06 pm

asik banged web nya
dak bikin bosen berkunjung

rifdaym · 14 January , 2013 at 1:04 pm

Terimakasih!! sangat membantu :)

Tinggalkan Komentar plz!

This site uses Akismet to reduce spam. Learn how your comment data is processed.