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.
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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <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.
Comments
Post a Comment
terima kasih telah berpartisipasi pada blog kami