Salah satu fitur pelengkap yang biasanya kita isikan dalam website adalah jadwal shalat harian sesuai lokasi dan tanggal tertentu. Kode program yang mudah diterapkan adalah menggunakan Javascript. Silahkan tempelkan kode program berikut di website anda.
Link demonya adalah https://blogchem.com/falak/simple.html?latitude=-7.0039643&longitude=110.394774
<!DOCTYPE html>
<html>
<head>
<title> Daily Prayer Timetable </title>
<style>
body, td, th {font-family: verdana; font-size: 20px; color: #404040;}
#timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; white-space:nowrap;}
#timetable td, #timetable th {border-width: 1px; border-spacing: 1px; padding: 5px 10px; border-style: inset; border-color: #CCCCCC;}
#timetable th {color:black; text-align: center; font-weight: bold; background-color: #F8F7F4;}
</style>
</head>
<body>
<script type=”text/javascript” src=”https://blogchem.com/falak/PrayTimes.js”></script>
<br>
<p align=”center”>Masukkan Koordinat Anda<p>
<div align=”center”>
<label>Latitude: <input type=”text” id=”latitude”></label>
<label>Longitude: <input type=”text” id=”longitude”></label>
<button onclick=”getPrayerTimes()”>Cek Jadwal Shalat</button>
</div>
<br>
<p align=”center”><strong>Jadwal Shalat</strong><p>
<div align=”center” id=”location”></div>
<div align=”center” id=”table”></div>
<script type=”text/javascript”>function getPrayerTimes() {
// Get user’s location
var latitude = parseFloat(document.getElementById(‘latitude’).value);
var longitude = parseFloat(document.getElementById(‘longitude’).value);if (isNaN(latitude) || isNaN(longitude)) {
alert(‘Koordinat tidak valid!’);
return;
}var date = new Date();
const options = { day: ‘numeric’, month: ‘numeric’, year: ‘numeric’ };
const formattedDate = new Date().toLocaleDateString(‘id-ID’, options);
const [day, month, year] = formattedDate.split(‘/’).map(Number);// Urutan tanggal, bulan, tahun
const reorderedDate = `${day}/${month}/${year}`;var params = {
lat: latitude,
lng: longitude,
method: ‘MU’, // set the calculation method to Muhammadiyah
timezone: -new Date().getTimezoneOffset() / 60
};
var prayTimes = new PrayTimes();
var times = prayTimes.getTimes(date, [latitude, longitude], params.timezone, params.dst, params.format);var list = [‘Fajr’, ‘Sunrise’, ‘Dhuhr’, ‘Asr’, ‘Maghrib’, ‘Isha’, ‘Midnight’];
var html = ‘<br/><table id=”timetable”>’;
html += `<tr><th colspan=”7″>${reorderedDate}</th></tr>`;
html += ‘<tr style=”background-color: yellow;”>’;
for(var i in list) {
html += ‘<td>’+ list[i]+ ‘</td>’;
}
html += ‘</tr><tr>’;
for(var i in list) {
html += ‘<td>’+ times[list[i].toLowerCase()]+ ‘</td>’;
}
html += ‘</tr></table>’;
document.getElementById(‘table’).innerHTML = html;
document.getElementById(‘location’).innerHTML = ‘Latitude: ‘ + latitude + ‘, Longitude: ‘ + longitude;
}</script>
</body>
</html>