In the last tutorial we have created a database along with the tables needed to build an online store or E-Commerce with php and created a CRUD for the category table for the product we are going to sell, Create a CRUD for the shop table, this time we will create a CRUD for table users, this section is on the backend which means we create a CRUD to manage user data, here we will create pages users.php, add_user.php, edit_user.php and delete_user.php, Here’s the code:
1. users.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>Data User - SB Admin 2</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 users ORDER BY id Asc");
?>
<a href="add_user.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>email</th>
<th>Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
while($produk_data = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$produk_data['username']."</td>";
echo "<td>".$produk_data['email']."</td>";
echo "<td>".$produk_data['password']."</td>";
echo "<td><a href='edit_user.php?id=".$produk_data['id']."'><i class='fas fa-edit'></i></a> | <a onclick='javascript:confirmationDelete($(this));return false;' href='delete_user.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_user.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>Add User - SB Admin 2</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">
<script>
function myFunction() {
var x = document.getElementById("inputku");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
<form action="add_user.php" method="post" name="form1" enctype="multipart/form-data">
<h2>Tambah Data Baru</h2>
<hr>
<table width="60%" border="0">
<tr>
<td>User Name</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="kunci" id="inputku">
<input type="checkbox" onclick="myFunction()"> Show Password
</td>
</tr>
<tr>
<td></td>
<td style="padding-top:10px;">
<input type="submit" name="Submit" value="Save" class="btn btn-primary">
<input type="button" name="back" value="Back" class="btn btn-primary" onclick="location.href='users.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["email"],MD5($_POST["kunci"]));
if($a->insert('users',$ins,null)) {
echo "<script>alert('Data 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_user.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'];
$email = $_POST['email'];
$pass = MD5($_POST['kunci']);
$id = $_POST['iduser'];
$upd=array('username'=>$nama,
'email'=>$email,
'password'=>$pass
);
$a->update('users',$upd,array('id = '.$_POST['iduser'].''));
if ($a)
{
echo "<script>alert('Proses update berhasil')</script>";
echo "<script>window.location.href ='edit_user.php?id=$id' </script>";
} else {
echo "<script>alert('ERROR Proses update gagal')</script>";
echo "<script>window.location.href ='edit_user.php?id=$id' </script>";
}
} else {
if (isset($_GET['id']))
{
$id = $_GET['id'];
$ab=$a->select('users','*', 'id = '.$_GET['id'].'', null);
while($a=$ab->fetch_array()){
$nama = $a['username'];
$email = $a['email'];
$pass = MD5($a['password']);
}
}
?>
<script>
function myFunction() {
var x = document.getElementById("inputku");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
<form action="edit_user.php" method="post" name="form1" enctype="multipart/form-data">
<h2>Detail / Update Toko</h2>
<hr>
<table width="60%" border="0" cellpadding="5">
<tr>
<td>User Nama</td>
<td>
<input type="hidden" value="<?php echo $id; ?>" name="iduser">
<input type="text" value="<?php echo $nama; ?>" name="nama">
</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="password" value="<?php echo $pass; ?>" name="kunci" id="inputku">
<input type="checkbox" onclick="myFunction()"> Show Password
</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='users.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_user.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('users','id = '.$_GET['id'].'');
if($hapus)
{
echo "<script>alert('Data user berhasil di hapus') </script>";
echo "<script>window.location.href ='users.php'</script>";
} else {
echo "<script>alert('GAGAL, Data user Gagal di hapus') </script>";
echo "<script>window.location.href ='users.php'</script>";
}
}
?>