joydip.manna/phpcrud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Sayan Das 2026-02-10 13:46:39 +05:30
commit 43f51e4e58
18 changed files with 1395 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
ajax.js Normal file
View File

@ -0,0 +1,255 @@
function showToast(message){
$("#toastMsg").text(message);
let toast = new bootstrap.Toast(document.getElementById('liveToast'));
toast.show();
}
$(document).ready(function(){
let currentPage = 1;
let currentSort = "id";
let currentOrder = "desc";
function updateSortIcons(){
// reset all icons
$(".sort-icon")
.removeClass("bi-arrow-up bi-arrow-down")
.addClass("bi-arrow-down-up");
// set active icon
let icon = currentOrder === "asc" ? "bi-arrow-up" : "bi-arrow-down";
$(`.sort[data-column='${currentSort}'] .sort-icon`)
.removeClass("bi-arrow-down-up")
.addClass(icon);
}
/* ---------------- LOAD TABLE FUNCTION ---------------- */
function loadData(status="", search="", page=currentPage)
{
currentPage = page;
$.ajax({
url: "fetch_records.php",
type: "GET",
data: {
status: status,
search: search,
page: page,
sort: currentSort,
order: currentOrder
},
success: function(response)
{
$("#table-data").html(response);
if(bulkMode)
{
$(".select-column").removeClass("d-none");
}
}
});
}
/* ----------- CENTRAL RELOAD FUNCTION (IMPORTANT) ----------- */
function reloadTable(){
let status = $("#statusFilter").val();
let search = $("#searchInput").val();
loadData(status, search, currentPage);
}
/* ----------- LOAD DATA WHEN PAGE OPENS ----------- */
reloadTable();
/* ---------------- STATUS FILTER ---------------- */
$(document).on("change","#statusFilter",function(){
currentPage = 1;
reloadTable();
});
/* ---------------- LIVE GLOBAL SEARCH ---------------- */
$(document).on("keyup","#searchInput",function(){
currentPage = 1;
reloadTable();
});
/* ---------------- CHANGE STATUS BUTTON ---------------- */
$(document).on("click",".changeStatus",function(){
let id=$(this).data("id");
$.post("status_update.php",{id:id},function(){
reloadTable();
});
});
/* ---------------- SELECT ALL ---------------- */
$(document).on("click","#checkAll",function(){
$(".rowcheck").prop("checked",this.checked);
});
/* ---------------- DELETE SINGLE ---------------- */
$(document).on("click",".deleteBtn",function(){
if(confirm("Delete this record?")){
let id=$(this).data("id");
$.post("delete_record.php",{id:id},function(){
reloadTable();
});
}
});
/* ---------------- OPEN EDIT MODAL ---------------- */
$(document).on("click",".editBtn",function(){
let id=$(this).data("id");
$("#editContent").load("edit_modal.php?id="+id,function(){
$("#editModal").modal("show");
});
});
/* ---------------- BULK DELETE ---------------- */
$("#bulkDelete").click(function(){
let ids=[];
$(".rowcheck:checked").each(function(){
ids.push($(this).val());
});
$.post("bulk_delete.php",{ids:ids},function(){
reloadTable();
});
});
/* ---------------- UPDATE RECORD ---------------- */
$(document).on("click","#updateRecord",function(){
let fields=[];
$(".edit_field").each(function(){
fields.push($(this).val());
});
$.post("update_record.php",{
id:$("#edit_id").val(),
name:$("#edit_name").val(),
email:$("#edit_email").val(),
phone:$("#edit_phone").val(),
category:$("#edit_category").val(),
description:$("#edit_description").val(),
fields:fields
},function(){
$("#editModal").modal("hide");
reloadTable();
});
});
/* ---------------- ADD NEW FIELD ---------------- */
$(document).on("click","#addField",function(){
$("#editFieldContainer").append(`
<div class="input-group mb-2 fieldRow">
<input type="text" class="form-control edit_field">
<button class="btn btn-danger removeField">X</button>
</div>
`);
});
/* ---------------- REMOVE FIELD ---------------- */
$(document).on("click",".removeField",function(){
$(this).closest(".fieldRow").remove();
});
// RESTORE RECORD
$(document).on("click",".restoreBtn",function(){
let id=$(this).data("id");
$.post("restore_record.php",{id:id},function(){
reloadTable();
showToast("Data restored successfully");
});
});
let bulkMode = false;
$("#bulkToggle").click(function(){
bulkMode = !bulkMode;
if(bulkMode){
$(".select-column").removeClass("d-none");
$("#bulkDelete").removeClass("d-none");
$("#bulkToggle").text("Cancel Select");
}else{
$(".select-column").addClass("d-none");
$("#bulkDelete").addClass("d-none");
$(".rowcheck").prop("checked", false);
$("#checkAll").prop("checked", false);
$("#bulkToggle").text("Bulk Select");
}
});
// PAGINATION CLICK
$(document).on("click",".page-btn",function(e){
e.preventDefault();
let page=$(this).data("page");
let status=$("#statusFilter").val();
let search=$("#searchInput").val();
currentPage = page;
loadData(status,search,page);
});
// SORT CLICK
$(document).on("click",".sort",function(){
let column=$(this).data("column");
if(currentSort==column){
currentOrder = currentOrder=="asc" ? "desc":"asc";
}else{
currentSort=column;
currentOrder="asc";
}
currentPage=1;
reloadTable();
});
});

7
bulk_delete.php Normal file
View File

@ -0,0 +1,7 @@
<?php
require_once "classes/Record.php";
$record = new Record();
$record->bulkDelete($_POST['ids']);
?>

21
classes/database.php Normal file
View File

@ -0,0 +1,21 @@
<?php
class Database {
private $host = "localhost";
private $user = "root";
private $pass = "";
private $db = "crud_manager";
public $conn;
public function connect(){
$this->conn = new mysqli($this->host,$this->user,$this->pass,$this->db);
if($this->conn->connect_error){
die("Database Connection Failed");
}
return $this->conn;
}
}
?>

145
classes/record.php Normal file
View File

@ -0,0 +1,145 @@
<?php
require_once "Database.php";
class Record {
protected $conn;
public function __construct(){
$db = new Database();
$this->conn = $db->connect();
}
/* FETCH RECORDS WITH FILTER + SEARCH */
public function getRecords($status="",$search="",$page=1,$perPage=10,$sort="id",$order="desc")
{
$conditions = [];
// status filter
if($status=="trash"){
$conditions[]="is_deleted=1";
}else{
$conditions[]="is_deleted=0";
if($status!=""){
$status = $this->conn->real_escape_string($status);
$conditions[]="status='$status'";
}
}
// search filter
if($search!=""){
$search = $this->conn->real_escape_string($search);
$conditions[]="(
CAST(id AS CHAR) LIKE '%$search%' OR
LOWER(name) LIKE LOWER('%$search%') OR
LOWER(email) LIKE LOWER('%$search%') OR
CAST(phone AS CHAR) LIKE '%$search%'
)";
}
$where = count($conditions)>0 ? "WHERE ".implode(" AND ",$conditions):"";
$start = ($page - 1) * $perPage;
$allowedSort = ["id","name","email","status"];
if(!in_array($sort,$allowedSort))
{
$sort="id";
}
$order = strtolower($order)=="asc" ? "ASC":"DESC";
if($sort == "status"){
if($order == "ASC"){
// Inactive first, then Active
$orderBy = "FIELD(status,'inactive','active'), id DESC";
}else{
// Active first, then Inactive
$orderBy = "FIELD(status,'active','inactive'), id DESC";
}
}else{
$orderBy = "$sort $order";
}
$sql="SELECT * FROM records $where ORDER BY $orderBy LIMIT $perPage OFFSET $start";
return $this->conn->query($sql);
}
/* TOTAL PAGES */
public function countFiltered($status="",$search=""){
$conditions = [];
if($status=="trash"){
$conditions[]="is_deleted=1";
}else{
$conditions[]="is_deleted=0";
if($status!=""){
$status = $this->conn->real_escape_string($status);
$conditions[]="status='$status'";
}
}
if($search!=""){
$search = $this->conn->real_escape_string($search);
$conditions[]="(
CAST(id AS CHAR) LIKE '%$search%' OR
LOWER(name) LIKE LOWER('%$search%') OR
LOWER(email) LIKE LOWER('%$search%') OR
CAST(phone AS CHAR) LIKE '%$search%'
)";
}
$where = count($conditions)>0 ? "WHERE ".implode(" AND ",$conditions):"";
$result = $this->conn->query("SELECT COUNT(*) as total FROM records $where");
return $result->fetch_assoc()['total'];
}
/* SOFT DELETE */
public function deleteRecord($id){
$id = $this->conn->real_escape_string($id);
return $this->conn->query("UPDATE records SET is_deleted=1 WHERE id='$id'");
}
/* RESTORE RECORD */
public function restoreRecord($id){
$id = $this->conn->real_escape_string($id);
return $this->conn->query("UPDATE records SET is_deleted=0 WHERE id='$id'");
}
/* BULK DELETE */
public function bulkDelete($ids){
foreach($ids as $id){
$this->deleteRecord($id);
}
}
/* TOTAL RECORDS */
public function countTotal(){
$result = $this->conn->query("SELECT COUNT(*) as total FROM records WHERE is_deleted=0");
return $result->fetch_assoc()['total'];
}
/* ACTIVE RECORDS */
public function countActive(){
$result = $this->conn->query("SELECT COUNT(*) as active FROM records WHERE status='active' AND is_deleted=0");
return $result->fetch_assoc()['active'];
}
/* INACTIVE / PENDING RECORDS */
public function countInactive(){
$result = $this->conn->query("SELECT COUNT(*) as inactive FROM records WHERE status='inactive' AND is_deleted=0");
return $result->fetch_assoc()['inactive'];
}
}
?>

