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
CREATE TABLE `members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL,
`address` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`id`, `firstname`, `lastname`, `address`) VALUES
(1, 'Cairo', 'Ednalan', 'Olongapo City'),
(2, 'clydey', 'Ednalan', 'Olongapo City'),
(3, 'Airi ', 'Satou', 'Tokyo'),
(4, 'Ashton ', 'Cox', 'San Francisco');
ALTER TABLE `members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
//index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP PDO CRUD (Create Read Update and Delete) with Bootstrap 5 Modall</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="page-header text-center">PHP PDO CRUD (Create Read Update and Delete) with Bootstrap 5 Modal</h1>
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addnew">
Add New
</button>
<?php
session_start();
if(isset($_SESSION['message'])){
?>
<div class="alert alert-info text-center" style="margin-top:20px;">
<?php echo $_SESSION['message']; ?>
</div>
<?php
unset($_SESSION['message']);
}
?>
<table class="table table-bordered table-striped" style="margin-top:20px;">
<thead>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Address</th>
<th>Action</th>
</thead>
<tbody>
<?php
include_once('connection.php');
$database = new Connection();
$db = $database->open();
try{
$sql = 'SELECT * FROM members';
foreach ($db->query($sql) as $row) {
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['firstname']; ?></td>
<td><?php echo $row['lastname']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<a href="#edit_<?php echo $row['id']; ?>" class="btn btn-success btn-sm" data-bs-toggle="modal"> Edit</a>
<a href="#delete_<?php echo $row['id']; ?>" class="btn btn-danger btn-sm" data-bs-toggle="modal"> Delete</a>
</td>
<?php include('edit_delete_modal.php'); ?>
</tr>
<?php
}
}
catch(PDOException $e){
echo "There is some problem in connection: " . $e->getMessage();
}
//close connection
$database->close();
?>
</tbody>
</table>
</div>
</div>
</div>
<?php include('add_modal.php'); ?>
<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.min.js"></script>
</body>
</html>
connection.php
//connection.php
<?php
Class Connection{
private $server = "mysql:host=localhost;dbname=devprojectdb";
private $username = "root";
private $password = "";
private $options = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,);
protected $conn;
public function open(){
try{
$this->conn = new PDO($this->server, $this->username, $this->password, $this->options);
return $this->conn;
}
catch (PDOException $e){
echo "There is some problem in connection: " . $e->getMessage();
}
}
public function close(){
$this->conn = null;
}
}
?>
add_modal.php
//add_modal.php
<!-- Add New -->
<div class="modal fade" id="addnew" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Add New</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" action="add.php">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Firstname</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="firstname">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Lastname</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="lastname">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-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" name="add" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
</form>
</div>
</div>
</div>
</div>
edit_delete_modal.php
//edit_delete_modal.php
<!-- Edit -->
<div class="modal fade" id="edit_<?php echo $row['id']; ?>" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Edit Membe</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" action="edit.php?id=<?php echo $row['id']; ?>">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Firstname</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="firstname" value="<?php echo $row['firstname']; ?>">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Lastname</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="lastname" value="<?php echo $row['lastname']; ?>">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="address" value="<?php echo $row['address']; ?>">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" name="edit" class="btn btn-primary"> Update</a>
</form>
</div>
</div>
</div>
</div>
<!-- Delete -->
<div class="modal fade" id="delete_<?php echo $row['id']; ?>" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Delete Membe</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="text-center">Are you sure you want to Delete</p>
<h2 class="text-center"><?php echo $row['firstname'].' '.$row['lastname']; ?></h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a href="delete.php?id=<?php echo $row['id']; ?>" class="btn btn-danger"> Yes</a>
</div>
</div>
</div>
</div>
add.php
//add.php
<?php
session_start();
include_once('connection.php');
if(isset($_POST['add'])){
$database = new Connection();
$db = $database->open();
try{
//use prepared statement to prevent sql injection
$stmt = $db->prepare("INSERT INTO members (firstname, lastname, address) VALUES (:firstname, :lastname, :address)");
//if-else statement in executing our prepared statement
$_SESSION['message'] = ( $stmt->execute(array(':firstname' => $_POST['firstname'] , ':lastname' => $_POST['lastname'] , ':address' => $_POST['address'])) ) ? 'Member added successfully' : 'Something went wrong. Cannot add member';
}
catch(PDOException $e){
$_SESSION['message'] = $e->getMessage();
}
//close connection
$database->close();
}
else{
$_SESSION['message'] = 'Fill up add form first';
}
header('location: index.php');
?>
edit.php
//edit.php
<?php
session_start();
include_once('connection.php');
if(isset($_POST['edit'])){
$database = new Connection();
$db = $database->open();
try{
$id = $_GET['id'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$address = $_POST['address'];
$sql = "UPDATE members SET firstname = '$firstname', lastname = '$lastname', address = '$address' WHERE id = '$id'";
//if-else statement in executing our query
$_SESSION['message'] = ( $db->exec($sql) ) ? 'Member updated successfully' : 'Something went wrong. Cannot update member';
}
catch(PDOException $e){
$_SESSION['message'] = $e->getMessage();
}
//close connection
$database->close();
}
else{
$_SESSION['message'] = 'Fill up edit form first';
}
header('location: index.php');
?>
delete.php
//delete.php
<?php
session_start();
include_once('connection.php');
if(isset($_GET['id'])){
$database = new Connection();
$db = $database->open();
try{
$sql = "DELETE FROM members WHERE id = '".$_GET['id']."'";
//if-else statement in executing our query
$_SESSION['message'] = ( $db->exec($sql) ) ? 'Member deleted successfully' : 'Something went wrong. Cannot delete member';
}
catch(PDOException $e){
$_SESSION['message'] = $e->getMessage();
}
//close connection
$database->close();
}
else{
$_SESSION['message'] = 'Select member to delete first';
}
header('location: index.php');
?>
