/**/

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

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

Masih banyak yang request untuk CRUD sekalian report / laporan nya, nah kesempatan kali ini saya buatin tutorialnya yang singkat saja dan bisa kalian copas codingannya, saya selipin juga penjelasan tapi gak detail - detail banget biar gak bingung hehe CRUD sekarang tentang tagihan PDAM yang sederhana saja.

Contoh CRUD PHP dengan Bootstrap kali ini merupakan upgrade atau penyempurnaan dari tutorial yang ini sob : https://gilacoding.com/read/crud-php-7-sederhana-dengan-bootstrap-4-tutorial-web

Untuk detail ngoding bisa diyoutube  : YT Gilacoding

Apa aja sih yang berbeda?

  • Udah pakai bootstrap 5
  • Gak perlu download Bootstrap 5 nya, langsung kita load dari situs cdn.jsdelivr.net, tapi wajib internet (gak perlu kenceng internet nya kok yang penting terhubung aja), kalau mau load di projectnya ya mesti download bootstrap kaya tutorial sebelumnya sob
  • Ada Contoh Report / Laporan nya dengan tanggal yang dipilih
  • Layout dipecah menjadi header, body dan footer (tujuannya biar mau ubah header ckup di bagian header aja, gak perlu di semua file)
  • Upload gambar, file terpindah ke folder project
  • Dengan contoh project tagihan pdam

#note : diharapkan selain kamu dapat copy & paste, sekalian dipelajarin juga yaa fungsi dari coding – coding tersebut apa. Karena gak semuanya dapat saya jelasin sob, kalian mesti cari tau juga diluar gilacoding yaa yang gak saya jelasin.

#database

Buat database dengan nama pdam

Lalu buat tabel dengan nama tagihan dengan struktur tabel kolom sebagai berikut :

crud php

Nah kalau gamau pusing, nih tinggal copas dan jalankan di query sql phpmyadmin nya sob :

CREATE TABLE pdam.tagihan ( id INT NOT NULL AUTO_INCREMENT ,  tgl_tagihan DATE NULL ,
no_pelanggan VARCHAR(50) NULL ,  jumlah_meter INT NULL ,  biaya INT NULL ,  
foto VARCHAR(250) NULL ,PRIMARY KEY  (id)) ENGINE = InnoDB;

#php

Folder Project saya kali ini dengan nama pdam, sudah tau dong harus taroh dalam folder htdocs ya!

pdam-project

Buat file index.php, didalam file index.php, buat struktur html seperti biasa :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
  <h1>Testing</h1>
</body>
</html>

Nah setelah itu, kita import css dan js bootstrap 5 nya secara online biar lebih ringkas aja ni sob :

bootstrap5-crud

Jadinya index.php sementara seperti ini sob :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>PDAM - GILACODING</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Tapi kali ini berbeda dengan contoh sebelumnya sob, index ini akan kita bagi jadi 3 bagian : header, footer dan body.

Dibagian body ini lah yang kita ubah-ubah, jadi setiap file tambah , edit kita hanya perlu ubah bagian body saja.

Jadi misalkan bagian header kita ada yang berubah, kita hanya edit dibagian file header saja, tidak perlu lagi ubah dibagian index, tambah, edit, dll

 

Mungkin yang masih awam, agak bingung ya? Kenapa sih harus dipecah jadi 3 bagian header, body dan footer? Gpp sob ikutin aja dulu, suatu saat ini pasti kepake dan kalian akan paham dengan seringnya membuat project-project php lainnya. Karena kalau dijelasin secara rinci malah bikin tambah bingung, mending ikutin aja dulu yaa… nanti pasti paham kok setelah project lebih besar yang akan kalian kerjain misal tugas PKL maupun Skripsi hehehe

Oke Lanjut, Buat dulu folder layouts lalu buat file header.php dan footer.php

layout-php-header footer

Isi coding header.php yang sudah saya tambahkan coding navbar bootstrap :

