We make an admin panel where admin can approve or reject incoming user registration. On successful registration an email will be sent, rejected users will be deleted. To start, we make a register form where user can enter details. The details wiill be saved in a new user table and at the same time a request will appear on admin panel to allow or reject the new user. On admin approval the user details will be transferred to registered user table and the entry in the new user table will be automatically deleted. An email will also be sent to the user notifying successful registration. And, if admin rejects the new user the entry from the new user table will be discarded.
Latest Post,
Register user with admin approval in Codeigniter 4
We will follow these basic steps to complete this project:
- Create a permanent and temporary table for user data.
- Create register user form.
- Save the details in a temporary new-user table.
- Display incoming user requests on admin panel.
- Allow the admin to approve or reject incoming users.
- Delete the rejected user details from temporary table.
- Insert approved user data to permanent table.
Recommended read,
Admin panel with Category Subcategory setup for ecommerce website in php
Admin panel to add update delete products for ecommerce webiste in php
Add a shopping cart to ecommerce website in php
Create a permanent and temporary table for user data.
Permanent table: test
CREATE TABLE `database-name`.`test` ( `fname` TEXT NOT NULL , `lname` TEXT NOT NULL , `email` TEXT NOT NULL , `mobile` BIGINT NOT NULL , `address` TEXT NOT NULL , `password` TEXT NOT NULL, 'image' TEXT NULL ) ENGINE = InnoDB;
Permanent table: testdemo
CREATE TABLE `database-name`.`testdemo` ( `fname` TEXT NOT NULL , `lname` TEXT NOT NULL , `email` TEXT NOT NULL , `mobile` BIGINT NOT NULL , `address` TEXT NOT NULL , `password` TEXT NOT NULL, 'image' TEXT NULL ) ENGINE = InnoDB;
Register form for new users
The register form will take details from users and store into a new user temporary table in database. We have also made a javascript validation at client level with the help of javascript library jquery. On clicking the submit button a javascript function will be called.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task 1</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" >
<style>
.width{
width: 600px;
}
@media(max-width: 600px)
{
.width{
width: 350px;
}
}
.error{
color: red;
font-size: large;
}
.success{
color: green;
font-size: large;
}
.error1{
color: red;
font-size: large;
}
.success1{
color: green;
font-size: large;
}
#message1{
color: red;
}
#message2{
color: red;
}
#message3{
color: red;
}
#message4{
color: red;
}
#message5{
color: red;
}
img{
margin: auto;
border-radius: 3px;
border: 1px solid grey;
height: 190px;
width: 180px;
}
</style>
</head>
<body>
<div class="container-fluid pt-2 pb-5 bg-light">
<div class="container border width rounded border-success">
<h1 class="pt-1 text-center pb-2">Register form</h1>
<hr class="border-bottom bg-success w-50 mx-auto">
<p class="pt-2 pb-3 text-center">
Already registered? <a href="login.php" class="btn btn-primary">Login</a>
</p>
<hr class="border-bottom bg-success w-50 mx-auto">
<form class="pt-3 w-50 mx-auto pb-3">
<label class="pb-2 text-center">First Name </label><span id="message1">*</span>
<input type="text" class="form-control" placeholder="Enter your first name" id="fname" required>
<label class="pt-1 pb-2 text-center">Last Name </label><span id="message2">*</span>
<input type="text" class="form-control" placeholder="Enter your last name" id="lname" required>
<label class="pt-1 text-center">Email</label><span id="message3">*</span>
<input type="email" class="form-control" placeholder="Enter your email" id="email" required>
<label class="pt-1 pb-2 text-center">Mobile/Phone </label><span id="message4"> *</span>
<input type="number" class="form-control" placeholder="Enter your 10 digit mobile number" id="mobile" required>
<label class="pt-1 pb-2 text-center">Address</label><span class="text-danger">*</span>
<textarea class="form-control" value="bnj" placeholder="Enter your complete address" id="address" required></textarea>
<label class="pt-1 pb-2 text-center">Enter Password</label><span class="text-danger">*</span>
<input type="password" class="form-control" placeholder="Enter password" id="password1" required>
<label class="pt-1 pb-2 text-center">Repeat Password</label><span class="text-danger">*</span>
<input type="password" class="form-control" placeholder="Repeat password" id="password2" required>
<span id="message5"> </span>
<br><br>
<button type="button" class="form-control btn btn-outline-primary" id="submit" disabled="true" onclick="getValues()">Submit</button>
<br><br>
<span class="error"></span><span class="success"></span>
</form>
<form action="show-data-1.php" action="" method="post" class="pt-3 w-50 mx-auto pb-3">
<input type="submit" class="form-control btn btn-outline-primary" value="Show data">
</form>
</div>
</div>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" ></script>
<script>
$('#password1, #password2').on('keyup', function () {
if($('#password1').val() == $('#password2').val() && $('#password1').val().length != 0)
{
$('#message5').html('Matched').css('color', 'green');
$("#submit").prop('disabled',false);
}
else
{
$('#message5').html('Password Missmatch').css('color', 'red');
$("#submit").prop('disabled',true);
}
}
);
$('#fname').on('keyup',function() {
if($('#fname').val().length != 0)
{
$('#message1').html('*').css('color','green');
$("#submit").prop('disabled',false);
}
else
{
$('#message1').html('*').css('color','red');
$("#submit").prop('disabled',true);
}
}
);
$('#lname').on('keyup',function() {
if($('#lname').val().length != 0)
{
$('#message2').html('*').css('color','green');
$("#submit").prop('disabled',false);
}
else
{
$('#message2').html('*').css('color','red');
$("#submit").prop('disabled',true);
}
}
);
var validateEmail = function(elementValue) {
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(elementValue);
}
$('#email').keyup(function() {
var value = $(this).val();
var valid = validateEmail(value);
if (!valid) {
$('#message3').html(' Invalid email').css('color', 'red');
$("#submit").prop('disabled',true);
} else {
$('#message3').html(' *').css('color', 'green');
$("#submit").prop('disabled',false);
}
});
$('#mobile').on('keyup',function() {
if($('#mobile').val().length == 10 )
{
$('#message4').html(' *').css('color','green');
}
else
$('#message4').html(' Enter 10 digits').css('color','red');
}
);
</script>
</body>
</html>
Codeigniter 4 CRUD operations in Mysql database using Ajax
Script.js: Javascript function to handle the ajax call and response from the server
The javascript function will receive the values from register form after validation. Make an ajax call to the php server.
function getValues(){
var fname = $('#fname').val();
var lname = $('#lname').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var address = $('#address').val();
var password = $('#password1').val();
if(fname.length !==0 && lname.length !==0 && email.length !== 0 && mobile.length == 10 && address.length !== 0){
var input = {
"fname" : fname,
"lname" : lname,
"email" : email,
"mobile" : mobile,
"address" : address,
"password" : password,
"action" : "save_into_db"
};
$.ajax({
url : 'controller.php',
type : 'POST',
dataType : "json",
data : input,
success : function(response)
{
$('.success').html(response.message).show();
$('.error').hide();
},
error : function(response)
{
$('.error').html("Error").show();
$('.success').hide();
}
});
}
else
{
$('.error').html("One or more than one field empty.").show();
$('.success').hide();
}
}
Controller.php: Saves the detail in a temporary new user table
The server receives the value via an ajax POST call. It checks the registered user table whether user is already registered or not. If it is, an error is displayed, if not user details is stored in a temporary table.
<?php
session_start();
error_reporting(E_ALL & ~ E_NOTICE);
class Controller
{
function __construct()
{
$this->processMobileVerification();
}
function processMobileVerification()
{
switch ($_POST["action"])
{
case "save_into_db":
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
$address = $_POST['address'];
$password = $_POST['password'];
$password = md5($password);
$db = mysqli_connect('server-name', 'user-name', 'password', 'database-name');
$query1 = "SELECT fname FROM test WHERE email='$email'";
$result1 = mysqli_query($db, $query1);
$row = mysqli_fetch_array($result1, MYSQLI_ASSOC);
if($row){
echo json_encode(array( "type" =>"error", "message" => "Email id already exist."));
exit();
}
else{
$query = "INSERT INTO testdemo (fname,lname,email,mobile,address,password) VALUES ('$fname','$lname','$email','$mobile','$address','$password')";
$result = mysqli_query($db, $query);
if ($result == FALSE)
{
die(mysqli_error());
echo json_encode(array( "type" =>"error", "message" => "Error."));
exit();
}
else
echo json_encode(array( "type" =>"success", "message" => "Successfully inserted."));
}
break;
}
}
$controller = new Controller();
?>
Display incoming user requests on admin panel.
new-user-requests.php :- Design an admin panel which only admin can access. Display a list of all incoming users.
With every user there will be a Reject and Approve option for the Admin which he can perform.
There is two button for Allow and Reject. On approval, allow.php is called and on rejection, reject.php.
<?php session_start();
if(!isset($_SESSION['email']){
header('location: login.php');
}
$limit = 5;
$page = (isset($_GET['page']) && is_numeric($_GET['page']) ) ? $_GET['page'] : 1;
$paginationStart = ($page - 1) * $limit;
$next = $page +1;
$prev = $page -1;
?>
<?php
include('db-connect.php'); // write your db-connect.php to connect to database.
$query1 = "SELECT COUNT(*) AS email FROM testdemo";
$result1 = mysqli_query($db, $query1);
$row1 = mysqli_fetch_array($result1, MYSQLI_ASSOC);
$total = $row1['email'];
$totalpages = ceil($total / $limit) ;
$query = "SELECT * FROM testdemo LIMIT $paginationStart,$limit";
$result = mysqli_query($db, $query);
if ($result == FALSE) {
die(mysqli_error());
exit();
}
?>
<!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.0">
<title>View users</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<style>
.text-font{
font-size: 35px;
font-weight: bolder;
}
.height{
height: 100vh ;
}
.error{
color: red;
font-size: large;
}
.success{
color: green;
font-size: large;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 bg-dark height">
<p class="pt-5 pb-5 text-center">
<a href="admin-panel.php" class="text-decoration-none"><span class="text-light text-font">Admin</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="admin-profile.php" class="text-decoration-none"><span class="text-light">Profile</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="categories.php" class="text-decoration-none"><span class="text-light">Categories</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="subcategories.php" class="text-decoration-none"><span class="text-light">Browse Categories</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="products-add.php" class="text-decoration-none"><span class="text-light">Add Products</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="products-display.php" class="text-decoration-none"><span class="text-light">View Products</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="new-user-requests.php" class="text-decoration-none"><span class="text-light">New user requests</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="view-users.php" class="text-decoration-none"><span class="text-light">View user</span></a>
</p>
<hr class="bg-light ">
<p class="pt-2 pb-2 text-center">
<a href="display-orders.php" class="text-decoration-none"><span class="text-light">View Orders</span></a>
</p>
</div>
<div class="col-sm-10 bg-light">
<div class="row">
<div class="col-sm-2">
<p class="text-center pt-5">
<img class="rounded" src="<?php echo ("/test123/profile-pic/") . ($_SESSION['email']) . "display-picture.jpg"; ?>" width="150px" height="140px">
</p>
</div>
<div class="col-sm-8">
<h1 class="text-center pt-4 pb-5"><strong>New user requests</strong></h1>
<hr class="w-25 mx-auto">
</div>
<div class="col-sm-2">
<p class="pt-5">
<a href="logout.php" class="btn btn-outline-primary">Logout</a>
</p>
</div>
</div>
<div class="container-fluid pt-5 pb-5 bg-light">
<div class="container width ">
<hr class="border-bottom bg-success w-50 mx-auto">
<div class="table table-responsive">
<table class="table table-striped w-100 table-bordered">
<thead class="table-primary">
<tr>
<th class="text-left">Sl No.</th>
<th class="text-left">First Name</th>
<th class="text-left">Last Name</th>
<th class="text-left">Email</th>
<th class="text-left">Mobile</th>
<th class="text-left">Address</th>
<th class="text-left">
<form action="search.php" method="post">
<input type="email" class="form-control" placeholder="Email to search" name="email">
</th>
<th>
<input type="submit" class="form-control btn-btn-primary" value="Search">
</form>
</th>
</tr>
</thead>
<tbody>
<?php $i=$paginationStart+1; while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){ ?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo($row['fname']); ?></td>
<td><?php echo($row['lname']); ?></td>
<td><?php echo($row['email']); ?></td>
<td><?php echo($row['mobile']); ?></td>
<td><?php echo($row['address']); ?></td>
<td>
<form action="reject.php" method="post">
<input type="hidden" name ="email" value="<?php echo($row['email']); ?>">
<?php echo ("<button type='submit' name='reject' class='form-control' >Reject</button>"); ?>
</form>
</td>
<td>
<form action="" method="post">
<input type="hidden" name ="email" value="<?php echo($row['email']); ?>">
<?php echo ("<button type='submit' name='allow' class='form-control'>Allow</button>");?>
</form>
</td>
</tr>
<?php
} ?>
</tbody>
</table>
</div>
<?php
include('allow.php');
?>
<div class="container pt-5">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<nav aria-label="...">
<ul class="pagination">
<li class="page-item <?php if($page <= 1){ echo 'disabled'; } ?>">
<a class="page-link"
href="<?php if($page <= 1){ echo '#'; } else { echo "?page=" . $prev; } ?>">Previous</a>
</li>
<?php for($i = 1; $i <= $totalpages; $i++ ): ?>
<li class="page-item <?php if($page == $i) {echo 'active'; } ?>">
<a class="page-link" href="new-user-requests.php?page=<?= $i; ?>"> <?= $i; ?> </a>
</li>
<?php endfor; ?>
<li class="page-item <?php if($page >= $totalpages) { echo 'disabled'; } ?>">
<a class="page-link"
href="<?php if($page >= $totalpages){ echo '#'; } else {echo "?page=". $next; } ?>">Next</a>
</li>
</ul>
</nav>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
<p class="text-center"><span class="error"></span><span class="success"></span></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
reject.php: Delete the rejected user details from temporary table.
On rejection, user details will be deleted from temporary table.
<?php
session_start();
if(!isset($_SESSION['email'])){
header('location: login.php');
}
$email = $_POST['email'];
$db = mysqli_connect('localhost', 'djtechbl', '(Sani@Vaar8)', 'djtechbl_projects');
$query = "DELETE FROM testdemo where email = '$email'";
$result = mysqli_query($db, $query);
if ($result == FALSE)
{
die(mysqli_error());
echo "Error";
exit();
}
else{
echo "Rejected";
sleep(1);
$URL="new-user-requests.php";
echo "<script type='text/javascript'?>document.location.href='{$URL}';</script?>";
echo '<META HTTP-EQUIV="refresh" content="0;URL=' . $URL . '"?>';
}
?>
Published on July 5, 2021
