Modul 5 | Aplikasi Agenda (3)

Pada modul ini kita akan berlatih membuat aplikasi Agenda yang memuat daftar kegiatan harian.
Agenda ini memuat beberapa kegiatan yang akan kita lakukan beserta prioritas dan status
keterlaksanaannya.

Kita tidak lagi memanfaatkan fitur scaffolding, melainkan akan membuat controller sendiri.

Fungsi-fungsi yang akan kita tambahkan pada modul ini adalah: Edit dan Delete. View akan kita
modifikasi untuk menampilkan hanya item kegiatan yang sudah diselesaikan/belum dilaksanakan.
Modul ini akan diakhiri dengan cara membuat homepage sebagai halaman utama aplikasi Agenda
ini.

Aktifitas 1 | Menyiapkan basisdata dan Model

Pastikan basisdata (cakeLab) dan tabel items sudah dikonfigurasi dengan benar. Model yang kita
gunakan masih sama dengan model pada Modul 4, yaitu item.php.

Perhatikan aturan penamaan file pada CakePHP!

Elemen MVC dan konvensi nama file untuk tabel dengan nama items
Tipe Nama File Ekstensi Nama Class Lokasi folder
Model item .php Item app/models
Controller items_controller .php ItemsController app/controllers
View {sesuai dengan nama aksi .ctp app/views/items
pada controller}

Aktifitas 2 | Editing Agenda

Setelah kita berhasil melakukan penambahan item kegiatan pada buku Agenda kita, sekarang
saatnya kita akan memperkaya controller yang telah dibuat pada Modul 4, yaitu dengan
menambahkan fungsi untuk melakukan perubahan (editing) pada item Agenda. Langkah yang
harus dilakukan adalah menambahkan fungsi edit pada controller (yaitu items_
controller.php) dan memodifikasi view-nya.

(1) Buka file items_controller.php, tambahkan metode dengan nama edit pada klas
ItemsController.

