Hie Guys, this above video tutorial is all about how to fetch data or view data in a pop up dialog box using boostrap which is also known as MODAL in bootstrap. this task is performed by using php scripting language.
So, lets start it:
Step 1: Create a table named student:
As you know we have this is the PART-3 of CRUD. so, you have already created the student table in your database like given column below:
1. id (PrimaryKey, AI)
2. fname
3. lname
4. class
5. section
Step 2: Create a file named index.php:
As we already created this file and continuing the code,
if you have already start this from PART-1, then you need this just add a class at view button into your table and paste the jQuery script for fetch the data in a pop up modal. as per given below:
<?php session_start(); ?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>PHP CRUD - Bootstrap Modal (POP UP)</title>
</head>
<body>
<!-- Student VIEW Modal -->
<div class="modal fade" id="studentVIEWModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Student View DATA </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="student_viewing_data">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Student VIEW Modal -->
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card">
<?php
if(isset($_SESSION['status']) && $_SESSION['status'] !='')
{
?>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Hey!</strong> <?php echo $_SESSION['status']; ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<?php
unset($_SESSION['status']);
}
?>
<div class="card-header">
<h5>
PHP CRUD - Bootstrap Modal (POP UP)
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#studentModal">
Add Student
</button>
</h5>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">#ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Class</th>
<th scope="col">Section</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost","root","","phpcrud");
$query = "SELECT * FROM students";
$query_run = mysqli_query($conn, $query);
if(mysqli_num_rows($query_run) > 0)
{
// while($row = mysqli_fetch_array($query_run))
foreach($query_run as $row)
{
?>
<tr>
<td class="stud_id"><?php echo $row['id']; ?></td>
<td><?php echo $row['fname']; ?></td>
<td><?php echo $row['lname']; ?></td>
<td><?php echo $row['class']; ?></td>
<td><?php echo $row['section']; ?></td>
<td>
<a href="#" class="badge badge-primary view_btn">VIEW</a>
<a href="#" class="badge badge-info">EDIT</a>
<a href="#" class="badge badge-danger">DELETE</a>
</td>
</tr>
<?php
}
}
else
{
echo "<h5>No Record Found</h5>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('.view_btn').click(function (e) {
e.preventDefault();
var stud_id = $(this).closest('tr').find('.stud_id').text();
// console.log(stud_id);
$.ajax({
type: "POST",
url: "code.php",
data: {
'checking_viewbtn': true,
'student_id': stud_id,
},
success: function (response) {
// console.log(response);
$('.student_viewing_data').html(response);
$('#studentVIEWModal').modal('show');
}
});
});
});
</script>
</body>
</html>
Step 3: Create a file named code.php:
This below php and mysqli code is for retrieveing the data from table database for above view button:
<?php
session_start();
$conn = mysqli_connect("localhost","root","","phpcrud");
if(isset($_POST['checking_viewbtn']))
{
$s_id = $_POST['student_id'];
// echo $return = $s_id;
$query = "SELECT * FROM students WHERE id='$s_id' ";
$query_run = mysqli_query($conn, $query);
if(mysqli_num_rows($query_run) > 0)
{
foreach($query_run as $row)
{
echo $return = '
<h5> ID : '.$row['id'].'</h5>
<h5> First Name : '.$row['fname'].'</h5>
<h5> Last Name : '.$row['lname'].'</h5>
<h5> Class : '.$row['class'].'</h5>
<h5> Section : '.$row['section'].'</h5>
';
}
}
else
{
echo $return = "<h5>No Record Found</h5>";
}
}
?>
