• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Free Source Code for Web Applications

  • programs
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions

Approve And Disapprove in Ajax, PHP & MySQL

July 29, 2022 By Md Nurullah

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 disapprove in ajax, php & mysql

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;

}
?>

 

Related posts:

  1. File Upload in PHP with Example & Code Demo
  2. How to Create Pagination in PHP and MYSQL
  3. To Do List Using PHP and MySQL
  4. Filter Data with Checkboxes in PHP & MySQL

Filed Under: PHP

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 4 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Primary Sidebar

Latest Tutorials

  • Login with ajax in PHP, MySQL
  • Load Records on Select Box using Ajax, PHP & MySQL
  • Swapping of Two Numbers in python
  • How to Install Express Application Using Express Generator Tool
  • Registration Form using Ajax, PHP & MySQL

Popular Tutorials

  • Filter Data with Checkboxes in PHP & MySQL
  • Filter Data by Category in PHP & MySQL
  • Filter Prices From Low to High in PHP, MySQL
  • To Do List Using PHP and MySQL
  • Upload Multiple Files to Store in MySQL Database Using PHP

Categories

  • Ajax (12)
  • Django (5)
  • HTML (4)
  • Installation (3)
  • Interview Questions (5)
  • JavaScript (20)
  • jQuery (11)
  • Laravel (2)
  • Node.js (23)
  • PHP (42)
  • programs (1)
  • Python Programs (1)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved