Membuat Date Picker di Yii Framework

Membuat Date Picker di Yii Framework

Secara sederhana untuk membuat date picker kita bisa menggunakan script :

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
            'name' => 'datepicker',
            'options' => array('showAnim' => 'slide'),
            'htmlOptions' => array('style' => 'height:20px;')
            )
 );

Langsung saja kita mulai prakteknya Membuat Date Picker di Yii Framework.Jika anda belum pernah membuat databasenya bisa anda lihat Di Sini dan  Jika anda belum menginstal Yii Di localhost anda dapat melihatnya Di Sini.

1. Tabel

Tambahkan satubuah filed dengan nama tanggal_terbit dalam tabel buku sehingga struktur tabel anda menjadi seperti ini :

Name	Type	Size	Extra	Primary
id	INT	100	auto_increment	yes
judul	VARCHAR	255
penulis	VARCHAR	255
tanggal_terbit	DATE
id_kategori	INT	100

2. View

Bukalah kembali script view anda di dalam direktori Protected/view/buku kemudian tambahkan script berikut :

a. Create.php

view plainprint?

1. <div class='row'>  
2.      <?php  
3.           echo $form->labelEx($model, 'Tanggal Terbit : ');  
4.           $this->widget('zii.widgets.jui.CJuiDatePicker', array('attribute' => 'tanggal_terbit',  
5.                'language' => 'en',  
6.                'model' => $model,  
7.                'options' => array(  
8.                     'mode' => 'focus',  
9.                     'dateFormat' => 'd MM, yy',  
10.                     'showAnim' => 'slideDown'),  
11.                'htmlOptions' => array('size' => 30, 'class' => 'date')  
12.                )  
13.             );  
14.             echo $form->error($model, 'tanggal_terbit');  
15.       ?>  
16. </div>  

Maka sekarang script anda selengkapnya adalah :

view plainprint?

1.     <div class='form'>  
2.         <?php $form = $this->beginWidget('CActiveForm',array('id'=>'buku-form','enableClientValidation'=>TRUE));  
3.             echo $form->errorSummary($model);  
4.         ?>  
5.   
6.         <div class='row'>  
7.             <?php  
8.                 echo $form->labelEx($model, 'Judul : ');  
9.                 echo $form->textField($model, 'judul','');  
10.                 echo $form->error($model, 'judul');  
11.             ?>  
12.         </div>  
13. <div class='row'>  
14.             <?php  
15.                 echo $form->labelEx($model, 'Penulis : ');  
16.                 echo $form->textField($model, 'penulis','');  
17.                 echo $form->error($model, 'penulis');  
18.             ?>  
19.         </div>  
20. <div class='row'>  
21.             <?php  
22.                 echo $form->labelEx($model, 'Kategori : ');  
23.                 echo $form->dropDownList($model,'id_kategori',CHtml::listData($k_model->findAll(), 'id_kategori', 'nama_kategori'),array('empty'=>'–-   Pilih Kategori-–'));  
24.                 echo $form->error($model, 'id_kategori');  
25.             ?>  
26.         </div>  
27. <div class='row'>  
28.             <?php  
29.             echo $form->labelEx($model, 'Tanggal Terbit : ');  
30.             $this->widget('zii.widgets.jui.CJuiDatePicker', array('attribute' => 'tanggal_terbit',  
31.                 'language' => 'en',  
32.                 'model' => $model,  
33.                 'options' => array(  
34.                     'mode' => 'focus',  
35.                     'dateFormat' => 'd MM, yy',  
36.                     'showAnim' => 'slideDown'),  
37.                 'htmlOptions' => array('size' => 30, 'class' => 'date')  
38.                     )  
39.             );  
40.             echo $form->error($model, 'tanggal_terbit');  
41.             ?>  
42.         </div>  
43. <div class='buttons'>  
44.             <?php  
45.                 echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Update');  
46.                 $this->endWidget();  
47.             ?>  
48.         </div>  
49. </div>  

Penjelasan :

'attribute' => 'tanggal_terbit',

Menentukan attribut field

'language' => 'en',

Bahasa yg digunakan

'model' => $model,

menetukan tabel / models yang digunakan

'dateFormat' => 'd MM, yy',

menentukan format tanggal yang digunakan

'showAnim' => 'slideDown'),

Menentukan jenis animasi

'htmlOptions' => array('size' => 30, 'class' => 'date')

Menentukan lebar field dengan class DATE

Untuk melihat hasilnya, ketikan di url browser :

