php - How can I delete or remove data from JSON file in Ubuntu 20.04 Apache web server?
one text
I'm developing a CRUD operation in JSON. I have two files index.php and action.php. The code is working fine in XAMPP windows and Ubuntu below 18.04 versions. But when I tried to run in Ubuntu 20.04, no CRUD operation is performing.
I tried reinstalling Apache web servers in Ubuntu 18.04 and 20.04 with all similar steps and same permission setting. I installed same versions of php7.4, Mariadb 10 database, and apache2. I checked status of both machines resulting same information. I copied the project in both servers and the CRUD operation is working in Ubuntu 18.04 but not 20.04 version. Then I tried with Ubuntu 16 and Xampp in Windows. That is working fine. I upgraded Ubuntu to 22.04 version and it is also not working. What I came to know is it is not working in Ubuntu Versions above 18.04.
Is it OS problem or web server? I'm totally confused. Here are index.php and action.php files
Index.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.0/js/dataTables.bootstrap5.min.js"></script>
<title>PHP CRUD Operations with JSON File</title>
</head>
<body>
<div class="container">
<h1 class="mt-4 mb-4 text-center text-warning">JSON CRUD operations in PHP | Delete or Remove Data from JSON File</h1>
<span id="message"></span>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col col-sm-9">Sample Data</div>
<div class="col col-sm-3">
<button type="button" id="add_data" class="btn btn-success btn-sm float-end">Add</button>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="sample_data">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="modal" tabindex="-1" id="action_modal">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" id="sample_form">
<div class="modal-header">
<h5 class="modal-title" id="dynamic_modal_title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">First Name</label>
<input type="text" name="first_name" id="first_name" class="form-control" />
<span id="first_name_error" class="text-danger"></span>
</div>
<div class="mb-3">
<label class="form-label">Last Name</label>
<input type="text" name="last_name" id="last_name" class="form-control" />
<span id="last_name_error" class="text-danger"></span>
</div>
<div class="mb-3">
<label class="form-label">Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Age</label>
<input type="number" name="age" id="age" class="form-control" />
<span id="age_error" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="action" id="action" value="Add" />
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="action_button">Add</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
load_data();
function load_data()
{
var seconds = new Date() / 1000;
$.getJSON("data.json?"+seconds+"", function(data){
data.sort(function(a,b){
return b.id - a.id;
});
var data_arr = [];
for(var count = 0; count < data.length; count++)
{
var sub_array = {
'first_name' : data[count].first_name,
'last_name' : data[count].last_name,
'gender' : data[count].gender,
'age' : data[count].age,
'action' : '<button type="button" class="btn btn-warning btn-sm edit" data-id="'+data[count].id+'">Edit</button> <button type="button" class="btn btn-danger btn-sm delete" data-id="'+data[count].id+'">Delete</button>'
};
data_arr.push(sub_array);
}
$('#sample_data').DataTable({
data : data_arr,
order : [],
columns : [
{ data : "first_name" },
{ data : "last_name" },
{ data : "gender" },
{ data : "age" },
{ data : "action" }
]
});
});
}
$('#add_data').click(function(){
$('#dynamic_modal_title').text('Add Data');
$('#sample_form')[0].reset();
$('#action').val('Add');
$('#action_button').text('Add');
$('.text-danger').text('');
$('#action_modal').modal('show');
});
$('#sample_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"action.php",
method:"POST",
data:$('#sample_form').serialize(),
dataType:"JSON",
beforeSend:function()
{
$('#action_button').attr('disabled', 'disabled');
},
success:function(data)
{
$('#action_button').attr('disabled', false);
if(data.error)
{
if(data.error.first_name_error)
{
$('#first_name_error').text(data.error.first_name_error);
}
if(data.error.last_name_error)
{
$('#last_name_error').text(data.error.last_name_error);
}
if(data.error.age_error)
{
$('#age_error').text(data.error.age_error);
}
}
else
{
$('#message').html('<div class="alert alert-success">'+data.success+'</div>');
$('#action_modal').modal('hide');
$('#sample_data').DataTable().destroy();
load_data();
setTimeout(function(){
$('#message').html('');
}, 5000);
}
}
});
});
$(document).on('click', '.edit', function(){
var id = $(this).data('id');
$('#dynamic_modal_title').text('Edit Data');
$('#action').val('Edit');
$('#action_button').text('Edit');
$('.text-danger').text('');
$('#action_modal').modal('show');
$.ajax({
url:"action.php",
method:"POST",
data:{id:id, action:'fetch_single'},
dataType:"JSON",
success:function(data)
{
$('#first_name').val(data.first_name);
$('#last_name').val(data.last_name);
$('#gender').val(data.gender);
$('#age').val(data.age);
$('#id').val(data.id);
}
});
});
$(document).on('click', '.delete', function(){
var id = $(this).data('id');
if(confirm("Are you sure you want to delete this data?"))
{
$.ajax({
url:"action.php",
method:"POST",
data:{action:'delete', id:id},
dataType:"JSON",
success:function(data)
{
$('#message').html('<div class="alert alert-success">'+data.success+'</div>');
$('#sample_data').DataTable().destroy();
load_data();
setTimeout(function(){
$('#message').html('');
}, 5000);
}
});
}
});
});
</script>
action.php
``
<?php
//action.php
if(isset($_POST["action"]))
{
$file = 'data.json';
if($_POST['action'] == 'Add' ||$_POST['action'] == 'Edit')
{
$error = array();
$data = array();
$data['id'] = time();
if(empty($_POST['first_name']))
{
$error['first_name_error'] = 'First Name is Required';
}
else
{
$data['first_name'] = trim($_POST['first_name']);
}
if(empty($_POST['last_name']))
{
$error['last_name_error'] = 'Last Name is Required';
}
else
{
$data['last_name'] = trim($_POST['last_name']);
}
$data['gender'] = trim($_POST['gender']);
if(empty($_POST['age']))
{
$error['age_error'] = 'Age is required';
}
else
{
$data['age'] = trim($_POST['age']);
}
if(count($error) > 0)
{
$output = array(
'error' => $error
);
}
else
{
$file_data = json_decode(file_get_contents($file), true);
if($_POST['action'] == 'Add')
{
$file_data[] = $data;
file_put_contents($file, json_encode($file_data));
$output = array(
'success' => 'Data Added'
);
}
if($_POST['action'] == 'Edit')
{
$key = array_search($_POST['id'], array_column($file_data, 'id'));
$file_data[$key]['first_name'] = $data['first_name'];
$file_data[$key]['last_name'] = $data['last_name'];
$file_data[$key]['age'] = $data['age'];
$file_data[$key]['gender'] = $data['gender'];
file_put_contents($file, json_encode($file_data));
$output = array(
'success' => 'Data Edited'
);
}
}
echo json_encode($output);
}
if($_POST['action'] == 'fetch_single')
{
$file_data = json_decode(file_get_contents($file), true);
$key = array_search($_POST["id"], array_column($file_data, 'id'));
echo json_encode($file_data[$key]);
}
if($_POST['action'] == 'delete')
{
$file_data = json_decode(file_get_contents($file), true);
$key = array_search($_POST['id'], array_column($file_data, 'id'));
unset($file_data[$key]);
file_put_contents($file, json_encode($file_data));
echo json_encode(['success' => 'Data Deleted']);
}
}
?>
``