1

Bab 2

Aplikasi Dasar Yii Framework

2.1 Hello World

2.1.1 Hello World Pertama

Oke, sekarang kita akan membuat aplikasi yang sederhana dulu, yaitu menampilkan

teks hello world. Silahkan Anda buat file php baru, kemudian simpan dengan nama

HelloController.php pada folder yiinazuma\protected\controller. Kemudian

ketikkan skrip berikut:

Skrip HelloController.php

Penjelasan Kode:

class HellooController extends Controller untuk membuat class controller dengan nama Helloo.

function actionIndex() membuat function dengan nama index.

echo "Hello World. Aku sedang belajar Yii Framework :)"; untuk menampilkan teks di browser.

Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=hello di

browser, maka akan tampil seperti pada gambar 2.1.

2

Gambar 2.1 Hasil skrip Hello World pertama

2.1.2 Hello World Kedua

Pada latihan berikutnya, kita akan membuat controller yang dilengkapi dengan view.

Kita mulai dengan yang sederhana dulu yah? Biar paham untuk kedepannya. Oke,

silahkan tambahkan function baru lagi pada skrip HelloController.php yang sebelumnya

kita buat, perhatikan teks yang ditebalkan:

Skrip HelloController.php (...tambahan function actionHellov)

3

Penjelasan Kode:

$this->render("Hellov"); digunakan untuk me-render file view. Kalau di

CodeIgniter dikenal dengan $this->load->view(view).

Langkah berikutnya, buatlah folder dengan nama hello didalam folder protected\views.

Kemudian buatlah file baru dengan nama hellov.php yang disimpan didalam folder

hello yang barusan kita buat. Adapun isi skripnya sebagai berikut:

Skrip hellov.php

BAB 2

Hello World Kedua. Asyiknya belajar YII Framework :)

Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=hello/hellov

di browser, maka akan tampil seperti pada gambar 2.2.

Gambar 2.2 Hasil skrip Hello World kedua

2.2 Array

Array atau larik merupakan kumpulan data yang memiliki tipe data yang sama. Data

array dapat dibedakan dengan sebuah index. Sebagai contoh, kita akan membuat

program sederhana dengan array.

Oke, silahkan tambahkan function baru lagi pada skrip HelloController.php yang

sebelumnya kita buat, perhatikan teks yang ditebalkan:

4

Skrip HelloController.php (...tambahan function actionHellov2)

Penjelasan Kode:

$daray=array("Ichigo","Nigo","V3"); untuk membuat data array dan ditampung di $daray.

$this->render("hellov2", array('data'=>$daray)); digunakan untuk me-render ke file views/hellov2 dengan membawa $daray.

Langkah berikutnya, buatlah file baru dengan nama hellov2.php dan simpan di folder

protected\views\hello. Adapun isi skripnya sebagai berikut:

Skrip hellov2.php

BAB 2

Penjelasan Kode:

5

foreach ($data as $data): digunakan untuk mengulang data array yang akan

ditampung oleh $data. Data array terus diulang sebanyak jumlah data yang ada dan

akan ditampilkan oleh echo $data."", kemudian diakhiri oleh endforeach;

Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=hello/hellov2

di browser, maka akan tampil seperti pada gambar 2.3.

Gambar 2.3 Menampilkan Data Array

2.3 Operasi Aritmatika dengan Yii

Pada latihan dasar kali ini, kita akan menampilkan hasil dari operasi aritmatika

sederhana. Silahkan buat file baru dengan nama AritmatikaController.php dan

simpan di folder protected/controllers. Adapun isi skripnya sebagai berikut:

Skrip AritmatikaController.php

6

Penjelasan Kode:

const BILANGAN=1; dan const BILANGAN2=2; membuat variabel konstanta (tetap).

echo self::BILANGAN+self::BILANGAN2; proses terjadinya operasi perhitungannya (aritmatika).

Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=aritmatika di

browser, maka akan tampil hasil perhitungan 1+2 seperti pada gambar 2.4.

Gambar 2.4 Menampilkan hasil perhitungan (Aritmatika)

2.4 CHtml

CHtml adalah helper html pada Yii yang digunakan untuk penanganan HTML. Jadi,

untuk mengetikkan kode html yang kita perlukan, kita dapat menggunakan helper ini,

sehingga pengetikannya berbeda dari kode html biasanya.

2.4.1 CHtml::link

CHtml::link digunakan untuk menangani html link seperti tag pada html

biasanya. Oke sekarang kita coba untuk membuatnya.

Buatlah file baru LinkController.php dan simpan di folder protected\controllers,

kemudian ketikkan skrip berikut:

7

Skrip LinkController.php

Penjelasan Kode:

