Cara Membuat Website Jadwal Sholat dengan HTML dan PHP

Tutorial By Faraaz

Last updated on Desember 21st, 2020

Siapa bilang bahwa pemrograman atau sesuatu di bidang IT tidak akan bermanfaat di bulan Ramadhan ini? Mungkin beberapa orang menganggap tidak karena biasanya orang-orang menganggap bahwa internet atau teknologi informasi adalah sesuatu yang berbahaya, tapi nyatanya tidak, contohnya kita bisa memanfaatkan pemrograman web sebagai hal yang sangat bermanfaat di bulan suci Ramadhan ini, seperti membuat sebuah situs untuk mengetahui jadwal shalat, berikut tutorial cara membuatnya.

DAFTAR ISI

Cara Membuat Website Jadwal Sholat dengan HTML dan PHP
Cara Penggunaan
1. https://example.com/shalat.php?location=BANDUNG

Cara Membuat Website Jadwal Sholat dengan HTML dan PHP

1. Kamu kunjungi situs MuslimSalat.

2. Lalu kamu klik pada tombol login.

jadwal shalat html5 1

3. Klik pada tombol Register jika kamu belum memiliki akun sebelumnya.

4. Kamu akan diminta untuk memilih jenis paket yang ingin kamu pilih, pilih free jika kamu ingin paket gratis (fitur yang didapat sama saja, hanya saja terdapat batasan penggunaan dalam seharinya).

5. Kamu isi semua kolom yang diminta dan klik pada tombol register.

6. Kamu akan dialihkan ke halaman utama, disana terdapat APIKEY yang wajib kamu simpan.

7. Lalu kamu salin kode PHP di bawah ini sebagai otak utama dari data data jadwal shalatnya.

<?php
$data = json_decode(file_get_contents("http://muslimsalat.com/".$_GET['location'].".json?key=APIKEY_KAMU"), TRUE);
$shubuh = $data['items'][0]['fajr'];
$dzuhur = $data['items'][0]['dhuhr'];
$ashar = $data['items'][0]['asr'];
$maghrib = $data['items'][0]['maghrib'];
$isya = $data['items'][0]['isha'];
?>

8. Lalu kamu tambahkan script HTML di bawah ini di bawah script PHP.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<center><h2>Jadwal Shalat</h2></center>

<table>
  <tr>
    <th>Shalat</th>
    <th>Waktu</th>
  </tr>
  <tr>
    <td>Shubuh</td>
    <td><?php echo $shubuh; ?></td>
  </tr>
  <tr>
    <td>Dzuhur</td>
    <td><?php echo $dzuhur; ?></td>
  </tr>
  <tr>
    <td>Ashar</td>
    <td><?php echo $ashar; ?></td>
  </tr>
  <tr>
    <td>Maghrib</td>
    <td><?php echo $maghrib; ?></td>
  </tr>
  <tr>
    <td>Isya</td>
    <td><?php echo $isya; ?></td>
  </tr>
</table>

</body>
</html>

9. Kamu ganti teks APIKEY_KAMU di script PHP dan ubah menjadi kode APIKEY kamu.

10. Kamu simpan dalam format .php dan coba kamu jalankan di localhost atau hosting kamu.

11. Selesai.