Memodifikasi dan Menambah Konten
Pada bab ini kita akan mulai dengan modifikasi halaman dengan merubah isi konten sampai menambahkan halaman. Penulis akan menggunakan folder testyii untuk latihan kali ini. Buka folder protected/views/site pada folder testyii.
Isi folder site
Terdapat 4 file dan satu folder yang berisi 1 file about.php, berikut penjelasan beberapa file tersebut
Contact.php ,merupakan file yang akan ditampilkan pada menu contact
Error.php merupakan file ketika login error maka file tersebut akan ditampilkan pada halaman browser
Index.php merupakan halaman pertama yang akan ditampilkan pada halaman web
Login.php merupakan file yang akan ditampilkan pada halaman login
File about merupakan file yang akan ditampilkan pada halaman about
Berikut ini gambar dari tiap halaman
File index.php
File about.php
File contact.php
File login.php
File Error.php
gambar-gambar diatas merupakan tampilan awal / default dari YII pertama kita install. Pada bahasan sekarang penulis akan memberi gambaran untuk merubah isi tampilan dan mencoba membuat / menambah halaman. Buka folder protected/views/ lalu buka file index.php
<h3>Ini halaman index yang telah di modifikasi</h3>
Simpan file tersebut, kemudian akses laman berikut
Halaman index yang telah dirubah
Sekarang bagaimana jika kita ingin menambahkan menu ? buka folder /protected/views/layout/main.php. Cari kode dibawah ini
<div id="mainmenu">
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
</div><!-- mainmenu -->
Kode diatas merupakan kode untuk membuat menu. Sebagai contoh penulis ingin menambah menu kalkulator yang nantinya akan dibuat untuk perhitungan sederhana (penjumlahan,pengurangan,perkalian,pembagian). Rubah kode sehingga menjadi sebagai berikut
<div id="mainmenu">
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Kalkulator', 'url'=>array('/site/kalkulator')),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
</div><!-- mainmenu -->
Simpan file tersebut , kemudian buka /protected/controller/siteController.php. berikut ini kode sebelum dimodifikasi
<?php
class SiteController extends Controller
{
/**
* Declares class-based actions.
*/
public function actions()
{
return array(
// captcha action renders the CAPTCHA image displayed on the contact page
'captcha'=>array(
'class'=>'CCaptchaAction',
'backColor'=>0xFFFFFF,
),
// page action renders "static" pages stored under 'protected/views/site/pages'
// They can be accessed via: index.php?r=site/page&view=FileName
'page'=>array(
'class'=>'CViewAction',
),
);
}
/**
* This is the default 'index' action that is invoked
* when an action is not explicitly requested by users.
*/
public function actionIndex()
{
// renders the view file 'protected/views/site/index.php'
// using the default layout 'protected/views/layouts/main.php'
$this->render('index');
}
/**
* This is the action to handle external exceptions.
*/
public function actionError()
{
if($error=Yii::app()->errorHandler->error)
{
if(Yii::app()->request->isAjaxRequest)
echo $error['message'];
else
$this->render('error', $error);
}
}
/**
* Displays the contact page
*/
public function actionContact()
{
$model=new ContactForm;
if(isset($_POST['ContactForm']))
{
$model->attributes=$_POST['ContactForm'];
if($model->validate())
{
$name='=?UTF-8?B?'.base64_encode($model->name).'?=';
$subject='=?UTF-8?B?'.base64_encode($model->subject).'?=';
$headers="From: $name <{$model->email}>\r\n".
"Reply-To: {$model->email}\r\n".
"MIME-Version: 1.0\r\n".
"Content-Type: text/plain; charset=UTF-8";
mail(Yii::app()->params['adminEmail'],$subject,$model->body,$headers);
Yii::app()->user->setFlash('contact','Thank you for contacting us. We will respond to you as soon as possible.');
$this->refresh();
}
}
$this->render('contact',array('model'=>$model));
}
/**
* Displays the login page
*/
public function actionLogin()
{
$model=new LoginForm;
// if it is ajax validation request
if(isset($_POST['ajax']) && $_POST['ajax']==='login-form')
{
echo CActiveForm::validate($model);
Yii::app()->end();
}
// collect user input data
if(isset($_POST['LoginForm']))
{
$model->attributes=$_POST['LoginForm'];
// validate user input and redirect to the previous page if valid
if($model->validate() && $model->login())
$this->redirect(Yii::app()->user->returnUrl);
}
// display the login form
$this->render('login',array('model'=>$model));
}
/**
* Logs out the current user and redirect to homepage.
*/
public function actionLogout()
{
Yii::app()->user->logout();
$this->redirect(Yii::app()->homeUrl);
}
}
Kode diatas merupakan controller default saat instalasi yii. File inilah yang bertugas mengatur seperti link tiap halaman. Perhatikan pada kode diatas terdapat beberpa function diantaranya actionIndex(). Function tersebut bertugas ketika fungsi tersebut dijalankan, maka kode yang terdapat pada kode tersebut akan dijalankan. Secara default actionIndex() berfungsi untuk menampilkan halaman index dengan meload file index yang berada pada folder views/site/.
Tambahkan kode berikut,letakan sebelum tutup kurung kurawal } terakhir
public function actionKalkulator()
{
$this->render('kalkulator');
}
Simpan file tersebut. Kemudian lihat perubahan pada browser dengan akses laman berikut
Halaman setelah dimodifikasi
Terdapat menu baru yakni kalkulator, coba klik menu tersebut maka tampilan browser akan berubah seperti berikut
Halaman kalkulator
Lah kok error ? simple saja itu karena file kalkulator.php belum dibuat. Karena fungsi actionKalkulator() akan merender file kalkulator.php. oleh karena itu buat terlebih dahulu file kalkulator.php. berikut kodenya
<h3>Ini halaman kalkulator</h3>
Simpan file tersebut pada folder views/site beri nama kalkulator.php. kemudian klik menu kalkulator pada browser, gambar dibawah meruoakan tampilan setelah dbuat file kalkulator.php
Halaman kalkulator
Sudah tidak error lagi, mungkin untuk membuat lebih paham lagi silahkan dicoba-coba sendiri.
Merubah Judul Website
Perhatikan gambar sebelumnya, Terdapat pada header tulisan My Web Application bukan ? mungkin untuk pemula bingung dimana letak tulisan tersebut. Yap, file tersebut berada di file main.php di folder/protected/config, terletak pada baris paling atas
'name'=>'My Web Application',
Sekarang coba rubah My Web Application menjadi Practice Yes It Is
Tampilan setelah dirubah
Merubah Footer
Setelah mengetahui bagaimana merubah title header , sekarang penulis akan membahas bagaimana merubah footer ? sebenarnya kalo kita mengetahui dimana letak template berada pasti akan sangat mudah untuk merubah footer tersebut. Letak template berada pada folder /protected/views/layout/ cari file main.php, file tersebutlah yang mengatur layout web yang ditampilkan pada browser,sebelumnya telah dibahas tentang bagaimana menambah menu. Mari kita buka kembali kode dari file main.php
<?php /* @var $this Controller */ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css" />
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
</head>
<body>
<div class="container" id="page">
<div id="header">
<div id="logo"><?php echo CHtml::encode(Yii::app()->name); ?></div>
</div><!-- header -->
<div id="mainmenu">
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Kalkulator', 'url'=>array('/site/kalkulator')),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
</div><!-- mainmenu -->
<?php if(isset($this->breadcrumbs)):?>
<?php $this->widget('zii.widgets.CBreadcrumbs', array(
'links'=>$this->breadcrumbs,
)); ?><!-- breadcrumbs -->
<?php endif?>
<?php echo $content; ?>
<div class="clear"></div>
<div id="footer">
Copyright © <?php echo date('Y'); ?> by My Company.<br/>
All Rights Reserved.<br/>
<?php echo Yii::powered(); ?>
</div><!-- footer -->
</div><!-- page -->
</body>
</html>
Pada baris ke 51 terdapat tag html <div id=”footer”>. Diantara tag tersebut konten footer berada. Untuk memastikan hal tersebut coba modifikasi kode berikut menjadi seperti berikut
<div id="footer">
Copyright © <?php echo date('Y'); ?> by Deden Hendra Permana.<br/>
All Rights Reserved.<br/>
</div><!-- footer -->
Simpan file berikut, gambar berikut ini merupakan hasil dari modifikasi
Tampilan setelah modifikasi footer
Mendesain Layout
Nah bahasan terakhir di bab 2 tentang tata letak layout, penulis akan membahas sederhananya mengatur tata letak. Pada umumnya sama saja dengan yang lain kita menggunakan css (cascading style sheet) untuk mendesain halaman web. Ketika kita menginstall yii, secara langsung telah disediakan css yang digunakan untuk mendesain template, pada latihan sekarang kita akan menggunakan css bawaan dari yii untuk di modifikasi.
Untuk memulai, buka file column1.php yang berada pada folder /protected/views/layouts, berikut ini kode sebelum dimodifikasi
<?php /* @var $this Controller */ ?>
<?php $this->beginContent('//layouts/main'); ?>
<div id="content">
<?php echo $content; ?>
</div><!-- content -->
<?php $this->endContent(); ?>
Kode inilah yang berperan dalam penampilan konten website. Modifikasi kode berikut menjadi seperti ini
<?php /* @var $this Controller */ ?>
<?php $this->beginContent('//layouts/main'); ?>
<div id="content">
Main Konten
</div><!-- content -->
<div id="side-content">
Side Konten
</div><!--side content -->
<?php $this->endContent(); ?>
Simpan file tersebut. Perhatikan perubahan kode yang telah dimodifikasi diatas
Setelah modifikasi file column1.php
Terlihat jika konten telah berubah. Sekarang kita akan membuat sebuah layout. Dimana ada dua konten, yakni konten tengah dan konten samping. Gambar diatas telah menggambarkan layout yang akan kita buat, hanya saja tata letak belum sesuai dengan tujuan. Buka file main.css pada folder css. Tambahkan kode berikut
…….
#content
{
padding: 20px;
float: left;
width: 400px;
}
#side-content
{
padding: 20px;
}
Penjelasan
#content untuk mengatur letak main konten
#side-content untuk mengatur letak side konten
Simpan file berikut
Setelah modifikasi css
Gambar diatas sudah sesuai dengan tujuan awal, dimana kita akan membuat dua layout untuk website ini. Seperti itulah gambaran mengenai templating / tata letak layout. Selamat mencoba ☺
Happy Coding
