Steps:
1. Create a database named php_crud and a table named `employee_basics` by running following SQL,
CREATE TABLE `employee_basics` (`id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL, `gender` varchar(6) NOT NULL, `address` varchar(255) NOT NULL, `phone` varchar(50) NOT NULL, `post` varchar(50) DEFAULT NULL, PRIMARY KEY (`id`));
2. Create a folder named php_crud in htdocs folder.
3. Create database.php file and add the following code.
<?php
//Create database connection
$mysqli = mysqli_connect("localhost","root","","php_crud");
if (!$mysqli) {
die("Connection error: " . mysqli_connect_error());
}
?>
4. Create index.php file and add the following code.
<!DOCTYPE html>
<html>
<head>
<title>PHP/MySQLi CRUD Operation using Bootstrap/Modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css></style>
<script type="text/javascript" src=https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/2.1.0/bootstrap-filestyle.min.js"> </script>
<script>
$(document).ready(function(){
$('#empTable').dataTable();
$('.file-upload').file_upload();
});
</script>
</head>
<body style="margin:20px auto">
<center>
<h2><span style="font-size:25px; color:blue">
Simple CRUD Operation using PHP, MySQL and Bootstrap</span>
</h2></center>
<div class="container">
<br/><br/>
<div class="row header col-sm-12" style="text-align:center;color:green">
<span class="pull-left">
<a href="#addnew" data-toggle="modal" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-plus"></span> Add New
</a></span>
<div style="height:50px;"></div>
<table class="table table-striped table-bordered table-responsive table-hover"
id="empTable" >
<thead>
<th><center>Picture</center></th>
<th><center>Name</center></th>
<th><center>Address</center></th>
<th><center>Phone</center></th>
<th><center>Action</center></th>
</thead>
<tbody>
<?php
include('database.php');
$result=$mysqli->query("select * from employee_basics");
while($row=$result->fetch_assoc()){
$img = "http://localhost/php_crud/profile_images/".$row['id']. ".jpg";
?>
<tr>
<td> <img src='<?php echo $img ?>' height="50px" width="70px" /></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['address']; ?></td>
<td><?php echo $row['phone']; ?></td>
<td>
<a href="#detail<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-eye-open">
</span>Detail</a>
<a href="#edit<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-pencil">
</span> Edit</a>
<a href="#del<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash">
</span> Delete</a>
<!-- include edit modal -->
<?php include('show_detail_modal.php'); ?>
<!-- End -->
<!-- include edit modal -->
<?php include('show_edit_modal.php'); ?>
<!-- End -->
<!-- include delete modal -->
<?php include('show_delete_modal.php'); ?>
<!-- End -->
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- include insert modal -->
<?php include('show_add_modal.php'); ?>
<!-- End -->
</div>
</body>
</html>
5. Create show_add_modal.php file and add the following code.
<!-- Add New employee--> <div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <center><h4 class="modal-title" id="myModalLabel">Add New</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <form method="POST" action="insert.php" class="form-horizontal" enctype="multipart/form-data" > <div class="row"> <div class="col-lg-4"> <label class="control-label" style="position:relative; top:7px;">Name:</label> </div> <div class="col-lg-8"> <input type="text" class="form-control" name="name"> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-4"> <label class="control-label" style="position:relative; top:7px;">Gender:</label> </div> <div class="col-lg-8"> <select name="gender"> <option>Male</option> <option>Female</option> </select> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-4"> <label class="control-label" style="position:relative; top:7px;">Address:</label> </div> <div class="col-lg-8"> <input type="text" class="form-control" name="address"> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-4"> <label class="control-label" style="position:relative; top:7px;">Phone:</label> </div> <div class="col-lg-8"> <input type="text" class="form-control" name="phone"> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-4"> <label class="control-label" style="position:relative; top:7px;">Post:</label> </div> <div class="col-lg-8"> <input type="text" class="form-control" name="post"> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-4"> <label class="control-label" style="position:relative; top:7px;">Profile Image:</label> </div> <div class="col-lg-8"> <input type="file" class="filestyle" name="pimage" /> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Cancel</button> <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-floppy-disk"></span> Save</a> </form> </div> </div> </div> </div>
6. Create show_edit_modal.php file and add the following code.
<!-- Edit Model -->
<div class="modal fade" id="edit<?php echo $row['id']; ?>" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<center><h4 class="modal-title" id="myModalLabel">Edit</h4></center>
</div>
<div class="modal-body">
<?php
$edit=$mysqli->query("select * from employee_basics where id=".$row['id']);
$erow=$edit->fetch_assoc();
?>
<div class="container-fluid">
<form method="POST" action="update.php?id=<?php echo $erow['id']; ?>"
enctype="multipart/form-data">
<div class="row">
<div class="col-lg-4" align="left">
<label style="position:relative; top:7px;">Name:</label>
</div>
<div class="col-lg-8">
<input type="text" name="name" class="form-control"
value="<?php echo $erow['name']; ?>">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label style="position:relative; top:7px;">Gender:</label>
</div>
<div class="col-lg-8" align="left">
<select name="gender">
<?php if ($erow['gender']=="Male") {?>
<option selected>Male</option>
<option>Female</option>
<?php }else{ ?>
<option>Male</option>
<option selected>Female</option>
<?php }?>
</select>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label style="position:relative; top:7px;">Address:</label>
</div>
<div class="col-lg-8">
<input type="text" name="address" class="form-control"
value="<?php echo $erow['address']; ?>">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label class="control-label" style="position:relative; top:7px;">Phone:</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" name="phone"
value="<?php echo $erow['phone']; ?>">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label class="control-label" style="position:relative; top:7px;">Post:</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control"
name="post" value="<?php echo $erow['post']; ?>">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label class="control-label" style="position:relative; top:7px;">Profile Image:
</label>
</div>
<div class="col-lg-8">
<input type="file" class="filestyle" name="pimage" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" class="btn btn-warning">
<span class="glyphicon glyphicon-check"></span> Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal -->
7. Create show_delete_modal.php file and add the following code.
<!-- Delete --> <div class="modal fade" id="del<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <center><h4 class="modal-title" id="myModalLabel">Delete</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <h5><center>Do you want to delete <strong><?php echo $row['name']; ?>? </strong></center></h5> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Cancel</button> <a href="delete.php?id=<?php echo $row['id']; ?>" class="btn btn-danger"> <span class="glyphicon glyphicon-trash"></span> Delete</a> </div> </div> </div> </div> <!-- /.modal -->
8. Create show_detail_modal.php file and add the following code.
<!-- Detail Model -->
<div class="modal fade" id="detail<?php echo $row['id']; ?>" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3> Profile Details </h3>
</div>
<div class="modal-body">
<?php
$edit=$mysqli->query("select * from employee_basics where id=".$row['id']);
$erow=$edit->fetch_assoc();
?>
<div class="container-fluid">
<form method="POST" action="update.php?id=<?php echo $erow['id']; ?>"
enctype="multipart/form-data">
<div class="row">
<div class="col-lg-12" align="center">
<?php $img = "http://localhost/php_crud/profile_images/".$row['id']. ".jpg";?>
<img src='<?php echo $img ?>' height="150px" width="170px" />
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label style="position:relative; top:7px;">Name:</label>
</div>
<div class="col-lg-8" align="left">
<?php echo $erow['name']; ?>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label style="position:relative; top:7px;">Gender:</label>
</div>
<div class="col-lg-8" align="left">
<?php echo $erow['gender']; ?>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label style="position:relative; top:7px;">Address:</label>
</div>
<div class="col-lg-8" align="left">
<?php echo $erow['address']; ?>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label class="control-label" style="position:relative; top:7px;">Phone:</label>
</div>
<div class="col-lg-8" align="left">
<?php echo $erow['phone']; ?>
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-4" align="left">
<label class="control-label" style="position:relative; top:7px;">Post:</label>
</div>
<div class="col-lg-8" align="left">
<?php echo $erow['post']; ?>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal -->
9. Create a folder named profile_images in the current folder where the profile image will be uploaded.
10. Create insert.php file and add the following code.
<?php
include('database.php');
$name=$_POST['name'];
$gender=$_POST['gender'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$post=$_POST['post'];
$mysqli->query("insert into employee_basics (name, gender, address,phone,post)
values ('$name', '$gender', '$address','$phone','$post')");
$res = $mysqli->query("select id from employee_basics order by id desc");
$row = $res->fetch_row();
$id = $row[0];
// Set a constant
define ("FILEREPOSITORY","profile_images/");
// Make sure that the file was POSTed.
if (is_uploaded_file($_FILES['pimage']['tmp_name']))
{
// Was the file a JPEG?
if ($_FILES['pimage']['type'] != "image/jpeg") {
echo "<p>Profile image must be uploaded in JPEG format.</p>";
} else {
//$name = $_FILES['classnotes']['name'];
$filename=$id.".jpg";
$result = move_uploaded_file($_FILES['pimage']['tmp_name'],FILEREPOSITORY.$filename);
if ($result == 1) echo "<p>File successfully uploaded.</p>";
else echo "<p>There was a problem uploading the file.</p>";
}
}
header('location:index.php');
?>
11. Create update.php file and add the following code.
<?php
include('database.php');
$id=$_GET['id'];
$name=$_POST['name'];
$gender=$_POST['gender'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$post=$_POST['post'];
$mysqli->query("update employee_basics set name='$name', gender='$gender',
address='$address', phone='$phone', post='$post' where id=$id");
// Set a constant
define ("FILEREPOSITORY","profile_images/");
// Make sure that the file was POSTed.
if (is_uploaded_file($_FILES['pimage']['tmp_name']))
{
// Was the file a JPEG?
if ($_FILES['pimage']['type'] != "image/jpeg") {
echo "<p>Profile image must be uploaded in JPEG format.</p>";
} else {
//$name = $_FILES['classnotes']['name'];
$filename=$id.".jpg";
unlink(FILEREPOSITORY.$filename);
$result = move_uploaded_file($_FILES['pimage']['tmp_name'],
FILEREPOSITORY.$filename);
if ($result == 1) echo "<p>File successfully uploaded.</p>";
else echo "<p>There was a problem uploading the file.</p>";
}
}
header('location:index.php');
?>
12. Create delete.php file and add the following code.
<?php
include('database.php');
$id=$_GET['id'];
$mysqli->query("delete from employee_basics where id=$id");
unlink("profile_images/".$id.".jpg");
header('location:index.php');
?>
13. Test your code.