Siapa yang tidak kenal dengan Datepicker? Siapa pula yang tidak kenal dengan Codeigniter? Pada kesempatan kali ini saya ingin mencoba mengupdate blog ini dengan tutorial Menggunakan Datepicker di Codigniter. Atau bisa juga kita sebut dengan istilah “mengintegrasikan” datepicker dengan Codeigniter.
Sebelum ke tutorialnya, saya mau menjelaskan dulu, kenapa harus memakai Datepicker? Kan bisa input manual sendiri tanggal tahun dan juga bulannya? Sebenernya jawabannya simple aja. Yaitu untuk memudahkan validasi data yang kita input agar berformat sesuai dengan data yang kita inginkan. Dalam hal ini data yang kita inginkan adalah berformat tanggal. Jadi daripada kita buat fungsi sendiri, lebih mudah kita untuk menggunakan Datepicker. Benar atau benar? Hehe.
Langsung saja yuk kita ke tutorialnya.
1. pertama-tama siapkan dahulu bahannya yaitu datepicker. Adapun datepicker dapat di download dihttp://jqueryui.com/download
2. Setelah di download, jangan lupa di extract, dan hasil extractnya jangan lupa di rename yah jadi “jqueryui” saja. setelah itu silahkan di move/copy ke folder codeigniter anda. Setelah itu langsung lanjut ke tahap codingnya:
3. Kita buat file baru untuk controller, kita kasih nama filenya “datepicker.php” adapaun codingannya adalah sebagai berikut:
1 2 3 4 5 6 7 8 9 10 | <?phpif ( ! defined('BASEPATH')) exit('No direct script access allowed'); // supaya file tidak bisa diakses secara langsungclass Datepicker extends CI_Controller{function __construct(){ parent::__construct(); }function index(){$this->load->view('datepicker'); // Meload view dengan nama file datepicker.php}} |
Jangan lupa untuk menyimpannya di folder application/controllers
Setelah membuat Controllernya kita buat dulu file viewnya. Kita kasih nama “datepicker.php” dan taruh file tersebut di folder application/views. Script viewnya adalah sebagai berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html><head><title>Datepicker by tukangbolos.com</title><link rel="stylesheet" href="<?php echo base_url();?>jqueryui/development-bundle/themes/base/jquery.ui.all.css"><script src="<?php echo base_url();?>jqueryui/development-bundle/jquery-1.6.2.js"></script><script src="<?php echo base_url();?>jqueryui/development-bundle/ui/jquery.ui.core.js"></script><script src="<?php echo base_url();?>jqueryui/development-bundle/ui/jquery.ui.widget.js"></script><script src="<?php echo base_url();?>jqueryui/development-bundle/ui/jquery.ui.datepicker.js"></script><link rel="stylesheet" href="<?php echo base_url();?>jqueryui/development-bundle/demos/demos.css"><script> $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, // menampilkan dropdown untuk ganti bulan changeYear: true // menampilkan dropdown untuk ganti Tahun }); }); </script></head><body><p>Date : <input type="text" name="datepicker" id="datepicker"></p></body></html> |
Nah, mudahkan? Intinya kita hanya meload file jQuery dan css yang dibutuhkan saja. Oh ya pastikan sebelum melakukan tutorial ini anda sudah meng-config URL codeigniter anda. Jangan lupa pula untuk meng-autoload helper “URL” yah, hehe.
Jika mau melihat demonya silahkan bisa langsung kesini: http://jqueryui.com/demos/datepicker/
Mungkin pada tutorial berikutnya kita akan coba membahas bagaimana cara untuk mengganti format tanggalnya, lalu mengutak-ngatik theme, dan lain sebagainya.
Jika terdapat error atau script yang tidak jalan, silahkan berikan komentar disini. Jujur saja saya sendiri belum mencoba script diatas, script diatas hanya editan dari salah satu project saya. Hehe.
sumber : tukangbolos.com
0 comment:
Posting Komentar