/**/

Read     Contoh CRUD PHP 7 Bootstrap 5 Dengan Cetak Laporan/Report Studi Kasus Tagihan PDAM - Part 2

Contoh CRUD PHP 7 Bootstrap 5 Dengan Cetak Laporan/Report Studi Kasus Tagihan PDAM - Part 2

PHP
Hirzi Widyan Putra

Tutorial Kali ini adalah membuat laporan dengan php atau report ya, yang terhubung dengan database mysql.

Laporan yang akan dibuat sudah dengan filter range waktu atau tanggal menampilkan sesuai dengan data tanggal yang kita pilih.

Ini merupakan tutorial lanjutan yang sebelumnya : https://gilacoding.com/read/contoh-crud-php-7-bootstrap-5-dengan-cetak-laporanreport-studi-kasus-tagihan-pdam-part-1, jadi kalau kalian udah bisa CRUD ya bisa sih kalau langsung lompat ke tutorial ini, makanya sengaja saya pisah juga sob.

Untuk detail ngoding bisa diyoutube  : YT Gilacoding

Apa yang perlu disiapin?

  • Koneksi internet, karena css nya kita import di situs cdn ya, jadi mesti online, kalau mau offline bisa aja kok, tinggal kalian download source paper css nya yang ada disini : https://github.com/cognitom/paper-css

Langsung saja nih, kalian tambahkan coding form untuk menuju ke laporan dibagian index.php :

<div class="card mt-3">
			<div class="card-header">
				Laporan
			</div>
			<div class="card-body">
				<table class="table table-bordered table-hover">
						 <tr>
              <th style="vertical-align: middle;">Laporan Tagihan</th>
              <th>
              	<form method="get" action="laporan-tagihan.php" class="row ms-auto" target="_blank">
              		  <div class="col-auto">
                    <input type="date" class="form-control form-control-sm" name="start" required >
                    </div>
                    <div class="col-auto">
                    s.d
                  </div>
                  <div class="col-auto">
                    <input type="date" class="form-control form-control-sm" name="end" required >
                  </div>
                     <div class="col-auto">
                    <button type="submit" class="btn btn-secondary btn-sm" name="submit" value="cetak">Cetak!</button>
                  </div>
                </form>
              </th>
            </tr>
				</table>
			</div>
		</div>

Penjelasan singkat :

  • Form menuju ke link laporan-tagihan.php, jadi kalian sesuaikan nama file laporan kalian ya
  • Lalu ada input date dengan name start, dan end artinya mencocokan laporan tanggal tagihan dengan rentang waktu tersebut.

jadinya index.php versi final saat ini setelah kalian tambahkan codingan diatas yaitu seperti berikut:

<?php
  //include atau panggil header.php yang ada folder layouts
  include('layouts/header.php');

?>

<div class="card mt-3">
			<div class="card-header">
				Laporan
			</div>
			<div class="card-body">
				<table class="table table-bordered table-hover">
						 <tr>
              <th style="vertical-align: middle;">Laporan Tagihan</th>
              <th>
              	<form method="get" action="laporan-tagihan.php" class="row ms-auto" target="_blank">
              		  <div class="col-auto">
                    <input type="date" class="form-control form-control-sm" name="start" required >
                    </div>
                    <div class="col-auto">
                    s.d
                  </div>
                  <div class="col-auto">
                    <input type="date" class="form-control form-control-sm" name="end" required >
                  </div>
                     <div class="col-auto">
                    <button type="submit" class="btn btn-secondary btn-sm" name="submit" value="cetak">Cetak!</button>
                  </div>
                </form>
              </th>
            </tr>
				</table>
			</div>
		</div>

		<div class="card mt-3">
			<div class="card-header">
				DATA TAGIHAN <a href="tambah.php" class="btn btn-sm btn-dark float-xl-end">Tambah</a>
			</div>
			<div class="card-body">
				<table class="table table-bordered table-hover">
					<thead>
						<tr class="bg-primary text-light">
							<th>No</th>
							<th>Tgl Tagihan</th>
							<th>No Pelanggan</th>
							<th>Jumlah Meter</th>
							<th>Biaya</th>
							<th>Foto</th>
							<th>Aksi</th>
						</tr>
					</thead>
					<tbody>
						<?php
							include('koneksi.php'); 
							//memanggil file koneksi
							$datas = mysqli_query($koneksi, "select * from tagihan") or die(mysqli_error($koneksi));
							//contoh crud php 7 bootstrap 4 dengan cetak laporan - studi kasus tagihan pdam

							//script untuk menampilkan data tagihan

							$no = 1;//untuk pengurutan nomor

							//cek jika data tidak kosong akan menampilkan data tagihan
							if (mysqli_num_rows($datas) > 0){

							//melakukan perulangan
							while($row = mysqli_fetch_assoc($datas)) {
						?>	

					<tr>
						<td><?= $no; ?></td>
						<td><?= $row['tgl_tagihan']; ?></td>
						<td><?= $row['no_pelanggan']; ?></td>
						<td><?= $row['jumlah_meter']; ?> m2</td>
						<td>Rp <?= $row['biaya']; ?></td>
						<td>
							<a href="foto/<?= $row['foto']; ?>" target="_blank">
							<img src="foto/<?= $row['foto']; ?>" style="width: 100px;">
							</a>
								

							</td>
						<td>
								<a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-sm btn-warning">Edit</a>
								<a href="hapus.php?id=<?= $row['id']; ?>" class="btn btn-sm btn-danger" onclick="return confirm('anda yakin ingin hapus data ini?');">Hapus</a>
						</td>
					</tr>
						<?php $no++; } ?>

						  <?php } else { ?>

             <tr>
                <td colspan="7">Data belum ada.</td>
             </tr>

            <?php }?>

					</tbody>
				</table>
			</div>
		</div>
	
