Green Acorn

Blog

Using the Zend Framework Layout

Zend can be pretty useful when it comes to layouts. Today I am going to show you how to set up two layouts, along with dynamic meta title, description and keywords. If you haven’t already got Zend set up – you can follow my previous tutorial here.

Creating the Zend Layout

Open up your command line / terminal window and type in the following to enable Zend layouts. Make sure you have changed into you projects root (i.e. /Applications/XAMPP/htdocs/myproject/)

zf enable layout

The above command will have created application/layouts/scripts/layout.phtml in your Zend project, as well as adding the below line of code in application.ini:

resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/"

Set the DocType

Open the file Bootstrap.php which is located in the root of your Zend project. What we need to do here is create a protected method called _initDoctype(). Within this method we get access to the view object by calling the special bootstrap method and pass to it ‘view’. Next we create a variable called view and use getResource() to essentially get the view resources. Finally now we have this loaded, we can set the doctype to XHTML Strict.

Copy and paste the below PHP code into the Bootstrap file.

<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
	protected function _initDoctype()
	{
		$this->bootstrap('view');
		$view = $this->getResource('view');
		$view->doctype('XHTML1_STRICT');
	}
}

In order for this to work, we need to create an empty array called resouces.view in configs/application.ini. When this has been added it will enable us to access the view resources and set all the different properties inside the application.

Note: I have added resouces.view to line 11.

[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH "/../library"
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
bootstrap.class = "Bootstrap"
appnamespace = "Application"
resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
resources.frontController.params.displayExceptions = 0

resources.view[] =
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/"
[staging : production]

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
resources.frontController.params.displayExceptions = 1

Working with Layout.phtml

The next stage is to open up the layout file Zend Tool created. This is located in application/layouts/scripts/layout.phtml. You will notice by default Zend has echoed out the content by adding the following php code:

<?php echo $this->layout()->content; ?>

In order to tell Zend to use the doctype we defined in the bootstrap, copy and replace the above with the following:

<?php echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo $this->headTitle();
echo $this->headMeta();
echo $this->headLink();
echo $this->headScript();
?>
</head>
<body>
	<?php echo $this->render('_header.phtml') ?>
	<?php echo $this->layout()->content; ?>
	<?php echo $this->layout()->sidebar; ?>
	<?php echo $this->render('_footer.phtml') ?>
</body>
</html>

Notice that we have used the below to print out the XHTML Strict doctype.

<?php echo $this->doctype(); ?>

This was set by the following in Boostrap.php.

 $view->doctype('XHTML1_STRICT');

Ignore all the head functions for now – we will come back to them shortly. For now, we are going to focus on the header and footer layouts. Create the following files in your Zend Project:

/application/layouts/scripts/_header.phtml
/application/layouts/scripts/_footer.phtml

The Header File

Copy and paste the following into your _header.phtml file. You can change this if you wish – the below is just an example.

<div id="header">
	<h1>Green Acorn's Zend Project</h1>	
</div>

The Footer File

Again, do the same for the _footer.phtml.

<div id="footer">
	<p>&copy; Green Acorn <?php echo date('Y'); ?></p>
</div>

Note: These files will be called by layout.phtml when it calls the render method.

The Sidebar

For the sidebar, I am going to use a different technique. For now – lets just create the view and come back to the rest when we start work on the controller.

Create the file /application/views/scripts/sidebar.phtml

<h3>Sidebar</h3>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
</ul>

Setting the Default Meta Data

The next stage is to set the default meta data such as the meta title suffix, content type and language. To do this I have created a method in Bootstrap.php called _initMeta(). I have also created an _initViewObj() method which assigns the Zend View object to a the $_viewObj property. Saves duplicating code.

Open up your Bootstrap.php file and replace its contents with the below PHP:

<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected $_viewObj;
    
    protected function _initViewObj()
    {
        $this->bootstrap('view');
        $this->_viewObj = $this->getResource('view');
    }
    
    protected function _initDoctype()
    {
        $this->_viewObj->doctype('XHTML1_STRICT');
    }
    
    protected function _initMeta()
    {
        // default meta
        $this->_viewObj->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
        $this->_viewObj->headMeta()->appendHttpEquiv('Content-Language', 'en-US');
        
        // append title
        $this->_viewObj->headTitle()->setSeparator(' - ');
        $this->_viewObj->headTitle()->prepend('Green Acorn');
    }
}

The Controller

Now its time to start adding code to the Index Controller. This file is located in:

/application/controllers/IndexController.php

Copy and paste in the below PHP code:

<?php
class IndexController extends Zend_Controller_Action
{

    public function init()
    {		
		// add css
		$this->view->headLink()->appendStylesheet('/public/css/style.css');
		// add js
		$this->view->headScript()->appendFile('/public/js/script.js');
		
		// insert sidebar to the response object
        $this->getResponse()->insert('sidebar', $this->view->render('sidebar.phtml')); 
    }

    public function indexAction()
    {
    	// home page
		$this->view->headTitle()->prepend('Home Page Title');
		$this->view->headMeta()->appendName('description', 'This is the homepage description.');
		$this->view->headMeta()->appendName('keyword', 'Web Design');
    }
	
	public function adminAction()
	{
	    // admin layout
		$this->view->headTitle()->prepend('Admin Title');
		$this->_helper->layout->setLayout('admin');
		$this->view->headMeta()->appendName('description', 'This is the admin description.');
	}

}

Notice in the _init method we have set the stye sheets and JavaScript files. This could also be done in the bootstrap if preferred.. I have also rendered the sidebar view and inserted it to the response object. This will now be available to the view helper layout() which is provide by Zend_Layout. The indexAction method is the Action method for the homepage. Here I have defined the home page meta title, description and keywords.

Note: The meta title will have a suffix of ‘ – Green Acorn’ which was defined in the bootstrap file.

You may be wondering what the adminAction method is? This is to demonstrate how to change the layout file using the setLayout() method. I passed the string ‘admin’ because I wanted to use my admin files / content.

/application/layouts/scripts/admin.phtml

<?php echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php 
echo $this->headTitle(); 
echo $this->headMeta();
?>
</head>
<body>
	<?php echo $this->layout()->content; ?>
	<?php echo $this->render('_footer.phtml') ?>
</body>
</html>

/application/views/scripts/index/admin.phtml

<div id="content">
	<h1>Admin</h1>
	<p>This is the admin</p>
</div>

Go to your domain root to view the front page i.e http://www.myzendproject.com, and http://www.myzendproject.com/index/admin to view the admin controller / layout.

I hope this web development and quick introduction to the Zend Layout has been useful. Please feel free to share comments and other Zend Framework tips.

Author:
Posted in: PHP, Zend

Leave a Reply

Your email address will not be published. Required fields are marked *

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>