Mengganti Template Website Yii Framework

Mengganti Template Website Yii Framework - Ketika kita membuat sebuah website tentu kita ingin tamplian website kita ingin template kita menarik dan bagus. beberapa orang terkadang membuat template website mereka sendiri, akan tetapi jika anda tidak mau repot anda juga dapat mendapatkan template CSS secara gratis dari searching di internet. Pada kali kita kan mempelajari cara untuk membuat dan mengganti template di yii, kita akan membuat template sederhana yang kita adaptasi dari template yii default.

Baca juga : Cara Instal Yii Framework di Wamp Windows 7

1. Template

Sekarang kita akan membuat sebuah template sederhana, buatlah sebuah file baru di dalam direktori folder Protected\view\layouts dengan nama layoutweb2.php dengan isi script seperti berikut :

<?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>
        <style>
            #mainmenu{
                background: darkorange;
                height: 50px;
            }
            
            #header{
                margin: 0;
                padding: 0;
                border-top: 3px solid darkorange;
            }
            
            #mainmenu ul {
                padding: 16px 20px 5px 20px;
                margin: 0px;
            }
            
            #mainmenu ul li a{
                color: #fff;
                padding: 17px 30px 18px 30px;
            }
            
            #mainmenu ul li {
                padding-top: 30px 0 30px 0;
            }
            
            #mainmenu ul li a:hover, #mainmenu ul li.active a {
                color:#FFF;
                background-color: dodgerblue;
                text-decoration: none;
            }
        </style>
    </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('/template/index')),
                        array('label' => 'Menu 2', 'url' => array('#')),
                        array('label' => 'Menu 3', 'url' => array('#')),
                )));
                ?>
            </div><!-- mainmenu -->
            <?php if (isset($this->breadcrumbs)): ?>
                <?php
                $this->widget('zii.widgets.CBreadcrumbs', array(
                    'links' => $this->breadcrumbs,
                ));
                ?><!-- breadcrumbs -->
            <?php endif ?>
            <div id="content">
                <?php echo $content; ?>
            </div>
            <div class="clear"></div>

            <div id="footer">
                Copyright &copy; <?php echo date('Y'); ?> by Jin Toples.<br/>
                All Rights Reserved.<br/>
                <?php echo CHtml::link('Jin Toples Programming', 'http://jintoples.blogspot.com') ?>
            </div><!-- footer -->

        </div><!-- page -->

    </body>
</html>

Penjelasan :

$this->widget('zii.widgets.CMenu', array(
'items' => array(
array('label' => 'Home', 'url' => array('/template/index')),
array('label' => 'Menu 2', 'url' => array('#')),
array('label' => 'Menu 3', 'url' => array('#')),
)));

Jika anda ingin merubah title menu dan menambahkan linknya anda dapat mengubah script pada bagian ini.

2. Title

Anda juga dapat mengganti title website anda dengan mengubah script pada main.php yang berada dalam direktori folder Protected\cofig :

Contoh :

'name'=>'My Web Application',

Menjadi :

'name'=>'Jin Toples Yii Framework',

3. Controller

Buatlah sebuah file controller baru dengan nama TemplateController.php dalam direktori folder Protected\controllers dengan isi script :

<?php
class TemplateController extends Controller{
 public $layout="layoutweb2";
        function actionIndex(){
            $this->render("index");
        }       
}
?>

Penjelasan :

public $layout="layoutweb2";

Pada script inilah kita mendefinisikan layout atau template yang kita gunakan pada controller ini yaitu "layoutweb2"

4. View

Terakhir buatlah sebuah folder dalam view dengan nama template kemudian buatlah sebuah file php baru di dalamnya dengan nama index.php dengan isi script :

Sekarang untuk mencobanya, anda ketikan URL berikut pada browser :

http://localhost/Belajar_Yii/website/students/admin

apabila anda belumn mengubah URL anda masukan seperti ini :

http://localhost/Belajar_Yii/website/index.php?r=students/admin

*notes kode yang berwarna merah adalah direktori folder Yii Framework anda di localhost.

Mengganti Template Website Yii Framework

Baiklah sekarang anda sudah berhasil mengganti template anda, memang template ini sedikit mirip dengan template default karna memang di adaptasi dari template default, untuk mengganti menu anda dapat mengubahnya di layout anda dan unutk menambahkan halaman anda dapat melakukannya di controller dan view.

Mengganti Template Website Yii Framework sekarang sudah selesai, baca juga tutorial Yii Framework lainnya.