<!DOCTYPE html>
<html lang="en">
<title>PDAM | GILACODING</title>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>
<body class="m-3">

<div class="container col-md-10 mt-2">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">PDAM</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="index.php">Tagihan</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Sekarang isi coding footer.php :

</div> <!-- end of container class -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Nah kembali ke index.php, isinya sekarang seperti ini :

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

?>
	<h1>Disini akan kita isi tabel</h1>
	
<?php
//include atau panggil footer.php yang ada difolder layouts
  include('layouts/footer.php');
?>

Hasil index.php sementara sob yang sudah kita pecah:

index layouts

Penjelasan singkat :

  • Terdapat include header dan footer sesuai nama foldernya dan nama filenya
  • Pastikan include header dan footer sesuai juga dengan struktur aslinya, misal bagian header diatas, lalu bagian body, lalu bagian footer paling bawah

Selanjutnya untuk menampilkan data tabel tagihan dari database, kita perlu buat penghubungnya dulu yaitu koneksi.php

<?php

$server 	= "localhost";
$username	= "root";
$pass		= "";
$db 		= "pdam"; //sesuaikan nama databasenya
$koneksi = mysqli_connect($server, $username, $pass, $db); //pastikan urutan pemanggilan variabel nya sama.

//untuk cek jika koneksi gagal ke database
if(mysqli_connect_errno()) {
	echo "Koneksi gagal : ".mysqli_connect_error();
}

Setelah koneksi selesai kita tambahkan, kita ubah file index.php tadi dan kita lengkapi dengan codingan untuk menampilkan tabel pakai codingan html dan codingan bootstrap, jadi file index.php sementara menjadi seperti berikut ini :

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

?>
		<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));
							

							//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');
?>

Hasilnya index sementara :

index bootstrap 5

Penjelasan :

  • Dicoding index sebagian sudah saya tambahkan komentar penjelasan coding atau fungsi nya
  • Jangan lupa menambahkan link tujuan misal ke tambah.php, edit, hapus dsb
  • Bagian edit.php?id, artinya kita perlu id baris yang akan kita edit, misal kita akan edit tagihan dengan id no 1 , atau kita akan hapus tagihan dengan id 1
  • Sesuaikan nama variable php dengan yang ada di struktur tabel tagihan
  • Pada kolom foto , ada link yang menuju ke foto tersebut, dengan folder foto/namafile yang kita simpan di tambah, nanti kita akan buat folder foto dibagian tambah.php
  • Jangan lupa include kan juga file koneksi.php

Membuat bagian tambah.php, tapi sebelum itu kita buat dulu folder foto ya, buat naroh file foto saat kita upload, ini wajibbb jangan lupaa!

upload foto bootstrap

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

