In this tutorial we will study how to set or customize the default look and feel of the web pages developed by ZF. How to create and use the layout.phtml file etc are discussed in this current tutorial.
In this tutorial we will study how to set or customize the default look and feel of the web pages developed by ZF. How to create and use the layout.phtml file etc are discussed in this current tutorial.Change the Layout, in ZF:
It is very common activity in web application that we need html layout in the web page, like in the header section, footer section, sidebars etc. Zend_Layout component solves this problem by allowing us to put all the necessary code in layout view script which will include the necessary code for the action being executed.
Initially ZF does not create any layout directory or related file, to create one type the following command in the command prompt:
After executing the command ZF will create folders and a file structure as layouts ->scripts->layout.phtml and it also updates the application.ini file, under the production section it adds the following line:
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/"
Now open the layout.phtml file and change the existing content with the following code:
<?php
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
$this->headTitle()->setSeparator(' | ');
$this->headTitle('Zend HelloWorld');
echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
</head>
<body>
<div id="content">
<h1><?php echo $this->escape($this->title); ?></h1>
<?php echo $this->layout()->content; ?>
</div>
</body>
</html>
If you wish to make small changes in the index page, like to change the title of the index page or to put a heading in that page just add few lines in the indexAction method in IndexController.php file:
public function indexAction()
{
$this->view->title="My First Web Page";
$this->view->headTitle($this->view->title);
}
After refreshing the home page (index page) the output will be as follows: