CRUD Operation using PHP/MySQLi with Bootstrap Tutorial

Language

This tutorial will teach you the basic Create, Read, Update, and Delete Operations using PHP/MySQLi with Boostrap/Modal. Note: Bootstrap and Javascripts used in this tutorial are hosted so you need an internet connection for them to work.

Creating our Database

The first step is to create our database.

  • Open phpMyAdmin.
  • Click databases, create a database, and name it as "sample".
  • After creating a database, click the SQL and paste the below code. See the image below for detailed instructions.
  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;
crud_bootstrap

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

The next step is to create our sample table. This will be our Read.

  1. <!DOCTYPE html>
  2. <title>PHP/MySQLi CRUD Operation using Bootstrap/Modal</title>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  6. </head>
  7. <div class="container">
  8. <div style="height:50px;"></div>
  9. <div class="well" style="margin:auto; padding:auto; width:80%;">
  10. <span style="font-size:25px; color:blue"><center><strong>PHP/MySQLi CRUD Operation using Bootstrap</strong></center></span>
  11. <span class="pull-left"><a href="#addnew" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add New</a></span>
  12. <div style="height:50px;"></div>
  13. <table class="table table-striped table-bordered table-hover">
  14. <th>Firstname</th>
  15. <th>Lastname</th>
  16. <th>Address</th>
  17. <th>Action</th>
  18. </thead>
  19. <?php
  20. include('conn.php');
  21.  
  22. $query=mysqli_query($conn,"select * from `user`");
  23. while($row=mysqli_fetch_array($query)){
  24. ?>
  25. <tr>
  26. <td><?php echo ucwords($row['firstname']); ?></td>
  27. <td><?php echo ucwords($row['lastname']); ?></td>
  28. <td><?php echo $row['address']; ?></td>
  29. <td>
  30. <a href="#edit<?php echo $row['userid']; ?>" data-toggle="modal" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> Edit</a> ||
  31. <a href="#del<?php echo $row['userid']; ?>" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</a>
  32. <?php include('button.php'); ?>
  33. </td>
  34. </tr>
  35. <?php
  36. }
  37.  
  38. ?>
  39. </tbody>
  40. </table>
  41. </div>
  42. <?php include('add_modal.php'); ?>
  43. </div>
  44. </body>
  45. </html>

add_modal.php

This is our form to add a new row to our database.

  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

This is our code for adding the data in our add form to our database.

  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. ?>

button.php

This contains our Edit Modal and Delete Modal.

  1. <!-- Delete -->
  2. <div class="modal fade" id="del<?php echo $row['userid']; ?>" 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">Delete</h4></center>
  8. </div>
  9. <div class="modal-body">
  10. <?php
  11. $del=mysqli_query($conn,"select * from user where userid='".$row['userid']."'");
  12. $drow=mysqli_fetch_array($del);
  13. ?>
  14. <div class="container-fluid">
  15. <h5><center>Are you sure to delete <strong><?php echo ucwords($drow['firstname'].' '.$row['lastname']); ?></strong> from the list? This method cannot be undone.</center></h5>
  16. </div>
  17. </div>
  18. <div class="modal-footer">
  19. <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  20. <a href="delete.php?id=<?php echo $row['userid']; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</a>
  21. </div>
  22.  
  23. </div>
  24. </div>
  25. </div>
  26. <!-- /.modal -->
  27.  
  28. <!-- Edit -->
  29. <div class="modal fade" id="edit<?php echo $row['userid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  30. <div class="modal-dialog">
  31. <div class="modal-content">
  32. <div class="modal-header">
  33. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  34. <center><h4 class="modal-title" id="myModalLabel">Edit</h4></center>
  35. </div>
  36. <div class="modal-body">
  37. <?php
  38. $edit=mysqli_query($conn,"select * from user where userid='".$row['userid']."'");
  39. $erow=mysqli_fetch_array($edit);
  40. ?>
  41. <div class="container-fluid">
  42. <form method="POST" action="edit.php?id=<?php echo $erow['userid']; ?>">
  43. <div class="row">
  44. <div class="col-lg-2">
  45. <label style="position:relative; top:7px;">Firstname:</label>
  46. </div>
  47. <div class="col-lg-10">
  48. <input type="text" name="firstname" class="form-control" value="<?php echo $erow['firstname']; ?>">
  49. </div>
  50. </div>
  51. <div style="height:10px;"></div>
  52. <div class="row">
  53. <div class="col-lg-2">
  54. <label style="position:relative; top:7px;">Lastname:</label>
  55. </div>
  56. <div class="col-lg-10">
  57. <input type="text" name="lastname" class="form-control" value="<?php echo $erow['lastname']; ?>">
  58. </div>
  59. </div>
  60. <div style="height:10px;"></div>
  61. <div class="row">
  62. <div class="col-lg-2">
  63. <label style="position:relative; top:7px;">Address:</label>
  64. </div>
  65. <div class="col-lg-10">
  66. <input type="text" name="address" class="form-control" value="<?php echo $erow['address']; ?>">
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="modal-footer">
  72. <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  73. <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-check"></span> Save</button>
  74. </div>
  75. </form>
  76. </div>
  77. </div>
  78. </div>
  79. <!-- /.modal -->

edit.php

The code for our Update Form.

  1. <?php
  2. include('conn.php');
  3.  
  4. $id=$_GET['id'];
  5.  
  6. $firstname=$_POST['firstname'];
  7. $lastname=$_POST['lastname'];
  8. $address=$_POST['address'];
  9.  
  10. mysqli_query($conn,"update user set firstname='$firstname', lastname='$lastname', address='$address' where userid='$id'");
  11. header('location:index.php');
  12.  
  13. ?>

delete.php

Lastly, this our delete code to delete row in our table.

  1. <?php
  2. include('conn.php');
  3. $id=$_GET['id'];
  4. mysqli_query($conn,"delete from user where userid='$id'");
  5. header('location:index.php');
  6.  
  7. ?>

DEMO

That ends this tutorial. For any questions or comments, feel free to comment below or message me here. Hope this tutorial helps. Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

Submitted byHermon (not verified)on Thu, 09/21/2017 - 16:38

Nice and works as desired and serves the purpose as intended
Submitted byTiago França (not verified)on Thu, 03/08/2018 - 20:38

amazing, it helped me a lot, I was testing some functions

Add new comment