After we have created the database along with the tables needed to build an online store or E-Commerce, it’s time for us to create a category page for the product we are going to sell, for this section it is on the backend which means we create CRUD to manage category data, here we will create category pages, add categories, edit categories and scripts to delete category data, here’s the code:
1.kategori.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_kategori ORDER BY id ASC");
?>
<a href="add_kategori.php">Tambah Data</a><br/><br/>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>NO</th>
<th>Nama</th>
<th>Photo</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
while($produk_data = mysqli_fetch_array($result)) {
echo "<td>".$i."</td>";
echo "<td>".$produk_data['name']."</td>";
echo "<td><img src='img/".$produk_data['photo']."' width='50' height='50'></td>";
echo "<td><a href='edit_kategori.php'><a href='edit_kategori.php?id=".$produk_data['id']."'><i class='fas fa-edit'></i></a> | <a onclick='javascript:confirmationDelete($(this));return false;' href='delete_kategori.php?id=".$produk_data['id']."'><i class='fa fa-trash' aria-hidden='true'></i></a></td></tr>";
$i++;
}
?>
<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_kategori.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">
</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_kategori.php" method="post" name="form1" enctype="multipart/form-data">
<h2>Tambah Kategori Baru</h2>
<hr>
<table width="60%" border="0">
<tr>
<td>Nama kategori</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td style="padding-top:10px;">Photo</td>
<td style="padding-top:10px;"><input type="file" name="fileToUpload" id="fileToUpload"></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='kategori.php';" >
</td>
</tr>
</table>
</form>
<?php
// Check If form submitted, insert form data into users table.
if(isset($_POST['Submit'])) {
$name = $_POST['name'];
// include database connection file
include_once("config.php");
// If upload button is clicked ...
$filename = $_FILES["fileToUpload"]["name"];
$tempname = $_FILES["fileToUpload"]["tmp_name"];
$folder = "img/".$filename;
$result = mysqli_query($conn, "INSERT INTO tbl_kategori(name,photo) VALUES('$name','$filename')");
// Now let's move the uploaded image into the folder: image
if (move_uploaded_file($tempname, $folder)) {
$msg = "Image uploaded successfully";
echo "<script>alert('Kategori 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. delete_kategori.php
<?php
include_once("config.php");
if (isset($_GET['id']))
{
$id = $_GET['id'];
// sql to delete a record
$sql = mysqli_query($conn, "SELECT * FROM tbl_kategori where id=$id");
$result = mysqli_fetch_assoc($sql);
$photo = $result['photo'];
$sql = "DELETE FROM tbl_kategori WHERE id=$id";
if ($conn->query($sql) === TRUE)
{
$hapus = unlink('img/'.$photo);
if($hapus)
{
echo "<script>alert('Data Kategori berhasil di hapus') </script>";
echo "<script>window.location.href ='kategori.php'</script>";
}
} else {
echo "<script>alert('GAGAL, Data Kategori Gagal di hapus') </script>";
echo "<script>window.location.href ='kategori.php'</script>";
}
}
?>4.edit_kategori.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">
</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
include_once("config.php");
// Check If form submitted, insert form data into users table.
if(isset($_POST['Submit'])) {
$name = $_POST['name'];
$photosdel = $_POST['namaphoto'];
$id = $_POST['idkateg'];
// If upload button is clicked ...
if($_FILES['fileToUpload']['name']=='')
{
$result = mysqli_query($conn, "update tbl_kategori set name='$name' where id='$id'");
if ($result)
{
echo "<script>alert('Proses update berhasil')</script>";
echo "<script>window.location.href ='edit_kategori.php?id=$id' </script>";
} else {
echo "<script>alert('ERROR Proses update gagal')</script>";
echo "<script>window.location.href ='edit_kategori.php?id=$id' </script>";
}
} else {
$filename = $_FILES["fileToUpload"]["name"];
$tempname = $_FILES["fileToUpload"]["tmp_name"];
$folder = "img/".$filename;
$result = mysqli_query($conn, "update tbl_kategori set name='$name', photo='$filename' where id='$id'");
if ($result)
{
// Now let's move the uploaded image into the folder: image
if (move_uploaded_file($tempname, $folder)) {
unlink('img/'.$photosdel);
echo "<script>alert('Proses update berhasil') </script>";
echo "<script>window.location.href ='edit_kategori.php?id=$id' </script>";
}else{
echo "<script>alert('ERROR : Data Gagal Disimpan')</script>";
echo "<script>window.location.href ='edit_kategori.php?id=$id' </script>";
}
} else {
echo "<script>alert('ERROR Proses update gagal')</script>";
echo "<script>window.location.href ='edit_kategori.php?id=$id' </script>";
}
}
} else {
if (isset($_GET['id']))
{
$id = $_GET['id'];
$result = mysqli_query($conn, "SELECT * FROM tbl_kategori where id=$id");
while($produk_data = mysqli_fetch_array($result))
{
$nama_kateg = $produk_data['name'];
$photo = $produk_data['photo'];
}
}
?>
<form action="edit_kategori.php" method="post" name="form1" enctype="multipart/form-data">
<h2>Detail / Update Kategori</h2>
<hr>
<table width="60%" border="0" cellpadding="5">
<tr>
<td>Nama Produk</td>
<td>
<input type="hidden" value="<?php echo $id; ?>" name="idkateg">
<input type="hidden" value="<?php echo $photo; ?>" name="namaphoto">
<input type="text" value="<?php echo $nama_kateg; ?>" name="name">
</td>
</tr>
<tr>
<td style="padding-top:10px;">Photo</td>
<td style="padding-top:10px;">
<img src="img/<?php echo $photo; ?>" width=50 height=50>
<input type="file" name="fileToUpload" id="fileToUpload">
</td>
</tr>
<tr>
<td></td>
<td style="padding-top:10px;">
<input type="submit" name="Submit" value="Edit Kategori" class="btn btn-primary">
<input type="button" name="back" value="Back" class="btn btn-primary" onclick="location.href='kategori.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>