Quran Data from Json
Aplikasi PHP dengan Bootstrap yang mengurai file JSON dan menampilkan daftar nama surat Al-Quran serta detail surat, index.php dan quran.php.
Persiapan Struktur Folder:
- Buat folder proyek.
- Di dalam folder proyek, buat dua file:
index.phpdanquran.php. - Unduh file JSON dari URL yang diberikan dan simpan dengan nama
quran.jsondi dalam folder proyek.
1. index.php
File ini akan mengurai file JSON, menyusun daftar nama surat Al-Quran, dan menampilkannya menggunakan Bootstrap.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Surat Al-Quran</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
.amiri-regular {
font-family: "Amiri", serif;
font-weight: 400;
font-style: normal;
}
.amiri-bold {
font-family: "Amiri", serif;
font-weight: 700;
font-style: normal;
}
.amiri-regular-italic {
font-family: "Amiri", serif;
font-weight: 400;
font-style: italic;
}
.amiri-bold-italic {
font-family: "Amiri", serif;
font-weight: 700;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1 class="my-4">Daftar Surat Al-Quran</h1>
<div class="row">
<?php
$json = file_get_contents('quran.json');
$surahs = json_decode($json, true);
foreach ($surahs as $surah) {
echo '<div class="col-md-4">';
echo '<a href="quran.php?id=' . $surah['id'] . '" class="list-group-item list-group-item-action mb-3">';
echo '<h5 class="mb-1 amiri-regular">' . $surah['name'] . ' (' . $surah['transliteration'] . ')</h5>';
echo '<p class="mb-1">Type: ' . $surah['type'] . '</p>';
echo '<small>Total Verses: ' . $surah['total_verses'] . '</small>';
echo '</a>';
echo '</div>';
}
?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
quran.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail Surat Al-Quran</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
.amiri-regular {
font-family: "Amiri", serif;
font-weight: 400;
font-style: normal;
}
.amiri-bold {
font-family: "Amiri", serif;
font-weight: 700;
font-style: normal;
}
.amiri-regular-italic {
font-family: "Amiri", serif;
font-weight: 400;
font-style: italic;
}
.amiri-bold-italic {
font-family: "Amiri", serif;
font-weight: 700;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<?php
$json = file_get_contents('quran.json');
$surahs = json_decode($json, true);
$surah_id = isset($_GET['id']) ? $_GET['id'] : 1; // Default to Surah 1 if no ID is set
$selected_surah = null;
foreach ($surahs as $surah) {
if ($surah['id'] == $surah_id) {
$selected_surah = $surah;
break;
}
}
if ($selected_surah) {
echo '<h1 class="my-4">' . $selected_surah['name'] . ' (' . $selected_surah['transliteration'] . ')</h1>';
echo '<p>Type: ' . $selected_surah['type'] . '</p>';
echo '<p>Total Verses: ' . $selected_surah['total_verses'] . '</p>';
if (isset($selected_surah['verses'])) {
foreach ($selected_surah['verses'] as $verse) {
echo '<div class="card my-2">';
echo '<div class="card-body">';
echo '<h5 class="card-title">Ayat ' . $verse['id'] . '</h5>';
echo '<p class="card-text amiri-regular">' . $verse['text'] . '</p>';
echo '<p class="card-text"><small class="text-muted">' . $verse['translation'] . '</small></p>';
echo '</div>';
echo '</div>';
}
} else {
echo '<p>Teks atau terjemahan tidak tersedia.</p>';
}
} else {
echo '<p>Surat tidak ditemukan.</p>';
}
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
EP Note:
- Pastikan file JSON (
quran.json) berada di folder yang sama denganindex.phpdanquran.php. - Sesuaikan URL bootstrap dengan versi terbaru jika diperlukan.
- Pastikan server PHP Anda dikonfigurasi dengan benar untuk membaca file dan mengurai JSON.
Dengan dua file ini, Anda akan memiliki aplikasi PHP yang menggunakan Bootstrap untuk menampilkan daftar surat Al-Quran dan detail dari setiap surat.
Audio Title
