PHP/MySQLi CRUD Operation with Bootstrap/Modal

Submitted by: 
nurhodelta_17
Post date: 
Thursday, September 21, 2017 - 10:55
Language: 
PHP
Visitors have accessed this post 30649 times.

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 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;

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

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

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

add_modal.php

This is the our form to add 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>

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>Firstname: <strong><?php echo $drow['firstname']; ?></strong></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 -->

addnew.php

This is our code in 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. ?>

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

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

Tags: 
php
Bootstrap
Modal
MySQLi
crud operation
add row
edit row
delete row
select row
nurhodelta_17's picture

Article by nurhodelta_17

nurhodelta_17 has submitted 272 source code / articles.

If you like this post, you can follow SourceCodester on Twitter.

Subscribe to SourceCodester feed via RSS or EMAIL to receive instant updates.

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

Tiago França (not verified)

Thu, 03/08/2018 - 20:38

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

Hermon (not verified)

Thu, 09/21/2017 - 16:38

Nice and works as desired and serves the purpose as intended

Anonymous (not verified)

Fri, 07/12/2019 - 01:53

how to creat comment feature like this?

Add new comment

More information about text formats

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.