<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> </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> </td>";
}
/*--------*/
isi+="</table>";
isi+="</form>";
/**--------**/
document.getElementById("kalender").innerHTML=isi;
}
/*--------*/
//-->
</script>
</body>
</html>
menampilkan data dari database mysql dengan script PHP
dalam contoh kasus kali ini menyimpan data buku ke dalam database dan menampikannya ke dalam halaman web,.
langka pertama buat databasenya terlebih dahulu
langkah berikutnya buat halaman index.php dan di dalamnya ada form inputan
selanjutnya membuat konfigurasi/koneksi ke mysql, dan berinama file dengan config.php
<?php
//tentukan host, bila anda menggunakan local biasanya localhost
$hostname_conn="localhost";
//username, bila anda menggunakan local biasanya root
$username_conn="root";
//password MySQL
$password_conn="";
//nama database
$db_conn="db_buku";
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total". mysql_error());
mysql_select_db ($db_conn);
?>
berikutnya membuat script php untuk menyimpan data ke dalam database, simpan file dengan nama simpan.php
selanjutnya buat script PHP dan simpan file dengan nama view.php
terakhir buat file script php dan simpan dengan nama full_view.php
Ajax suggest,.Ajax dapat di gunakan untuk membangun aplikasi yang unteraktif. Contoh penerapanya berupa suggestion (Ajax suggestion).
pada pembahasan kali ini saya tidak menggunakan database, hanya array pada script PHP saja. bila anda ingin mengkoneksikan ke database, tinggal modif saja,.
dalam membuat Ajax suggest kali ini terdapat 3 file: Satu halaman HTML sederhana (untuk form), satu file Javasript, dan PHP (untuk Array).
lansung saja ke pokok permasalahan (Ajax suggest).
buat halaman HTML sederhana dan beri nama index.php
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name: <input type="text" onKeyUp="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
script di atas adalah script HTML sederhana dengan inputan text. dan sebuah event onKeyUp, event onKeyUp akan bekerja saat ada masukan di masukan text,.
selanjutnya buat halaman Javascriptnya. dan simpan dengan nama clienthit.js
var xmlhttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
pada script javascript di atas adalah tempat fungsi javasript showHint yang di deklarasikan onKeyUp yang ada di halaman index.html, dan halaman ini juga yang menyimpan Ajax enginnya,.
script javascript diatas juga yang menjembatani antara index.html dan gethint.php, pada saat ada masukan di form maka akan merequest ke gethint.php dan hasil atau responya akan di kirim kembali ke index.html.
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Bagus";
$a[]="Catment";
$a[]="ctr";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gugus";
$a[]="Heni";
$a[]="Ine";
$a[]="Johan";
$a[]="Karina";
$a[]="Linda";
$a[]="Nina";
$a[]="Prety";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sulis";
$a[]="Toni";
$a[]="Unni";
$a[]="Violet";
$a[]="Lisa";
$a[]="Emma";
$a[]="Ellen";
$a[]="Winda";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
pada script php di atas adalah nama-nama yang di cari, dan bila nama yang di cari tidak ada maka akan muncul no suggestion,.
note: bila anda ingin membuat web yang interaktif Ajax adalah pilihan yang tepat, tapi selain itu Ajax juga mempunyai kelemahan. karena ajax berbasis javascript apabila di browser javascript tidak di aktifkan/disable maka ajax tidak bekerja,.