14
db.php Normal file
View File

@ -0,0 +1,14 @@
<?php
$host ="localhost";
$user ="root";
$password = "";
$database = "crud_manager";
$conn = mysqli_connect($host , $user ,$password, $database);
if(!$conn)
{
die("connection failed: ".mysqli_connect_error());
}
?>

7
delete_record.php Normal file
View File

@ -0,0 +1,7 @@
<?php
require_once "classes/Record.php";
$record = new Record();
$record->deleteRecord($_POST['id']);
?>

57
edit_modal.php Normal file
View File

@ -0,0 +1,57 @@
<?php
include "db.php";
$id=$_GET['id'];
$record=mysqli_fetch_assoc(mysqli_query($conn,"SELECT * FROM records WHERE id=$id"));
$fields=mysqli_query($conn,"SELECT * FROM additional_fields WHERE record_id=$id");
?>
<div class="modal-header">
<h5 class="modal-title">Edit Record</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="hidden" id="edit_id" value="<?= $record['id'] ?>">
<label>Name</label>
<input type="text" id="edit_name" class="form-control mb-2" value="<?= $record['name'] ?>">
<label>Email</label>
<input type="text" id="edit_email" class="form-control mb-2" value="<?= $record['email'] ?>">
<label>Phone</label>
<input type="text" id="edit_phone" class="form-control mb-2" value="<?= $record['phone'] ?>">
<label>Category</label>
<input type="text" id="edit_category" class="form-control mb-2" value="<?= $record['category'] ?>">
<label>Description</label>
<textarea id="edit_description" class="form-control mb-3"><?= $record['description'] ?></textarea>
<hr>
<h6>Additional Fields</h6>
<div id="editFieldContainer">
<?php while($f=mysqli_fetch_assoc($fields)){ ?>
<div class="input-group mb-2 fieldRow">
<input type="text" class="form-control edit_field" value="<?= $f['field_value'] ?>">
<button class="btn btn-danger removeField">X</button>
</div>
<?php } ?>
</div>
<button class="btn btn-sm btn-outline-dark" id="addField">+ Add Field</button>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="updateRecord">Update</button>
</div>

88
fetch_records.php Normal file
View File

