Input dan Cari event dengan menggunakan Kalender jQuery
Sebetulnya, tutorial kali ini masih tentang postingan yang sebelumnya. Kalo tutorial yang sebelumnya cuma tes-tes-an kalender doang, sekarang kita akan membuat bagaimana menginput event/kegiatan yang tanggalnya dibantu dengan kalender jQuery.
Sedikit improvisasi dari tutorial yang sebelumnya, Input Kalender dengan jQuery dan koneksi ke Database, yang hanya menginput data yang didapatkan dari kalender jQuery-nya. Tanpa ada operasi lainnya.
Sedangkan pada tutorial kali ini, kita akan mencoba menginput acara (text field) dan tanggalnya (kalender jQuery).
Seperti biasa, buat databasenya dulu dunk 😉
[sql]create database latihan; use latihan;
create table tanggal(
tanggal int(2) not null,
bulan int(2) not null,
tahun int(4) not null,
acara text not null
);
desc tanggal;
+———+——–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+———+——–+——+—–+———+——-+
| tanggal | int(2) | YES | | NULL | |
| bulan | int(2) | YES | | NULL | |
| tahun | int(4) | YES | | NULL | |
| acara | text | NO | | NULL | |
+———+——–+——+—–+———+——-+[/sql]
Kita mulai dari form awalnya. Misalnya kita beri nama index.html.
[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="proses.php">
<table border=0>
<tr>
<td>MASUKKAN TANGGAL </td><td>: <input id="tanggal" name="tanggal" type="text"></td>
</tr>
<tr>
<td>ACARA </td><td>: <input type="text" name="acara" id="acara"> (*</td>
</tr>
<tr>
<td colspan=2 align=center><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
<i>(* Kosongkan field ini untuk hanya mencari event.</i><br>
Isi kedua field untuk menginput event.
</body>
</html>
[/html]
Kemudian proses.php nya seperti ini:
[php]<?
mysql_connect("localhost","root","12345");
mysql_select_db("latihan");
/*
16/08/1989 contoh hasil input
*/
$tgl = $_POST[‘tanggal’];
$acara = $_POST[‘acara’];
/*
Fungsi explode akan memecah string berdasarkan /
Jadi 16/08/1989, akan terbagi menjadi tiga: 16, 08, 1989
*/
$pecah = explode("/",$tgl);
// Apabila field acara dikosongkan
if (empty($acara)) {
$q = mysql_query("select * from tanggal where tanggal=’$pecah[0]’ and bulan=’$pecah[1]’ and tahun=’$pecah[2]’");
echo "Acara untuk $pecah[0]-$pecah[1]-$pecah[2] :<br>";
echo "<ol>";
$ada_apa_enggak = mysql_num_rows($q);
if ($ada_apa_enggak >= 1 ) // kalau ditemukan acara pada tanggal tertentu
{
while($data = mysql_fetch_row($q))
{
echo "<li>".$data[3]."</li>";
}
echo "</ol>";
echo "<a href=’index.html’>Kembali</a>";
}
else
{
echo "Maaf, tidak ada acara di tanggal $pecah[0]-$pecah[1]-$pecah[2]. <a href=’index.html’>Kembali</a>";
}
}
// Apabila field acara diisi, maka langsung terinput
else{
$query = "insert into tanggal values(‘$pecah[0]’,’$pecah[1]’,’$pecah[2]’,’$acara’)";
mysql_query($query);
echo "Acara berhasil diinput. <a href=’index.html’>Kembali</a>";
}
?>[/php]
Ehm, kira-kira begitu deh 🙂
Kalau masih bingung, silahkan tanyakan disini.
Download script lengkapnya di Mediafire.com.
Free Daily Nerd Tutorials 
wah programming pake php nih
dikit-dikit aja brader 😀
ohayo sensei
tool pendukungya ap aj ya
maklum kk masih pemula ni
disitu sudah disertakan file lengkapnya kok 🙂 monggo di download sajo 🙂
Kalo mau pake waktu / jam ngeceknya gmn y ?
Jd ketika mau bikin event pd jam tertentu ternyata sudah lebih dulu ada event, dia tidak bisa masuk…