http://localhost/Belajar_Yii/website/index.php?r=buku/create

*notes kode yang berwarna merah adalah direktori folder Yii Framework anda di localhost.

b. index.php
Ubah juga script Index.php anda menjadi seperti ini

view plainprint?

1. <?php  
2.     foreach (Yii::app()->user->getFlashes() as $key=>$message){  
3. ?>  
4.     <div class="flash-<?php echo $key; ?>  
5. "><?php echo $message; ?></div>  
6. <?php          
7. }  
8. ?>  
9. <?php  
10.     echo CHtml::link('Tambah Buku', array('create'));  
11.     echo " | ";  
12.     echo CHtml::link('Tambah Kategori', array('kategori/create'));  
13. ?>  
14.     <div style="float:right;">  
15.         <?php $this->widget('CLinkPager', Array('pages'=>$pages)); ?>  
16.     </div>  
17.   
18.   
19.   
20. <table style="border-collapse: collapse; border: solid 1px #000; " border="1">  
21. <tr sytle="border:1px solid">  
22.         <th><?php echo $sort->link('id'); ?></th>  
23.         <th><?php echo $sort->link('judul'); ?></th>  
24.         <th><?php echo $sort->link('penulis'); ?></th>  
25.         <th><?php echo $sort->link('id_kategori'); ?></th>  
26.         <th><?php echo $sort->link('tanggal_terbit'); ?></th>  
27.         <th>Aksi</th>  
28.     </tr>  
29. <?php foreach ($data as $model): ?>  
30. <tr>  
31.         <td><?php echo $model->id; ?></td>  
32.         <td><?php echo $model->judul; ?></td>  
33.         <td><?php echo $model->penulis; ?></td>  
34.         <td><?php echo $model->kategori->nama_kategori; ?></td>  
35.         <td><?php echo $model->tanggal_terbit; ?></td>  
36.         <td><?php echo CHtml::link(CHtml::encode('Update'), array('update', 'id'=>$model->id)); ?> |   
37.             <?php echo CHtml::link(CHtml::encode('Delete'), array('delete', 'id'=>$model->id));?>  
38.         </td>  
39.     </tr>  
40. <?php endforeach; ?>  
41. </table>  

3. Models

Sekarang untuk menyimpannya dalam database kita harus merubah models buku.php kita di dalam direktori Protected/models dengan menambahkan script berikut :

view plainprint?

1. protected function afterFind() {  
2.         parent::afterFind();  
3.           
4.    $this->tanggal_terbit=date('d F, Y',  strtotime(str_replace("-", "", $this->tanggal_terbit)));  
5. }  
6.       
7. protected function beforeSave() {  
8.    if(parent::beforeSave()){  
9.    $this->tanggal_terbit=date('Y-m-d',  strtotime(str_replace(",", "", $this->tanggal_terbit)));  
10.             return true;  
11.         }else{  
12.             return false;  
13.         }  
14. }  
15.   
16. public function rules() {  
17.      return array(array('judul, penulis , id_kategori , tanggal_terbit' ,'required'),   
18. array('id_kategori', 'numerical', 'integerOnly'=>true));  
19. }  

Sehingga script anda selengkapnya sekarang :

view plainprint?

1. <?php  
2.   
3. /* 
4.  * To change this template, choose Tools | Templates 
5.  * and open the template in the editor. 
6.  */  
7.   
8. /** 
9.  * Description of buku 
10.  * 
11.  * @author Jin Toples 
12.  */  
13. class buku extends CActiveRecord{  
14.     //put your code here  
15.       
16.     public static function model($className = __CLASS__) {  
17.         parent::model($className);  
18.     }  
19.       
20.     public function tablename(){  
21.         return 'buku';  
22.     }  
23.       
24.     public function rules() {  
25.         return array(array('judul, penulis, id_kategori, tanggal_terbit','required'),  
26.  array('id_kategori','numerical','integerOnly'=>true));  
27.     }  
28.   
29.   
30.     public function attributeLabels() {  
31.         return array('id'=>'id','judul'=>'judul buku','penulis'=>'penulis buku');  
32.     }  
33.       
34.     public function relations(){  
35.         return array('kategori'=>array(self::BELONGS_TO, 'kategori','id_kategori'));  
36.     }  
37.       
38.     protected function afterFind() {  
39.         parent::afterFind();  
40.           
41.         $this->tanggal_terbit=date('d F, Y',  strtotime(str_replace("-", "", $this->tanggal_terbit)));  
42.     }  
43.       
44.     protected function beforeSave() {  
45.         if(parent::beforeSave()){  
46.             $this->tanggal_terbit=date('Y-m-d',  strtotime(str_replace(",", "", $this->tanggal_terbit)));  
47.             return true;  
48.         }else{  
49.             return false;  
50.         }  
51.     }  
52. }  
53.   
54. ?>  

