Membuat Fitur Laporan

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul
Membuat Fitur Laporan
A. Deskripsi
Untuk membuat fitur laporan adalah dengan cara membaca data dari tb_transaksi
dengan menggunakan parameter tertentu untuk menseleksi data yang ditampilkan sebagai
laporan. Pada kasus project kita kali ini, kita akan menggunakan data tanggal masuk sebagai
parameter untuk melakukan filter seleksi data. Mengapa menggunakan data tersebut? Karena
jenis laporan yang akan kita buat dalam fitur ini adalah merekap pemasukan transaksi dari
tanggal sekian hingga sekian, dan kriteria yang sesuai adalah mengguankan tanggal masuk
pada tabel tb_transaksi.
Proses pembuatan fitur laporan ini dapat diakses oleh semua role user, sehingga nanti
kita buat awal pada role admin lalu duplikat pada role lainnya. Untuk membuat fitur laporan
ini kita membutuhkan beberapa proses yaitu pertama membuat tampilan untuk halaman
laporan dimana pada halaman tersebut akan menampilkan kriteria filter terlebih dahulu baru
kemudian menampilan proses hasil data laporan. Kedua adalah membuat fitur cetak dari
laporan yang sudah ditampilkan, untuk fitur cetak kita akan belajar mengeksekusi dalam 2
bentuk, bentuk pertama menggunakan print pada browser seperti pada fitur transaksi lalu
bentuk kedua dengan manipulasi file dalam bentuk pdf.
B. Membuat Halaman Laporan

Seperti yang telah kita ketahui pada deskripsi sebelumnya, untuk fitur laporan kita
memerlukan sebuah halaman tampilan yang terdiri dari 2 bagian yaitu filter data dan hasil
laporan. Sehingga pada halaman yang akan buat setelah ini akan melakukan proses eksekusi
perintah sql dan juga tampilan interface dalam satu file. Untuk itu silahkan buat terlebih
dahulu file dengan nama laporan.php lalu tuliskan sourcecode sebagai berikut.
<?php include 'header.php'; ?>
<div class="container">
<div class="panel">
<div class="panel-heading">
<h4>Filter Laporan</h4>
</div>
<div class="panel-body">
<form action="laporan" method="get">

<table class="table table-bordered table-striped">
<tr>
<th>Dari Tanggal</th>
<th>Sampai Tanggal</th>
<th width="1%"></th>
</tr>
<tr>
<td>
<br/>
<input type="date" name="tgl_dari"
class="form-control">
</td>
Bait Syaiful Rijal, M.Pd | 1

