Scribd
Upload
153 views10 pages

Membuat Crud File Json

The document provides steps to create a CRUD (create, read, update, delete) application for managing member data stored in a JSON file without page reloads using Bootstrap and jQuery. The steps include creating folders and files, adding initial member data to a JSON file, and developing PHP files to handle form submission and JSON file manipulation for adding, editing and deleting members from the file. Modal popups are used for member forms and jQuery is utilized to call PHP files and update the page without reloading.

Uploaded by

Xaskajsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
153 views10 pages

Membuat Crud File Json

The document provides steps to create a CRUD (create, read, update, delete) application for managing member data stored in a JSON file without page reloads using Bootstrap and jQuery. The steps include creating folders and files, adding initial member data to a JSON file, and developing PHP files to handle form submission and JSON file manipulation for adding, editing and deleting members from the file. Modal popups are used for member forms and jQuery is utilized to call PHP files and update the page without reloading.

Uploaded by

Xaskajsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

MEMBUAT CRUD FILE JSON

TANPA RELOAD
DENGAN BOOSTRAP DAN JQUERY

Langkah 1 : buat folder dengan nama CRUD_JSON di xampp\htdocs dengan susunan sebagai
berikut :

Langkah 2 : buat file json dengan nama members.json di dalam folder files dengan isi sebagai
berikut :
[
{
"id": "U-001",
"firstname": "Purwoto",
"lastname": "Sutan Mangkuto",
"address": "Pitara Depok City"
},
{
"id": "U-002",
"firstname": "Hafidh",
"lastname": "Purwo Adiyatma",
"address": "Pancoran Mas Depok"
},
{
"id": "U-003",
"firstname": "Rakha",
"lastname": "Purwo Arkhananta",
"address": "Kampung Pitara"
},
{
"id": "U-004",
"firstname": "Khalisha",
"lastname": "Hibatillah Purwoto",
"address": "Margond Depok City"
},
{
"id": "U-005",
"firstname": "Novi",
"lastname": "Akhrianti",
"address": "Bukit Tinggi City"
},
{
"id": "U-006",
"firstname": "Nosfi",
"lastname": "Putra",
"address": "Pitara Depok City"
}
]

Langkah 3 : buat file index.php pada folder CRUD_JSON dengan source codenya sbb :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CRUD File JSON Dengan PHP</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1 class="page-header text-center">CRUD File JSON Dengan PHP</h1>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a href="#addnew" class="btn btn-primary" data-toggle="modal">
<span class="glyphicon glyphicon-plus"></span> Add New</a>
<?php
session_start();
if(isset($_SESSION['message'])){
?>
<div class="alert alert-info text-center" style="margin-top:20px;">
<?php echo $_SESSION['message']; ?>
</div>
<?php
unset($_SESSION['message']);
}
?>
<table class="table table-bordered table-striped" style="margin-top:20px;">
<thead>
<th>Member ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Alamat</th>
<th>Action</th>
</thead>
<tbody>
<?php
$index = 1;
//ambil data JSON file
$data = file_get_contents('files/members.json');

//decode ke php array


$file = json_decode($data);
foreach($file as $row){
?>
<tr>
<td><?php echo $row->id; ?></td>
<td><?php echo $row->firstname; ?></td>
<td><?php echo $row->lastname; ?></td>
<td><?php echo $row->address; ?></td>
<td>
<a href="#edit_<?php echo $row->id; ?>" data-toggle="modal"
class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-edit"></span> Edit</a>
<a href="#delete_<?php echo $row->id; ?>" data-toggle="modal"
class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash"></span> Delete</a>
</td>
<?php include('edit_delete_modal.php'); ?>
</tr>
<?php
$index++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<?php include('add_modal.php'); ?>
<script src="jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Langkah 4 : buat file add.php pada folder CRUD_JSON dengan source codenya sebagai berikut :
<?php
session_start();
if(isset($_POST['add'])){
//open JSON file
$file = ('files/members.json');
$user = file_get_contents($file);
$data = json_decode($user,true);

//data in out dari Form -> POST


$input = array(
'id' => $_POST['id'],
'firstname' => $_POST['firstname'],
'lastname' => $_POST['lastname'],
'address' => $_POST['address']
);

//append the input to array (matrik)


$data[] = $input;

//encode back to json


$jsonfile = json_encode($data, JSON_PRETTY_PRINT);

// Menyimpan data ke dalam anggota.json


$user=file_put_contents($file, $jsonfile);
header('location: index.php');
}
else{
$_SESSION['message'] = 'Fill up add form first';
header('location: index.php');
}

?>

Langkah 5 : buat file add_modal.php dengan source code sebagai berikut :


<!-- Add New -->
<div class="modal fade" id="addnew" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<center><h4 class="modal-title" id="myModalLabel">Add New</h4></center>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="add.php">
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">MemberID</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="id">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">FirstName</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="firstname">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">LastName</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="lastname">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">Alamat</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="address">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" name="add" class="btn btn-primary">
<span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
</form>
</div>
</div>
</div>
</div>

Langkah 6 : buat file edit.php pada folder CRUD_JSON dengan source codenya sebagai berikut :
<?php
session_start();
//open JSON file
$file = ('files/members.json');
$user = file_get_contents($file);
$data = json_decode($user,true);
if(isset($_POST['edit'])){
//set update values
foreach ($data as $key => $d) {
//Perbaharui data sesuai kodenya
if ($d['id'] == $_POST['id']) {
$data[$key]['firstname'] = $_POST['firstname'];
$data[$key]['lastname'] = $_POST['lastname'];
$data[$key]['address'] = $_POST['address'];
}
}

//encode back to json


$jsonfile = json_encode($data, JSON_PRETTY_PRINT);

// Menyimpan data ke dalam anggota.json


$user=file_put_contents($file, $jsonfile);
header('location: index.php');
}
else{
$_SESSION['message'] = 'Select member to edit first';
header('location: index.php');
}
?>

Langkah 7 : buat file delete.php pada folder CRUD_XML dengan source code sebagai berikut :
<?php
session_start();
$index = 1;
//open JSON file
$file = ('files/members.json');
$user = file_get_contents($file);
$data = json_decode($user,true);
if(isset($_POST['delete'])){
//set delete values
foreach ($data as $key => $d) {
//Perbaharui data sesuai kodenya
if ($d['id'] == $_POST['id']) {
// Menghapus data array sesuai dengan kode
// Menggantinya dengan elemen baru
array_splice($data, $key, $index);
}
index++;
}

//encode back to json


$jsonfile = json_encode($data, JSON_PRETTY_PRINT);

// Menyimpan data ke dalam members.json


$user=file_put_contents($file, $jsonfile);
header('location: index.php');
}
else{
$_SESSION['message'] = 'Select member to edit first';
header('location: index.php');
}
?>

Langkah 8 : buat file edit_delete_modal.php pada folder CRUD_XML dengan source code
sebagai berikut :
<!-- Edit -->
<div class="modal fade" id="edit_<?php echo $row->id; ?>" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<center><h4 class="modal-title" id="myModalLabel">Edit Member</h4></center>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="edit.php">
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">MemberID</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="id" value="<?php echo $row->id; ?>"
readonly>
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">FirstName</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="firstname"
value="<?php echo $row->firstname; ?>">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">LastName</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="lastname"
value="<?php echo $row->lastname; ?>">
</div>
</div>
<div class="row form-group">
<div class="col-sm-2">
<label class="control-label" style="position:relative;
top:7px;">Alamat</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control"
name="address"
value="<?php echo $row->address; ?>">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" name="edit" class="btn btn-success">
<span class="glyphicon glyphicon-check"></span> Update</a>
</form>
</div>
</div>
</div>
</div>
<!-- Delete -->
<div class="modal fade" id="delete_<?php echo $row->id; ?>" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<center><h4 class="modal-title" id="myModalLabel">Delete Member</h4></center>
</div>
<div class="modal-body">
<p class="text-center">Are you sure you want to Delete</p>
<h2 class="text-center"><?php echo $row->firstname.' '.$row->lastname; ?></h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel</button>
<a href="delete.php?id=<?php echo $row->id; ?>" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span> Yes</a>
</div>
</div>
</div>
</div>
Setelah selesai silahkan anda jalankan pada browser dengan mengakses
http://localhost:8080/crud_json /, sehingga akan muncul hasil sebagai berikut :

SELAMAT MENCOBA

You might also like