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
index.php
//index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP JSON File CRUD (Create Read Update and Delete)</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 JSON File CRUD (Create Read Update and Delete)</h1>
<div class="row">
<div class="col-12">
<a href="add.php" class="btn btn-primary">Add</a>
<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
//fetch data from json
$data = file_get_contents('members.json');
//decode into php array
$data = json_decode($data);
$index = 0;
foreach($data as $row){
echo "
<tr>
<td>".$row->id."</td>
<td>".$row->firstname."</td>
<td>".$row->lastname."</td>
<td>".$row->address."</td>
<td>
<a href='edit.php?index=".$index."' class='btn btn-success btn-sm'>Edit</a>
<a href='delete.php?index=".$index."' class='btn btn-danger btn-sm'>Delete</a>
</td>
</tr>
";
$index++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
add.php
//add.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP JSON File CRUD (Create Read Update and Delete)</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 JSON File CRUD (Create Read Update and Delete)</h1>
<div class="row">
<div class="col-1"></div>
<div class="col-8"><a href="index.php">Back</a>
<form method="POST">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id" name="id">
</div>
</div>
<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" id="firstname" 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" id="lastname" 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" id="address" name="address">
</div>
</div>
<input type="submit" name="save" value="Save" class="btn btn-primary">
</form>
</div>
<div class="col-5"></div>
</div>
</div>
<?php
if(isset($_POST['save'])){
//open the json file
$data = file_get_contents('members.json');
$data = json_decode($data);
//data in out POST
$input = array(
'id' => $_POST['id'],
'firstname' => $_POST['firstname'],
'lastname' => $_POST['lastname'],
'address' => $_POST['address']
);
//append the input to our array
$data[] = $input;
//encode back to json
$data = json_encode($data, JSON_PRETTY_PRINT);
file_put_contents('members.json', $data);
header('location: index.php');
}
?>
</body>
</html>
edit.php
//edit.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP JSON File CRUD (Create Read Update and Delete)</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<?php
//get id from URL
$index = $_GET['index'];
//get json data
$data = file_get_contents('members.json');
$data_array = json_decode($data);
//assign the data to selected index
$row = $data_array[$index];
if(isset($_POST['save'])){
$input = array(
'id' => $_POST['id'],
'firstname' => $_POST['firstname'],
'lastname' => $_POST['lastname'],
'address' => $_POST['address'],
'gender' => $_POST['gender']
);
//update the selected index
$data_array[$index] = $input;
//encode back to json
$data = json_encode($data_array, JSON_PRETTY_PRINT);
file_put_contents('members.json', $data);
header('location: index.php');
}
?>
<div class="container">
<h1 class="page-header text-center">PHP JSON File CRUD (Create Read Update and Delete)</h1>
<div class="row">
<div class="col-1"></div>
<div class="col-8"><a href="index.php">Back</a>
<form method="POST">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id" name="id" value="<?php echo $row->id; ?>">
</div>
</div>
<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" id="firstname" 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" id="lastname" 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" id="address" name="address" value="<?php echo $row->address; ?>">
</div>
</div>
<input type="submit" name="save" value="Save" class="btn btn-primary">
</form>
</div>
<div class="col-5"></div>
</div>
</div>
</body>
</html>
delete.php
//delete.php
<?php
//get id
$index = $_GET['index'];
//fetch data from json
$data = file_get_contents('members.json');
$data = json_decode($data);
//delete the row with the index
unset($data[$index]);
//encode back to json
$data = json_encode($data, JSON_PRETTY_PRINT);
file_put_contents('members.json', $data);
header('location: index.php');
?>
members.json
//members.json
[
{
"id": "2",
"firstname": "Ashton",
"lastname": "Cox",
"address": "San Francisco"
},
{
"id": "3",
"firstname": "Bradley",
"lastname": "Greer",
"address": "London"
},
{
"id": "4",
"firstname": "Brenden",
"lastname": "Wagner",
"address": "San Francisco"
},
{
"id": "5",
"firstname": "Cairocoders",
"lastname": "Ednalan",
"address": "Olongapo City"
},
{
"id": "6",
"firstname": "Clydety",
"lastname": "Ednalan",
"address": "Olongapo City",
"gender": null
}
]