<td>
<br/>
<input type="date" name="tgl_sampai"
class="form-control">
<br/>
</td>
<td>
<br/>
<input type="submit" class="btn btn-
primary" value="Filter">
</td>
</tr>
</table>
</form>
</div>
</div>
<br/>
<?php
if(isset($_GET['tgl_dari']) && isset($_GET['tgl_sampai'])){
$dari = $_GET['tgl_dari'];
$sampai = $_GET['tgl_sampai'];
?>
<div class="panel">
<h4>Data Laporan Laundry dari <b><?php echo $dari; ?></b>
sampai <b><?php echo $sampai; ?></b></h4>
</div>
<a target="_blank" href="laporan_print.php?dari=<?php echo

$dari; ?>&sampai=<?php echo $sampai; ?>" class="btn btn-sm btn-primary"><i class="glyphicon
glyphicon-print"></i> CETAK</a>
<a target="_blank" href="laporan_pdf.php?dari=<?php echo
glyphicon-print"></i> CETAK PDF</a>
<br/>
<br/>
<tr>
<th width="1%">No</th>
<th>Invoice</th>
<th>Tanggal Masuk</th>
<th>Outlet</th>
<th>Pelanggan</th>
<th>Berat (Kg)</th>
<th>Tgl. Selesai</th>
<th>Paket</th>
<th>Harga</th>
<th>Status Bayar</th>
<th>Status Barang</th>

</tr>
<?php
// koneksi database
include '../koneksi.php';
// mengambil data pelanggan dari database

$data = mysqli_query($koneksi,"select * from
tb_transaksi,tb_pelanggan,tb_outlet,tb_paket where
transaksi_pelanggan=pelanggan_id and transaksi_outlet=outlet_id and
transaksi_paket=paket_id
and date(transaksi_masuk) > '$dari' and date(transaksi_masuk) <
'$sampai' order by transaksi_id desc");
$no = 1;
// mengubah data ke array dan menampilkannya dengan
perulangan while
while($d=mysqli_fetch_array($data)){
?>
<tr>
<td><?php echo $no++; ?></td>
<td>INVOICE-<?php echo
$d['transaksi_id']; ?></td>
<td><?php echo $d['transaksi_masuk']; ?
></td>
<td><?php echo $d['outlet_nama']; ?></td>
<td><?php echo $d['pelanggan_nama']; ?
></td>
<td><?php echo $d['transaksi_berat']; ?
></td>
<td><?php echo
$d['transaksi_selesai']; ?></td>
<td><?php echo $d['paket_jenis']; ?></td>
<td><?php echo "Rp.
".number_format($d['transaksi_harga']) ." ,-"; ?></td>
<td>
<?php
if($d['transaksi_bayar']=="belum"){
echo "<div class='label label-danger'>BELUM
BAYAR</div>";
}else if($d['transaksi_bayar']=="lunas"){
echo "<div class='label label-success'>SUDAH
LUNAS</div>";
}
?>
</td>
<td>
<?php
if($d['transaksi_status']=="proses"){
echo "<div class='label label-warning'>PROSES</div>";
}else if($d['transaksi_status']=="selesai"){
echo "<div class='label label-info'>SELESAI</div>";
}else if($d['transaksi_status']=="diambil"){
echo "<div class='label label-success'>DIAMBIL</div>";
}
?>
</td>
</tr>

<?php
}
?>
</table>
</div>
</div>
<?php } ?>
</div>
<?php include 'footer.php'; ?>
Jika file sudah siap pastikan kalian telah mengaktifkan link pada menu navbar dalam
file header.php untuk mengakses file laporan.php. Setelah itu silakan akses halaman laporan
yang telah dibuat, maka akan didapatkan tampilan sebagai berikut.
Gambar 1. Tampilan awal halaman laporan
Perhatikan pada gambar 1, ketika kita mengakses halaman laporan pertama kali hanya
akan menampilkan form untuk filter data. Setelah kita mengisikan data form parameter
tanggal untuk filter maka form tersebut akan memproses dan menampilan data tabel laporan
seperti berikut.
Gambar 2. Hasil data laporan.
Pada gambar 2 adalah data laporan hasil dari filter yang diproses. Pada proses yang
dilakukan diatas penulis mencoba menggunakan parameter tanggal mulai dari tanggal 1
agustus hingga 31 agustus, sehingga semua data transaksi yang ada dalam database dengan
kriteria tanggal masuk sesuai rentang parameter akan ditampilan. Jika diperhatikan susunan

data yang ditampilan sama persis ketika kita membuat fitur transaksi, hanya saja ada
tambahan 2 tombol eksekusi untuk cetak yaitu cetak biasa dan cetak pdf. Lalu, bagaimanakah
cara kerja dari file laporan.php untun memproses fitur laporan ini?silakan perhatikan pada
penjelasan sebagai berikut.


<form action="laporan" method="get">
<tr>
<th>Dari Tanggal</th>
<th>Sampai Tanggal</th>
<th width="1%"></th>
</tr>
<tr>
<td>
<br/>
<input type="date" name="tgl_dari" class="form-control">
</td>
<td>
<br/>
<input type="date" name="tgl_sampai" class="form-control">
<br/>
</td>
<td>
<br/>
<input type="submit" class="btn btn-primary" value="Filter">
</td>
</tr>
</table>
</form>
Perhatikan pada syntax diatas, itu merupakan syntax untuk membuat form filter. Pada
bagian action dalam form merujuk pada sebuah proses bernama “laporan”, dimana laporan
tersebut merujuk pada syntax sebagai berikut.


<?php
if(isset($_GET['tgl_dari']) && isset($_GET['tgl_sampai'])){
$dari = $_GET['tgl_dari'];
$sampai = $_GET['tgl_sampai'];
?>
<div class="panel">
<h4>Data Laporan Laundry dari <b><?php echo $dari; ?></b>
sampai <b><?php echo $sampai; ?></b></h4>
</div>

<a target="_blank" href="laporan_print.php?dari=<?php echo

glyphicon-print"></i> CETAK</a>
<a target="_blank" href="laporan_pdf.php?dari=<?php echo
glyphicon-print"></i> CETAK PDF</a>
<br/>
<br/>
<tr>
<th>Invoice</th>
<th>Outlet</th>
<th>Pelanggan</th>
<th>Berat (Kg)</th>
<th>Paket</th>
<th>Harga</th>
</tr>
<?php
// koneksi database
// mengambil data transaksi dari database

transaksi_paket=paket_id and date(transaksi_masuk) > '$dari' and
date(transaksi_masuk) < '$sampai' order by transaksi_id desc");
$no = 1;
perulangan while
?>
<tr>
></td>
></td>
></td>
<td><?php echo
<td><?php echo "Rp.
<td>

<?php
BAYAR</div>";
LUNAS</div>";
}
?>
</td>
<td>
<?php
}
?>
</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<?php } ?>
Perhatikan pada syntax diatas pada bagian yang diberi tanda bold. Seperti itulah
bagian dari syntax dalam file laporan.php melakukan proses eksekusi data laporan. Silakan
kalian pahami terlebih dahulu sebelum melanjutkan pada materi selanjutnya.
C. Membuat Fitur Cetak Data Laporan