public $layout="NULL"; digunakan untuk menentukan layout dalam suatu

Controller. Jika kita isi NULL, maka akan tampak putih pada tampilan aplikasi

web.

Pada function actionRiders dan actionIndex akan memiliki tampilan berwarna putih biasa, karena pada public $layout="NULL"; kita beri nilai NULL, atau isi saja

sembarang yang tidak mengandung nama file layout yang ada pada folder

protected\views\layouts.

Langkah berikutnya, buatlah folder dengan nama link didalam folder protected\views.

Kemudian buatlah file baru dengan nama index.php yang disimpan didalam folder link

yang barusan kita buat. Adapun isi skripnya sebagai berikut:

Skrip index.php

Halaman Home

Dan terakhir, buatlah file baru dengan nama riders.php dan simpan di folder

protected\views\link. Adapun isi skripnya sebagai berikut:

Skrip riders.php

Halaman Riders

Penjelasan Kode:

echo CHtml::link('Link Riders',array('link/riders')); untuk membuat link yang menghubungkan ke halaman riders (riders.php).

8

echo CHtml::link("Link Home",array('link/')); untuk membuat link yang menghubungkan ke halaman home (index.php).

Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=link di

browser, maka akan tampil sebuah link. Untuk mencobanya, silahkan klik Link Riders

untuk berpindah ke Halaman Riders. Lihat gambar 2.5.

Gambar 2.5 Membuat link

2.4.2 CHtml::image

CHtml::image digunakan untuk menampilkan gambar seperti tag pada html.

Sekarang kita coba untuk menggunakannnya. Sebelumnya, Anda siapkan dulu sebuah

gambar dan letakkan di folder yiinazuma\images. Kemudian, lakukan modifikasi

skrip riders.php menjadi seperti berikut:

Skrip riders.php

Halaman Riders

Penjelasan Kode:

9

Kode untuk menampilkan gambar:

echo CHtml::image(Yii::app()->request->

baseUrl."images/kamenriders.jpg","image",array("width"=>500));

Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=link di

browser, lalu klik Link Riders untuk berpindah ke Halaman Riders yang menampilkan

gambar Kamen Rider. Lihat gambar 2.6.

Gambar 2.6 Menampilkan gambar

Hayoo.. siapa yang masih inget nama nama kamen rider diatas...?

2.5 Bekerja Dengan Form

Untuk bekerja dengan form, kita masih menggunakan CHtml untuk membuat

komponen-komponen form-nya. Oke, silahkan buat file baru dengan nama

FormController.php, seperti biasa simpan pada folder protected\controllers, lalu

ketikkan skrip berikut:

10

Skrip FormController.php

11

)),'Perempuan';

?>

Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=form di

browser, maka akan tampil form seperti pada gambar 2.7.

12

Gambar 2.7 Bekerja dengan Form

