Membuat Jadwal Sholat Menggunakan Javascript

Sebenarnya sudah banyak tersedia widget jadwal sholat seperti ini tersedia gratis tinggal  di embedding untuk di pasang di website/blog kita dengan mudah  menggunakan kode html iframe tag. Tidak membutuhkan waktu lama dan tidak perlu repot-repot. Namun di sisi lain kita tidak bisa merubah tampilan widget tersebut sesuai keinginan kita sehingga widget akan terlihat sama dan sejenis dengan yang dipasang di website/blog rekan lainnya.

Bagi yang ingin tampil beda jalan satu-satunya adalah bikin sendiri. Bagi yang tidak/belum paham javascript seperti saya ini mungkin akan sedikit repot untuk memahami kode-kode pembuatannya, namun karena script untuk membuatnya sudah tersedia jadi maka kita tinggal copas, modifikasi, tempel dan beres. Itulah yang saya lakukan.

1. Silahkan download script tersebut, terserah mau yang zip atau tar.gz.

2. Ekstrak file zip atau tar.gz tersebut di suatu directory. Kita akan menggunakan 2 file saja yaitu PrayTimes.js dan simple.htm untuk dibahas. Kedua file ini sebenarnya sudah jadi tinggal dijalankan, namun beberapa data akan kita rubah untuk disesuaikan dengan kondisi kota-kota di Indonesia dan berdasarkan kriteria yang ditetapkan oleh Kementerian Agama RI yaitu:

• Subuh saat Matahari berada pada sudut -20° di bawah horizon Timur
• Isya’ saat Matahari berada pada sudut -18° di bawah horizon Barat
• Hasil perhitungan waktu sholat masing-masing diberi tambahan waktu 2 menit untuk ihtiyat (faktor kehati-hatian)

3. Kita pakai saja Jakarta sebagai contoh. Dengan bantuan Google dan kata kunci “jakarta latitude” kita akan mendapatkan data koordinat Jakarta adalah 6.1333° S, 106.7500° E, yang mana S (South) menunjukkan Lintang Selatan dan E (East) adalah bujur Timur. Dan zona waktu untuk kota Jakarta adalah GMT+7. Sebagai patokan jika berada di Lintang Selatan dan Bujur Barat besaran nilainya diberi tanda (-), jika berada di Lintang Utara dan Bujur Timur nilainya positip.

4. Data tersebut kita inputkan ke kode script yang ada di file simple.htm berikut:

var times = prayTimes.getTimes(new Date(), [-6.1333, 106.75], +7);

Sebagai opsi bisa ditambahkan data elevasi atau ketinggian suatu daerah untuk menambah keakuratan penentuan waktu sholat Maghrib karena di daerah yang terletak di ketinggian akan melihat matahari terbenam lebih akhir dibanding yang di pinggir pantai. Data elevasi kota Jakarta +/- 10 m di atas permukaan air laut, data ini diinputkan pada variabel di atas menjadi:

var times = prayTimes.getTimes(new Date(), [-6.1333, 106.75, 10], +7);

Kemudian sesuai dengan kriteria kementerian agama yang telah disebut di atas selanjutnya kita sesuaikan metode penentuan waktu Subuh dan Isya. Oleh karena itu silahkan dilihat file PrayTimes.js dibagian variable “methods” dan default setting “calcMethod”. Secara default di situ dipakai metode “MWL (Muslim World League)” dengan paramater “fajr : 18, isha : 17”. Gantilah data ini dengan kriteria yang ditentukan oleh Kementerian Agama RI menjadi “fajr : 20, isha : 18”. Kata “MWL” sendiri juga bisa anda rubah sesuai keinginan anda, misal “Indonesia”.

Jangan pernah merubah apapun data-data maupun kode-kode lainnya yang ada di file PrayTimes.js selain data variabel “method” tersebut. Kecuali jika kita bermaksud merubah nama-nama waktu sholat dari bahasa Inggris ke bahasa Indonesia. Untuk itu perubahan bisa dilakukan sebagai berikut:

