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
Database Table
CREATE TABLE `member` (
`id` int(11) NOT NULL,
`name` varchar(150) NOT NULL,
`email` varchar(150) NOT NULL,
`phone` varchar(150) NOT NULL,
`photo` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
index.php
//index.php
<?php
include 'action.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP MySQLi CRUD Prepared Statement with upload image</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<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.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<h3 class="text-center text-dark mt-2">PHP MySQLi CRUD Prepared Statement with upload image</h3>
<hr>
<?php if (isset($_SESSION['response'])) { ?>
<div class="alert alert-<?php echo $_SESSION['res_type']; ?> alert-dismissible text-center">
<b><?php echo $_SESSION['response']; ?></b>
</div>
<?php } unset($_SESSION['response']); ?>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">
Add Record
</div>
<div class="card-body">
<form action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<div class="mb-3">
<input type="text" name="name" value="<?php echo $name; ?>" class="form-control" placeholder="Enter name" required>
</div>
<div class="mb-3">
<input type="email" name="email" value="<?php echo $email; ?>" class="form-control" placeholder="Enter e-mail" required>
</div>
<div class="mb-3">
<input type="tel" name="phone" value="<?php echo $phone; ?>" class="form-control" placeholder="Enter phone" required>
</div>
<div class="mb-3">
<input type="hidden" name="oldimage" value="<?php echo $photo; ?>">
<input type="file" name="image" class="custom-file">
<img src="<?php echo $photo; ?>" width="120" class="img-thumbnail">
</div>
<div class="mb-3">
<?php if ($update == true) { ?>
<input type="submit" name="update" class="btn btn-success btn-block" value="Update Record">
<?php } else { ?>
<input type="submit" name="add" class="btn btn-primary btn-block" value="Add Record">
<?php } ?>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<?php
$query = 'SELECT * FROM member';
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->get_result();
?>
<div class="card">
<div class="card-header">
Record
</div>
<div class="card-body">
<table class="table table-bordered table-striped table-hover" id="data-table">
<thead>
<tr>
<th>#</th>
<th>Image</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while ($row = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><img src="<?php echo $row['photo']; ?>" width="25"></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['phone']; ?></td>
<td>
<a href="details.php?details=<?php echo $row['id']; ?>" class="btn btn-primary btn-sm">Details</a> |
<a href="action.php?delete=<?php echo $row['id']; ?>" class="btn btn-danger btn-sm" onclick="return confirm('Do you want delete this record?');">Delete</a> |
<a href="index.php?edit=<?php echo $row['id']; ?>" class="btn btn-info btn-sm">Edit</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#data-table').DataTable({
paging: true
});
});
</script>
</body>
</html>
config.php
//config.php
<?php
const DBHOST = 'localhost';
const DBUSER = 'root';
const DBPASS = '';
const DBNAME = 'projectdb';
$conn = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME);
if ($conn->connect_error) {
die('Could not connect to the database!' . $conn->connect_error);
}
?>
action.php
//action.php
<?php
session_start();
include 'config.php';
$update=false;
$id="";
$name="";
$email="";
$phone="";
$photo="";
if(isset($_POST['add'])){
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$photo=$_FILES['image']['name'];
$upload="uploads/".$photo;
$query="INSERT INTO member(name,email,phone,photo)VALUES(?,?,?,?)";
$stmt=$conn->prepare($query);
$stmt->bind_param("ssss",$name,$email,$phone,$upload);
$stmt->execute();
move_uploaded_file($_FILES['image']['tmp_name'], $upload);
header('location:index.php');
$_SESSION['response']="Successfully Inserted to the database!";
$_SESSION['res_type']="success";
}
if(isset($_GET['delete'])){
$id=$_GET['delete'];
$sql="SELECT photo FROM member WHERE id=?";
$stmt2=$conn->prepare($sql);
$stmt2->bind_param("i",$id);
$stmt2->execute();
$result2=$stmt2->get_result();
$row=$result2->fetch_assoc();
$imagepath=$row['photo'];
unlink($imagepath);
$query="DELETE FROM member WHERE id=?";
$stmt=$conn->prepare($query);
$stmt->bind_param("i",$id);
$stmt->execute();
header('location:index.php');
$_SESSION['response']="Successfully Deleted!";
$_SESSION['res_type']="danger";
}
if(isset($_GET['edit'])){
$id=$_GET['edit'];
$query="SELECT * FROM member WHERE id=?";
$stmt=$conn->prepare($query);
$stmt->bind_param("i",$id);
$stmt->execute();
$result=$stmt->get_result();
$row=$result->fetch_assoc();
$id=$row['id'];
$name=$row['name'];
$email=$row['email'];
$phone=$row['phone'];
$photo=$row['photo'];
$update=true;
}
if(isset($_POST['update'])){
$id=$_POST['id'];
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$oldimage=$_POST['oldimage'];
if(isset($_FILES['image']['name'])&&($_FILES['image']['name']!="")){
$newimage="uploads/".$_FILES['image']['name'];
unlink($oldimage);
move_uploaded_file($_FILES['image']['tmp_name'], $newimage);
}
else{
$newimage=$oldimage;
}
$query="UPDATE member SET name=?,email=?,phone=?,photo=? WHERE id=?";
$stmt=$conn->prepare($query);
$stmt->bind_param("ssssi",$name,$email,$phone,$newimage,$id);
$stmt->execute();
$_SESSION['response']="Updated Successfully!";
$_SESSION['res_type']="primary";
header('location:index.php');
}
if(isset($_GET['details'])){
$id=$_GET['details'];
$query="SELECT * FROM member WHERE id=?";
$stmt=$conn->prepare($query);
$stmt->bind_param("i",$id);
$stmt->execute();
$result=$stmt->get_result();
$row=$result->fetch_assoc();
$vid=$row['id'];
$vname=$row['name'];
$vemail=$row['email'];
$vphone=$row['phone'];
$vphoto=$row['photo'];
}
?>
details.php
//details.php
<?php
include 'action.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP MySQLi CRUD Prepared Statement with upload image</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<h3 class="text-center text-dark mt-2">PHP MySQLi CRUD Prepared Statement with upload image</h3>
<hr>
<?php if (isset($_SESSION['response'])) { ?>
<div class="alert alert-<?php echo $_SESSION['res_type']; ?> alert-dismissible text-center">
<b><?php echo $_SESSION['response']; ?></b>
</div>
<?php } unset($_SESSION['response']); ?>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 mt-3 bg-info p-4 rounded">
<h2 class="bg-light p-2 rounded text-center text-dark">ID : <?php echo $vid; ?></h2>
<div class="text-center">
<img src="<?php echo $vphoto; ?>" width="300" class="img-thumbnail">
</div>
<h4 class="text-light">Name : <?php echo $vname; ?></h4>
<h4 class="text-light">Email : <?php echo $vemail; ?></h4>
<h4 class="text-light">Phone : <?php echo $vphone; ?></h4>
</div>
</div>
</div>
</body>
</html>
