Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
Bootstrap icons
https://icons.getbootstrap.com/#install
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css
index.php
//index.php
<?php
include('conn.php');
?>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1" />
<link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<title>PHP Mysqli CRUD with JQuery AJAX and Bootstrap 5</title>
</head>
<body>
<div style="height:30px;"></div>
<div class = "row">
<div class = "col-md-3">
</div>
<div class = "col-md-6 well">
<div class="row">
<div class="col-lg-12">
<center><h2 class = "text-primary">PHP Mysqli CRUD with JQuery AJAX and Bootstrap 5</h2></center>
<hr>
<div>
<form>
<div class="mb-3">
<label>Firstname:</label>
<input type = "text" id = "firstname" class = "form-control">
</div>
<div class="mb-3">
<label>Lastname:</label>
<input type = "text" id = "lastname" class = "form-control">
</div>
<div class="mb-3">
<button type = "button" id="addnew" class = "btn btn-primary"><i class="bi bi-clipboard2-plus-fill"></i> Add</button>
</div>
</form>
</div>
</div>
</div><br>
<div class="row">
<div id="userTable"></div>
</div>
</div>
</div>
</body>
<script src = "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
showUser();
//Add New
$(document).on('click', '#addnew', function(){
if ($('#firstname').val()=="" || $('#lastname').val()==""){
alert('Please input data first');
}
else{
$firstname=$('#firstname').val();
$lastname=$('#lastname').val();
$.ajax({
type: "POST",
url: "addnew.php",
data: {
firstname: $firstname,
lastname: $lastname,
add: 1,
},
success: function(){
showUser();
}
});
}
});
//Delete
$(document).on('click', '.delete', function(){
$id=$(this).val();
$.ajax({
type: "POST",
url: "delete.php",
data: {
id: $id,
del: 1,
},
success: function(){
showUser();
}
});
});
//Update
$(document).on('click', '.updateuser', function(){
$uid=$(this).val();
$('#edit'+$uid).modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
$ufirstname=$('#ufirstname'+$uid).val();
$ulastname=$('#ulastname'+$uid).val();
$.ajax({
type: "POST",
url: "update.php",
data: {
id: $uid,
firstname: $ufirstname,
lastname: $ulastname,
edit: 1,
},
success: function(){
showUser();
}
});
});
});
//Showing our Table
function showUser(){
$.ajax({
url: 'show_user.php',
type: 'POST',
async: false,
data:{
show: 1
},
success: function(response){
$('#userTable').html(response);
}
});
}
</script>
</html>
conn.php
//conn.php
<?php
$conn = mysqli_connect("localhost","root","","testingdb");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
addnew.php
//addnew.php
<?php
include('conn.php');
if(isset($_POST['add'])){
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
mysqli_query($conn,"insert into usertble (firstname, lastname) values ('$firstname', '$lastname')");
}
?>
show_user.php
//show_user.php
<?php
include('conn.php');
if(isset($_POST['show'])){
?>
<table class = "table table-bordered alert-success table-hover">
<thead>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</thead>
<tbody>
<?php
$quser=mysqli_query($conn,"select * from usertble");
while($urow=mysqli_fetch_array($quser)){
?>
<tr>
<td><?php echo $urow['firstname']; ?></td>
<td><?php echo $urow['lastname']; ?></td>
<td><button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#editModal<?php echo $urow['userid']; ?>"><i class="bi bi-pencil"></i> Edit</button> | <button class="btn btn-danger delete" value="<?php echo $urow['userid']; ?>"><i class="bi bi-trash"></i> Delete</button>
<?php include('edit_modal.php'); ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
edit_modal.php
//edit_modal.php
<div class="modal fade" id="edit<?php echo $urow['userid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<?php
$n=mysqli_query($conn,"select * from `user` where userid='".$urow['userid']."'");
$nrow=mysqli_fetch_array($n);
?>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class = "modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<center><h3 class = "text-success modal-title">Update Member</h3></center>
</div>
<form>
<div class="modal-body">
Firstname: <input type="text" value="<?php echo $nrow['firstname']; ?>" id="ufirstname<?php echo $urow['userid']; ?>" class="form-control">
Lastname: <input type="text" value="<?php echo $nrow['lastname']; ?>" id="ulastname<?php echo $urow['userid']; ?>" class="form-control">
</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="button" class="updateuser btn btn-success" value="<?php echo $urow['userid']; ?>"><span class = "glyphicon glyphicon-floppy-disk"></span> Save</button>
</div>
</form>
</div>
</div>
</div>
update.php
//update.php
<?php
include('conn.php');
if(isset($_POST['edit'])){
$id=$_POST['id'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
mysqli_query($conn,"update usertble set firstname='$firstname', lastname='$lastname' where userid='$id'");
}
?>
//delete.php
<?php
include('conn.php');
if(isset($_POST['del'])){
$id=$_POST['id'];
mysqli_query($conn,"delete from usertble where userid='$id'");
}
?>
