Last week I was working on a project,that was developed using YII.Client requested some new features in the existing application and asked us to change the old layout of the application.In this post I am using a HTML template to integrate in YII app.
I have built a default webapp using YII command line tool.If you are not familair with YII command line basic app creation you can check my previous
post on YII.
The three simple steps are:
1.Choose a HTML template and keep it under the theme directory an declare it in application configuration.
2.Making valid directory structure so that framework configuration can identify the theme
3.Add PHP code to the static HTML template
Step 1.For this post I have used a Open Source Free HTML5 template,you can choose you own and play with it.
Declare the theme name into the application configuration and it is application/protected/config/main.php and add
1 | 'theme'=>'custom_theme', |
Here “custom_theme” is the name of the theme I am using.
Step 2.Keep the HTML template into the themes folder of the application.And create four directory named as follows:
>>js: here we will keep all the javascript files
>>css: here we will keep all the css files
>>images:will keep images related to the theme
>>views:here we will have to create two more directory inside it=> sites and layouts.Here we will keep our files.
Inside layout the main.php file should be kept and this file is inherited by all over the theme.
And inside layout we can keep static and custom layouts like contact us,log in etc.
Step 3.In t his step we will add php code to our html template so that it can work properly and dynamic.
2 | clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/script.js'); ?> |
For title you have to add
1 | <?php echo CHtml::encode($this->pageTitle); ?> |
For menu you have to add
1 | widget('zii.widgets.CMenu',array( |
3 | array('label'=>'Home', 'url'=>array('/site/index')), |
4 | array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')), |
5 | array('label'=>'Contact', 'url'=>array('/site/contact')), |
6 | array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest), |
7 | array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest) |
And the main layout is ready,as other pages are inherited from this main.php the theme is almost ready.
As we are working with YII default command line app,I have to create a form for contact us page.The form is created during the application creation now
we have to put a custom widget to have the contact us form.I have used all the default code from the app just added form inside new custom theme.
The theme is ready.
And Contact us is:
You can fork into my git repo and play with it from here.
N.B:My git YII_THEME app is outside the YII Framework directory,to run it you should keep the framework directory just before it.
To learn more about YII theming,you can check
it.
