Hello World with Yii 2 Framework

Writing the first Yii 2 code and getting acquainted with layouts and views

Yii 2 is a PHP framework which provides faster development environment with rich features like MVC, DAO/ActiveRecord, caching, authentication, etc. In our last article, we initialised the framework and saw the output of the frontend app on the browser which shows "Congratulations!".

Yii 2 Directory After Init - Browser

Now let's change this text to something else. Open your advanced directory in any IDE (editor), I prefer PhpStorm as it has many good features which come handy while development. Navigate to advanced/frontend/views/site/index.php file. This is the file which we are looking at on the browser.

Once into the index.php, you can change anything you want. This is the normal PHP file. I'll change the text and the content in the file just to check whether the changes are reflecting or not.

Writing First Code in Yii 2

As you can see in the above snap, that I have removed all the code and there are just two lines in the index.php file. But, in the following output, we can see the header and the footer along with the content of the index.php file.

Yii 2 First Code Output

Yii 2 by default uses layout structure. That is, there is the main layout file, frontend/views/layouts/main.php. Any view template (files in the frontend/views or backend/views) rendered from the controller is injected into this main layout. In order to experiment, let's go to our controller frontend/controllers/SiteController.php and in the actionIndex() function before render add the following line


$this->layout = false;

Yii2 Render Without LayoutThis tells the function of the controller not to use the layout and directly render the view template. Thus we get the following output without any styling. If you check the source (view-source:http://localhost/advanced/frontend/web/) of the page on the browser, you see just the following code.

Yii2 Render Without Layout Output


<div class="site-index">

<div class="jumbotron">
<h1>Codegear!</h1>
</div>

<div style="text-align: center;">
Your ultimate guide for Yii 2 development
</div>
</div>

This is because all of our assets (.css and .js files) are imported/linked/registered in the main layout file. And as we have disabled the layout, the layout is not rendered and only the view template is rendered. Thus we get to see just what is in the view template. We'll cover the asset registration and the layouts in the upcoming parts.

For now, just remember that the view template is injected into the layout as $content, and then rendered.

Checking out the render() method of Yii 2 framework, we get to know that it calls the renderContent() method, which checks for the layout file. If the layout file is present (by default it is views/layouts/main.php) then it uses it, otherwise, it renders only the content of the view template.


public function render($view, $params = [])
{
    $content = $this->getView()->render($view, $params, $this);
    return $this->renderContent($content);
}

public function renderContent($content)
{
    $layoutFile = $this->findLayoutFile($this->getView());
    if ($layoutFile !== false) {
        return $this->getView()->renderFile($layoutFile, ['content' => $content], $this);
    }
    return $content;
}

Now that you have the basic idea of how the view works and what happens if there is no layout file, we'll check out how to use the controller to pass the data into the view template in our next article. Till then goodbye!