<?php
//include atau panggil footer.php yang ada folder layouts
  include('layouts/footer.php');
?>

Hasil index.php final :

report-php-7

Setelah index.php kita akan membuat laporan-tagihan.php :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>LAPORAN</title>

  <!-- Normalize or reset CSS with your favorite library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">

  <!-- Load paper.css for happy printing -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">

  <!-- Untuk load bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <!-- Set page size here: A5, A4 or A3 -->
  <!-- Set also "landscape" if you need -->
  <style>@page { size: A4  }

body{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}
</style>
</head>

<!-- Set "A5", "A4" or "A3" for class name -->
<!-- Set also "landscape" if you need -->
<body class="A4 ">
 <?php
 //menampung input date start dan end dari index tadi
    $start = $_GET['start'];
    $end = $_GET['end'];          
  ?>
  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-10mm">
    <h5 class="text-center text-uppercase text-decoration-underline mt-4">Laporan Tagihan Periode : <?= $_GET['start'].' s/d '.$_GET['end']; ?></h5> 
    <table class="table table-bordered table-hover mt-4">
          <thead>
            <tr class="bg-primary text-light">
              <th>No</th>
              <th>Tgl Tagihan</th>
              <th>No Pelanggan</th>
              <th>Jumlah Meter</th>
              <th>Biaya</th>
              <th>Foto</th>
            </tr>
          </thead>
          <tbody>
            <?php
              include('koneksi.php'); 
              //memanggil file koneksi
              $datas = mysqli_query($koneksi, "select * from tagihan where tagihan.tgl_tagihan BETWEEN '$start' AND '$end'") or die(mysqli_error($koneksi));

              //script untuk menampilkan data tagihan

              $no = 1;//untuk pengurutan nomor

              //melakukan perulangan

              if (mysqli_num_rows($datas) > 0){


              while($row = mysqli_fetch_assoc($datas)) {
            ?>  

          <tr>
            <td><?= $no; ?></td>
            <td><?= $row['tgl_tagihan']; ?></td>
            <td><?= $row['no_pelanggan']; ?></td>
            <td><?= $row['jumlah_meter']; ?> m2</td>
            <td>Rp <?= $row['biaya']; ?></td>
            <td>
              <img src="foto/<?= $row['foto']; ?>" style="width: 100px;">
            
                

              </td>
          </tr>
            <?php $no++; } ?>

            <?php } else { ?>

             <tr>
                <td colspan="6">Data dengan periode tersebut tidak ditemukan.</td>
             </tr>

            <?php }?>
          </tbody>
        </table>

  </section>
</body>
</html>

Penjelasan singkat :

  • Struktur html laporannya saya copas langsung dari github : https://github.com/cognitom/paper-css
  • Kalian bisa membuat format laporan menjadi portrait dan landscape atau a4 a5
  • Contoh untuk membuat jadi A5, @page { size: A4 } , nah disini tinggal ganti A5 Lalu dibagian body <body class="A4 "> jadi <body class="A5 ">
  • Sama dengan jika mau jadi landscape tinggal @page { size: A4 landscape } dan di bagian <body class="A4 landscape">
  • Dan harus dipastikan karena ini perlu internet karena kita load css nya disitus cdn, kalau mau offline tinggal download css nya di githubnya sob
  • Saya juga load bootstrap untuk bagian tabelnya biar cantik sob, gak perlu dibikin manual cssnya
  • Load koneksi.php , dan perhatikan query mysqlnya query where tgl_tagihan blabla jangan sampai salah yaa

Hasilnya :

hasil report php

Tinggal CTRL + P sob, jadi bisa langsung print di browser kalian! Selesai deh.

print php

Struktur final dari project kali ini yaitu :

struktur php final

Sekian tutorial CRUD PHP dengan Laporan kali ini sob, untuk video youtube ada disini

Kalau ada salah kata atau coding silahkan dikoreksi atau kalau ada ditanyakan silahkan komen saja sob!

Terima kasih, tunggu tutorial selanjutnya.

Ohya sob untuk project ini bisa kalian download di github saya : https://github.com/herziwp/crud-php-bootstrap-5-dengan-laporan

 Previous Post
Top