Create CRUD to manage user data

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 &copy; 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 &copy; 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 &copy; 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>";
        }
       
        

       
    }

?>

Leave a Reply

Your email address will not be published. Required fields are marked *