Untuk membuat fitur cetak laporan ini kita menggunakan cara yang sama ketikan
membuat fitur cetak invoice ketika menyelesaikan fitur transaksi pada modul sebelumnya.
Cara yang digunakan adalah menggunakan sebuah function dari javascript untuk memanggil
fitur print dari browser. Selain menggunakan javascript perlu diingat kembali bahwa ketika
membuat fitur cetak atau print kita perlu menyiapkan layout dari halaman yang akan di print.
Dalam fitur kali ini kita akan menggunakan file dengan nama laporan_print.php. Silakan buat
file tersebut lalu tuliskan syntax sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi LyJo</title>
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
</head>

<body>

<?php
session_start();
if($_SESSION['status']!="admin_login"){
header("location:../index.php?pesan=belum_login");
}
?>
<?php
// koneksi database
?>
<div class="container">
<center><h2>LyJo " Laundry Jogja "</h2></center>

<br/>
<br/>
<?php
if(isset($_GET['dari']) && isset($_GET['sampai'])){
$dari = $_GET['dari'];
$sampai = $_GET['sampai'];
?>
<h4>Data Laporan Laundry dari <b><?php echo $dari; ?></b> sampai
<b><?php echo $sampai; ?></b></h4>
<tr>
<th>Invoice</th>
<th>Outlet</th>
<th>Pelanggan</th>
<th>Berat (Kg)</th>
<th>Paket</th>
<th>Harga</th>
</tr>
<?php
// mengambil data pelanggan dari database

and date(transaksi_masuk) > '$dari' and date(transaksi_masuk) <
'$sampai' order by transaksi_id desc");
$no = 1;
perulangan while

?>
<tr>
></td>
></td>
></td>
<td><?php echo
<td><?php echo "Rp.
<td>
<?php
BAYAR</div>";
LUNAS</div>";
}
?>
</td>
<td>
<?php
}
?>
</td>
</tr>
<?php
}
?>
</table>
<?php } ?>
</div>
<script type="text/javascript">
window.print();
</script>
</body>
</html>

Untuk mengaktifkan fitur cetak jangan lupa tambahkan sebuah link pada tombol yang
sudah disediakan sesuai dengan nama tombolnya sebagai berikut.
<a target="_blank" href="laporan_print.php?dari=<?php echo $dari; ?>&sampai=<?php echo

$sampai; ?>" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-print"></i>
CETAK</a>
Jika kita jalankan fitur tersebut maka akan kita dapatkan hasil tampilan dari program
menjadi sebagai berikut.
Gambar 3. Hasil fitur print laporan
D. Membuat Fitut Cetak Pdf Laporan

Untuk menegembangkan fitur ini kita akan menggunakan sebuah library bernama
DomPdf. Library ini bisa digunakan untuk melakukan eksekusi dari php diconvert menjadi
output beruba file pdf. Cara instalatasi dari library ini sama dengan ketika kita instalasi
library sebelumnya. Untuk itu silakan download terlebih dahulu library DomPdf yang sudah
tersedia dalam classroom lalu copy pada file project kita sebagai berikut.
Gambar 4. Menambahkan library DomPdf dalam project

Dalam fitur kali ini kita akan menggunakan file dengan nama laporan_pdf.php.
Silakan buat file tersebut lalu tuliskan syntax sebagai berikut. Namun sebelum itu, pastikan
telah menambahkan sebuah link pada tombol yang sudah disediakan sesuai dengan nama
tombolnya sebagai berikut.
<a target="_blank" href="laporan_pdf.php?dari=<?php echo $dari; ?>&sampai=<?php echo

$sampai; ?>" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-print"></i>
CETAK</a>
<?php
// menghubungkan dengan dompdf
require_once("../assets/DomPdf/autoload.inc.php");
// koneksi database
$html = '<!DOCTYPE html>';

$html .= '<html>';
$html .= '<head>';
$html .= ' <title>Aplikasi LyJo</title>';
$html .= '</head>';
$html .= '<body>';
$html .= '<center><h2>LyJo " Laundry Jogja "</h2></center>';
$dari = $_GET['dari'];
$sampai = $_GET['sampai'];
$html .= '<h4>Data Laporan Laundry LyJo dari <b>'.$dari.'</b> sampai <b>'.

