jump to navigation

Zend Framework :Basic example of the Zend_View Placeholder April 28, 2011

Posted by Tournas Dimitrios in Zend Framework v1.10.

My previous article introduced the basic concepts of Zend_Layout‘s functionality . This template help the developer to centralize repetitive code like headers , footers , sidebars etc…. Zen_Layout is very limited , such as , what if we need an optional sidebar or display the nick-name of a logged-in user or alter the Page title on occasion ? Zend_View Placeholders fills up this ” functionality gap ” .

Although this article is based on a tutorial provided from Zend’s website , it’s implemented on a different way . This article takes a ” step by step ” approach , where a newcomer can follow the process and download the project’s code as a reference . The final result is a webpage with a sidebar that has predefined content , but during navigation , dynamic content will be added to this sidebar . This dynamic content could be provided from a database query or a web-service ( SOAP , REST … ) , but our example uses static text . The reader must have a functional development environment and basic knowledge of Zend’s Framework architecture .

Download the code and use it as a reference .

These are the steps that must be followed :

  1. Creating the layout directory structure and enabling layout resources .
  2. Customizing the layout file .
  3. Enabling the sidebar on the layout file
  4. Creating the skeleton for our side-bar
  5. Centralizing the layout of the side-bar
  6. Setting up “predispatch ” on Action Controllers
  7. Adding content to the side-bar on various View files .

Creating the layout directory structure and enabling layout resources :
If you need a refresh for the layout template , read my article .

  • Create with “zf tool” the layout directory structure
    zf enable layout
  • Enable view resourses in “APPLICATION_DIR/application/configs/application.ini”
    add the following line : resources.view[] =

Customizing the layout file :
The project of this article uses a very simple layout based on CSS . Usually a CSS framework will be used to create this template . A future article will present how to implement the Blueprint framework on the Zend Framework . For now , just copy – paste the proper folders to you project’s directory . We have to configure the template to load the CSS style . Just add the following code in the ” Head ” section of the layout.phtml file
< ? php echo $this->headLink()->appendStylesheet(‘http://zendtest.local/media/css/style.css&#8217;) ?>
The path for the style.css is specified as an “Absolute path ” , just configure it to met your’s environment . That is the wrong way , our code is not portable . Better is to create an view helper and create this link .
The code for the view helper could be like this : (application/views/helper/CssHelper.php)

<?p hp
class Zend_View_Helper_CssHelper extends Zend_View_Helper_Abstract
    function cssHelper() {
        $request = Zend_Controller_Front::getInstance()->getRequest();
        $file_uri = 'media/css/'.  $request->getControllerName() . '/' . $request->getActionName() . '.css';

        if (file_exists($file_uri)) {
            $this->view->headLink()->appendStylesheet('/' . $file_uri);

        return $this->view->headLink();


Now in the layout file call this view helper :
echo $this->cssHelper() ;
If we examine the html code on our browser it will broduce :

<html >
<title>Simple Placeholder Article</title>

<link href="http://zendtest.local/media/css/style.css" media="screen" rel="stylesheet" type="text/css" />

A more simple way is to use :

<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'media/css/style.css');?>

If we examine the html code on our browser it will broduce :

<title>Simple Placeholder Article</title>

<link href="media/css/styles.css" media="screen" rel="stylesheet" type="text/css" >

Enabling the sidebar on the layout file
Enable the side-bar on the proper section of the layout template file “APPLICATION_DIR/application/layouts/scripts/layout.phtml”
< ? p hp echo $this->placeholder(‘sidebar’) ? >

The layout of the page is divided in sections , where each section is represented by a ” < div>” tag . The names of the div’s represent it’s location . So locate the div tag with the name “leftnav” and paste the code that was mentioned previously .

Creating the skeleton for our side-bar :

  • Let’s first create a additional controller to demonstrate the sidebar functionality :

zf create controller testsidebar

  • In the APPLICATION_DIR/application/views/script/testsidebar/ directory create a file “_sidebar.phtml ” . Actually this file will contain the static content of our sidebar .

Setting up “pre-dispatch ” on Action Controllers :

  • configure a pre-dispatch on each controller that will contain the side-bar .
    public function preDispatch()
    $this->view->render(‘testsidebar/_sidebar.phtml’) ; }
  • Navigate with your browser to http://webrootdir/testsidebar
    Well , a better solution is to set-up a virtual host on your development environment and navigate to the page with your virtual domain-name .

Adding dynamic content to the side-bar on various View files :

  • Let’s first create an additional Action in ” testsidebar Action Controller ”
    zf create action listusers testsidebar
  • Customizing the layout of these dynamic content ( display as a list)
    In the “APPLICATION_DIR/bootstrap.php” file set the configurations for the dynamic content

    protected function _initSidebar()
            $view = $this->getResource('View');
      // "prefix" -> markup to emit once before all items in collection
    <div class="\&quot;sidebar\&quot;">\n
    <div class="\&quot;block\&quot;">\n")</div>
     // "separator" -> markup to emit between items in a collection
    <div class="\&quot;block\&quot;">\n")</div>
     // "postfix" -> markup to emit once after all items in a collection
  • Each view can now add it’s custom content on the side-bar placeholder :
    $this->placeholder('sidebar')->append('<p><b>Articles on my Blog: </b> ' ) ;
    $this->placeholder('sidebar')->append('Zend  : ' ) ;
    $this->placeholder('sidebar')->append('Linux  : ' ) ;
    $this->placeholder('sidebar')->append('PHP  : ' ) ;
    $this->placeholder('sidebar')->append('Actionscript3  :' ) ;
    $this->placeholder('sidebar')->append('Mysql  : ' ) ;

The picture below shows the final result :

Of course this article presented only a fraction of the possibilities that Zend_View placeholders offer . Download the source files of this article and start exploring these features .
Beside the custom placeholders that we can construct , Zend has build-in placeholders to make our development experience more pleasant .

Happy coding 🙂



1. tournasdimitrios1 - September 16, 2011

I have received a message from @jaya kumar :

hi, i am new to zend framework. i read this blog. Example of Zend-view placeholder was very nice. when i tried to execute the code on my own, the style sheet style.css from http://zendtest.local/media/css/style.css was missing. if any body can upload style.css it would be grateful for me to understand the code much better. Thanks.

Answer :
Download the source code from this article , the CSS structure is identical . You can even built the example of this article on top of the sample code of that article .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s