Membuat Jadwal Sholat Menggunakan Javascript

Share on Facebook0Share on Google+0Tweet about this on Twitter0Share on LinkedIn0

muadzin
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 “calMethod”. 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 sidebar sebelah kanan blog 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

loading...

11 Comments

Add a Comment
  1. pak, tolong bisa di re-upload ke mediafire gak?

    1. Tautan untuk download kode asli sudah saya kembalikan ke situs praytimes. Juga sudah saya tambahkan tautan untuk download contoh jadwal sholat dengan pilihan kota

  2. terimaksih infonya pak..tapi filenya ga bisa dwonload pak..mohon re link..trus klo tambahi coundown iqomah bisa ga pak?makish

    1. Saya punya arsip dalam bentuk zip, sudah diupload di ziddu. Silahkan dicoba. Tapi saya tidak punya arsip manualnya. Rupanya website resminya sudah gak ada

  3. kalo mau dibuat per bulan bagaimana ya? terima kasih

    1. Untuk yang bulanan, kita pakai file monthly.htm dengan sedikit modifikasi. Untuk contoh Jakarta seperti di atas
      1. Buka file monthly.htm dengan html editor, lihat di tag <form> setelah <body>. Kita rubah input Latitude dg -6.1333 dan Longitude dg 106.75 juga Time Zone dirubah dg +7
      2. Rubah input Method dengan menambahkan option value misalnya “KemenagRI” (seperti pada contoh dalam artikel di atas), disesuaikan dengan var “methods” yang anda pakai di file PrayTimes.js anda. Sehingga nanti di dropdown list ada pilihan untuk metode yang dianut di Indonesia.
      3. Jangan lupa menambah faktor ihtiyati 2 menit dengan menambahkan code prayTimes.tune() seperti yg dijelaskan di atas di kode javascript function makeTable(), selipkan di antara var

  4. Ini yang saya cari. Terimakasih

  5. Terima kasih pak infonya ..sangat menarik.

  6. Terimakasih pak…saya coba lagi

  7. Sudah saya coba namun tidak berhasil menambahkan waktu ihtiyati. Saya ikuti petunjuknya, namun tidak ada perubahan. Terus kalau fajr diganti subuh yg muncul undefined…saya menggunakan PrayTimes.js: Prayer Times Calculator (ver 2.3). Kemudian utk mengubah Sunday, July menjadi format indonesia bagaimana pak caranya. terimakasih.

    1. 1. Letakkan fungsi ihtiyati prayTimes.tune sebelum fungsi prayTimes.getTimes
      2. Jika undefined berarti masih ada variabel ‘fajr’ yang belum dirubah menjadi ‘subuh’, silahkan cek lagi file PrayTimes.js
      3. Agar jawaban saya tidak panjang dan mungkin malah membingungkan, silahkan lihat saja source codenya. Jika anda menggunakan Firefox, klik kanan tabel waktu sholat yang dibahas di atas (jangan yang di sidebar sebelah kanan), kemudian sorot ‘This Frame’ dan klik ‘Open Frame in New Tab’. Tabel akan ditampilkan di halaman browser tersendiri, klik kanan tabel ini kemudian klik ‘View Page Source’. Di situ juga bisa dilihat source code file PrayTimes.js yang sudah saya modif. Untuk melihatnya klik PrayTimes.js yang tertulis dalam warna biru.
      4. Di situ juga sudah saya sertakan fungsi untuk menampilkan nama hari dan bulan dalam bahasa Indonesia
      5. Untuk menampilkan waktu sholat secara individual, bisa digunakan contoh berikut: document.write(‘Subuh : ‘+times.subuh);, atau document.write(‘Imsak : ‘+times.imsak);. Dan seterusnya.

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

SerbaSerbi.web.id © 2016 Frontier Theme