PHP CRUD using Bootstrap Modal with DataTable (Search Box and Pagination)
PHP CRUD Bootstrap Modal: Insert Data into Database in PHP using Bootstrap Modal
In this post, you are going to learn about how to insert data into Database in PHP MySQL using the Bootstrap MODAL i.e POP UP Modal.
PHP CRUD using Bootstrap Model v4: Video: https://www.youtube.com/watch?v=XhFwXL0yE6E&list=PLRheCL1cXHrsnOsrT3PxmHDMLbZEwqPZ5&index=1&t=1037s
Step 1: To get started with this first you have to create a table in your database with the name student and below fields are
CREATE TABLE student (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(30) NOT NULL,
lname VARCHAR(30) NOT NULL,
course VARCHAR(50) NOT NULL,
contact VARCHAR(50) NOT NULL,
)
Step 2: First we have to create a page called index.php and start with the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> PHP CRUD with Bootstrap Modal </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="studentaddmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Student Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="insertcode.php" method="POST">
<div class="modal-body">
<div class="form-group">
<label> First Name </label>
<input type="text" name="fname" class="form-control" placeholder="Enter First Name">
</div>
<div class="form-group">
<label> Last Name </label>
<input type="text" name="lname" class="form-control" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label> Course </label>
<input type="text" name="course" class="form-control" placeholder="Enter Course">
</div>
<div class="form-group">
<label> Phone Number </label>
<input type="number" name="contact" class="form-control" placeholder="Enter Phone Number">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="insertdata" class="btn btn-primary">Save Data</button>
</div>
</form>
</div>
</div>
</div>
<!-- EDIT POP UP FORM (Bootstrap MODAL) -->
<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="updatecode.php" method="POST">
<div class="modal-body">
<input type="hidden" name="update_id" id="update_id">
<div class="form-group">
<label> First Name </label>
<input type="text" name="fname" id="fname" class="form-control"
placeholder="Enter First Name">
</div>
<div class="form-group">
<label> Last Name </label>
<input type="text" name="lname" id="lname" class="form-control"
placeholder="Enter Last Name">
</div>
<div class="form-group">
<label> Course </label>
<input type="text" name="course" id="course" class="form-control"
placeholder="Enter Course">
</div>
<div class="form-group">
<label> Phone Number </label>
<input type="text" name="contact" id="contact" class="form-control"
placeholder="Enter Phone Number">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="updatedata" class="btn btn-primary">Update Data</button>
</div>
</form>
</div>
</div>
</div>
<!-- DELETE POP UP FORM (Bootstrap MODAL) -->
<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> Delete Student Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="deletecode.php" method="POST">
<div class="modal-body">
<input type="hidden" name="delete_id" id="delete_id">
<h4> Do you want to Delete this Data ??</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> NO </button>
<button type="submit" name="deletedata" class="btn btn-primary"> Yes !! Delete it. </button>
</div>
</form>
</div>
</div>
</div>
<!-- VIEW POP UP FORM (Bootstrap MODAL) -->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> View Student Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="deletecode.php" method="POST">
<div class="modal-body">
<input type="text" name="view_id" id="view_id">
<!-- <p id="fname"> </p> -->
<h4 id="fname"> <?php echo ''; ?> </h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> CLOSE </button>
<!-- <button type="submit" name="deletedata" class="btn btn-primary"> Yes !! Delete it. </button> -->
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<div class="card">
<h2> PHP CRUD Bootstrap MODAL (POP UP Modal) </h2>
</div>
<div class="card">
<div class="card-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#studentaddmodal">
ADD DATA
</button>
</div>
</div>
<div class="card">
<div class="card-body">
<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection, 'phpcrud');
$query = "SELECT * FROM student";
$query_run = mysqli_query($connection, $query);
?>
<table id="datatableid" class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col"> ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name </th>
<th scope="col"> Course </th>
<th scope="col"> Contact </th>
<th scope="col"> VIEW </th>
<th scope="col"> EDIT </th>
<th scope="col"> DELETE </th>
</tr>
</thead>
<?php
if($query_run)
{
foreach($query_run as $row)
{
?>
<tbody>
<tr>
<td> <?php echo $row['id']; ?> </td>
<td> <?php echo $row['fname']; ?> </td>
<td> <?php echo $row['lname']; ?> </td>
<td> <?php echo $row['course']; ?> </td>
<td> <?php echo $row['contact']; ?> </td>
<td>
<button type="button" class="btn btn-info viewbtn"> VIEW </button>
</td>
<td>
<button type="button" class="btn btn-success editbtn"> EDIT </button>
</td>
<td>
<button type="button" class="btn btn-danger deletebtn"> DELETE </button>
</td>
</tr>
</tbody>
<?php
}
}
else
{
echo "No Record Found";
}
?>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('.viewbtn').on('click', function () {
$('#viewmodal').modal('show');
$.ajax({ //create an ajax request to display.php
type: "GET",
url: "display.php",
dataType: "html", //expect html to be returned
success: function (response) {
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
<script>
$(document).ready(function () {
$('#datatableid').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search Your Data",
}
});
});
</script>
<script>
$(document).ready(function () {
$('.deletebtn').on('click', function () {
$('#deletemodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#delete_id').val(data[0]);
});
});
</script>
<script>
$(document).ready(function () {
$('.editbtn').on('click', function () {
$('#editmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#fname').val(data[1]);
$('#lname').val(data[2]);
$('#course').val(data[3]);
$('#contact').val(data[4]);
});
});
</script>
</body>
</html>
Step 3: Now to insert the data from your above Insert Bootstrap Modal Form create a file named insertcode.php and paste the below code:
<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection, 'phpcrud');
if(isset($_POST['insertdata']))
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$course = $_POST['course'];
$contact = $_POST['contact'];
$query = "INSERT INTO student (`fname`,`lname`,`course`,`contact`) VALUES ('$fname','$lname','$course','$contact')";
$query_run = mysqli_query($connection, $query);
if($query_run)
{
echo '<script> alert("Data Saved"); </script>';
header('Location: index.php');
}
else
{
echo '<script> alert("Data Not Saved"); </script>';
}
}
?>
Step 4: Now to update the data from your above Bootstrap Modal Form create a file named updatecode.php and paste the below code:
<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection, 'phpcrud');
if(isset($_POST['updatedata']))
{
$id = $_POST['update_id'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$course = $_POST['course'];
$contact = $_POST['contact'];
$query = "UPDATE student SET fname='$fname', lname='$lname', course='$course', contact=' $contact' WHERE id='$id' ";
$query_run = mysqli_query($connection, $query);
if($query_run)
{
echo '<script> alert("Data Updated"); </script>';
header("Location:index.php");
}
else
{
echo '<script> alert("Data Not Updated"); </script>';
}
}
?>
Step 5: Now to delete the data using your above Bootstrap Modal Form create a file named deletecode.php and paste the below code:
<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection, 'phpcrud');
if(isset($_POST['deletedata']))
{
$id = $_POST['delete_id'];
$query = "DELETE FROM student WHERE id='$id'";
$query_run = mysqli_query($connection, $query);
if($query_run)
{
echo '<script> alert("Data Deleted"); </script>';
header("Location:index.php");
}
else
{
echo '<script> alert("Data Not Deleted"); </script>';
}
}
?>
Thanks for reading...