https://github.com/benfoster/FitFrame.js
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
https://datatables.net/
database table
CREATE TABLE `tblusers` (
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
index.php
//index.php
<?php
// Include database file
include 'users.php';
$userObj = new Users();
// Delete record
if(isset($_GET['deleteId']) && !empty($_GET['deleteId'])) {
$deleteId = $_GET['deleteId'];
$userObj->deleteRecord($deleteId);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP Mysqli OOP CRUD (Add, Edit, Delete, View) OOP (Object Oriented Programming)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
</head>
<body>
<div class="card text-center" style="padding:15px;">
<h4>PHP Mysqli OOP CRUD (Add, Edit, Delete, View) OOP (Object Oriented Programming)</h4>
</div><br><br>
<div class="container">
<?php
if (isset($_GET['msg1']) == "insert") {
echo "<div class='alert alert-success alert-dismissible'>
Your Registration added successfully
</div>";
}
if (isset($_GET['msg2']) == "update") {
echo "<div class='alert alert-success alert-dismissible'>
Your Registration updated successfully
</div>";
}
if (isset($_GET['msg3']) == "delete") {
echo "<div class='alert alert-success alert-dismissible'>
Record deleted successfully
</div>";
}
?>
<h2>View Records
<a href="add.php" class="btn btn-primary" style="float:right;">Add New Record</a>
</h2>
<table class="table table-bordered table-striped" id="usersTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$users = $userObj->displayData();
foreach ($users as $rs) {
?>
<tr>
<td><?php echo $rs['id'] ?></td>
<td><?php echo $rs['name'] ?></td>
<td><?php echo $rs['email'] ?></td>
<td><?php echo $rs['username'] ?></td>
<td>
<a href="edit.php?editId=<?php echo $rs['id'] ?>" style="color:green">
<i class="fa fa-pencil" aria-hidden="true"></i></a>
<a href="index.php?deleteId=<?php echo $rs['id'] ?>" style="color:red" onclick="confirm('Are you sure want to delete this record')">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#usersTable').DataTable();
} );
</script>
</body>
</html>
users.php
//users.php
<?php
class Users
{
private $servername = "localhost";
private $username = "root";
private $password = "";
private $database = "projectdb";
public $con;
// Database Connection
public function __construct()
{
$this->con = new mysqli($this->servername, $this->username,$this->password,$this->database);
if(mysqli_connect_error()) {
trigger_error("Failed to connect to MySQL: " . mysqli_connect_error());
}else{
return $this->con;
}
}
// Insert data into table
public function insertData($post)
{
$name = $this->con->real_escape_string($_POST['name']);
$email = $this->con->real_escape_string($_POST['email']);
$username = $this->con->real_escape_string($_POST['username']);
$password = $this->con->real_escape_string(md5($_POST['password']));
$query="INSERT INTO tblusers(name,email,username,password) VALUES('$name','$email','$username','$password')";
$sql = $this->con->query($query);
if ($sql==true) {
header("Location:index.php?msg1=insert");
}else{
echo "Registration failed try again!";
}
}
// Fetch all records
public function displayData()
{
$query = "SELECT * FROM tblusers";
$result = $this->con->query($query);
if ($result->num_rows > 0) {
$data = array();
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
return $data;
}else{
echo "No found records";
}
}
// Fetch single data
public function displyaRecordById($id)
{
$query = "SELECT * FROM tblusers WHERE id = '$id'";
$result = $this->con->query($query);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
return $row;
}else{
echo "Record not found";
}
}
// Update data
public function updateRecord($postData)
{
$name = $this->con->real_escape_string($_POST['uname']);
$email = $this->con->real_escape_string($_POST['uemail']);
$username = $this->con->real_escape_string($_POST['upname']);
$id = $this->con->real_escape_string($_POST['id']);
if (!empty($id) && !empty($postData)) {
$query = "UPDATE tblusers SET name = '$name', email = '$email', username = '$username' WHERE id = '$id'";
$sql = $this->con->query($query);
if ($sql==true) {
header("Location:index.php?msg2=update");
}else{
echo "Registration updated failed try again!";
}
}
}
// Delete data
public function deleteRecord($id)
{
$query = "DELETE FROM tblusers WHERE id = '$id'";
$sql = $this->con->query($query);
if ($sql==true) {
header("Location:index.php?msg3=delete");
}else{
echo "Record does not delete try again";
}
}
}
?>
add.php
//add.php
<?php
// Include database file
include 'users.php';
$userObj = new Users();
// Insert Record
if(isset($_POST['submit'])) {
$userObj->insertData($_POST);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP Mysqli OOP CRUD (Add, Edit, Delete, View) OOP (Object Oriented Programming)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<div class="card text-center" style="padding:15px;">
<h4>PHP Mysqli OOP CRUD (Add, Edit, Delete, View) OOP (Object Oriented Programming)</h4>
</div><br>
<div class="container">
<form action="add.php" method="POST">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" placeholder="Enter name" required="">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email" placeholder="Enter email" required="">
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" name="username" placeholder="Enter username" required="">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" name="password" placeholder="Enter password" required="">
</div>
<input type="submit" name="submit" class="btn btn-primary" style="float:right;" value="Submit">
</form>
</div>
</body>
</html>
edit.php
//edit.php
<?php
// Include database file
include 'users.php';
$userObj = new Users();
// Edit record
if(isset($_GET['editId']) && !empty($_GET['editId'])) {
$editId = $_GET['editId'];
$rs = $userObj->displyaRecordById($editId);
}
// Update Record
if(isset($_POST['update'])) {
$userObj->updateRecord($_POST);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP Mysqli OOP CRUD (Add, Edit, Delete, View) OOP (Object Oriented Programming)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<div class="card text-center" style="padding:15px;">
<h4>PHP Mysqli OOP CRUD (Add, Edit, Delete, View) OOP (Object Oriented Programming)</h4>
</div><br>
<div class="container">
<form action="edit.php" method="POST">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="uname" value="<?php echo $rs['name']; ?>" required="">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="uemail" value="<?php echo $rs['email']; ?>" required="">
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" name="upname" value="<?php echo $rs['username']; ?>" required="">
</div>
<div class="form-group">
<input type="hidden" name="id" value="<?php echo $rs['id']; ?>">
<input type="submit" name="update" class="btn btn-primary" style="float:right;" value="Update">
</div>
</form>
</div>
</body>
</html>