@ -0,0 +1,88 @@
<?php
$sort = $_GET['sort'] ?? "id";
$order = $_GET['order'] ?? "desc";
$page = $_GET['page'] ?? 1;
require_once "classes/Record.php";
$record = new Record();
$status = $_GET['status'] ?? "";
$search = $_GET['search'] ?? "";
$result = $record->getRecords($status,$search,$page,10,$sort,$order);
$totalRows = $record->countFiltered($status,$search);
$perPage = 10;
$totalPages = ceil($totalRows/$perPage);
while($row=$result->fetch_assoc()){
?>
<tr id="row-<?= $row['id'] ?>">
<td class="select-column d-none">
<input type="checkbox" class="rowcheck" value="<?= $row['id'] ?>">
</td>
<td><?= $row['id'] ?></td>
<td><?= $row['name'] ?></td>
<td><?= $row['email'] ?></td>
<td><?= $row['phone'] ?></td>
<!-- STATUS BADGE -->
<td>
<span class="badge <?= $row['status']=="active" ? "bg-success" : "bg-secondary" ?>">
<?= ucfirst($row['status']) ?>
</span>
</td>
<!-- ACTION BUTTONS -->
<td>
<?php if($row['is_deleted']==0){ ?>
<button class="btn btn-warning btn-sm editBtn" data-id="<?= $row['id'] ?>">
Edit
</button>
<button class="btn btn-danger btn-sm deleteBtn" data-id="<?= $row['id'] ?>">
Delete
</button>
<button class="btn btn-info btn-sm changeStatus" data-id="<?= $row['id'] ?>">
Change Status
</button>
<?php } else { ?>
<button class="btn btn-success btn-sm restoreBtn" data-id="<?= $row['id'] ?>">
Restore
</button>
<?php } ?>
</td>
</tr>
<?php } ?>
<?php
echo "<script>
$('#pagination-area').html(`
<nav>
<ul class=\"pagination justify-content-center\">";
for($i=1;$i<=$totalPages;$i++){
$active = $i==$page?'active':'';
echo "<li class='page-item $active'>
<a class='page-link page-btn' data-page='$i' href='#'>$i</a>
</li>";
}
echo "</ul>
</nav>
`);
</script>";
?>

46
formaction.php Normal file
View File

@ -0,0 +1,46 @@
<?php
include "db.php";
if($_SERVER["REQUEST_METHOD"]=="POST")
{
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$category=$_POST['category'];
$status=$_POST['status'];
$description=$_POST['description'];
$sql = "INSERT INTO `records`(`name`,`email`,`phone`,`category`,`status`,`description`)
VALUES ('$name','$email','$phone','$category','$status','$description')";
if(mysqli_query($conn , $sql))
{
$record_id = mysqli_insert_id($conn);
if(!empty($_POST['row']))
{
foreach($_POST['row'] as $field)
{
if(!empty($field))
{
$field = mysqli_real_escape_string($conn,$field);
$query= "INSERT INTO `additional_fields`(`record_id`,`field_value`)
VALUES ('$record_id','$field')";
mysqli_query($conn , $query);
}
}
}
echo "<script>
alert('Record Saved Successfully');
window.location='record.php';
</script>";
}
else
{
echo "Error: " . mysqli_error($conn);
}
}
?>

114
index.php Normal file
View File

@ -0,0 +1,114 @@
<?php
require_once "classes/Record.php";
$record = new Record();
$totalRecord = $record->countTotal();
$activeRecord = $record->countActive();
$inactiveRecord = $record->countInactive();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CRUD Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar padding custom-navbar">
<div class="container-fluid nav-inner">
<div class="logo">
<a href="index.php" class="text-decoration-none text-dark">
<span class="logo-icon">C</span>
<span class="logo-text">CRUD Manager</span>
</a>
</div>
<div class="search-area">
<i class="fa fa-search search-icon"></i>
<input type="text" class="search-box" placeholder="Search anything...">
</div>
<div class="nav-links">
<button class="btn btn-dark">Home</button>
<a href="./record.php" class="nav-link-btn">Records</a>
<div class="profile">👤</div>
</div>
</div>
</nav>
<div class="container top-space">
<div class="main-card">
<h1>CRUD Manager</h1>
<p>
Efficiently manage, create, edit, and organize all your records in one powerful dashboard.
Track status, monitor activity, and maintain complete control over your data.
</p>
<div class="button-group">
<a href="manage_records.php" class="btn btn-dark">View Record</a>
<a href="./record.php" class="btn btn-outline-dark">Create New Record</a>
</div>
</div>
</div>
<div class="container top-space">
<div class="row">
<div class="col-md-4">
<div class="stat-box">
<p>Total Records</p>
<h2><?= $totalRecord; ?></h2>
<i class="bi bi-database icon-blue"></i>
</div>
</div>
<div class="col-md-4">
<div class="stat-box">
<p>Active</p>
<h2><?php echo $activeRecord; ?></h2>
<i class="bi bi-check-circle text-success"></i>
</div>
</div>
<div class="col-md-4">
<div class="stat-box">
<p>Pending</p>
<h2><?php echo $inactiveRecord; ?></h2>
<i class="bi bi-clock text-warning"></i>
</div>
</div>
<!-- <div class="col-md-3">
<div class="stat-box">
<p>Archived</p>
<h2>66</h2>
<i class="bi bi-archive"></i>
</div>
</div> -->
</div>
</div>
</body>
</html>

