Deleting Multiple Rows using Checkbox in PHP/MySQLi

Submitted by nurhodelta_17 on Friday, September 22, 2017 - 11:11.
This tutorial will teach you how to delete multiple MySQL Table rows using checkbox in PHP/MySQLi. I've use bootstrap and modal in this tutorial but take note that they are hosted so need internet connection for them to work.

Creating our Database

First step is to create our database. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as "sample". 3. After creating a database, click the SQL and paste the below code. See image below for detailed instruction.
  1. CREATE TABLE `user` (
  2.   `userid` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `firstname` VARCHAR(30) NOT NULL,
  4.   `lastname` VARCHAR(30) NOT NULL,
  5.   `address` VARCHAR(100) NOT NULL,
  6. PRIMARY KEY(`userid`)
  7. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
delete_multiple

Creating our Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php.
  1. <?php
  2.  
  3. //MySQLi Procedural
  4. $conn = mysqli_connect("localhost","root","","sample");
  5. if (!$conn) {
  6.         die("Connection failed: " . mysqli_connect_error());
  7. }
  8.  
  9. ?>

index.php

This is the page where we show our sample table. Also, for you to further practice the delete function, I've added Add New function.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>PHP/MySQLi Deleting Multiple Rows using Checkbox</title>
  5.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  6.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  7.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8.  
  9.         <style>
  10.                 input[type="checkbox"] {
  11.                 transform:scale(2, 2);
  12.     }
  13.         </style>
  14. </head>
  15. <body>
  16. <div class="container">
  17.         <div style="height:50px;"></div>
  18.         <div class="well" style="margin:auto; padding:auto; width:80%;">
  19.         <span style="font-size:25px; color:blue"><center><strong>PHP/MySQLi Deleting Multiple Rows using Checkbox</strong></center></span>     
  20.                 <div style="height:20px;"></div>
  21.                 <table class="table table-striped table-bordered table-hover">
  22.                         <thead>
  23.                                 <th></th>
  24.                                 <th>Firstname</th>
  25.                                 <th>Lastname</th>
  26.                                 <th>Address</th>
  27.                                
  28.                         </thead>
  29.                         <form method="POST" action="delete.php">
  30.                         <tbody>
  31.                         <?php
  32.                                 include('conn.php');
  33.                                
  34.                                 $query=mysqli_query($conn,"select * from `user`");
  35.                                 while($row=mysqli_fetch_array($query)){
  36.                                         ?>
  37.                                         <tr>
  38.                                                 <td align="center"><input type="checkbox" value="<?php echo $row['userid']; ?>" name="userid[]"></td>
  39.                                                 <td><?php echo $row['firstname']; ?></td>
  40.                                                 <td><?php echo $row['lastname']; ?></td>
  41.                                                 <td><?php echo $row['address']; ?></td>        
  42.                                         </tr>
  43.                                         <?php
  44.                                 }
  45.                        
  46.                         ?>
  47.                         </tbody>
  48.                 </table>
  49.                         <a href="#addnew" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add New</a> || <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</button>
  50.                         </form>
  51.         </div>
  52.         <?php include('modal.php'); ?>
  53. </div>
  54. </body>
  55. </html>

modal.php

This is the modal that contains our Add New form.
  1. <!-- Add New -->
  2.     <div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3.         <div class="modal-dialog">
  4.             <div class="modal-content">
  5.                 <div class="modal-header">
  6.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7.                     <center><h4 class="modal-title" id="myModalLabel">Add New</h4></center>
  8.                 </div>
  9.                 <div class="modal-body">
  10.                                 <div class="container-fluid">
  11.                                 <form method="POST" action="addnew.php">
  12.                                         <div class="row">
  13.                                                 <div class="col-lg-2">
  14.                                                         <label class="control-label" style="position:relative; top:7px;">Firstname:</label>
  15.                                                 </div>
  16.                                                 <div class="col-lg-10">
  17.                                                         <input type="text" class="form-control" name="firstname">
  18.                                                 </div>
  19.                                         </div>
  20.                                         <div style="height:10px;"></div>
  21.                                         <div class="row">
  22.                                                 <div class="col-lg-2">
  23.                                                         <label class="control-label" style="position:relative; top:7px;">Lastname:</label>
  24.                                                 </div>
  25.                                                 <div class="col-lg-10">
  26.                                                         <input type="text" class="form-control" name="lastname">
  27.                                                 </div>
  28.                                         </div>
  29.                                         <div style="height:10px;"></div>
  30.                                         <div class="row">
  31.                                                 <div class="col-lg-2">
  32.                                                         <label class="control-label" style="position:relative; top:7px;">Address:</label>
  33.                                                 </div>
  34.                                                 <div class="col-lg-10">
  35.                                                         <input type="text" class="form-control" name="address">
  36.                                                 </div>
  37.                                         </div>
  38.                 </div>
  39.                                 </div>
  40.                 <div class="modal-footer">
  41.                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  42.                     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
  43.                                 </form>
  44.                 </div>
  45.                                
  46.             </div>
  47.         </div>
  48.     </div>

addnew.php

Our code in adding new row to our MySQL Table.
  1. <?php
  2.         include('conn.php');
  3.        
  4.         $firstname=$_POST['firstname'];
  5.         $lastname=$_POST['lastname'];
  6.         $address=$_POST['address'];
  7.        
  8.         mysqli_query($conn,"insert into user (firstname, lastname, address) values ('$firstname', '$lastname', '$address')");
  9.         header('location:index.php');
  10.  
  11. ?>

delete.php

Lastly, our delete code. By pressing the delete button, this code will delete all checked rows.
  1. <?php
  2.         include('conn.php');
  3.        
  4.         if(isset($_POST['userid'])){
  5.                 foreach ($_POST['userid'] as $id):
  6.                         mysqli_query($conn,"delete from user where userid='$id'");
  7.                 endforeach;
  8.                
  9.                 header('location:index.php');
  10.         }
  11.         else{
  12.                 ?>
  13.                 <script>
  14.                         window.alert('Please check user to Delete');
  15.                         window.location.href='index.php';
  16.                 </script>
  17.                 <?php
  18.         }
  19.        
  20. ?>
And that ends this tutorial. If you have any comments or questions, feel free to message me or comment below. Hope this helps. Happy Coding :)
Tags
php
MySQLi
Bootstrap
Modal
delete row
delete multiple row
delete multiple row using checkbox
checkbox

Comments

Submitted by Anonymous (not verified) on Tue, 11/26/2019 - 02:21

I am a student

Add new comment

About text formats