Tuesday, March 29, 2011

Demo Tutorial Contoh Script Menghitung Selisih Tanggal Menggunakan PHP, Javascript, dan MySQL

Diposkan oleh di Label: , , , ,

Menghitung Selisih Hari Antar Tanggal

Demo Tutorial Contoh Script Menghitung Selisih Tanggal Menggunakan PHP, Javascript, dan MySQLTutorial kali ini untuk menjawab pertanyaan dari deo yaitu bagaimana jika dari kalender (pada tutorial Javascript Calendar Date Picker / Javascript Calendar Popup / Kalender Javascript) tanggal yang dipilih dapat disimpan di suatu variabel dan digunakan untuk menghitung selisih dari tanggal yang telah dipilih tersebut.

Untuk menghitung selisih hari antar tanggal yang telah dipilih tersebut saya menggunakan salah satu fungsi tanggal/waktu pada mysql yaitu
DATEDIFF(expr1,expr2)

Dalam tutorial ini masih menggunakan kalender pada tutorial sebelumnya hanya saja pada halaman index.php ada perubahan seperti di bawah ini.
<?php
$date0=$_GET['date0'];
$date1=$_GET['date1'];
$hasil=$_GET['hasil'];
?>
<html>
<head>
<title>Menghitung selisih hari dari tanggal tertentu @ catment.blogspot.com</title>
</head>
<body>
<center>
<form method="post" action="hasil.php">
<h1>Menghitung selisih hari dari tanggal tertentu</h1>
Tanggal awal - Tanggal akhir = ??
<hr />
<input type="text" name="date0" id="pick_date[0]" value="<?php echo"$date0"; ?>" readonly="readonly" onClick="pick('pick_date[0]');" />
-
<input type="text" name="date1" id="pick_date[1]" value="<?php echo"$date1"; ?>" readonly="readonly" onClick="pick('pick_date[1]');" />
= <?php echo"$hasil"; ?>
<br />
<input type="submit" value="Hitung!!" />
</form>
</center>
<script type="text/javascript" language="javascript">
<!--
function pick(tgt)
{
window.open("kalender_pick.php?rand="+Math.random()+"&tgt="+tgt,"Kalender","width=500,height=400,alwaysRaised=yes,scrollbars=yes,directories=no,location=no,menubar=no,toolbar=no")
}
//-->
</script>
</body>
</html>