1 function edit($id = null) {

2 if (!$id) {
3 $this->Session->setFlash('Item tidak valid');
4 $this->redirect(array('action'=>'index'), null, true);
5 }
6 if (empty($this->data)) {
7 $this->data = $this->Item->find(array('id' => $id));
8 } else {
9 if ($this->Item->save($this->data)) {
10 $this->Session->setFlash('Item telah disimpan');
11 $this->redirect(array('action'=>'index'), null, true);
12 } else {
13 $this->Session->setFlash('Item tidak dapat disimpan.
Coba lagi!');
14 }
15 }

(2) Buat file baru di Agenda/app/views/items dengan nama edit.ctp. Sunting file
edit.ctp, tambahkan kode berikut:

1 <?php echo $form->create('Item');?>

2 <fieldset>
3 <legend>Edit Item Agenda</legend>
4 <?php
5 echo $form->hidden('id');
6 echo $form->input('nama');
7 echo $form->input('tanggal');
8 echo $form->input('prioritas');
9 echo $form->input('diselesaikan');
10 ?>
11 </fieldset>
12 <?php echo $form->end('Simpan');?>

(3) Fungsi edit ini akan kita eksekusi melalui halaman index, pada kolom Aksi. Untuk itu, mari kita
tambahkan link di halaman index. Buka file index.ctp, ubah bagian <!—-disinilah daftar
aksi yang nanti akan kita tambahkan--> dengan kode berikut:

<?php echo $html->link('Edit', array('action'=>'edit',

$item['Item']['id'])); ?>

Pengujian Controller dan View

Saatnya kita menguji fungsi index hasil modifikasi kita untuk menampilkan daftar
Agenda kita yang telah disertai link untuk mengubah item Agenda. Buka URL
http://localhost/agenda/items/index di browser.

Kita telah berhasil menampilkan seluruh Agenda kita yang ada di tabel items. Perhatikan bahwa
kolom Aksi sudah ada link <Edit>. Klik pada link ini untuk membuka halaman editing (edit.ctp).
Sekarang kita tambahkan link pada halaman Edit ini untuk membuka seluruh Agenda dan untuk
menambah Agenda baru. Tambahkan kode di bawah ini di bagian akhir file edit.ctp.

<?php echo $html->link('Lihat semua agenda',

array('action'=>'index')); ?>
<br />
<?php echo $html->link('Tambah Agenda', array('action'=>'add')); ?>

Dengan demikian kita dapat menuju ke halaman index atau menambahkan Agenda baru dari
halaman Editing ini.

Aktifitas 3 | Deleting Agenda

Aplikasi Agenda telah dapat menambah dan mengedit buku Agenda, hanya kemampuan untuk
menghapus item agenda yang belum ada. Sekarang saatnya kita tambahkan fungsi untuk
melakukan penghapusan item dari buku Agenda kita.

Seperti biasanya, kita akan menambahkan fungsi delete di bagian controller. Tapi, tidak seperti
aksi lainnya, aksi delete tidak membutuhkan View. Kita hanya akan menambahkan link <Delete>
di kolom Aksi pada halaman index.

(1) Buka file items_controller.php, tambahkan metode dengan nama add pada klas
ItemsController. Inilah kodenya:

1 function delete($id =null) {

2 if (!$id) {
3 $this->Session->setFlash('id Item Agenda tidak valid');
4 $this->redirect(array('action'=>'index'), null, true);
5 }
6 if ($this->Item->del($id)) {
7 $this->Session->setFlash('Item Agenda #'.$id.' dihapus.');
8 $this->redirect(array('action'=>'index'), null, true);
9 }
10 }

(2) Fungsi delete di atas akan kita pasang di halaman utama pada kolom Aksi, untuk itu mari kita
tambahkan link <Delete> di index.ctp. Tambahkan baris kode program berikut di bawah link
Edit:
<?php echo $html->link('Delete', array('action'=>'delete',
$item['Item']['id']), null, 'Anda yakin akan
menghapus item Agenda ini?'); ?>

Pengujian Controller dan View

Saatnya kita menguji fungsi index() hasil modifikasi kita untuk menampilkan daftar Agenda kita
yang telah disertai link untuk mengubah item Agenda. Buka URL
http://localhost/agenda/items/index di browser.

Link <Delete> telah ditambahkan di samping link Edit. Jika kita hendak menghapus item Agenda,
klik pada link Delete maka akan muncul jendela peringatan:

Klik Ok untuk menghapusnya.

Aktifitas 4 | Seleksi tampilan Agenda

Buku Agenda kita sudah memiliki fungsi-fungsi yang cukup lengkap untuk mengelola agenda
kegiatan kita. Daftar agenda memiliki status ‘diselesaikan’; agenda yang sudah diselesaikan
ditandai dengan ‘1’, sebaliknya agenda yang belum diselesaikan ditandai dengan nilai ‘0’.

Bagaimana caranya agar aplikasi buku Agenda kita dapat menyeleksi menampilkan hanya agenda
yang belum diselesaikan saja? Atau sebaliknya, menampilkan daftar agenda yang telah
diselesaikan?

Ya, dalam konsep basis data, seleksi seperti dimaksud diselesaikan dengan cara memberikan filter
pada perintah SQL menggunakan klausa WHERE. Bagaimana hal tersebut kita eksekusi pada
CakePHP? Ini dia caranya!

(1) Buka komponen Controller Anda (ya, filenya disimpan di Agenda/app/controllers/), ganti
fungsi index() dengan dengan berikut ini:
1 function index($status = null) {
2 if ($status == 'selesai')
3 $items = $this->Item->find('all', array('conditions' =>
array('Item.diselesaikan' => '1')));
4 else if ($status == 'belum')
5 $items = $this->Item->find('all', array('conditions' =>
array('Item.diselesaikan' => '0')));
6 else
7 $items = $this->Item->find('all');
8 $this->set('items', $items);
9 $this->set('status', $status);
10 }

Modifikasi di atas adalah menambahkan parameter $status pada aksi index. Jika $status =
'selesai', maka fungsi ini akan memanggil fungsi find() dengan kondisi: $this->Item-
>find('all', array('conditions' => array('Item.diselesaikan' => '1'))).
Disini, kita memberitahu model Item untuk mengembalikan hanya item-item kolom ‘diselesaikan’
yang bernilai 1.

Dalam tabel kita, item yang telah diselesaikan memiliki nilai 1.

Atau item yang belum diselesaikan, yaitu kolom ‘diselesaikan’ memiliki nilai 0. Jika $status =
'pending', maka fungsi index() ini akan mengembalikan hanya item-item yang belum
diselesaikan, yaitu yang bernilai 0.

Terakhir, jika $status tidak didefinisikan, maka fungsi index() akan mengembalikan seluruh
item yang ada di tabel.

(2) Untuk mengakses fungsi index() yang menyeleksi agenda yang telah/belum diselesaikan di
atas, kita tambahkan link di halaman index, tambahkan baris-baris kode berikut di bagian akhir file
index.ctp:

<?php if ($status): ?>

<?php echo $html->link('Daftar seluruh Agenda',
array('action'=>'index')); ?>
<br />
<?php endif; ?>

<?php if ($status != 'selesai'): ?>

<?php echo $html->link('Daftar Agenda yang telah dikerjakan',
array('action'=>'index', 'selesai')); ?>
<br />
<?php endif; ?>

<?php if ($status != 'belum'): ?>

<?php echo $html->link('Daftar Agenda yang belum dikerjakan',
array('action'=>'index', 'belum')); ?>
<br />
<?php endif; ?>

(3) Saatnya mencoba! Refesh http://localhost/agenda/items/index .

Silahkan dicermati!

Aktifitas 5 | Homepage untuk Aplikasi Agenda

Bagian akhir pengembangan aplikasi Agenda ini adalah membuat halaman utama yang berfungsi
sebagai homepage. Homepage tidak memiliki alur logika yang spesifik, hanya halaman html statis.

(1) Buat file home.ctp di folder Agenda/app/views/pages. Tambahkan baris-baris kode berikut:

<h2>Selamat Datang di Buku Agendaku</h2>

<p>Aplikasi ini cukup sederhana, tapi memadai untuk mengelola agenda
kegiatan harian. Aplikasi ini memiliki fitur-fitur:</p>
<ul>
<li>Menampilkan <?php echo $html->link('daftar seluruh agenda',
array('controller' => 'items', 'action'=>'index')); ?></li>
<li>Menampilkan <?php echo $html->link('daftar agenda yang telah
diselesaikan', array('controller' => 'items',
'action'=>'index','selesai')); ?></li>
<li>Menampilkan <?php echo $html->link('daftar agenda yang belum
diselesaikan', array('controller' => 'items', 'action'=>'index',
'belum')); ?></li>
<li><?php echo $html->link('Menambah Agenda baru', array('controller'
=> 'items', 'action'=>'add')); ?></li>
<li>Meng-edit agenda</li>
<li>Menghapus agenda</li>
</ul>

(2) Testing! Buka URL http://localhost/Agenda untuk menampilkan homepage kita ini.

Setiap halaman yang tidak memiliki aksi controller harus diletakkan di folder pages. Untuk
mengakses halaman ini, kita arahkan browser kita ke URL: http://localhost/Agenda/pages/<view
nama file>.Dalam hal homepage yang baru saja kita tulis, mestinya kita memanggilnya dengan
URL: http://localhost/Agenda/pages/home.
Tetapi CakePHP menetapkan home.ctp sebagai view default untuk aplikasi yang dikembangkan.
So, kita tidak perlu repot-repot menuliskan URL panjang lebar, cukup ringkas karena CakePHP
otomatis akan mengarahkan ke .../views/pages/home.ctp.

Latihan
Modifikasi aplikasi pengelolaan matakuliah pada Modul 4 dengan menambahkan fungsi-fungsi
sebagaimana di bahas pada modul ini.