• Fajr menjadi Subuh
• Dhuhr menjadi Dhuhur
• Asr menjadi Ashar
• Maghrib tetap Maghrib
• Isha menjadi Isya(‘)
• Lainnya biarkan saja
• Agar tidak merubah script, rubah juga nama variabelnya (yang menggunakan huruf kecil), sehingga ‘fajr’ menjadi ‘subuh’, ‘dhuhr’ menjadi ‘dhuhur’ dan seterusnya.
• Demikian juga yang ada di file simple.htm :

var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha', 'Midnight'];

diganti dengan:

var list = ['Subuh', 'Dhuhur', 'Ashar', 'Maghrib', 'Isya'];

Terakhir menambah ihtiyati (faktor kehati-hatian) sebesar 2 menit. Tambahkan variabel berikut ke script yang ada di file simple.htm

prayTimes.tune( {subuh: 2, dhuhur: 2, ashar: 2, maghrib: 2, isya: 2} );

Sehingga lengkapnya akan seperti ini:

<script type="text/javascript">
     var date = new Date(); // today
     prayTimes.tune( {subuh: 2, dhuhur: 2, ashar: 2, maghrib: 2, isya: 2} );
     var times = prayTimes.getTimes(new Date(), [-6.1333, 106.75, 10], +7);
     var list = ['Subuh', 'Dhuhur', 'Ashar', 'Maghrib', 'Isya'];
     var html = '<table id="timetable">';
	 html += '<tr><th colspan="2">'+ date.toLocaleDateString()+ '</th></tr>';
	     for(var i in list)    {
		html += '<tr><td>'+ list[i]+ '</td>';
		html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
	     }
	  html += '</table>';
	  document.getElementById('table').innerHTML = html;
</script>

Selesai dan jika file simple.htm ini anda jalankan akan didapat data waktu sholat untuk kota Jakarta, seperti berikut:

Dalam contoh ini file PrayTimes.js saya letakkan di directory yang sama dengan file simple.htm, oleh karena itu pemanggilan file PrayTimes.js di file simple.htm pada bagian head tag saya rubah menjadi:

<head>
     <script type="text/javascript" src="PrayTimes.js"></script>
</head>

Tinggal memodifikasi tampilan tabel sesuai dengan yang anda inginkan. Demikian juga jika ingin menyajikan jadwal sholat multi kota dengan gaya dropdown list (seperti yang saya tampilkan di sebelah kanan halaman ini jika anda menggunakan layar laptop atau di bagian paling bawah jika anda menggunakan handphone untuk mengakses halaman ini) anda bisa tambahi sendiri dengan kode html untuk dropdown list yang bisa anda cari di internet. Jika sudah sesuai dengan yang anda inginkan anda bisa selajutnya menyajikan jadwal sholat ini sebagai widget di halaman website atau blog anda dengan menggunakan kode tag html iframe. Sebagai contoh adalah seperti yang saya gunakan untuk melampirkan jadwal sholat di atas yaitu menggunakan kode iframe berikut:

<iframe src="../wp-content/uploads/contoh/simple.htm" height="230" width="250" frameborder="0" scrolling="no" align="middle"></iframe>

Keterangan: simple.htm saya letakkan di direktori ‘/wp-content/uploads/contoh/’ silahkan anda ganti dengan direktori dimana anda menyimpan file ‘simple.htm’ anda sendiri.

Jika kita mencocokkan hasil jadwal sholat ini dengan widget yang ada di beberapa website atau blog lain, kita mungkin akan mendapati hasil yang sedikit berbeda. Hal ini dikarenakan input data koordinat latitude, longitude dan elevasi yang berbeda. Jika kita mencari data koordinat suatu kota di internet, beberapa website akan menyajikan data yang berbeda-beda. Data yang saya pakai untuk widget yang ada di sidebar sebelah kanan di blog ini diperoleh dari Altitude-maps.com, beda dengan data yang saya pakai sebagai contoh di atas yang saya dapat dari halaman Google.

Update : Contoh jadwal sholat dengan menu dropdown untuk memilih kota dapat didownload di sini yang berupa file zip, terdiri dari tiga file, prtimes.html, PrayTimes.js dan DataTP.js.