We have created a form for purchasing, now we will create a form for editing purchases, this edit purchase form is useful for updating purchase data.
List of contents :
- Create a page to display purchase data
- Create a form to edit purchases
- Create a file to store purchase data updates
- Closing
1. Create a page to display purchase data
In the previous tutorial on “Shopping cart tutorial with php and MySQL” we have created the tbl_pembelian table and the tbl_detail_pembelian table, remember? and we have also created a purchase input form and now we will create a page to display purchase data, here is the product purchase page script, if successful it will look like the picture
<?php
include 'config.php';
error_reporting(0);
session_start();
if (empty($_SESSION['adminname'])) {
header("Location:login.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Charts</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<!-- Custom styles for this page -->
<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
<!-- Konfirmasi delete data -->
<script>
function confirmationDelete(anchor)
{
var conf = confirm('Are you sure want to delete this record?');
if(conf)
window.location=anchor.attr("href");
}
</script>
<!-- end Konfirmasi delete data -->
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<?php include('right_sidebar.php'); ?>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<?php include('top_navbar.php'); ?>
<!-- Begin Page Content -->
<div class="container-fluid">
<?php
// Fetch all users data from database
$result = mysqli_query($conn, "SELECT * FROM tbl_pembelian ORDER BY id DESC");
?>
<a href="add_pembelian.php">Tambah pembelian</a><br/><br/>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>No Nota</th>
<th>Tanggal Pembelian</th>
<th>Nama Toko / Suplier</th>
<th>Total Pembelian</th>
<th>Keterangan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
function rupiah($angka){
$hasil_rupiah = "Rp " . number_format($angka,2,',','.');
return $hasil_rupiah;
}
while($produk_data = mysqli_fetch_array($result)) {
$kat=$produk_data['id_toko'];
echo "<tr>";
echo "<td>".$produk_data['no_nota']."</td>";
echo "<td>".$produk_data['tgl_beli']."</td>";
$toko = mysqli_query($conn, "SELECT * FROM tbl_toko where id=$kat");
if (mysqli_num_rows($toko) > 0) {
$rowkat = mysqli_fetch_assoc($toko);
echo "<td>".$rowkat['nama']."</td>";
}
echo "<td>".rupiah($produk_data['total'])."</td>";
echo "<td>".$produk_data['keterangan']."</td>";
echo "<td><a href='edit_pembelian.php?id=".$produk_data['id']."'>Edit</a> | <a onclick='javascript:confirmationDelete($(this));return false;' href='delete_pembelian.php?id=".$produk_data['id']."'>Delete</a></td></tr>";
}
?>
<tbody>
</table>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/datatables-demo.js"></script>
</body>
</html>2. Create a form to edit purchases
The purchase update form is useful for updating data, why is it necessary to make a form for updating data? because we need to fix our data if there is an error in entering data. In this form we can update data such as receipt number, purchase date, supplier or shop name, purchase description, update product items purchased or add new product items purchased. If successful it will look like the image
The following is the purchase update form script:
<?php
include 'config.php';
$idbeli=$_GET['id'];
error_reporting(0);
session_start();
if (empty($_SESSION['adminname'])) {
header("Location:login.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Charts</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<!-- Custom styles for this page -->
<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
<script type="text/javascript" src="cart.js"></script>
<script>
function showEditBox(editobj,id) {
$('#frmAdd').hide();
$(editobj).prop('disabled','true');
var currentMessage = $("#message_" + id + " .message-content").html();
var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_'+id+'">'+currentMessage+'</textarea><button name="ok" onClick="callCrudAction(\'edit\','+id+')">Save</button><button name="cancel" onClick="cancelEdit(\''+currentMessage+'\','+id+')">Cancel</button>';
$("#message_" + id + " .message-content").html(editMarkUp);
}
function cancelEdit(message,id) {
$("#message_" + id + " .message-content").html(message);
$('#frmAdd').show();
}
function cartAction(action,product_code) {
var queryString = "";
if(action != "") {
switch(action) {
case "add":
queryString = 'action='+action+'&code='+ product_code+'&quantity='+$("#addqty").val()+'&harga='+$("#harga").val();
break;
case "addedit":
queryString = 'action='+action+'&code='+ product_code+'&quantity='+$("#addqty").val()+'&harga='+$("#harga").val()+'&idbeli='+<?php echo $idbeli; ?>;
break;
case "remove":
queryString = 'action='+action+'&code='+ product_code;
break;
case "empty":
queryString = 'action='+action;
break;
}
}
jQuery.ajax({
url: "ajax_action.php",
data:queryString,
type: "POST",
success:function(data){
$("#cart-item").html(data);
if(action != "") {
switch(action) {
case "add":
//$("#add_"+product_code).hide();
//$("#added_"+product_code).show();
break;
case "remove":
$("#add_"+product_code).show();
$("#added_"+product_code).hide();
break;
case "empty":
$(".btnAddAction").show();
$(".btnAdded").hide();
break;
}
}
},
error:function (){}
});
}
</script>
<!-- Konfirmasi delete data -->
<script>
function confirmationDelete(anchor)
{
var conf = confirm('Are you sure want to delete this record?');
if(conf)
window.location=anchor.attr("href");
}
</script>
<!-- end Konfirmasi delete data -->
<style>
.btnclass{color:#fff;background-color:#4e73df;border-color:#4e73df}
.btnclass:hover{color:#fff;background-color:#2e59d9;border-color:#2653d4}
.btnclass.focus,.btnclass:focus{color:#fff;background-color:#2e59d9;border-color:#2653d4;box-shadow:0 0 0 .2rem rgba(105,136,228,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#4e73df;border-color:#4e73df}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#2653d4;border-color:#244ec9}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>
.btnclass.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(105,136,228,.5)}
</style>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<?php include('right_sidebar.php'); ?>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<?php include('top_navbar.php'); ?>
<!-- Begin Page Content -->
<div class="container-fluid">
<?php
function rupiah($angka){
$hasil_rupiah = "Rp " . number_format($angka,2,',','.');
return $hasil_rupiah;
}
if (isset($_GET['id']))
{
$id = $_GET['id'];
$result = mysqli_query($conn, "SELECT * FROM tbl_pembelian where id=$id");
while($produk_data = mysqli_fetch_array($result))
{
$nota = $produk_data['no_nota'];
$tgl = $produk_data['tgl_beli'];
$id_toko = $produk_data['id_toko'];
$total = rupiah($produk_data['total']);
$keterangan = $produk_data['keterangan'];
}
}
//frmCart_testttttttttttttttttttttt
?>
<form action="saveeditbeli.php" method="POST" name="savebeli">
<div class="form-row">
<div class="form-group col-md-3">
<label for="inputEmail4">No Nota</label>
<input type="text" class="form-control" placeholder="input no nota" name="nota" value="<?php echo $nota ?>">
<input type="hidden" name="idbeli" value="<?php echo $id; ?>">
</div>
<div class="form-group col-md-3">
<label for="inputPassword4">Tanggal Pembelian</label>
<input class="form-control" id="date" name="date" placeholder="mm/dd/yyyy" type="text" value="<?php echo $tgl ?>"/>
</div>
<div class="form-group col-md-3">
<label for="inputAddress">Toko</label>
<?php
$result2 = mysqli_query($conn, "SELECT * FROM tbl_toko where id=$id_toko");
while($produk_data2 = mysqli_fetch_array($result2))
{
$nama_toko = $produk_data2['nama'];
$idtoko = $produk_data2['id'];
}
?>
<input class="form-control" type="text" id="nama_toko" name="nama_toko" placeholder="Nama Toko" value="<?php echo $nama_toko; ?>">
<input type="hidden" id="id_toko" name="idtoko" value="<?php echo $idtoko; ?>">
</div>
</div>
<div class="form-group">
<label for="inputAddress2">Keterangan</label>
<textarea class="form-control" name="keterangan"><?php echo $keterangan; ?></textarea>
</div>
<input type="submit" class="btn btn-primary" value="Save">
</form>
<form action="saveedititembeli.php" method="POST" name="saveedititembeli">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputbarang">Nama Barang</label>
<input type="text" class="form-control" id="nama_barang" name="nama_barang" placeholder="input nama barang" required>
<input type="hidden" id="id_barang" name="idbarang">
<input type="hidden" name="id_beli2" value="<?php echo $id; ?>">
</div>
<div class="form-group col-md-3">
<label for="inputbarang">Harga</label>
<input type="text" class="form-control" id="harga" name="harga" required>
</div>
<div class="form-group col-md-1">
<label for="inputbarang">Qty</label>
<input type="text" class="form-control" id="addqty" name="quantity" required >
</div>
<div class="form-group col-md-2">
<label for="inputbarang">Sub total</label>
<input type="text" class="form-control" id="subtotal" name="subtotal" readonly>
</div>
<div class="form-group col-md-2">
<input type="submit" class="btnclass" style="margin-top:35px" name="submit" value="Tambah Barang">
</div>
</div>
</form>
<div class="clear-float"></div>
<div id="shopping-cart">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th><strong>Produk</strong></th>
<th><strong>Quantity</strong></th>
<th><strong>Harga</strong></th>
<th><strong>Sub Total</strong></th>
<th><strong>Action</strong></th>
</tr>
</thead>
<tbody>
<?php
if (isset($_GET['id']))
{
$id = $_GET['id'];
$result = mysqli_query($conn, "SELECT * FROM tbl_detail_pembelian where id_pembelian=$id");
while($produk_data = mysqli_fetch_array($result))
{
$idpro=$produk_data['id_produk'];
$id_pembelian=$produk_data['id_pembelian'];
$query ="SELECT * FROM tbl_produk where id_produk=$idpro";
$resultproduk = $conn->query($query);
$editData=$resultproduk->fetch_assoc();
?>
<tr>
<td><strong><?php echo $editData["nama_produk"]; ?></strong></td>
<td><?php echo $produk_data["qty"]; ?></td>
<td><?php echo rupiah($produk_data["harga"]); ?></td>
<td align=right><?php echo rupiah($produk_data["total"]); ?></td>
<td><a onclick='javascript:confirmationDelete($(this));return false;' href='delete_item_pembelian.php?idpembelian=<?php echo $id_pembelian;?>&idproduk=<?php echo $idpro; ?>'><i class='fa fa-trash' aria-hidden='true'></i></a></td>
</tr>
<?php
}
}
?>
<tr>
<td colspan="5" align=right><strong>Total Pembelian:</strong> <?php echo $total; ?></td>
</tr>
<tbody>
</table>
</div>
<div id="cart-item"></div>
</div>
<hr>
<div style="margin-top:20px;">
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/datatables-demo.js"></script>
<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript" src="tuhu/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="tuhu/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="tuhu/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="tuhu/jquery-ui.css">
<script src="tuhu/jquery-1.12.4.js"></script>
<script src="tuhu/jquery-ui.js"></script>
<script>
$(document).ready(function(){
cartAction('','');
//menampilkan datepicker
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
//Autocomplete untuk table toko / suplier
$( function() {
$("#nama_toko").autocomplete({
minLength: 0,
source: "fetchData.php",
select: function(event, ui) {
$("#id_toko").val(ui.item.id);
}
})
}),
//Autocomplete untuk table barang dan langsung mengisi data barangnya
$( function() {
$("#nama_barang").autocomplete({
minLength: 0,
source: "fetchDataBarang.php",
select: function(event, ui) {
var idvalue = document.getElementById("id_barang");
$("#id_barang").val(ui.item.id);
//$("#harga").val(ui.item.hrg);
//menambah atribut id di button class btnclass
$('.btnclass').attr('id', "add_"+ui.item.id);
// $('.quantity2').prop('id', "add_"+ui.item.id);
// $('.quantity2').prop('type', "text");
$('.btnclass').attr('onClick', "cartAction("+("'addedit','"+ui.item.id)+"')");
}
})
}),
$('#addqty').keyup(function()
{
var qty = document.getElementById('addqty').value;
var hrg = document.getElementById('harga').value;
var total = Number(qty) * Number(hrg);
document.getElementById('subtotal').value = total ;
}
)
$('#harga').keyup(function()
{
var qty = document.getElementById('addqty').value;
var hrg = document.getElementById('harga').value;
var total = Number(qty) * Number(hrg);
document.getElementById('subtotal').value = total ;
}
)
});
</script>
</body>
</html>3. Create a file to store purchase data updates
After creating the purchase update / edit form now we will create 2 files to save data to the tbl_belian and tbl_detail_belian tables, namely the files is saveeditbeli.php dan saveedititembeli.php
Here is the code saveeditbeli.php
<?php
session_start();
include 'config.php';
$nonota = $_POST['nota'];
$ket = $_POST['keterangan'];
$tglbeli = date('Y-m-d', strtotime($_POST['date']));
$namatoko = $_POST['idtoko'];
$id = $_POST['idbeli'];
$item_total2=0;
mysqli_begin_transaction($conn);
try {
//mysqli_query($conn, "UPDATE tbl_pembelian set no_nota='$nonota', keterangan='$ket', tgl_beli='$tglbeli', id_toko='$namatoko', total=(total+$grandtotal) where id='$id'"
mysqli_query($conn, "UPDATE tbl_pembelian set no_nota='$nonota', keterangan='$ket', tgl_beli='$tglbeli', id_toko='$namatoko' where id='$id'");
if(mysqli_commit($conn))
{
echo "<script>alert('Proses update berhasil')</script>";
echo "<script>window.location.href ='edit_pembelian.php?id=$id' </script>";
//Menghapus semua produk dalam keranjang
unset($_SESSION['cart_item']);
}
} catch (mysqli_sql_exception $exception) {
mysqli_rollback($conn);
echo "<script>alert('ERROR Proses update gagal')</script>";
echo "<script>window.location.href ='edit_pembelian.php?id=$id' </script>";
}
?>
?>Here is the code saveedititembeli.php
<?php
session_start();
include 'config.php';
$idbrg = $_POST['idbarang'];
$hrg = $_POST['harga'];
$qty = $_POST['quantity'];
$subtot = $_POST['subtotal'];
$idbeli = $_POST['id_beli2'];
//cek barang sudah ada atau belum
$cekbarang = mysqli_query($conn, "SELECT * FROM tbl_detail_pembelian where id_pembelian=$idbeli and id_produk=$idbrg");
if (mysqli_num_rows($cekbarang) > 0) {
echo "<script>alert('Data Barang sudah ada')</script>";
echo "<script>window.location.href ='edit_pembelian.php?id=$idbeli' </script>";
} else {
mysqli_begin_transaction($conn);
try {
//Insert item produk ke tbl_setail_pembelian
mysqli_query($conn, 'INSERT INTO tbl_detail_pembelian(id_pembelian, id_produk, qty, harga, total) VALUES ('.$idbeli.', '.$idbrg.', '.$qty.', '.$hrg.', '.$subtot.')');
//Update total pd tbl_pembelian
mysqli_query($conn, "UPDATE tbl_pembelian set total=(total+$subtot) where id='$idbeli'");
//update stok barang / penambahan
$updatestok=mysqli_query($conn, 'update tbl_produk set stok=stok+'.$qty.' where id_produk='.$idbrg.'');
if(mysqli_commit($conn))
{
echo "<script>alert('Data berhasil disimpan')</script>";
echo "<script>window.location.href ='edit_pembelian.php?id=$idbeli' </script>";
}
} catch (mysqli_sql_exception $exception) {
mysqli_rollback($conn);
echo "<script>alert('ERROR : Data gagal disimpan')</script>";
echo "<script>window.location.href ='edit_pembelian.php?id=$idbeli' </script>";
}
}
?>Thus making a purchase data form that is useful for displaying data on purchasing and an update purchase form which functions to display data to be edited and in this form the data that has been edited will be saved to the tbl_pembelian table and the tbl_detail_pembelian table if there are additional product items purchased . I hope this is useful, see you in the next tutorial