Insert Update Delete using PHP MySQLi using Bootstrap, Php insert Update Delete free source code, php crud operation
Lets Learn how to Create Php crud operation using MySQLi and Bootstrap 4 where we are using Bootstrap Model framework at the end of this post you can download the entire project code.
Lets Understand Step by Step.
Step1: Create MySQL Database
Open ur Xampp/Wamp Server
Run PHPMYADMIN
Create Database User as Follow
Use Following Script copy paste and run in your phpmyadmin
--
-- Database: `crude`
--
-- --------------------------------------------------------
--
-- Table structure for table `user`
--
CREATE TABLE `user` (
`eid` int(11) NOT NULL,
`ename` varchar(30) NOT NULL,
`designation` varchar(30) NOT NULL,
`city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`eid`, `ename`, `designation`, `city`) VALUES
(1, 'Pitesh', 'Managerrrrrrrrrrrrrrrrrrrrrrrr', 'Pune'),
(2, 'Rakesh', 'Office Staff', 'Ahmednagar'),
(3, 'Ritu', 'Sales', 'Pune'),
(6, 'Nasir Sir', 'Assistant Professor', 'Ahmednagar');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`eid`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `eid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
COMMIT;
Step 2: Create Database Connection File conn.php
<?php
$conn = mysqli_connect("localhost","root","","crowd")or
die("Connection failed: " );
?>
Step 3:
Create Php Page index.php Use Bootstrap 4 for Responsive Web designing
Use Following Code index.php
<!DOCTYPE html>
<html>
<head>
<title>Insert Update Delete using PHP/MySQLi using Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background:pink">
<div class="container">
<div style="height:50px;"></div>
<div class="well" style="margin:auto; padding:auto; width:80%;">
<span class="pull-left"><a href="#addnew" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add New</a></span>
<div style="height:50px;"></div>
<table class="table table-striped table-bordered table-hover" >
<thead style="background-color:green; color:white;">
<th>Employee Name</th>
<th>Designation</th>
<th>City</th>
<th>Edit/Delete</th>
</thead>
<tbody>
<?php
include('conn.php');
$query=mysqli_query($conn,"select * from `user`");
while($row=mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo ucwords($row['ename']); ?></td>
<td><?php echo ucwords($row['designation']); ?></td>
<td><?php echo $row['city']; ?></td>
<td>
<a href="#edit<?php echo $row['eid']; ?>" data-toggle="modal" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> Edit</a> ||
<a href="#del<?php echo $row['eid']; ?>" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</a>
<?php include('button.php'); ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<span style="font-size:25px; color:blue"><center><strong>Insert Update Delete using PHP/MySQLi using Bootstrap</strong></center></span>
</div>
<?php include('add_modal.php'); ?>
</div>
</body>
</html>
Lets Write a code using bootstrap model in separate php file add_model.php where user click on create new button then model popup where new user information feeding will be done
save file add_model.php
<!-- Add New -->
<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="addnew.php">
<div class="row">
<div class="col-lg-2">
<label class="control-label" style="position:relative; top:7px;">Employee Name:</label>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="ename">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2">
<label class="control-label" style="position:relative; top:7px;">Designation:</label>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="designation">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2">
<label class="control-label" style="position:relative; top:7px;">City:</label>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="city">
</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>
Save Below code as addnew.php
to insert data from model to database
<?php
include('conn.php');
$ename=$_POST['ename'];
$designation=$_POST['designation'];
$city=$_POST['city'];
mysqli_query($conn,"insert into user (ename, designation, city) values ('$ename', '$designation', '$city')");
header('location:index.php');
?>
Save Below code as delete.php
to delete data from database
<?php
include('conn.php');
$eid=$_GET['eid'];
mysqli_query($conn,"delete from user where eid='$eid'");
header('location:index.php');
?>
Save Below code as edit.php
to delete data from database
<?php
include('conn.php');
$eid=$_GET['eid'];
$ename=$_POST['ename'];
$designation=$_POST['designation'];
$city=$_POST['city'];
mysqli_query($conn,"update user set ename='$ename', designation='$designation', city='$city' where eid='$eid'");
header('location:index.php');
?>
ConversionConversion EmoticonEmoticon