Bab 2Aplikasi Dasar Yii FrameworkOke, sekarang kita akan membuat aplikasi yang sederhana dulu, yaitu menampilkan teks hello world. Silahkan Anda buat file php baru, kemudian simpan dengan nama HelloController.php pada folder yiinazuma\protected\controller. Kemudian ketikkan skrip ber...Skrip HelloController.phpPenjelasan Kode: class HellooController extends Controller untuk membuat class controller dengan nama Helloo. function actionIndex() membuat function dengan nama index. echo "Hello World. Aku sedang belajar Yii Framework :)"; untuk menampilkan teks di browser.Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=hello di browser, maka akan tampil seperti pada gambar 2.1.Pada latihan berikutnya, kita akan membuat controller yang dilengkapi dengan view. Kita mulai dengan yang sederhana dulu yah? Biar paham untuk kedepannya. Oke, silahkan tambahkan function baru lagi pada skrip HelloController.php yang sebelumnya kita b...Skrip HelloController.php (...tambahan function actionHellov)Penjelasan Kode:$this->render("Hellov"); digunakan untuk me-render file view. Kalau di CodeIgniter dikenal dengan $this->load->view(view).Langkah berikutnya, buatlah folder dengan nama hello didalam folder protected\views. Kemudian buatlah file baru dengan nama hellov.php yang disimpan didalam folder hello yang barusan kita buat. Adapun isi skripnya sebagai berikut:Skrip hellov.phpUntuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=hello/hellov di browser, maka akan tampil seperti pada gambar 2.2.Array atau larik merupakan kumpulan data yang memiliki tipe data yang sama. Data array dapat dibedakan dengan sebuah index. Sebagai contoh, kita akan membuat program sederhana dengan array.Oke, silahkan tambahkan function baru lagi pada skrip HelloController.php yang sebelumnya kita buat, perhatikan teks yang ditebalkan:Skrip HelloController.php (...tambahan function actionHellov2)Penjelasan Kode: $daray=array("Ichigo","Nigo","V3"); untuk membuat data array dan ditampung di $daray. $this->render("hellov2", array('data'=>$daray)); digunakan untuk me-render ke file views/hellov2 dengan membawa $daray.Langkah berikutnya, buatlah file baru dengan nama hellov2.php dan simpan di folder protected\views\hello. Adapun isi skripnya sebagai berikut:Skrip hellov2.phpPenjelasan Kode:foreach ($data as $data): digunakan untuk mengulang data array yang akan ditampung oleh $data. Data array terus diulang sebanyak jumlah data yang ada dan akan ditampilkan oleh echo $data."", kemudian diakhiri oleh endforeach;Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=hello/hellov2 di browser, maka akan tampil seperti pada gambar 2.3.Pada latihan dasar kali ini, kita akan menampilkan hasil dari operasi aritmatika sederhana. Silahkan buat file baru dengan nama AritmatikaController.php dan simpan di folder protected/controllers. Adapun isi skripnya sebagai berikut:Skrip AritmatikaController.phpPenjelasan Kode: const BILANGAN=1; dan const BILANGAN2=2; membuat variabel konstanta (tetap). echo self::BILANGAN+self::BILANGAN2; proses terjadinya operasi perhitungannya (aritmatika).Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=aritmatika di browser, maka akan tampil hasil perhitungan 1+2 seperti pada gambar 2.4.CHtml adalah helper html pada Yii yang digunakan untuk penanganan HTML. Jadi, untuk mengetikkan kode html yang kita perlukan, kita dapat menggunakan helper ini, sehingga pengetikannya berbeda dari kode html biasanya.CHtml::link digunakan untuk menangani html link seperti tag pada html biasanya. Oke sekarang kita coba untuk membuatnya.Buatlah file baru LinkController.php dan simpan di folder protected\controllers, kemudian ketikkan skrip berikut:Skrip LinkController.phpPenjelasan Kode: public $layout="NULL"; digunakan untuk menentukan layout dalam suatu Controller. Jika kita isi NULL, maka akan tampak putih pada tampilan aplikasi web. Pada function actionRiders dan actionIndex akan memiliki tampilan berwarna putih biasa, karena pada public $layout="NULL"; kita beri nilai NULL, atau isi saja sembarang yang tidak mengandung nama file layout yang ada pada folder protected\views\layo...Langkah berikutnya, buatlah folder dengan nama link didalam folder protected\views. Kemudian buatlah file baru dengan nama index.php yang disimpan didalam folder link yang barusan kita buat. Adapun isi skripnya sebagai berikut:Skrip index.phpDan terakhir, buatlah file baru dengan nama riders.php dan simpan di folder protected\views\link. Adapun isi skripnya sebagai berikut:Skrip riders.phpPenjelasan Kode: echo CHtml::link('Link Riders',array('link/riders')); untuk membuat link yang menghubungkan ke halaman riders (riders.php). echo CHtml::link("Link Home",array('link/')); untuk membuat link yang menghubungkan ke halaman home (index.php).Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=link di browser, maka akan tampil sebuah link. Untuk mencobanya, silahkan klik Link Riders untuk berpindah ke Halaman Riders. Lihat gambar 2.5.CHtml::image digunakan untuk menampilkan gambar seperti tag pada html. Sekarang kita coba untuk menggunakannnya. Sebelumnya, Anda siapkan dulu sebuah gambar dan letakkan di folder yiinazuma\images. Kemudian, lakukan modifikasi skrip riders....Skrip riders.phpPenjelasan Kode:Kode untuk menampilkan gambar:Untuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=link di browser, lalu klik Link Riders untuk berpindah ke Halaman Riders yang menampilkan gambar Kamen Rider. Lihat gambar 2.6.Hayoo.. siapa yang masih inget nama nama kamen rider diatas...? (Untuk bekerja dengan form, kita masih menggunakan CHtml untuk membuat komponen-komponen form-nya. Oke, silahkan buat file baru dengan nama FormController.php, seperti biasa simpan pada folder protected\controllers, lalu ketikkan skrip berikut:Skrip FormController.phpSelanjutnya, buat folder pada protected\views dengan nama yang sama dengan nama controller, yaitu form. Kemudian buatlah file baru dengan nama index.php yang disimpan didalam folder form yang barusan kita buat. Adapun isi skripnya sebagai berikut:Skrip index.phpUntuk melihat hasilnya, ketikkan http://localhost/yiinazuma/index.php?r=form di browser, maka akan tampil form seperti pada gambar 2.7.