In this article, we will discuss how to create an Activate/Deactivate button using PHP. When a particular status is set, the same gets updated in the database.
Approach: In order to illustrate the example, let’s say that there are a few courses that can be set as active or inactive and need to have appropriate colored buttons for the same. The implementation is done using HTML, PHP, and CSS.
Requirements:
- MySQL database with a table containing at least course name and a boolean status value.
- PHP and HTML files.
- XAMPP (or any alternative)
Database creation:
- Open XAMPP control panel and start Apache and MySQL modules.
click on the start buttons
- Open “localhost/phpmyadmin” in your browser and click on the new button to create a new database.
- Give a name to your database and click create.
- In the SQL tab enter the following SQL code and click go.
In order to achieve the desired result, let us create a database called “courses” and set up a few courses using the following SQL code.
Table structure for table `courses`
Course_name String and status boolean fields
CREATE TABLE `courses` (
`Course_name` varchar(50) NOT NULL,
`status` tinyint(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Sample data for table `courses`
INSERT INTO `courses` (`Course_name`, `status`) VALUES
('C++', 0),
('Java', 1),
('Data Structures', 1),
('SQL', 0);
ALTER TABLE `courses` ADD `id` INT NOT NULL AUTO_INCREMENT
FIRST, ADD PRIMARY KEY (`id`);
In this table, we must know that status is an integer that represents inactive as 0 and active as 1.
Web-page creation: Create a folder in htdocs called courses and store the following file as “course-page.php“.
course-page.php
<?php // Connect to database $con = mysqli_connect("localhost","root","","courses"); // Get all the courses from courses table // execute the query // Store the result $sql = "SELECT * FROM `courses`"; $Sql_query = mysqli_query($con,$sql); $All_courses = mysqli_fetch_all($Sql_query,MYSQLI_ASSOC); ?> <!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"> <!-- Using internal/embedded css --> <style> .btn{ background-color: red; border: none; color: white; padding: 5px 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; border-radius: 20px; } .green{ background-color: #199319; } .red{ background-color: red; } table,th{ border-style : solid; border-width : 1; text-align :center; } td{ text-align :center; } </style> </head> <body> <h2>Courses Table</h2> <table> <!-- TABLE TOP ROW HEADINGS--> <tr> <th>Course Name</th> <th>Course Status</th> <th>Toggle</th> </tr> <?php // Use foreach to access all the courses data foreach ($All_courses as $course) { ?> <tr> <td><?php echo $course['Course_name']; ?></td> <td><?php // Usage of if-else statement to translate the // tinyint status value into some common terms // 0-Inactive // 1-Active if($course['status']=="1") echo "Active"; else echo "Inactive"; ?> </td> <td> <?php if($course['status']=="1") // if a course is active i.e. status is 1 // the toggle button must be able to deactivate // we echo the hyperlink to the page "deactivate.php" // in order to make it look like a button // we use the appropriate css // red-deactivate // green- activate echo "<a href=deactivate.php?id=".$course['id']." class='btn red'>Deactivate</a>"; else echo "<a href=activate.php?id=".$course['id']." class='btn green'>Activate</a>"; ?> </tr> <?php } // End the foreach loop ?> </table> </body> </html> |
Output:
A decent looking table is created
We are actually not using buttons, rather using hyperlinks that link to PHP files that perform the toggle of the status variable of the table “courses”. So we need to create these files too.
activate.php
<?php // Connect to database $con=mysqli_connect("localhost","root","","courses"); // Check if id is set or not if true toggle, // else simply go back to the page if (isset($_GET['id'])){ // Store the value from get to a // local variable "course_id" $course_id=$_GET['id']; // SQL query that sets the status // to 1 to indicate activation. $sql="UPDATE `courses` SET `status`=1 WHERE id='$course_id'"; // Execute the query mysqli_query($con,$sql); } // Go back to course-page.php header('location: course-page.php'); ?> |
deactivate.php
<?php // Connect to database $con=mysqli_connect("localhost","root","","courses"); // Check if id is set or not, if true, // toggle else simply go back to the page if (isset($_GET['id'])){ // Store the value from get to // a local variable "course_id" $course_id=$_GET['id']; // SQL query that sets the status to // 0 to indicate deactivation. $sql="UPDATE `courses` SET `status`=0 WHERE id='$course_id'"; // Execute the query mysqli_query($con,$sql); } // Go back to course-page.php header('location: course-page.php'); ?> |
Output: We have created a page with clickable buttons and when we click on the buttons the status changes in the database.
activate and deactivate
