Bagi yang sering menggunakan CGridView tentunya sudah sering melihat bahwa di dalam CGridView, terdapat sebuah jenis kolom yang menampilkan tiga tombol yang berfungsi untuk melihat, mengubah dan menghapus. Kolom ini gampang ditampilkan, karena kita hanya cukup menambah CButtonColumn seperti di bawah ini:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    ...
    'columns'=>array(
        ....
        array(
            'class'=>'CButtonColumn',
        ),
    ),
)); ?>

Tetapi tentunya dalam proses pengembangan Web, belum tentu kita hanya memerlukan ketiga tombol itu saja. Contohnya saja di dalam tabel user, kita mungkin saja membutuhkan tombol untuk ganti password, atau tombol untuk enable/disable user, atau tombol untuk me-reset data user.

Untuk tutorial kali ini kita akan menambah tombol ganti password pada tabel user. Ketika tombol itu diklik maka akan dibawa ke halaman ganti password.

Langkah 1

Pastikan sudah terdapat CGridView model User. Apabila belum silahkan dibuat atau di-generate dengan Gii terlebih dahulu.

Langkah 2

Upload-lah sebuah icon ke folder webroot. Penulis meng-upload ke webroot/images/icons. Supaya tampilannya rapi, upload-lah icon yang berukuran 16 x 16 pixel.

Langkah 3

Buka halaman CGridView model User. Untuk penulis, file tersebut terletak di webroot/protected/views/user/admin.php.

Langkah 4

Koding CGridView saat ini kurang lebih akan terlihat seperti ini:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'user-grid',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(
    ...
        array(
            'class'=>'CButtonColumn',
        ),
    ),
)); ?>

Kita tambah koding di bagian CButtonColumn menjadi begini:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'user-grid',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(
        ...
        array(
            'class'=>'CButtonColumn',
            'buttons'=>array(
                'gantiPassword' => array(
                     'label'=>'Change Password',
                     'url'=>'Yii::app()->createUrl("/user/changePassword", array("id"=>$data->id))',
                     'imageUrl'=>Yii::app()->request->baseUrl.'/images/icons/password.png',
                 ),
             ),
             'template'=>'{view}{update}{gantiPassword}{delete}'
        ),
    ),
)); ?>

Maka selesai sudah pekerjaan untuk menambah tombol.

Terdapat tombol bergambar kunci di urutan ketiga. Itulah tombol "gantiPassword"

Penjelasan

CButtonColumn memiliki sebuah properti bernama buttons, yang berfungsi untuk menampung tombol-tombol baru. Untuk tutorial ini, penulis membuat tombol baru bernama “gantiPassword”. Tombol baru biasanya memiliki beberapa atribut. Untuk kasus ini kita hanya perlu tiga yakni label yang berupa tulisan, url merupakan link yang dituju apabila diklik pengguna, dan imageUrl berisi URL gambar tombolnya.

Terakhir, kita harus menampilkan  tombol baru yang kita buat dengan atribut template karena dengan hanya membuat saja tombol tersebut tidak akan muncul secara otomatis. Secara default nilainya adalah “{view}{update}{delete}”. Penulis ingin meletakkan tombol “gantiPassword” diurutan setelah tombol update, maka penulis cukup menyisipkan “{gantiPassword}” ke posisi tiga menjadi “{view}{update}{gantiPassword}{delete}”. (Tips: Kita juga bisa menghilangkan tombol yang ada dengan cara menghapus nama tombol dari “template”.)

Demikian tutorial kita untuk menambah tombol CButtonColumn kali ini. Tidak ada sulit bukan?