Cara Membuat Jadwal Imsakiyah Menggunakan API
Artikel ini akan membahas langkah-langkah untuk membuat jadwal imsakiyah di blog menggunakan PHP dan API. Dalam tutorial ini, kita akan menggunakan API dari `equran.id` untuk mengambil data provinsi, kabupaten/kota, serta jadwal imsakiyah berdasarkan lokasi yang dipilih oleh pengguna.
1. Persiapan Awal
Sebelum memulai, pastikan Anda memiliki:
- Hosting atau server lokal dengan PHP dan cURL aktif.
- Pengetahuan dasar tentang PHP dan HTML.
- Akses ke API `equran.id`. (Tidak diperlukan API key.)
2. Struktur Proyek
Buat struktur file seperti berikut:
/proyek-jadwal-imsakiyah
├── index.php // File utama untuk menampilkan jadwal imsakiyah
File `index.php` akan berisi kode PHP untuk mengambil data dari API dan menampilkannya dalam bentuk tabel.
3. Langkah-Langkah Pembuatan
Langkah 1: Fungsi untuk Mengambil Data dari API
Kita akan membuat fungsi `fetch_api_data()` untuk mengambil data dari API menggunakan cURL. Fungsi ini mendukung metode GET dan POST.
<?php
function fetch_api_data($url, $method = 'GET', $data = null) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
if ($method === 'POST') {
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
}
$response = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($http_code === 200) {
return json_decode($response, true);
} else {
return ['code' => $http_code, 'message' => 'Error fetching data'];
}
}
?>
Langkah 2: Inisialisasi Variabel
Inisialisasi variabel untuk menyimpan data provinsi, kabupaten/kota, dan jadwal imsakiyah.
<?php
$provinsi_list = fetch_api_data('https://equran.id/api/v2/imsakiyah/provinsi');
$selected_provinsi = $_POST['provinsi'] ?? '';
$selected_kabkota = $_POST['kabkota'] ?? '';
$kabkota_list = [];
$imsakiyah_data = [];
?>
Langkah 3: Handle Form Submission
Jika form disubmit, ambil daftar kabupaten/kota berdasarkan provinsi yang dipilih, lalu ambil jadwal imsakiyah berdasarkan kabupaten/kota.
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Ambil daftar kabupaten/kota jika provinsi dipilih
if (!empty($selected_provinsi)) {
$kabkota_list = fetch_api_data(
'https://equran.id/api/v2/imsakiyah/kabkota',
'POST',
['provinsi' => $selected_provinsi]
);
}
// Ambil jadwal imsakiyah jika kabupaten/kota dipilih
if (!empty($selected_kabkota)) {
$imsakiyah_data = fetch_api_data(
'https://equran.id/api/v2/imsakiyah',
'POST',
['provinsi' => $selected_provinsi, 'kabkota' => $selected_kabkota]
);
}
}
?>
Langkah 4: Tampilan HTML
Buat formulir untuk memilih provinsi dan kabupaten/kota, serta tampilkan jadwal imsakiyah dalam bentuk tabel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jadwal Imsakiyah</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
form { margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
table, th, td { border: 1px solid #ddd; }
th, td { padding: 8px; text-align: center; }
th { background-color: #f4f4f4; }
</style>
</head>
<body>
<h1>Jadwal Imsakiyah</h1>
<!-- Formulir Pilihan Provinsi dan Kabupaten/Kota -->
<form method="POST">
<label for="provinsi">Pilih Provinsi:</label>
<select name="provinsi" id="provinsi" required onchange="this.form.submit()">
<option value="">-- Pilih Provinsi --</option>
<?php if (isset($provinsi_list['data'])): ?>
<?php foreach ($provinsi_list['data'] as $provinsi): ?>
<option value="<?= htmlspecialchars($provinsi) ?>" <?= ($selected_provinsi === $provinsi) ? 'selected' : '' ?>>
<?= htmlspecialchars($provinsi) ?>
</option>
<?php endforeach; ?>
<?php endif; ?>
</select>
<?php if (!empty($selected_provinsi)): ?>
<label for="kabkota">Pilih Kabupaten/Kota:</label>
<select name="kabkota" id="kabkota" required onchange="this.form.submit()">
<option value="">-- Pilih Kabupaten/Kota --</option>
<?php if (isset($kabkota_list['data'])): ?>
<?php foreach ($kabkota_list['data'] as $kabkota): ?>
<option value="<?= htmlspecialchars($kabkota) ?>" <?= ($selected_kabkota === $kabkota) ? 'selected' : '' ?>>
<?= htmlspecialchars($kabkota) ?>
</option>
<?php endforeach; ?>
<?php endif; ?>
</select>
<?php endif; ?>
</form>
<!-- Menampilkan Jadwal Imsakiyah -->
<?php if (!empty($imsakiyah_data) && isset($imsakiyah_data['data'][0]['imsakiyah'])): ?>
<h2>Jadwal Imsakiyah untuk <?= htmlspecialchars($selected_kabkota) ?>, <?= htmlspecialchars($selected_provinsi) ?></h2>
<table>
<tr>
<th>Tanggal</th>
<th>Imsak</th>
<th>Subuh</th>
<th>Dzuhur</th>
<th>Ashar</th>
<th>Maghrib</th>
<th>Isya</th>
</tr>
<?php foreach ($imsakiyah_data['data'][0]['imsakiyah'] as $jadwal): ?>
<tr>
<td><?= htmlspecialchars($jadwal['tanggal']) ?></td>
<td><?= htmlspecialchars($jadwal['imsak']) ?></td>
<td><?= htmlspecialchars($jadwal['subuh']) ?></td>
<td><?= htmlspecialchars($jadwal['dzuhur']) ?></td>
<td><?= htmlspecialchars($jadwal['ashar']) ?></td>
<td><?= htmlspecialchars($jadwal['maghrib']) ?></td>
<td><?= htmlspecialchars($jadwal['isya']) ?></td>
</tr>
<?php endforeach; ?>
</table>
<?php elseif (!empty($imsakiyah_data)): ?>
<p>Error: <?= htmlspecialchars($imsakiyah_data['message'] ?? 'Unknown error') ?></p>
<?php endif; ?>
</body>
</html>
4. Penjelasan Kode
1. Fungsi `fetch_api_data()`:
- Menggunakan cURL untuk mengirim permintaan ke API.
- Mendukung metode GET dan POST.
- Mengembalikan data JSON yang sudah di-decode menjadi array PHP.
2. Formulir Pilihan Provinsi dan Kabupaten/Kota:
- Pengguna memilih provinsi terlebih dahulu.
- Setelah memilih provinsi, daftar kabupaten/kota akan dimuat secara dinamis.
3. Menampilkan Jadwal Imsakiyah:
- Jika kabupaten/kota dipilih, data jadwal imsakiyah akan ditampilkan dalam bentuk tabel.
5. Hasil Akhir
Setelah menjalankan kode di atas, Anda akan mendapatkan halaman web yang memungkinkan pengguna memilih provinsi dan kabupaten/kota, kemudian menampilkan jadwal imsakiyah untuk bulan Ramadan.
Dengan mengikuti tutorial ini, Anda dapat dengan mudah menambahkan fitur jadwal imsakiyah ke blog atau website Anda. Selamat mencoba!
1 komentar