?>
	
		<div class="card mt-3">
			<div class="card-header">
				Tambah Tagihan
			</div>
			<div class="card-body">
				<form action="" method="post" role="form" enctype="multipart/form-data" >
					<div class = "col  col-4"> 
						<label>Tanggal Tagihan</label>
						<input type="date" name="tgl_tagihan" required="" class="form-control">
					</div>
					<div class = "mt-2 col"> 
						<label>No. Pelanggan</label>
						<input type="text" name="no_pelanggan" required="" class="form-control">
					</div>
					<div class = "mt-2 col"> 
						<label>Jumlah Meter</label>
						<div class="input-group mb-3">
						 	<input type="number" min="0" name="jumlah_meter" class="form-control">
						 	<span class="input-group-text">m2</span>
						</div>
					</div>
					<div class = "mt-2 col"> 
						<label>Biaya Tagihan</label>
						<div class="input-group mb-3">
						 	<span class="input-group-text">Rp</span>
							<input type="number" min="0" name="biaya" class="form-control">
						</div>
					</div>

					<div class = "mt-2 col "> 
						<label>Foto</label>
						 <input type="file" name="foto" required="" class="form-control"/>
					</div>


					<button type="submit" class="btn btn-primary mt-3" name="submit" value="simpan">Simpan</button>
				</form>

				<?php
				include('koneksi.php');
				
				//melakukan pengecekan jika button submit diklik maka akan menjalankan perintah simpan dibawah ini
				if (isset($_POST['submit'])) {
					//menampung data dari inputan
					$tgl_tagihan = $_POST['tgl_tagihan'];
					$no_pelanggan = $_POST['no_pelanggan'];
					$jumlah_meter = $_POST['jumlah_meter'];
					$biaya = $_POST['biaya'];

					$nama_foto1   = $_FILES['foto']['name'];
			        $file_tmp1    = $_FILES['foto']['tmp_name'];   
			        //untuk acak nama file jadi sebagai angka unik, agar nama file tidak sama
			        $acak1      = rand(1,99999);


			          if($nama_foto1 != "") {
			          	//memberi nama baru pada foto yang diupload
			            $nama_unik1     = $acak1.$nama_foto1;
			            //upload ke folder foto
			            move_uploaded_file($file_tmp1,'foto/'.$nama_unik1);
			          } else {
			            $nama_unik1 = NULL;
			          }
			          
			        $foto = $nama_unik1;

					//query untuk menambahkan tagihan ke database, pastikan urutan nya sama dengan di database
					$datas = mysqli_query($koneksi, "insert into tagihan (tgl_tagihan,no_pelanggan,jumlah_meter,biaya,foto)values('$tgl_tagihan', '$no_pelanggan', '$jumlah_meter', '$biaya', '$foto')") or die(mysqli_error($koneksi));
					//id tagihan tidak dimasukkan, karena sudah menggunakan AUTO_INCREMENT, id akan otomatis

					//ini untuk menampilkan alert berhasil dan redirect ke halaman index
					echo "<script>alert('data berhasil disimpan.');window.location='index.php';</script>";
				}
				?>
			</div>
		</div>
<?php
//include atau panggil footer.php yang ada folder layouts
  include('layouts/footer.php');
?>

tambah php bootstrap 5

Penjelasan singkat:

  • Pastikan folder foto udah dibuat ya
  • Name pada bagian form input, pastikan sesuai dengan database, misal pakai _ ya kalian pakai _ (garisbawah juga)
  • Sebenarnya name ini tidak harus sama, tapi biar gak ribet, samain aja Pada bagian <form> pastikan lengkap seperti ini ya <form action="" method="post" role="form" enctype="multipart/form-data" > , yaitu enctype="multipart/form-data" karena pada default nya coding tersebut tidak ada, itu untuk keperluan upload foto

 

Coba deh tambahin, kalau belum bisa atau ada error pastikan name maupun nama field , lalu bagian (,) query mysql harus teliti ya!

Selanjutnya kita pada bagian edit.php, buat file edit.php dengan coding berikut :

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