Dan menggunakan file kalender_pick.php yang sama seperti tutorial sebelumnya.
<html>
<head>
<meta name="description" content="javascript calendar date picker / javascript calendar popup / kalender javascript" />
<meta name="keyword" content="javascript calendar date picker,script calendar javascript,javascript,calendar,script,kalender" />
<script language="javascript" type="text/javascript">
/*blocker*/
if(window.opener==null)
{
window.location="index.php";
}
/*--------*/
</script>
<title>Script Javascript Kalender / Pick Date Calendar</title>
</head>
<body>
<center>
<h1>Script Javascript Kalender / Pick Date Calendar</h1>
<div id="kalender"></div>
</center>
<script type="text/javascript" language="javascript">
<!--
var array_day=["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
var array_month=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
var date;
var year;
var month;
var day;
var go_year;
var go_month;
var fulldate;
var isi;
var now_date=new Date();
var now_day=now_date.getDate();
var now_month=now_date.getMonth();
var now_year=now_date.getYear();
var url=document.location.href;
var tgt=url.lastIndexOf("tgt=");
tgt=url.slice(tgt+4);
tgt=window.opener.document.getElementById(tgt);
now();
/*now*/
function now()
{
date=new Date();
calendar(date);
}
/*--------*/
/*newdate*/
function newdate()
{
go_month=document.getElementById("sel_month");
date=new Date(go_year,go_month.value);
return calendar(date);
}
/*--------*/
/*calendar*/
function calendar(date)
{
year=date.getFullYear();
month=date.getMonth();
day=date.getDate();
isi="<form>";
isi+="<table align='center' border=1 cellpadding=3 cellspacing=0>";
/**baris 1 (menu2 perintah)**/
isi+="<tr>";
isi+="<td colspan='7' align='center'>";
/*today button*/
isi+="<input type='button' name='today' value='Today' onClick='now();' /> ";
/*--------*/
/*select month*/
date.setDate(1);
isi+="<select name='sel_month' id='sel_month'>";
for(i=0;i<10;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\"0"+i+"\" "+selected+">"+array_month[i]+"</option>";
}
for(i=10;i<12;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\""+i+"\" "+selected+">"+array_month[i]+"</option>";
}
isi+="</select> ";
/*--------*/
/*decrease tahun*/
go_year=year;
isi+="<input type='button' name='year_down' value='<' onClick=\"go_year=document.getElementById('sel_year').value-1; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*output tahun*/
if(go_year==year)
{go_year=year;}
else{go_year=go_year;}
isi+="<input type='text' name='sel_year' id='sel_year' value='"+go_year+"' size='3' disabled='disabled' /> ";
/*--------*/
/*increase tahun*/
isi+="<input type='button' name='year_up' value='>' onClick=\"go_year=document.getElementById('sel_year').value-1+2; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*go button*/
isi+="<input type='button' name='go' id='go' value='Go' onClick=\"newdate();\" />";
/*--------*/
isi+="</td>";
isi+="</tr>";
/**--------**/
/*baris 2 (bulan, tahun)*/
isi+="<tr>";
isi+="<td colspan=7 align='center'><b>"+ array_month[month]+", "+year+"</b></td>";
isi+="</tr>";
/*--------*/
/*baris 3 (header hari)*/
isi+="<tr bgcolor='#00CCFF'>";
for(i=0;i<7;i++)
{
isi+="<td align='center'>"+array_day[i]+"</td>";
}
isi+="</tr>";
/*--------*/
/**baris kalender**/
/*cell tanpa tanggal bagian atas*/
if(date.getDay()!=0)
{
isi+="<tr>";
for(i=0;i<date.getDay();i++)
{
isi+="<td>&nbsp;</td>";
}
}
/*--------*/
/*cell yang ada tanggalnya*/
while(date.getMonth()==month)
{
fulldate=year+"-"+(month+1);
if(date.getDay==0)
{
isi+="<tr>";
}
/*hari ini*/
if(date.getDate()==now_day && date.getMonth()==now_month && date.getYear()==now_year)
{
isi+="<td align='center' bgcolor='#00FF00'><b><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></b></td>";
}
/*--------*/
/**hari lain**/
else
{
/*minggu+sabtu*/
if(date.getDay()==0 || date.getDay()==6)
{var bgcolor="bgcolor='#FEC281'";}
/*--------*/
/*hari biasa*/
else{bgcolor="";}
/*--------*/
isi+="<td align='center' "+bgcolor+"><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></td>";
}
/**--------**/
if(date.getDay()==6)
{
isi+="</tr>";
}
date.setDate(date.getDate()+1);
}
/*--------*/
/*cell tanpa tanggal bagian bawah*/
for(i=date.getDay();i<=6;i++)
{
isi+="<td>&nbsp;</td>";
}
/*--------*/
isi+="</table>";
isi+="</form>";
/**--------**/
document.getElementById("kalender").innerHTML=isi;
}
/*--------*/
//-->
</script>
</body>
</html>

Dan yang terakhir adalah file yang digunakan untuk menghitung selisih hari antar tanggal yaitu hasil.php

<?php
$date0=$_POST['date0'];
$date1=$_POST['date1'];

/*konfigurasi koneksi database*/
$hostname_conn="localhost";
$username_conn="root";
$password_conn="";
mysql_connect($hostname_conn,$username_conn,$password_conn) or die ("Maaf sedang ada gangguan dengan database kami.");
/*--------*/

/*selisih tanggal*/
$command="SELECT DATEDIFF('$date0','$date1')";
$select=mysql_query($command);
$row=mysql_fetch_array($select);
/*--------*/

header("Location: index.php?date0=$date0&date1=$date1&hasil=$row[0]");
exit();
?>


Selesai!!
Pada intinya untuk menghitung selisih hari antar tanggal menggunakan fungsi mysql diperlukan script untuk mengkoneksikan ke database, selanjutnya gunakan fungsi

DATEDIFF(expr1,expr2)

expr1 merupakan tanggal pertama (format yyyy-mm-dd) yang dikurangkan dan expr2 adalah tanggal kedua yang mengurangkan.
Untuk melihat demo silahkan buka http://catment.co.cc/demo/kalender_v2/. Untuk mendownload silahkan buka http://catment.co.cc/download/kalender_v2.zip

Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com
YM:
tawank_x
bobybibbob

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)