Membuat Tanggal dengan Datepicker Oleh: Roziqin Widodo Untuk menangani input dan edit penanggalan, biasanya digunakan digunakan komponen combobox, namun saat ini ada cara yang lebih efektif dengan hasil yang lebih cantik, yaitu menggunakan komponen date Picker. Mengapa lebih efektif? Karena kalau pakai ComboBox memerlukan codingphp yang cukup... Untuk menangani input dan edit penanggalan, biasanya digunakan digunakan komponen ComboBox, namun saat ini ada cara yang lebih efektif dengan hasil yang lebih cantik, yaitu menggunakan komponen Date Picker. Mengapa lebih efektif? Karena kalau pakai ComboBox memerlukan codingphp yang cukup panjang, sedangkan pakai Date Picker nyaris tanpa coding php. Disamping itu, saat memilih tanggal pakai ComboBox perlu tiga kali pilih (Tanggal, Bulan, Tahun). Sedangkan pakai date picker cuku satu pilih. Dan asyiknya lagi pemilihan tanggal pakai date picker lebih keren tampilannya. Namun ada sedikit permasalahan dalam penanggalan date picker, untuk susunan penanggalannya menggunakan format indonesia(tanggal/bulan/tahun), sedangkan format tanggal di database MySQL susunannya tahun/bulan/tanggal. buatlah database dengan nama cerdas 1. lalu buat table denga nama buku id_buku int(5) primary key auto_increment not null judul varchar(30) not null penulis varchar(30) not null tgl_terbit date not null Artinya, agar tanggal yang diinputkan melalui date picker bisa masuk ke database MySQL, maka sebelum disimpan ke database, format susunan tanggalannya harus diubah dahulu, misalnya ketika di inputkan tanggalnya 23/12/2015, maka ketika disimpan ke database susunannya harus dibalik
menjadi 2015/12/23. Caranya buatlah sebuah fungsi untuk mengubah susuna format tanggal, misalnya beri namafunction ubahtgl, contohnya sebagai berikut function ubahtgl($tanggal){ $pisah = explode('/'$tanggal); $larik = array($pisah[2],$pisah[1],$pisah[0]); $satukan = implode('-'$larik); return $satukan; Intinya, sebelum data dimasukkan ke dalam database, maka diubah dulu susunan formatnya menjadi tahun/bulan/tanggal Dalam fungsi tersebut, saya menggunakan array untuk memecah (explode ) variable berdasarkan tanda /, menjadi tiga variable yang terpisah, yaitu tanggal($pisah[0]), bulan($pisah[1]), tahun($pisah[2]). Kemudian hasil pecahan variabel tersebut diubah susunannya, semula tanggal/bulan/tahun yang dinyatakan dengan $pisah[0], $pisah[1], $pisah[1] menjadi $pisah[2], $pisah[1], $pisah[0] Setelah susunan format tanggal diubah, satukan lagi ( implode ) dan selingi dengan tanda -. Hasilnya didalan database MySQL akan tersimpan tanggal dengan susunan format tahun-bulan-tanggal Selanjutnya kita buat script untuk menampilkan form tanggal, namun sebelumnya silahkan download dulu JQuery UI DI SINI. Karena didalam JQuery lah terdapat komponen-komponen date picker.oke, kita langsung aja menulis scriptnya. Simpan dengan nama form_buku.php <!DOCTYPE html> <html> <Head> <link href="jquery-ui-1.11.4/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="jquery-ui-1.11.4/external/jquery/jquery.js"></script> <script src="jquery-ui-1.11.4/jquery-ui.js"></script> <script src="jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.theme.css"> <script> $(document).ready(function(){ $("#tanggal").datepicker({ ) ) </script> </head> <body> <form action="aksi_buku.php" method="post"> <table> <td>judul</td><td>:</td> <td><input type="text" name="nama" /></td> <td>penulis</td><td>:</td>
<td><input type="text" name="penulis" /></td> <td>tanggal</td><td>:</td> <td><input type="text" name="tanggal" id="tanggal" /></td> <td colspan="3"><input type="submit" value="submit" name="submit" /></td> </table> </form> </body> </html> Script aksi_buku.php <?php $con = mysqli_connect("localhost","root","","cerdas"); $nama = $_POST['nama']; $penulis = $_POST['penulis']; $tanggal = $_POST['tanggal']; $submit = $_POST['submit']; function ubahtanggal($tanggal){ $pisah = explode('/',$tanggal); $array = array($pisah[2],$pisah[0],$pisah[1]); $satukan = implode('-',$array); return $satukan; $tgl_terbit = ubahtanggal($tanggal); if(isset($submit)){ if(empty($nama) or empty($penulis) or empty($tanggal)){ echo"<script>window.alert('maaf,form tidak boleh kosong...!!!');window.location=('form_buku.php');</script>"; else{ $ins = mysqli_query($con,"insert into buku(judul,penulis,tgl_terbit) values ('$nama','$penulis','$tgl_terbit')"); echo"<script>window.alert('data Berhasil diupload');window.location=('form_buku.php');</script>";?> Oke, sekarang jalankan skrip form_buku.php, lalu coba isikan datanya.contohnya anda bisa lihat pada gambar dibawah ini
Setelah tombol simpan diklik, maka datanya akan tersimpan di dalam database. sekarang kita cek hasil penyimpanannya Itulh cara menginputkan data tanggal dengan cara Datepicker. Untuk tutorial lainnya anda bisa kunjungi alamat website saya SKS12.blogspot.com. disitu banyak tutorial-tutorial yang sangat bermanfaat bagi anda. Tentang Penulis Roziqin Widodo Saat ini saya masih aktif sebagai mahasiswa diperguruan tinggi semarang, aku orangnya humoris, baik hati, dan tidak sombong untuk tutorial lebih lengkap kunjungi blog saya di www.sks122.blogspot.com