Setelah kita membuat database beserta table-table yang dibutuhkan untuk membangun toko online atau E-Commerce dengan php dan membuat CRUD untuk table kategori untuk produk yang akan kita jual, kali ini kita akan membuat CRUD untuk table toko, bagian ini berada pada backend yang artinya kita membuat CRUD untuk mengelola data toko, disini kita akan membuat halaman toko.php, add_toko.php, edit_kategori.php dan delete_toko.php, Sebelum masuk ke tutorialnya ada baiknya anda membaca persiapan untuk membuat website e-commerce disini.
1. toko.php
<?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_toko ORDER BY id Asc");
?>
<a href="add_toko.php">Tambah Data</a><br/><br/>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>email</th>
<th>telphone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
while($produk_data = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$produk_data['nama']."</td>";
echo "<td>".$produk_data['alamat']."</td>";
echo "<td>".$produk_data['email']."</td>";
echo "<td>".$produk_data['telphone']."</td>";
echo "<td><a href='edit_toko.php?id=".$produk_data['id']."'><i class='fas fa-edit'></i></a> | <a onclick='javascript:confirmationDelete($(this));return false;' href='delete_toko.php?id=".$produk_data['id']."'><i class='fa fa-trash' aria-hidden='true'></i></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. add_toko.php
<?php
//include 'config.php';
include 'functions.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">
</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">
<form action="add_toko.php" method="post" name="form1" enctype="multipart/form-data">
<h2>Tambah Data Baru</h2>
<hr>
<table width="60%" border="0">
<tr>
<td>Nama toko</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td></td>
<td style="padding-top:10px;">
<input type="submit" name="Submit" value="Add Kategori" class="btn btn-primary">
<input type="button" name="back" value="Back" class="btn btn-primary" onclick="location.href='toko.php';" >
</td>
</tr>
</table>
</form>
<?php
// Check If form submitted, insert form data into users table.
if(isset($_POST['Submit'])) {
$a= new Database();
$a->connect();
$ins=array('',$_POST["nama"],$_POST["alamat"],$_POST["email"],$_POST["phone"]);
if($a->insert('tbl_toko',$ins,null)) {
echo "<script>alert('Produk Baru Sudah Disimpan')</script>";
} else {
echo "<script>alert('ERROR : Data Gagal Disimpan')</script>";
}
}
?>
</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>3. edit_toko.php
<?php
include 'functions.php';
$a = new Database();
$a->connect();
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">
</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
// include database connection file
// Check If form submitted, insert form data into users table.
if(isset($_POST['Submit'])) {
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$id = $_POST['idtoko'];
$upd=array('nama'=>$nama,
'alamat'=> $alamat,
'email'=>$email,
'telphone'=>$phone
);
$a->update('tbl_toko',$upd,array('id = '.$_POST['idtoko'].''));
if ($a)
{
echo "<script>alert('Proses update berhasil')</script>";
echo "<script>window.location.href ='edit_toko.php?id=$id' </script>";
} else {
echo "<script>alert('ERROR Proses update gagal')</script>";
echo "<script>window.location.href ='edit_toko.php?id=$id' </script>";
}
} else {
if (isset($_GET['id']))
{
$id = $_GET['id'];
$ab=$a->select('tbl_toko','*', 'id = '.$_GET['id'].'', null);
while($a=$ab->fetch_array()){
$nama = $a['nama'];
$alamat = $a['alamat'];
$email = $a['email'];
$phone = $a['telphone'];
}
}
?>
<form action="edit_toko.php" method="post" name="form1" enctype="multipart/form-data">
<h2>Detail / Update Toko</h2>
<hr>
<table width="60%" border="0" cellpadding="5">
<tr>
<td>Nama Toko</td>
<td>
<input type="hidden" value="<?php echo $id; ?>" name="idtoko">
<input type="text" value="<?php echo $nama; ?>" name="nama">
</td>
</tr>
<tr>
<td>Alamat</td>
<td>
<input type="text" value="<?php echo $alamat; ?>" name="alamat">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" value="<?php echo $email; ?>" name="email">
</td>
</tr>
<tr>
<td>Telphone</td>
<td>
<input type="text" value="<?php echo $phone; ?>" name="phone">
</td>
</tr>
<tr>
<td></td>
<td style="padding-top:10px;">
<input type="submit" name="Submit" value="Save Update" class="btn btn-primary">
<input type="button" name="back" value="Back" class="btn btn-primary" onclick="location.href='toko.php';" >
</td>
</tr>
</table>
</form>
<?php
}
?>
</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>4. delete_toko.php
<?php
include 'functions.php';
$akoneksi = new Database();
$akoneksi->connect();
if (isset($_GET['id']))
{
$id = $_GET['id'];
// sql to delete a record
$hapus = $akoneksi->delete('tbl_toko','id = '.$_GET['id'].'');
if($hapus)
{
echo "<script>alert('Data toko berhasil di hapus') </script>";
echo "<script>window.location.href ='toko.php'</script>";
} else {
echo "<script>alert('GAGAL, Data toko Gagal di hapus') </script>";
echo "<script>window.location.href ='toko.php'</script>";
}
}
?>Demikian tutorial CRUD untuk table toko, sampai ketemu di tutorial berikutnya