Home > Uncategorized > Input Kalender dengan jQuery dan koneksi ke Database

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
formtanggal
Nah, untuk lebih jauhnya, silahkan baca tutorial yang selanjutnya: Input dan Cari event dengan menggunakan Kalender jQuery

Categories: Uncategorized
  1. 27 April 2011 at 23:10

    klo ada yang kurang lengkap, dateng aja ke CK Net 😀

  2. Mouky
    28 April 2011 at 13:38

    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 😀

    • 28 April 2011 at 18:19

      neh lagi diurus 😀

  3. Mouky
    28 April 2011 at 21:56

    ok makasih aak.. 😀

  4. Elis ajjah
    25 December 2013 at 05:51

    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,,

  1. 30 April 2011 at 08:52

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: