Kita telah membuat form untuk beli barang untuk website ecommerce, saatnya sekarang kita akan membuat form untuk editnya, form edit data beli ini berguna untuk melakukan update terhadap data beli barang kita, Sebelum masuk ke tutorialnya ada baiknya anda membaca persiapan untuk membuat website e-commerce disini
Daftar isi :
- Membuat halaman untuk menampilkan data beli
- Membuat form untuk edit beli
- Membuat file untuk menyimpan update data beli
- Penutup
1.Membuat halaman untuk menampilkan Form Beli
Pada tutorial sebelumnya pada “Shopping cart tutorial with php and MySQL” kita telah membuat tabel tbl_pembelian dan table tbl_detail_pembelian, masih ingat ? dan kita juga telah membuat form untuk input beli dan sekarang kita akan membuat halaman untuk menampilkan data beli, berikut script halaman beli produk :
jika berhasil akan tampak seperti gambar
<?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. Membuat form untuk update data beli
Form update pembelian berguna untuk update data, kenapa perlu dibuatkan form untuk update data? karena kita perlu memperbaiki data kita jika ada kesalahan dalam memasukan data. dalam form ini kita bisa melakukan update data seperti no nota, tanggal beli, nama suplier atau toko, keterangan pembelian, update item produk yang dibeli atau menambah item produk yang dibeli.jika berhasil akan tampak seperti gambar
berikut script form update pembelian :
<?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. Membuat file untuk menyimpan update data beli
Setelah membuat form update / edit beli sekarang kita akan membuat 2 file untuk menyimpan data ke table tbl_pembelian dan tbl_detail_pembelian yaitu file saveeditbeli.php dan saveedititembeli.php
Berikut 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>";
}
?>
?>Berikut 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>";
}
}
?>4. Penutup
demikian pembuatan form data beli yang berguna untuk menampilkan data beli barang dan form update beli yang berfungsi untuk menampilkan data yang akan diedit dan di form ini data yang sudah di edit akan di simpan ke table tbl_pembelian dan table tbl_detail_pembelian jika ada penambahan item produk yang di beli. semoga bermanfaat sampai jumpa pada tutorial berikutnya