Hello Developer, In this tutorial, you will learn to approve and disapprove status in ajax, PHP & MySQL on the button click. I have shared the approval functionality with some simple steps that are very easy to use in web applications.
How does it work – By default, table data is displayed with green approve buttons. When you click the approve button, It will change to a red disapprove button. Similarly, When you click disapprove button, It will change to approve button. This functionality will work without reloading the page and also It will update the status value in the database.
Here, I have created this functionality with an article post that will be posted by the user and then the admin will approve that article using this functionality. Once you learn it, You can customize it according to your project requirement.
Approve and Unapproved Status on the Button Click using Ajax, PHP & MySQL
Before getting started, you should create the following folder structure so, that you can easily write code to approve and un-approve status in ajax, PHP & MYSQL.
Learn Also –
Check an Email Already exists in the Database using Ajax & PHP
Check Username Availability using Ajax & PHP
How to create dependent dropdown using ajax & PHP
Load more data on Infinite Scroll Using ajax & PHP
Folder Structure –
codingstatus/
|__database.php
|__fetch-data.php
|__approval-button.php
|__custom-ajax.js
|__update-status.php
|
Let’s start coding from the next step –
1. Create MySQL Database & Table
You can use create a database & table in the PHPMyAdmin according to the following sql query –
Database Name – codingstatus
Table Name – articles
CREATE TABLE `articles` ( `id` int(10) UNSIGNED PRIMARY KEY NOT NULL AUTO_INCREMENT, `heading` varchar(255) DEFAULT NULL, `content` text(2000) DEFAULT NULL, `status` tinyint(4) DEFAULT 0, `created_at` timestamp(5) DEFAULT NULL, `updated_at` datetime(5) DEFAULT NULL, )
2. Connect to MySQL Database
Now, You can connect your PHP to MySQL database using the following query. If you have already done it, then you can skip this step.
File Name – database.php
<?php
$hostName = "localhost";
$userName = "root";
$password = "";
$databaseName = "codingstatus";
$conn = new mysqli($hostName, $userName, $password, $databaseName);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
3. Fetch Data From MySQL Table
To fetch data from the MySQL Table, I have created the following custom function. You can use it. If you use your own code to fecth data. then you can skip this step.
fetchData() – This function accepts a parameter $conn to connect database and returns all the data from the “articles” table in an array formate
File Name – fetch-data.php
<?php
function fetchData($conn){
$sql = "SELECT * FROM articles";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row= $result->fetch_all(MYSQLI_ASSOC);
return $row;
}else{
return $row=[];
}
}
?>
4. Display Data with Approval Button
To display data with the approval button, you will have to follow the following steps –
Step-1: Include the database.php and fetch-data.php using the include() method. But you must keep a database.php file above the fetch data. Otherwise, It may not work.
Step-2: Create an HTML Table and display data using fetchdata() function.
Step-3: Write CSS code to design approve and disapprove button
Step-4: Create a status button and call ajax custom function updateStatus() within onclick event and pass article id as a paramter. Also, declare an id with value statusBtn<?php echo $data[‘id’]; ?>.
Step-5: Include the jquery CDN and custom-ajax.js file.
File Name – approval-button.php
<?php
include("database.php");
include("fetch-data.php");
?>
<!DOCTYPE html>
<html>
<head>
<style>
.status-btn{
border:none;
color:white;
padding:5px 10px;
width:100px;
cursor: pointer;
box-shadow:0px 0px 15px gray
}
.approve{
background-color:green;
}
.disapprove{
background-color:red;
}
</style>
</head>
<body>
<!-- ===== displaying data with approval button ===== -->
<table border="1" cellspacing="0" cellpadding="10" width="50%">
<tr>
<th>S.N</th>
<th>Heading</th>
<th>Content</th>
<th>Status</th>
</tr>
<?php
$fetchData = fetchData($conn);
if(count($fetchData)>0){
$i=1;
foreach($fetchData as $data){
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $data['heading']; ?></td>
<td><?php echo $data['content']; ?></td>
<td><button onclick="updateStatus(<?php echo $data['id'];?>)" id="statusBtn<?php echo $data['id'];?>" class="status-btn <?php echo $data['status']==0?'approve':'disapprove'; ?>"><?php echo $data['status']==0?'Approve':'Disapprove'; ?></button></td>
<tr>
<?php $i++; } } ?>
</table>
<!-- ============displaying data with approval button========== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script scr="custom-ajax.js" /></script>
</body>
</html>
5. Approve & Disapprove with Ajax
You can use the following ajax code to approve & disapprove status
File Name – custom-ajax.js
const updateStatus= function(id){
$.ajax({
type: "POST",
url: "update-status.php",
data:{updateId:id},
dataType: "html",
success: function(data){
if(data==1){
$("#statusBtn"+id).text("Disapprove")
}else if(data==0){
$("#statusBtn"+id).text("Approve")
}
// change status btn coloe
if($("#statusBtn"+id).hasClass("approve")){
$("#statusBtn"+id).removeClass("approve");
$("#statusBtn"+id).addClass("disapprove");
}else if($("#statusBtn"+id).hasClass("disapprove")){
$("#statusBtn"+id).removeClass("disapprove");
$("#statusBtn"+id).addClass("approve");
}
}
});
}
6. Update Approval Status with PHP & MySQL
PHP code of this file executes to update the status value in the database. It will update the approval status when ajax sends a request with an id on the pprove or disapprove button click.
You can write PHP MYSQL code to update the approval status by using the following steps
Step-1: Include the database.php file to connect the database
Step-2: Create a custom function getStatus() with two arguments $conn & $id and write the query to fetch status value from the “articles” table base on the id.
Step-3: Also, Create a custom function updateStatus() with two arguments $conn & $updateId. and write the update query based on the status value & updateId.
Step-4: check $_POST[‘updateId’] with isset() & if condtion . It is true then call updateStatus() function. Where, updateId is defined in the ajax code.
File Name – update-status.php
<?php
include("database.php");
if(isset($_POST['updateId'])){
$updateId = $_POST['updateId'];
updateStatus($conn, $updateId);
}
function updateStatus($conn, $updateId){
$getStatus= getStatus($conn, $updateId);
if(!empty($getStatus)){
if($getStatus['status']==0){
$sql = "UPDATE articles SET status=1 WHERE id=$updateId";
if ($conn->query($sql) === TRUE) {
echo 1;
}
}elseif($getStatus['status']==1){
$sql = "UPDATE articles SET status=0 WHERE id=$updateId";
if ($conn->query($sql) === TRUE) {
echo 0;
}
}
}else{
echo "No data is exist in database";
}
}
function getStatus($conn, $id){
$query= "SELECT status FROM articles WHERE id=$id";
$result = $conn->query($query);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
}else{
$row =[];
}
return $row;
}
?>