49
manage_records.css Normal file
View File

@ -0,0 +1,49 @@
/* Status filter styled like button */
.status-filter {
border-radius: 8px !important;
border: 1px solid #dee2e6 !important;
padding: 6px 30px 6px 12px !important;
font-weight: 500;
cursor: pointer;
background-color: #fff;
transition: all 0.2s ease;
}
.status-filter:hover {
border-color: #adb5bd !important;
box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.05);
}
.status-filter:focus {
border-color: #212529 !important;
box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.1) !important;
}
.status-filter.form-select-sm {
height: 38px;
}
/* space between action buttons */
td .btn{
margin-right:15px;
margin-bottom:10px;
}
/* remove space from last button */
td .btn:last-child{
margin-right:0;
}
/* make sortable headers look clickable */
th.sort{
cursor: pointer;
}
.sort-icon{
margin-left:6px;
font-size:13px;
color:#9aa4b2;
}
.sort:hover .sort-icon{
color:#ffffff;
}

122
manage_records.php Normal file
View File

@ -0,0 +1,122 @@
<?php include "db.php"; ?>
<!DOCTYPE html>
<html>
<head>
<title>Manage Records</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="manage_records.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body class="p-4">
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<!-- LEFT SIDE -->
<div class="d-flex align-items-center gap-3">
<h3 class="mb-0">All Records</h3>
<select id="statusFilter" class="form-select form-select-sm status-filter" style="width:150px;">
<option value="">All Status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="trash">Trash</option>
</select>
<!-- GLOBAL SEARCH -->
<input type="text" id="searchInput" class="form-control form-control-sm"
placeholder="Search anything..." style="width:220px;">
</div>
<!-- RIGHT SIDE -->
<div class="d-flex gap-2">
<button id="bulkToggle" class="btn btn-secondary">
<i class="bi bi-check2-square"></i> Bulk Select
</button>
<a href="index.php" class="btn btn-dark">
<i class="bi bi-house"></i> Home
</a>
<a href="record.php" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Add Record
</a>
<button id="bulkDelete" class="btn btn-danger">
<i class="bi bi-trash"></i> Delete Selected
</button>
</div>
</div>
</div>
<table class="table table-bordered align-middle">
<thead class="table-dark">
<tr>
<th class="select-column d-none"><input type="checkbox" id="checkAll"></th>
<th class="sort" data-column="id">
ID <i class="sort-icon bi bi-arrow-down-up"></i>
</th>
<th class="sort" data-column="name">
Name <i class="sort-icon bi bi-arrow-down-up"></i>
</th>
<th class="sort" data-column="email">
Email <i class="sort-icon bi bi-arrow-down-up"></i>
</th>
<th>Phone</th>
<th class="sort" data-column="status">
Status <i class="sort-icon bi bi-arrow-down-up"></i>
</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table-data">
</tbody>
</table>
<div id="pagination-area" class="mt-3"></div>
</div>
<!-- EDIT MODAL -->
<div class="modal fade" id="editModal">
<div class="modal-dialog">
<div class="modal-content" id="editContent"></div>
</div>
</div>
<script src="ajax.js?v=<?php echo time(); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- TOAST NOTIFICATION -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999">
<div id="liveToast" class="toast align-items-center text-bg-success border-0" role="alert">
<div class="d-flex">
<div class="toast-body" id="toastMsg">
Data restored successfully
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
</div>
</div>
</div>
</body>
</html>

