FahmidasClassroom

Learn by easy steps

Crud php

Steps:
1. Create a database named php_crud  and a table named `employee_basics` by running following SQL,

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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`));
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`));
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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
//Create database connection
$mysqli = mysqli_connect("localhost","root","","php_crud");
if (!$mysqli) {
die("Connection error: " . mysqli_connect_error());
}
?>
<?php //Create database connection $mysqli = mysqli_connect("localhost","root","","php_crud"); if (!$mysqli) { die("Connection error: " . mysqli_connect_error()); } ?>
<?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.

1000010829
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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">&nbsp;
</span>Detail</a>&nbsp;
<a href="#edit<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-pencil">&nbsp;
</span> Edit</a>&nbsp;
<a href="#del<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash">&nbsp;
</span> Delete</a>&nbsp;
<!-- 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>
<!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">&nbsp; </span>Detail</a>&nbsp; <a href="#edit<?php echo $row['id']; ?>" data-toggle="modal" class="btn btn-warning btn-sm"> <span class="glyphicon glyphicon-pencil">&nbsp; </span> Edit</a>&nbsp; <a href="#del<?php echo $row['id']; ?>" data-toggle="modal" class="btn btn-danger btn-sm"> <span class="glyphicon glyphicon-trash">&nbsp; </span> Delete</a>&nbsp; <!-- 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>
<!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">&nbsp;
</span>Detail</a>&nbsp;

<a href="#edit<?php echo $row['id']; ?>" 
data-toggle="modal" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-pencil">&nbsp;
</span> Edit</a>&nbsp;

<a href="#del<?php echo $row['id']; ?>" 
data-toggle="modal" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash">&nbsp;
</span> Delete</a>&nbsp;

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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">&times;</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>
<!-- 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">&times;</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>
<!-- 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">&times;</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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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">&times;</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 -->
<!-- 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">&times;</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 -->
<!-- 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">&times;</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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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">&times;</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 -->
<!-- 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">&times;</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 -->
<!-- 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">&times;</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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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">&times;</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 -->
<!-- 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">&times;</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 -->
<!-- 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">&times;</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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?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');
?>
<?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'); ?>
<?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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?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');
?>
<?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'); ?>
<?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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?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');
?>
<?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'); ?>
<?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.