Monday, November 19, 2018

Cara Membuat Konversi Kalender Masehi Hijriyah untuk HTML

Pada postingan kali ini kita akan sedikit berbagi tentang cara membuat konversi kalender masehi ke hijryah.

1. buatlah 1 buah file dengan notepad atau jenis editor lain yang bisa digunakan untuk mengcoding :) kemudian source code ini bisa kalian coding dan pahami

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script> <!– Embed Script jQuery–>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#ConvertMasehi”).click(function() {
// Event yang akan dijalankan ketika tag dengan id ConvertMasehi di click
var tglMasehi = $(“#tglMasehi”).val(); //Mendapatkan tanggal dari tag ber-id tglMasehi
var blnMasehi = $(“#blnMasehi”).val(); //Mendapatkan bulan dari tag ber-id blnMasehi
var thnMasehi = $(“#thnMasehi”).val(); //Mendapatkan tahun dari tag ber-id thnMasehi

$.ajax({
url: “convert.php”, //url untuk eksekusi
type: “POST”, //method
data: “tglMasehi=”+tglMasehi+”&blnMasehi=”+blnMasehi+”&thnMasehi=”+thnMasehi, //data yang akan dikirim
dataType: “json”, //data type yang diterima JSON
success: function(data) {
$(“#tglHijri”).val(data.tanggal); //Set value untuk tag ber-id tglHijri
$(“#blnHijri”).val(data.bulan); //Set value untuk tag ber-id blnHijri
$(“#thnHijri”).val(data.tahun); //Set value untuk tag ber-id thnHijri
}
});
});
});
</script>
<title>Konversi Masehi ke Hijriah</title>
</head>
<body  style=”background-image:url(a.jpg)”><center>

<h1>Konversi Masehi ke Hijriah</h1>

<table width=”600″ border =”3″  >
<tr>
<td bgcolor=”6699FF”><table width =”600″ border=”0″  >
</td>
</tr><center>
Tanggal

<select id=”tglMasehi” name=”tglMasehi”>
<option value=”1″>01</option>
<option value=”2″>02</option>
<option value=”3″>03</option>
<option value=”4″>04</option>
<option value=”5″>05</option>
<option value=”6″>06</option>
<option value=”7″>07</option>
<option value=”8″>08</option>
<option value=”9″>09</option>
<option value=”10″>10</option>
<option value=”11″>11</option>
<option value=”12″>12</option>
<option value=”13″>13</option>
<option value=”13″>14</option>
<option value=”13″>15</option>
<option value=”13″>16</option>
<option value=”13″>17</option>
<option value=”13″>18</option>
<option value=”13″>19</option>
<option value=”13″>20</option>
<option value=”13″>21</option>
<option value=”13″>22</option>
<option value=”13″>23</option>
<option value=”13″>24</option>
<option value=”13″>25</option>
<option value=”13″>26</option>
<option value=”13″>27</option>
<option value=”13″>28</option>
<option value=”13″>29</option>
<option value=”13″>30</option>
<option value=”13″>31</option>

</select>

Bulan
<select id=”blnMasehi” name=”blnMasehi”>
<option value=”1″>Januari</option>
<option value=”2″>Februari</option>
<option value=”3″>Maret</option>
<option value=”4″>April</option>
<option value=”5″>Mei</option>
<option value=”6″>Juni</option>
<option value=”7″>Juli</option>
<option value=”8″>Agustus</option>
<option value=”9″>September</option>
<option value=”10″>Oktober</option>
<option value=”11″>November</option>
<option value=”12″>Desember</option>
</select>
Tahun <input type=”text” id=”thnMasehi” name=”thnMasehi” size=”5″><br><br>
<input type=”button” value=”Conversi ke Hijriyah” id=”ConvertMasehi”>
<br/><br/>
</center>
<center><b>Hasil Konversi Masehi ke Hijriyah</b> </center>
<center> <input type=”text” id=”tglHijri” value=”” size=”2″ disabled/>
<input type=”text” id=”blnHijri” value=”” size =”9″ disabled/>
<input type=”text” id=”thnHijri” value=”” size=”2″ disabled/><br><br>
<b>CopyRight:Putri_Rahayu 11650101</b>
</center>
</table>
</table>
<center>
</body>
</html>

2. Kemudian buat lagi satu file, dan source codenya seperti di bawah ini

<?php

function GregorianToHijriah($GYear, $GMonth, $GDay) {
$y = $GYear;
$m = $GMonth;
$d = $GDay;
$jd = GregoriantoJD($m, $d, $y);
$l = $jd – 1948440 + 10632;
$n = (int) (( $l – 1 ) / 10631);
$l = $l – 10631 * $n + 354;
$j = ( (int) (( 10985 – $l ) / 5316)) * ( (int) (( 50 * $l) / 17719)) + (
(int) ( $l / 5670 )) * ( (int) (( 43 * $l ) / 15238 ));
$l = $l – ( (int) (( 30 – $j ) / 15 )) * ( (int) (( 17719 * $j ) / 50)) – (
(int) ( $j / 16 )) * ( (int) (( 15238 * $j ) / 43 )) + 29;
$m = (int) (( 24 * $l ) / 709 );
$d = $l – (int) (( 709 * $m ) / 24);
$y = 30 * $n + $j – 30;

$Hijriah[‘year’] = $y;
$Hijriah[‘month’] = $m;
$Hijriah[‘day’] = $d;

return $Hijriah;
}

$GYear = $_POST[‘thnMasehi’];
$GMonth = $_POST[‘blnMasehi’];
$GDay = $_POST[‘tglMasehi’];

$bulanHijriah = array(1 => “Muharram”, “Shofar”, “Robi’ul Awwal”, “Robi’uts Tsani”,
“Jumadil Ula”, “Jumadil Akhiroh”, “Rojab”, “Sya’ban”,
“Romadhon”, “Syawwal”, “Dzulqo’dah”, “Dzulhijjah”);

$Hijriah = GregorianToHijriah($GYear, $GMonth, $GDay);

$hasil = array(“tanggal” => $Hijriah[‘day’],
“bulan” => $bulanHijriah[$Hijriah[‘month’]],
“tahun” => $Hijriah[‘year’]);

echo json_encode($hasil);
?>

3. Nah, dua file yang telah kita buat tadi masukan dalam satu folder, misal folder kalender. dan jangan lupa kalian masukan JQuery di dalam folder tersebut agar program yang kita buat tadi bisa diakses ketika dijalankan.

Adapaun cara memasukkan dan mendowloadnya bisa kalian googling sendiri yaa..

Mungkin cukup sekian postingan saya kali ini, semoga bermanfaat bagi kita semua
loading...

0 komentar:

Post a Comment

Artikel ini belum lengkap tanpa komentar anda!
Silahkan berkomentar yang santun dan cerdas, tidak menghina, tidak memaki dan tidak menyebar kebencian. Terima kasih