138
record.css Normal file
View File

@ -0,0 +1,138 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI' , sans-serif;
}
.padding {
padding: 0;
}
.custom-navbar{
background-color:#e5d696;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
padding: 8px 40px;
}
/* LOGO */
.logo {
display: flex;
align-items: center;
font-weight: bold;
margin-left: 0;
}
.logo-icon {
background: rgb(105, 99, 222);
color: white;
padding: 8px 12px;
border-radius: 8px;
margin-right: 8px;
font-weight : bold;
}
/* Search */
.search-area {
width: 350px;
position: relative;
margin: 0 auto;
}
.search-box {
width: 100%;
padding: 8px 15px 8px 40px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #fffbe9;
}
.search-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #999;
font-size: 15px;
}
/* Navbar links */
.nav-links {
display: flex;
align-items: center;
gap: 15px;
}
.profile {
width:36px;
height:36px;
background: violet;
color: white;
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
}
/* Responsive */
@media (max-width: 992px) {
.search-area {
display: none;
}
}
/* FORM AREA */
.form-container{
display: flex;
justify-content: center;
margin-top: 60px;
}
.card{
background: #fff;
width: 70%;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.card h5{
font-weight: 600;
}
.card label{
font-weight: 500;
margin-bottom: 6px;
}
.form-control {
background: #f8f9fa;
border: 1px solid #e0e0e0;
}
.form-control:focus{
box-shadow: none;
border-color: #000;
}
.form-action{
display:flex;
justify-content: flex-end;
gap: 15px;
}
.form-action .btn{
min-width:130px;
height: 42px;
font-size: 14px;
font-weight: 500;
}

131
record.php Normal file
View File

@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="record.css">
</head>
<script>
function addRow() {
let container = document.getElementById("fieldContainer");
let row = document.createElement("div");
row.className = "input-group mb-2 filedRow";
row.innerHTML =
'<input type="text" name = "row[]" class="form-control" placeholder="Field 1 - Row 1">'+
'<button type="button" class="btn btn-danger ms-2 " onclick="removeRow(this)">Delete</button>';
container.appendChild(row);
}
function removeRow(btn)
{
btn.parentElement.remove();
}
</script>
<body>
<nav class="navbar custom-navbar bg-light padding sticky-top">
<div class="container-fluid d-flex align-items-center">
<!-- Logo -->
<a href="index.php" class="logo d-flex align-items-center text-decoration-none text-dark">
<span class="logo-icon">C</span>
<span class="logo-text">CRUD Manager</span>
</a>
<!-- Search -->
<div class="search-area ">
<i class="fa fa-search search-icon"></i>
<input type="text" class="search-box" placeholder="Search anything...">
</div>
<!-- Right Buttons -->
<div class="nav-links d-flex align-items-center gap-3">
<a href="index.php" class="btn btn-dark">Home</a>
<a href="manage_records.php" class="btn btn-outline-dark">View Records</a>
<div class="profile">👤</div>
</div>
</div>
</nav>
<div class="container form-container">
<div class="card">
<h5>Create New Record</h5>
<p class="text-muted">Fill in the form below to create a new record</p>
<form autocomplete="off" method="post" action="formaction.php">
<div class="row">
<div class="col-md-6">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" required placeholder="Enter full name ">
</div>
<div class="col-md-6">
<label for="email">Email</label><br>
<input type="text" name="email" class="form-control" required placeholder="email@example.com">
</div>
</div>
<div class="row mt-3">
<div class="col-md-6">
<label for="phone">Phone</label>
<input type="number" name="phone" class="form-control" placeholder="+1(555)000-0000"><br>
</div>
<div class="col-md-6">
<label for="category">Category</label>
<select name="category" id="category" class="form-control">
<option value="General">General</option>
<option value="General">SC</option>
<option value="General">ST</option>
<option value="General">OBC</option>
</select>
</div>
</div>
<div class="mt-3">
<label for="status">Status</label>
<select name="status" id="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
<br>
<div class="mt-3">
<label for="name" >Description</label>
<textarea name="description" id="description" class="form-control" rows="3" placeholder="Add my additional notes or detaiuls... "></textarea>
</div>
<div class="fields mt-4">
<div class="header">
<div>
<h5>Additional Fields</h5>
<p class="text-muted">Add multiple rows of custom data </p>
<div id="fieldContainer">
<div class="input-group mb-2">
<input type="text" name= "row[]" class="form-control" placeholder="Field 1 - Row 1">
<button type="button" class="btn btn-danger ms-2" onclick="removeRow(this)">Delete</button>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-dark mt-2" onclick="addRow()">Add Row</button>
</div>
</div>
<div class="form-action mt-4">
<button type="button" class="btn btn-outline-secondary">Cancel</button>
<button type="submit" class="btn btn-dark">Create Record</button>
</div>
</form>
</div>
</div>
</body>
</html>

7
restore_record.php Normal file
View File

@ -0,0 +1,7 @@
<?php
require_once "classes/Record.php";
$record = new Record();
$record->restoreRecord($_POST['id']);
?>

11
status_update.php Normal file
View File

@ -0,0 +1,11 @@
<?php
include "db.php";
$id=$_POST['id'];
$row=mysqli_fetch_assoc(mysqli_query($conn,"SELECT status FROM records WHERE id=$id"));
$new = $row['status']=="active"?"inactive":"active";
mysqli_query($conn,"UPDATE records SET status='$new' WHERE id=$id");
?>

146
style.css Normal file
View File

@ -0,0 +1,146 @@
:root {
--bs-body-bg: #ffffff;
}
html, body {
background: #ffffff;
}
body {
background-color: #ffffff;
font-family: Arial, sans-serif;
}
.padding {
padding: 0;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color:#ffffff;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
padding: 12px 25px;
min-height: 65px;
}
.logo {
display: flex;
align-items: center;
font-weight: bold;
margin-left: 150px;
}
.logo-icon {
background: rgb(105, 99, 222);
color: white;
padding: 8px 12px;
border-radius: 8px;
margin-right: 8px;
}
/* Search */
.search-area {
width: 35%;
position: relative;
}
.search-box {
width: 40%;
padding: 8px 15px 8px 40px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #ffffff;
}
.search-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #999;
font-size: 15px;
}
/* Navbar links */
.nav-links {
display: flex;
align-items: center;
gap: 15px;
}
.profile {
background: violet;
color: white;
padding: 8px 10px;
border-radius: 50%;
}
/* Main Card */
.top-space {
margin-top: 40px;
}
.main-card {
background: #ffffff;
padding: 40px;
text-align: center;
border-radius: 15px;
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.12);
}
.button-group {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 15px;
}
/* Statistics */
.stat-box {
background: #ffffff;
padding: 25px;
border-radius: 12px;
position: relative;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.12);
}
.stat-box i {
position: absolute;
top: 20px;
right: 20px;
font-size: 22px;
}
.icon-blue {
color: rgb(105, 99, 222);
}
.search-area {
width: 35%;
}
/* Records button */
.nav-link-btn {
text-decoration: none;
padding: 8px 18px;
border-radius: 20px;
color: black;
font-weight: 500;
}
.nav-link-btn:hover {
background-color: #eee;
}
/* Make navbar responsive */
@media (max-width: 992px) {
.search-area {
display: none;
}
}

37
update_record.php Normal file
View File

@ -0,0 +1,37 @@
<?php
include "db.php";
$id=$_POST['id'];
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$category=$_POST['category'];
$description=$_POST['description'];
mysqli_query($conn,"UPDATE records SET
name='$name',
email='$email',
phone='$phone',
category='$category',
description='$description'
WHERE id=$id");
// DELETE OLD FIELDS
mysqli_query($conn,"DELETE FROM additional_fields WHERE record_id=$id");
// INSERT NEW FIELDS
if(isset($_POST['fields']))
{
foreach($_POST['fields'] as $field)
{
if(!empty($field)){
$field=mysqli_real_escape_string($conn,$field);
mysqli_query($conn,"INSERT INTO additional_fields(record_id,field_value)
VALUES($id,'$field')");
}
}
}
?>