Input Kalender dengan jQuery dan koneksi ke Database
Pada tutorial kali ini, kita akan membahas bagaimana memunculkan kalender yang beranimasi, tentunya disini dibantu dengan jQuery. Setelah itu, hasil dari kalender itu bisa kita input ke dalam database.
Pertama-tama kita harus buat sebuah tabel baru (untuk pembelajaran). Misalnya begini:
mysql> create table tanggal(
-> tgl varchar(10) not null,
-> tanggal varchar(2) not null,
-> bulan varchar(2) not null,
-> tahun varchar(4) not null
-> );
Query OK, 0 rows affected (0.22 sec)
mysql> desc tabel;
ERROR 1146 (42S02): Table 'hapus.tabel' doesn't exist
mysql> desc tanggal;
+---------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| tgl | varchar(10) | NO | | NULL | |
| tanggal | varchar(2) | NO | | NULL | |
| bulan | varchar(2) | NO | | NULL | |
| tahun | varchar(4) | NO | | NULL | |
+---------+-------------+------+-----+---------+-------+
4 rows in set (0.03 sec)
Okeh selanjutnya kita buat halaman untuk menampilkan kalendernya.
Adapun kodenya sebagai berikut:
[html]<html>
<head>
<link type="text/css" href="development-bundle/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script>
<script type="text/javascript" src="development-bundle/ui/i18n/ui.datepicker-id.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tanggal").datepicker({
changeMonth : true,
changeYear : true
});
});
</script>
</head>
<body style="font-size:65%;">
<form id="form1" name="form1" method="post" action="hasil.php">
MASUKKAN TANGGAL: <input id="tanggal" name="tanggal" type="text"> <input type="submit" name="button" id="button" value="Submit" />
</form>
</body>
</html>
[/html]
Kemudian, tertulis disana pada action form menuju ke hasil.php.
Dan berikut isi dari file hasil.php-nya
[php]<?
mysql_connect("localhost","root","12345");
mysql_select_db("hapus");
$tgl = $_POST[‘tanggal’];
/* 16/08/1989 contoh hasil input */
echo $tgl;
echo "<br>";
echo substr($tgl,0,2);
echo "<br>";
echo substr($tgl,3,2);
echo "<br>";
echo substr($tgl,6,4);
echo "<br>";
$tanggal = substr($tgl,0,2);
$bulan = substr($tgl,3,2);
$tahun = substr($tgl,6,4);
$query = "insert into tanggal values(‘$tgl’,’$tanggal’,’$bulan’,’$tahun’)";
mysql_query($query);
?>[/php]
Okeh, kita akan jelaskan tentang substr() nya saja yah. Karena untuk yang lainnya, sepertinya sudah standar sekali 😀
Formatnya seh begini
[php]substr(string, start, length);[/php]
jadi disana kan hasilnya “16/08/1989”
lalu start dari 0, kemudian panjangnya 2 karakter.
Jadi dari 16/08/1989, hasilnya ada 16. Begitu 😀
Neh isi dari tabelnya 🙂
mysql> select * from tanggal; +------------+---------+-------+-------+ | tgl | tanggal | bulan | tahun | +------------+---------+-------+-------+ | 16/08/2011 | 16 | 08 | 2011 | | 18/08/1994 | 18 | 08 | 1994 | | 01/01/2001 | 01 | 01 | 2001 | +------------+---------+-------+-------+ 3 rows in set (0.06 sec)
Hasilnya
Nah, untuk lebih jauhnya, silahkan baca tutorial yang selanjutnya: Input dan Cari event dengan menggunakan Kalender jQuery
Free Daily Nerd Tutorials 
klo ada yang kurang lengkap, dateng aja ke CK Net 😀
aak,,klo kita klik 1gl² tertentu,,misalnya tgl 2 atau 7 dan yg lain2.. itu tuh kluar informasi kegiatan nya gk??
gmn cara ngeluarin nya aak??
mohon bantuannya aak….
terima kasih dari group sanom 😀
neh lagi diurus 😀
ok makasih aak.. 😀
Aq mau tanya nih, aq tuh gk tau tanggal/bulan aq lahir, tpi kata mama qu aq lahir tanggal 17 buluan safar thn1994, tolong cari’in dong bulan/tanggal yng bulan januari pebruari,,