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
<?php
class HelloController extends Controller{

public $layout="NULL";

function actionIndex(){
// menampilkan teks melalui controller/function
echo "<title>BAB 2</title>";
echo "Hello World. Aku sedang belajar Yii Framework :)";
}
}
?>

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.

1
 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)
<?php
class HelloController extends Controller{

public $layout="NULL";

function actionIndex(){
// menampilkan teks melalui controller/function
echo "<title>BAB 2</title>";
echo "Hello World. Aku sedang belajar Yii Framework :)";
}

function actionHellov(){
// menampilkan teks dengan merender ke file yang ada
// pada views/hello/hellov.php
$this->render("Hellov");
}
}
?>

2
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
<title>BAB 2</title>
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:

3
Skrip HelloController.php (...tambahan function actionHellov2)
<?php
class HelloController extends Controller{

public $layout="NULL";

function actionIndex(){
// menampilkan teks melalui controller/function
echo "<title>BAB 2</title>";
echo "Hello World. Aku sedang belajar Yii Framework :)";
}

function actionHellov(){
// menampilkan teks dengan merender ke file yang ada
// pada views/hello/hellov.php
$this->render("Hellov");
}

function actionHellov2(){
// $daray menampung data array
$daray=array("Ichigo","Nigo","V3");

// render ke file views/hellov2

$this->render("hellov2", array('data'=>$daray));
}

}
?>

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
<title>BAB 2</title>
<?php
foreach ($data as $data):
echo $data."<br>";
endforeach;
?>

Penjelasan Kode:

4
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."<br>", 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
<?php
class AritmatikaController extends Controller{

const BILANGAN=1;
const BILANGAN2=2;

function actionIndex(){
echo self::BILANGAN+self::BILANGAN2;
}
}
?>

5
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 <a href> pada html
biasanya. Oke sekarang kita coba untuk membuatnya.
Buatlah file baru LinkController.php dan simpan di folder protected\controllers,
kemudian ketikkan skrip berikut:

6
Skrip LinkController.php
<?php
class LinkController extends Controller{

public $layout="NULL";

function actionIndex(){
$this->render("index");
}

function actionRiders(){
$this->render("riders");
}
}
?>

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
<?php echo CHtml::link('Link Riders',array('link/riders')); ?>
<br>
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
<?php echo CHtml::link("Link Home",array('link/'));?>
<br>
Halaman Riders

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

7
 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 <img src> 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
<?php echo CHtml::link("Link Home",array('link/'));?>
<br>
Halaman Riders<br>
<?php
echo
CHtml::image("images/kamenriders.jpg","image",array("width"=>500));
?>

Penjelasan Kode:

8
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:

9
Skrip FormController.php
<?php
class FormController extends Controller{

public $layout="NULL";

function actionIndex(){
$this->render("index");
}

}
// penjelasan kode diatas udah taukan..? :)
?>

Selanjutnya, 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.php
<?php echo CHtml::beginForm(); ?>
<p>
<?php echo CHtml::label('Nama','nama'); ?><br>
<?php echo CHtml::textField("nama",""); ?>
</p>

<p>
<?php echo CHtml::label('Alamat','alamat'); ?><br>
<?php echo CHtml::textArea("alamat",""); ?>
</p>

<p>
<?php echo CHtml::label('Kota','kota'); ?><br>
<?php echo CHtml::dropDownList('kota', $select,
array('Jakarta' => 'Jakarta','Palembang' => 'Palembang',
'Yogyakarta' => 'Yogyakarta'),
array('empty' => '--pilih kota--'));?><br>
</p>

<p>
<?php
echo CHtml::radioButton('jk', TRUE, array(
'value'=>'Laki-Laki',
'name'=>'btnname',
'uncheckValue'=>null
)),'Laki-Laki ';

echo CHtml::radioButton('jk', FALSE, array(

'value'=>'Perempuan',
'name'=>'btnname',
'uncheckValue'=>null

10
 )),'Perempuan';
?>
</p>

<p>
<?php echo CHtml::label('Hobby','hobby');?><br>
<?php
echo CHtml::CheckBox('hobby',TRUE, array (
'value'=>'olahraga',
)),'Olahraga';
?>
&nbsp;&nbsp;
<?php
echo CHtml::CheckBox('hobby',FALSE, array (
'value'=>'cosplay',
)),'Cosplay';
?>
&nbsp;&nbsp;
<?php
echo CHtml::CheckBox('hobby',FALSE, array (
'value'=>'crafting',
)),'Crafting';
?>
</p>

<?php echo CHtml::submitButton('Submit'); ?>

<?php echo CHtml::endForm(); ?>

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

browser, maka akan tampil form seperti pada gambar 2.7.

11
 Gambar 2.7 Bekerja dengan Form

12