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
https://getbootstrap.com/docs/5.0/components/modal/
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
CREATE TABLE `members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL,
`address` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`id`, `firstname`, `lastname`, `address`) VALUES
(1, 'Airi ', 'Satou', 'Tokyo'),
(2, 'Angelica ', 'Ramos', 'London'),
(3, 'Ashton ', 'Cox', 'San Francisco'),
(4, 'Bradley', 'Greer', 'London'),
(5, 'Brenden ', 'Wagner', 'San Francisco');
ALTER TABLE `members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
index.php
//index.php
<?php
include('conn.php');
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP - OOP CRUD Operation</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<div style="height:50px;"></div>
<div class="well" style="margin-left:auto; margin-right:auto; padding:auto; width:70%;">
<span style="font-size:25px; color:blue"><strong>PHP OOP Mysqli CRUD (Create Read Update and Delete)</strong></span>
<span class="pull-right">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addnew">
<i class="bi bi-clipboard2-plus-fill"></i> Add Newl
</button>
</span>
<div style="height:15px;"></div>
<table class="table table-striped table-bordered table-hover">
<thead>
<th>Firstname</th>
<th>Lastname</th>
<th>Address</th>
<th>Action</th>
</thead>
<tbody>
<?php
$query=$conn->query("select * from members");
while($row=$query->fetch_array()){
?>
<tr>
<td><?php echo $row['firstname']; ?></td>
<td><?php echo $row['lastname']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#editModal<?php echo $row['id']; ?>"><i class="bi bi-pencil"></i> Edit</button> ||
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal<?php echo $row['id']; ?>"><i class="bi bi-trash"></i> Delete</button>
<?php include('modal.php'); ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
if(isset($_SESSION['msg'])){
?>
<div class="alert alert-success">
<center><?php echo $_SESSION['msg']; ?></center>
</div>
<?php
unset($_SESSION['msg']);
}
?>
</div>
<?php include('add_modal.php'); ?>
</div>
</body>
</html>
conn.php
//conn.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
add_modal.php
//add_modal.php
<!-- Add New -->
<div class="modal fade" id="addnew" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" action="addnew.php">
<div class="row">
<div class="col-md-2">
<label class="control-label" style="position:relative; top:7px;">Firstname:</label>
</div>
<div class="col-md-10">
<input type="text" class="form-control" name="firstname">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-md-2">
<label class="control-label" style="position:relative; top:7px;">Lastname:</label>
</div>
<div class="col-md-10">
<input type="text" class="form-control" name="lastname">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-md-2">
<label class="control-label" style="position:relative; top:7px;">Address:</label>
</div>
<div class="col-md-10">
<input type="text" class="form-control" name="address">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
addnew.php
//addnew.php
<?php
include('conn.php');
session_start();
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$address=$_POST['address'];
$conn->query("insert into members (firstname, lastname, address) values ('$firstname', '$lastname', '$address')");
$_SESSION['msg']="Member Added Succesfully";
header('location:index.php');
?>
modal.php
//modal.php
<!-- Delete -->
<div class="modal fade" id="deleteModal<?php echo $row['id']; ?>" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Member</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php
$del=mysqli_query($conn,"select * from members where id='".$row['id']."'");
$drow=mysqli_fetch_array($del);
?>
<div class="container-fluid">
<h5><center>Firstname: <strong><?php echo $drow['firstname']; ?></strong></center></h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<a href="delete.php?id=<?php echo $row['id']; ?>" class="btn btn-danger"> Delete</a>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<!-- Edit -->
<div class="modal fade" id="editModal<?php echo $row['id']; ?>" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Member</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php
$edit=$conn->query("select * from members where id='".$row['id']."'");
$erow=$edit->fetch_array();
?>
<div class="container-fluid">
<form method="POST" action="edit.php?id=<?php echo $erow['id']; ?>">
<div class="row">
<div class="col-md-2">
<label style="position:relative; top:7px;">Firstname:</label>
</div>
<div class="col-md-10">
<input type="text" name="firstname" class="form-control" value="<?php echo $erow['firstname']; ?>">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-md-2">
<label style="position:relative; top:7px;">Lastname:</label>
</div>
<div class="col-md-10">
<input type="text" name="lastname" class="form-control" value="<?php echo $erow['lastname']; ?>">
</div>
</div>
<div style="height:10px;"></div>
<div class="row">
<div class="col-md-2">
<label style="position:relative; top:7px;">Address:</label>
</div>
<div class="col-md-10">
<input type="text" name="address" class="form-control" value="<?php echo $erow['address']; ?>">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning"> Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal -->
edit.php
//edit.php
<?php
include('conn.php');
session_start();
$id=$_GET['id'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$address=$_POST['address'];
$conn->query("update members set firstname='$firstname', lastname='$lastname', address='$address' where id='$id'");
$_SESSION['msg']="Member Updated Succesfully";
header('location:index.php');
?>
delete.php
//delete.php
<?php
include('conn.php');
session_start();
$id=$_GET['id'];
$conn->query("delete from members where id='$id'");
$_SESSION['msg']="Member Deleted Succesfully";
header('location:index.php');
?>