?>
	
	<div class="card mt-3">
			<div class="card-header">
				Edit Tagihan
			</div>
			<div class="card-body">
				<?php
				include('koneksi.php');

				$id = $_GET['id']; //mengambil id tagihan yang ingin diubah

				//menampilkan tagihan berdasarkan id
				$data = mysqli_query($koneksi, "select * from tagihan where id = '$id'");
				$row = mysqli_fetch_assoc($data);

				?>
				<form action="" method="post" role="form" enctype="multipart/form-data">

					<!-- ini digunakan untuk menampung id yang ingin diubah -->
					<input type="hidden" name="id" required="" value="<?= $row['id']; ?>">

					<div class = "col  col-4"> 
						<label>Tanggal Tagihan</label>
						<input type="date" name="tgl_tagihan" required="" class="form-control" value="<?= $row['tgl_tagihan']; ?>">
					</div>
					<div class = "mt-2 col"> 
						<label>No. Pelanggan</label>
						<input type="text" name="no_pelanggan" required="" class="form-control" value="<?= $row['no_pelanggan']; ?>">
					</div>
					<div class = "mt-2 col"> 
						<label>Jumlah Meter</label>
						<div class="input-group mb-3">
						 	<input type="number" min="0" name="jumlah_meter" class="form-control" value="<?= $row['jumlah_meter']; ?>">
						 	<span class="input-group-text">m2</span>
						</div>
					</div>
					<div class = "mt-2 col"> 
						<label>Biaya Tagihan</label>
						<div class="input-group mb-3">
						 	<span class="input-group-text">Rp</span>
								<input type="number" min="0" name="biaya" class="form-control" value="<?= $row['biaya']; ?>">
						</div>
					</div>

					<div class = "mt-2 col"> 
						<label>Foto Sebelumnya</label>
						<br>
						<img src="foto/<?= $row['foto']; ?>" class="col-3">
						 <input type="hidden" name="foto_sebelumnya" value="<?= $row['foto']; ?>" />
					</div>


					<div class = "mt-2 col"> 
						<label>Foto Baru (abaikan jika tidak ingin ganti foto)</label>
						 <input type="file" name="foto" class="form-control"/>
					</div>


					<button type="submit" class="btn btn-primary mt-3" name="submit" value="simpan">update data</button>
				</form>

				<?php

				//jika klik tombol submit maka akan melakukan perubahan
				if (isset($_POST['submit'])) {
					$id = $_POST['id'];
					$tgl_tagihan = $_POST['tgl_tagihan'];
					$no_pelanggan = $_POST['no_pelanggan'];
					$jumlah_meter = $_POST['jumlah_meter'];
					$biaya = $_POST['biaya'];

					$nama_foto1   = $_FILES['foto']['name'];
			        $file_tmp1    = $_FILES['foto']['tmp_name'];   
			        $acak1      = rand(1,99999);

			        	//cek jika foto baru tidak ada
			          if($nama_foto1 != "") {
			            $nama_unik1     = $acak1.$nama_foto1;
			            move_uploaded_file($file_tmp1,'foto/'.$nama_unik1);
			          } else {
			          	//maka tetap pakai foto lama
			            $nama_unik1 = $_POST['foto_sebelumnya'];
			          }
			      
			        $foto = $nama_unik1;

					//query mengubah tagihan
					mysqli_query($koneksi, "update tagihan set tgl_tagihan='$tgl_tagihan', no_pelanggan='$no_pelanggan', jumlah_meter='$jumlah_meter', biaya='$biaya', foto='$foto' where id ='$id'") or die(mysqli_error($koneksi));

					//redirect ke halaman index.php
					echo "<script>alert('data berhasil diupdate.');window.location='index.php';</script>";
				}



				?>
			</div>
		</div>
	</div>

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

edit bootstrap 5 php

Penjelasan singkat :

  • Kalau saat klik edit data tidak tampil, ada beberapa kemungkinan, yaitu id tidak ditemukan artinya pada index.php field id kalian salah nama atau ada coding yang salah
  • Input hidden untuk menampung id yang diedit
  • Terdapat input foto sebelumnya, tujuannya menampung foto sebelumnya jika kita tidak memperbarui foto maka tetap menggunakan file foto sebelumnya

Coba-coba deh dulu tambah edit nya kalau lancar kita lanjut ke file hapus. Berikut coding hapus.php :

<?php				
			include 'koneksi.php'; //menghubungkan ke file koneksi untuk ke database
			$id = $_GET['id']; //menampung id

			//query hapus
			$datas = mysqli_query($koneksi, "delete from tagihan where id ='$id'") or die(mysqli_error($koneksi));

			//alert dan redirect ke index.php
			echo "<script>alert('data berhasil dihapus.');window.location='index.php';</script>";
	?>

Hasil sementara :

bootstrap php crud report

Tutorialnya sampai sini dulu sob karena udah kepanjangan, lanjut ke part berikutnya yaitu membuat laporan dengan php ya!

Video youtube yang sekarang ada disini 

Mohon maaf jika terdapat kesalahan kata / coding yang saya jelasin, saya terbuka untuk dikoreksi ya terima kasih! 

Tutorial selanjutnya ada di link setelah ini ya.

 

Top