Front-end developer's guide

This wiki is a work in progress.

This wiki is targeted at developers that are new to Yii and are focusing on developing the front-end of a Yii application using languages such as HTML, CSS and JavaScript. Perhaps there are different developers working on the backend, but you are focused on the front-end. There are certain things you need to do to keep your code manageable for those backend developers. This article is meant to teach you those things.

Views

As a front-end developer, you will be focusing mainly on implementing views. Views are simply *.php files that contain mostly html which is sent to the browser. They may be embedded in layouts, which is very similar to a view itself. Layouts generally define the outside framework of a website, while the views define the content on the individual pages. View are contained in the protected/views directory, and are organized by controller (controllers are like categories that views with similar purposes reside - for instance a blog post list and blog post create view may be in a blog controller). Layouts are contained in the protected/views/layouts directory. Layouts may even be embedded in other layouts.

For instance, the view file for the front page is likely at /protected/views/site/index.php, as the front page is the index action in the site controller by default.

You can use the CHtml helper to render certain html elements. This should especially be done for links and forms. Please read this for code examples of CHtml.

You may find that explicitly a link such as:

[html]
<a href="/site/index">Home Page</a>

will only work if the application is installed on the root level of the server (for instance www.example.com). If the application was installed at www.example.com/foo, the above link would not work, as it would direct the user to www.example.com/site/index instead of www.example.com/foo/site/index. To write links that work independently of where the application is installed, one should use the CHtml::link() function.

To include a css file in say the /css directory, put this in the view:

Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/some-file.css');

Or for JS file in say the /js directory, put this in the view:

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/some-file.js');

These code snippets will automatically generate the html inclusion in the HEAD section of the final html document to be returned to the user's browser

Here is more reading you may be interested in reading, depending on your interest and php level:

  1. Views
  2. Forms
  3. MVC Basics