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.
sumber :
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.sumber :
0 komentar:
Posting Komentar