stmik himsya: January 2015

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 plain print ?

<div class='row'>
<?php
echo $form->labelEx($model, 'Tanggal Terbit : ');
$this->widget('zii.widgets.jui.CJuiDatePicker', array('attribute' => 'tanggal_terbit',
'language' => 'en',
'model' => $model,
'options' => array(
'mode' => 'focus',
'dateFormat' => 'd MM, yy',
'showAnim' => 'slideDown'),
'htmlOptions' => array('size' => 30, 'class' => 'date')
)
);
echo $form->error($model, 'tanggal_terbit');
?>
</div>

Maka sekarang script anda selengkapnya adalah :

view plain print ?

<div class='form'>
<?php $form = $this->beginWidget('CActiveForm',array('id'=>'buku-form','enableClientValidation'=>TRUE));
echo $form->errorSummary($model);
?>
<div class='row'>
<?php
echo $form->labelEx($model, 'Judul : ');
echo $form->textField($model, 'judul','');
echo $form->error($model, 'judul');
?>
</div>
<div class='row'>
<?php
echo $form->labelEx($model, 'Penulis : ');
echo $form->textField($model, 'penulis','');
echo $form->error($model, 'penulis');
?>
</div>
<div class='row'>
<?php
echo $form->labelEx($model, 'Kategori : ');
echo $form->dropDownList($model,'id_kategori',CHtml::listData($k_model->findAll(), 'id_kategori', 'nama_kategori'),array('empty'=>'–- Pilih Kategori-–'));
echo $form->error($model, 'id_kategori');
?>
</div>
<div class='row'>
<?php
echo $form->labelEx($model, 'Tanggal Terbit : ');
$this->widget('zii.widgets.jui.CJuiDatePicker', array('attribute' => 'tanggal_terbit',
'language' => 'en',
'model' => $model,
'options' => array(
'mode' => 'focus',
'dateFormat' => 'd MM, yy',
'showAnim' => 'slideDown'),
'htmlOptions' => array('size' => 30, 'class' => 'date')
)
);
echo $form->error($model, 'tanggal_terbit');
?>
</div>
<div class='buttons'>
<?php
echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Update');
$this->endWidget();
?>
</div>
</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 plain print ?

<?php
foreach (Yii::app()->user->getFlashes() as $key=>$message){
?>
<div class="flash-<?php echo $key; ?>
"><?php echo $message; ?></div>
<?php
}
?>
<?php
echo CHtml::link('Tambah Buku', array('create'));
echo " | ";
echo CHtml::link('Tambah Kategori', array('kategori/create'));
?>
<div style="float:right;">
<?php $this->widget('CLinkPager', Array('pages'=>$pages)); ?>
</div>
<table style="border-collapse: collapse; border: solid 1px #000; " border="1">
<tr sytle="border:1px solid">
<th><?php echo $sort->link('id'); ?></th>
<th><?php echo $sort->link('judul'); ?></th>
<th><?php echo $sort->link('penulis'); ?></th>
<th><?php echo $sort->link('id_kategori'); ?></th>
<th><?php echo $sort->link('tanggal_terbit'); ?></th>
<th>Aksi</th>
</tr>
<?php foreach ($data as $model): ?>
<tr>
<td><?php echo $model->id; ?></td>
<td><?php echo $model->judul; ?></td>
<td><?php echo $model->penulis; ?></td>
<td><?php echo $model->kategori->nama_kategori; ?></td>
<td><?php echo $model->tanggal_terbit; ?></td>
<td><?php echo CHtml::link(CHtml::encode('Update'), array('update', 'id'=>$model->id)); ?> |
<?php echo CHtml::link(CHtml::encode('Delete'), array('delete', 'id'=>$model->id));?>
</td>
</tr>
<?php endforeach; ?>
</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 plain print ?

protected function afterFind() {
parent::afterFind();
$this->tanggal_terbit=date('d F, Y', strtotime(str_replace("-", "", $this->tanggal_terbit)));
}
protected function beforeSave() {
if(parent::beforeSave()){
$this->tanggal_terbit=date('Y-m-d', strtotime(str_replace(",", "", $this->tanggal_terbit)));
return true;
}else{
return false;
}
}
public function rules() {
return array(array('judul, penulis , id_kategori , tanggal_terbit' ,'required'),
array('id_kategori', 'numerical', 'integerOnly'=>true));
}

Sehingga script anda selengkapnya sekarang :

view plain print ?

<?php
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
/**
* Description of buku
*
* @author Jin Toples
*/
class buku extends CActiveRecord{
//put your code here
public static function model($className = __CLASS__) {
parent::model($className);
}
public function tablename(){
return 'buku';
}
public function rules() {
return array(array('judul, penulis, id_kategori, tanggal_terbit','required'),
array('id_kategori','numerical','integerOnly'=>true));
}
public function attributeLabels() {
return array('id'=>'id','judul'=>'judul buku','penulis'=>'penulis buku');
}
public function relations(){
return array('kategori'=>array(self::BELONGS_TO, 'kategori','id_kategori'));
}
protected function afterFind() {
parent::afterFind();
$this->tanggal_terbit=date('d F, Y', strtotime(str_replace("-", "", $this->tanggal_terbit)));
}
protected function beforeSave() {
if(parent::beforeSave()){
$this->tanggal_terbit=date('Y-m-d', strtotime(str_replace(",", "", $this->tanggal_terbit)));
return true;
}else{
return false;
}
}
}
?>

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.