$sampai.'</b></h4>';
$html .= '<table border="1" width="100%">';
$html .= '<tr>';
$html .= '<th width="1%">No</th>';
$html .= '<th>Invoice</th>';
$html .= '<th>Tanggal Masuk</th>';
$html .= '<th>Outlet</th>';
$html .= '<th>Pelanggan</th>';
$html .= '<th>Berat (Kg)</th>';
$html .= '<th>Tgl. Selesai</th>';
$html .= '<th>Paket</th>';
$html .= '<th>Harga</th>';
$html .= '<th>Status Bayar</th>';
$html .= '<th>Status Barang</th>';
$html .= '</tr>';
$data = $data = mysqli_query($koneksi,"select * from

and date(transaksi_masuk) > '$dari' and date(transaksi_masuk) < '$sampai' order by
transaksi_id desc");
$no = 1;
$html .= '<tr>';
$html .= '<td>'.$no++.'</td>';
$html .= '<td>INVOICE-'.$d['transaksi_id'].'</td>';
$html .= '<td>'.$d['transaksi_masuk'].'</td>';
$html .= '<td>'.$d['outlet_nama'].'</td>';
$html .= '<td>'.$d['pelanggan_nama'].'</td>';
$html .= '<td>'.$d['transaksi_berat'].'</td>';

$html .= '<td>'.$d['transaksi_selesai'].'</td>';
$html .= '<td>'.$d['paket_jenis'].'</td>';
$html .= '<td> Rp. '.number_format($d["transaksi_harga"]).' ,-</td>';
$html .= '<td>';
$html .= "BELUM BAYAR";
$html .= "SUDAH LUNAS";
}
$html .= '</td>';
$html .= '<td>';
$html .= "PROSES";
$html .= "SELESAI";
$html .= "DIAMBIL";
}
$html .= '</td>';
$html .= '</tr>';
$html .= '</table>';
$html .= '</body>';
$html .= '</html>';
//memanggil lib class dompdf

use Dompdf\Dompdf;
use Dompdf\Options;
$dompdf = new Dompdf();

$dompdf->set_paper('a4', 'potrait');
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream('laporan_laundry_LyJo.pdf');
Setelah kita siapkan segala file yang telah dibutuhkan, ketika kita jalankan fitur ini
maka program akan langsung membuat kita mengunduh sebuah file pdf dengan nama
“laporan_laundry_LyJo.pdf”. Dengan menyelesaikan fitur ini maka keseluruhan fitur yang
ada dalam project aplikasi web kita kali ini. Silakan pahami semua proses yang telah
dikerjakan. Selanjutnya, untuk materi terakhir berikutnya adalah mengenai finalisasi project
ini dengan memenuhi semua fitur role yang tersedia dalam aplikasi.
__Selamat Belajar dan Berkarya__

Membuat Fitur Laporan

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Fitur Laporan

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Membuat Fitur Laporan

B. Membuat Halaman Laporan

<?php include 'header.php'; ?>

<form action="laporan" method="get">

Bait Syaiful Rijal, M.Pd | 1

<a target="_blank" href="laporan_print.php?dari=<?php echo

Bait Syaiful Rijal, M.Pd | 2

// mengambil data pelanggan dari database

Bait Syaiful Rijal, M.Pd | 3

<?php include 'footer.php'; ?>

Gambar 1. Tampilan awal halaman laporan

Gambar 2. Hasil data laporan.

Bait Syaiful Rijal, M.Pd | 4

Bait Syaiful Rijal, M.Pd | 5

<a target="_blank" href="laporan_print.php?dari=<?php echo

// mengambil data transaksi dari database

Bait Syaiful Rijal, M.Pd | 6

C. Membuat Fitur Cetak Data Laporan

<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

Bait Syaiful Rijal, M.Pd | 7

<center><h2>LyJo " Laundry Jogja "</h2></center>

// mengambil data pelanggan dari database

Bait Syaiful Rijal, M.Pd | 8

Bait Syaiful Rijal, M.Pd | 9

<a target="_blank" href="laporan_print.php?dari=<?php echo $dari; ?>&sampai=<?php echo

Gambar 3. Hasil fitur print laporan

D. Membuat Fitut Cetak Pdf Laporan

Gambar 4. Menambahkan library DomPdf dalam project

Bait Syaiful Rijal, M.Pd | 10

<a target="_blank" href="laporan_pdf.php?dari=<?php echo $dari; ?>&sampai=<?php echo

$html = '<!DOCTYPE html>';

$html .= '<h4>Data Laporan Laundry LyJo dari <b>'.$dari.'</b> sampai <b>'.

$data = $data = mysqli_query($koneksi,"select * from

Bait Syaiful Rijal, M.Pd | 11

//memanggil lib class dompdf

$dompdf = new Dompdf();

__Selamat Belajar dan Berkarya__

Bait Syaiful Rijal, M.Pd | 12

Anda mungkin juga menyukai

Selamat Belajar dan Berkarya