Zend Framework Tutorial on Zend Framework Layout
Back to Course

a layout represents the common parts of multiple views i.e. for example, page header and footer. by default, layouts should be stored in the view/layout folder.

a layout configuration is defined under the view_manager section in the module.config.php.

the default configuration of the skeleton application is as follows −

'view_manager' => array( 
   'display_not_found_reason' => true, 
   'display_exceptions' => true, 
   'doctype' => 'html5', 
   'not_found_template' => 'error/404', 
   'exception_template' => 'error/index', 
   'template_map' => array( 
      'layout/layout' => __dir__ . '/../view/layout/layout.phtml', 
      'application/index/index' => __dir__ . '/../view/application/index/index.phtml', 
      'error/404' => __dir__ . '/../view/error/404.phtml', 
      'error/index' => __dir__ . '/../view/error/index.phtml', 
   ), 
   'template_path_stack' => array( 
   __dir__ . '/../view', 
),

here, the template_map is used to specify the layout. if layout is not found, then it will return an error. let us have a look at the main layout of the skeleton application.

layout.phtml

<?= $this->doctype() ?>  
<html lang = "en"> 
   <head> 
      <meta charset = "utf-8"> 
      <?= $this->headtitle('zf skeleton application')->setseparator(' - ')>
         setautoescape(false) ?>
      <?= $this->headmeta() 
         ->appendname('viewport', 'width = device-width, initial-scale = 1.0') 
         ->appendhttpequiv('x-ua-compatible', 'ie = edge') 
      ?>  
      
      <!-- le styles --> 
      <?= $this->headlink(['rel' => 'shortcut icon', 'type' => 
         'image/vnd.microsoft.icon', 
         'href' => $this->basepath() . '/img/favicon.ico']) 
         ->prependstylesheet($this->basepath('css/style.css')) 
         ->prependstylesheet($this->basepath('css/bootstraptheme.min.css')) 
         ->prependstylesheet($this->basepath('css/bootstrap.min.css')) 
      ?>  
      
      <!-- scripts --> 
      <?= $this->headscript() 
         ->prependfile($this->basepath('js/bootstrap.min.js')) 
         ->prependfile($this->basepath('js/jquery-3.1.0.min.js')) 
      ?> 
   </head> 
   
   <body> 
      <nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation"> 
         <div class = "container"> 
            <div class = "navbar-header"> 
               <button type = "button" class = "navbar-toggle" data-
                  toggle = "collapse" data-target = ".navbar-collapse"> 
                  <span class = "icon-bar"></span> 
                  <span class = "icon-bar"></span> 
                  <span class = "icon-bar"></span> 
               </button> 
            
               <a class = "navbar-brand" href = "<?= $this->url('home') ?>"> 
                  <img src = "<?= $this->basepath('img/zf-logo-mark.svg') ?>
                     " height = "28" alt = "zend framework <?= \application\module::
                     version ?>"/> skeleton application 
               </a> 
            </div>
         
            <div class = "collapse navbar-collapse"> 
               <ul class = "nav navbar-nav"> 
                  <li class = "active"><a href = "<?= 
                     $this->url('home') ?>">home</a></li> 
               </ul> 
            </div> 
         </div> 
      </nav> 
   
      <div class = "container"> 
         <?= $this->content ?> 
         <hr> 
         <footer> 
            <p>© 2005 - <?= date('y') ?> by zend technologies ltd. 
               all rights reserved.</p> 
         </footer> 
      </div> 
      <?= $this->inlinescript() ?> 
   </body> 
</html>

as you analyze the layout, it mostly uses the view helpers, which we discussed in the previous chapter. as we look closer, the layout uses a special variable, $this->content. this variable is important as it will be replaced by the view script (template) of the actual requested page.

creating a new layout

let us create a new layout for our tutorial module.

to begin with, let us create a tutorial.css file under the “public/css” directory.

 body { 
   background-color: lightblue; 
} 
h1 { 
   color: white; 
   text-align: center; 
}

create a new layout file newlayout.phtml at the /myapp/module/tutorial/view/layout/ and copy the content from existing layout. then, add the tutorial.css stylesheet using the headlink helper class inside the layout head section.

<?php echo $this->headlink()->appendstylesheet('/css/tutorial.css');?>

add a new about link in the navigation section using the url helper.

<li><a href = "<?= $this->url('tutorial', ['action' => 'about']) ?>">about</a></li>

this layout page is common for the tutorial module application. update the view_manager section of the tutorial module configuration file.

'view_manager' => array( 
   'template_map' => array( 
      'layout/layout' => __dir__ . '/../view/layout/newlayout.phtml'), 
   'template_path_stack' => array('tutorial' => __dir__ . '/../view',), 
)

add the aboutaction function in the tutorialcontroller.

 public function aboutaction() { 
}

add the about.phtml at myapp/module/tutorial/view/tutorial/tutorial/ with the following content.

<h2>about page</h2>

now, you are ready to finally run the application − http://localhost:8080/tutorial/about.

about page
Previous Lesson