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');
?>
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon