Table json View with editor
Json View with editor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Data Table and Editor</title>
<!-- Bootstrap CSS CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">JSON Data Table and Editor</h2>
<p>
cara buka file data json --> tablejson.php?file=https://...t.json
</p>
<!-- Nav pills -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-show-tab" data-toggle="pill" href="#pills-show" role="tab" aria-controls="pills-show" aria-selected="true">Show Data</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-edit-tab" data-toggle="pill" href="#pills-edit" role="tab" aria-controls="pills-edit" aria-selected="false">Edit Data</a>
</li>
</ul>
<!-- Tab content -->
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-show" role="tabpanel" aria-labelledby="pills-show-tab">
<?php
// Dapatkan nama file dari parameter URL
$file = isset($_GET['file']) ? $_GET['file'] : null;
// Inisialisasi variabel untuk data JSON
$jsonData = '';
$data = [];
// Jika ada file yang ditentukan, baca file JSON
if ($file) {
// Baca data dari file JSON
$jsonData = file_get_contents($file);
// Uraikan data JSON
$data = json_decode($jsonData, true);
// Tampilkan tabel jika data valid
if ($data && is_array($data)) {
echo '<table class="table table-striped">';
echo '<thead><tr>';
// Tampilkan header tabel
foreach (array_keys($data[0]) as $key) {
echo '<th>' . htmlspecialchars($key) . '</th>';
}
echo '</tr></thead>';
echo '<tbody>';
// Tampilkan data baris demi baris
foreach ($data as $row) {
echo '<tr>';
foreach ($row as $value) {
echo '<td>' . htmlspecialchars($value) . '</td>';
}
echo '</tr>';
}
echo '</tbody></table>';
} else {
echo '<div class="alert alert-danger">Invalid JSON data.</div>';
}
} else {
echo '<div class="alert alert-warning">No file specified.</div>';
}
?>
</div>
<div class="tab-pane fade" id="pills-edit" role="tabpanel" aria-labelledby="pills-edit-tab">
<?php
if ($file) {
// Tampilkan data JSON dalam textarea untuk diedit
echo '<form method="post" action="?file=' . htmlspecialchars($file) . '">';
echo '<div class="form-group">';
echo '<label for="jsonData">Edit JSON Data:</label>';
echo '<textarea class="form-control" id="jsonData" name="json_data" rows="10">' . htmlspecialchars($jsonData) . '</textarea>';
echo '</div>';
echo '<button type="submit" class="btn btn-primary">Save</button>';
echo '</form>';
}
?>
</div>
</div>
</div>
<!-- Bootstrap JS, Popper.js, and jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Audio Title