Penjelasan :

$this->tanggal_terbit=date('d F, Y',  strtotime(str_replace("-", "", $this->tanggal_terbit)));

Merubah format tanggal dari 2013 - 08 - 04 menjadi 04 Agustus, 2013

$this->tanggal_terbit=date('Y-m-d',  strtotime(str_replace(",", "", $this->tanggal_terbit)));

Kebalikan dari yang di atas.

4. Controller

Ubah juga script controller BukuController.php dalam direktori Protected/controller anda menjadi seperti ini :

view plainprint?

1. <?php  
2.   
3. /* 
4.  * To change this template, choose Tools | Templates 
5.  * and open the template in the editor. 
6.  */  
7.   
8. /** 
9.  * Description of BukuController 
10.  * 
11.  * @author Jin Toples 
12.  */  
13. class BukuController extends Controller {  
14.     //put your code here  
15.     public $layout='column1';  
16.     const INDEX = 'index';  
17.       
18.     //function create  
19.     public function actionCreate(){  
20.         $model=new buku;  
21.         $k_model = new kategori;  
22.           
23.         if(isset($_POST['buku'])){  
24.             $model->judul = $_POST['buku']['judul'];  
25.             $model->penulis = $_POST['buku']['penulis'];  
26.             $model->id_kategori= $_POST['buku']['id_kategori'];  
27.             $model->tanggal_terbit= $_POST['buku']['tanggal_terbit'];  
28.               
29.             if($model->save()){  
30.                 Yii::app()->user->setFlash('success', 'Data berhasil di simpan');  
31.                 $this->redirect(array('index'));  
32.             }  
33.         }  
34.           
35.         $this->render('create',array('model'=>$model,'k_model'=>$k_model));  
36.     }  
37.       
38.     //function index ( read )  
39.     public function actionIndex(){  
40.         $criteria= new CDbCriteria();  
41.           
42.         $model = new buku();  
43.         $count = $model->count($criteria);  
44.           
45.         $pages=new CPagination($count);  
46.         $pages->pageSize=5;  
47.         $pages->applyLimit($criteria);  
48.           
49.         $sort=new CSort('buku');  
50.           
51.         $sort->attributes=array('id','judul','penulis','id_kategori','tanggal_terbit');  
52.         $sort->applyOrder($criteria);  
53.           
54.         $data=$model->findAll($criteria);  
55.           
56.         $this->render('index',array('data'=>$data,'pages'=>$pages,'sort'=>$sort));  
57.     }  
58.       
59.     //function update  
60.     public function actionUpdate($id){  
61.         $data=new buku;  
62.         $k_model = new kategori;  
63.         $model=$data->findByPk($id);  
64.           
65.         if(isset($_POST['buku'])){  
66.             $model->judul=$_POST['buku']['judul'];  
67.             $model->penulis=$_POST['buku']['penulis'];  
68.             $model->id_kategori= $_POST['buku']['id_kategori'];  
69.             $model->tanggal_terbit= $_POST['buku']['tanggal_terbit'];  
70.               
71.             if($model->save()){  
72.                 $this->redirect(array('index'));  
73.             }  
74.         }  
75.           
76.         $this->render('update',array('model'=>$model,'k_model'=>$k_model));  
77.     }  
78.       
79.     //function delete  
80.     public function actionDelete($id){  
81.         $model = new buku;  
82.         if($model->deleteByPk($id)){  
83.             $this->redirect(array(self::INDEX));  
84.         }else{  
85.             throw new CHttpException(404,'Data yang di minta tidak tersedia');  
86.         }  
87.     }     
88.       
89.     function actionKriteria(){  
90.         $criteria = new CDbCriteria(array('select'=>'*','condition'=>'id="2"'));  
91.         $data = new buku;  
92.         $model = $data->findAll($criteria);  
93.           
94.         $this->render('kriteria',array('data'=>$model));  
95.                   
96.     }  
97. }  
98.   
99. ?>  

view plainprint?

1.   

Sekarng coba anda masukan buku baru kemudian lihat apakah tanggalnya berhasil muncul :

Sumber : http://jintoples.blogspot.com/2013/12/membuat-date-picker-di-yii-framework.html#ixzz3OyQdglzr