Hi Guys. Here in this above video, i have taught about how to confirm and delete data from database with POP Up Dialog Box also known as Bootstrap Modal which will deleted records from database using php, jQuery, Ajax.
As We have taken the Starter Template design from getbootstrap.com website for designing purpose, i.e the Table and the POP Up Bootstrap Modal.
After all thing setup and your data is fetch a table and now you click on delete_btn to fetch the id of its data into your POP-Up modal for deleting the data using ajax jquery.
After fetching deleting id data into input hidden, start with your deleting code given below.
Step 1: We have created a table named student with fields and colums names:
1. id (PrimaryKey, AI (AutoIncrement) )
2. fname (varchar)
3. lname (varchar)
4. class (varchar)
5. section (varchar)
Step 2: Create a file named index.php
<?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 Delete Modal -->
<div class="modal fade" id="deleteStudentModal" tabindex="-1" aria-labelledby="deleteStudentModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteStudentModalLabel">Student Delete DATA </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="code.php" method="POST">
<div class="modal-body">
<input type="hidden" name="student_id" id="delete_id">
<h4>Are you sure, you want to delete this data ?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="delete_student" class="btn btn-danger">YES.! Delete</button>
</div>
</form>
</div>
</div>
</div>
<!-- Student Delete 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_btn">EDIT</a>
<a href="#" class="badge badge-danger delete_btn">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 () {
$('.delete_btn').click(function (e) {
e.preventDefault();
var stud_id = $(this).closest('tr').find('.stud_id').text();
// console.log(stud_id);
$('#delete_id').val(stud_id);
$('#deleteStudentModal').modal('show');
});
});
</script>
</body>
</html>
Step 3: Create a file named code.php
<?php
session_start();
$conn = mysqli_connect("localhost","root","","phpcrud");
if(isset($_POST['delete_student']))
{
$id = $_POST['student_id'];
$query = "DELETE FROM students WHERE id='$id' ";
$query_run = mysqli_query($conn, $query);
if($query_run)
{
$_SESSION['status'] = "Successfully Deleted";
header('Location: index.php');
}
else
{
$_SESSION['status'] = "Something Went Wrong.!";
header('Location: index.php');
}
}
?>
Thanks and Regards,
Ved Prakash N
No comments:
Post a Comment