Json Preview Table Data
Json Preview Table Data
<!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</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</h2>
<?php
// Baca file JSON
$jsonData = file_get_contents('data.json');
$data = json_decode($jsonData, true);
// Cek apakah 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>';
}
?>
</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>
berikutnya berkembang menjadi seperti ini
<!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</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</h2>
<?php
// Dapatkan nama file dari parameter URL
$file = isset($_GET['file']) ? $_GET['file'] : null;
if ($file) {
// Baca file JSON
$jsonData = file_get_contents($file);
$data = json_decode($jsonData, true);
// Cek apakah 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>
<!-- 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>
Penjelasan Kode:
- Header HTML: Memasukkan CSS Bootstrap melalui CDN.
- PHP:
- Mengambil nama file JSON dari parameter URL
file(misalnyatablejson.php?file=data.json).- Membaca file JSON dan menguraikan data.
- Menampilkan tabel HTML dengan Bootstrap yang berisi data JSON.
- Footer HTML: Memasukkan JavaScript Bootstrap, Popper.js, dan jQuery melalui CDN.
Audio Title
