Page Layout in Zend Framework 3 – Using Zend Framework 3

6.2. Page Layout in Zend Framework 3

Pages of your web site typically have some common structure that can be shared among them. For example, a typical page has the <!DOCTYPE> declaration to identify the HTML document, and the <head> and <body> elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Welcome</title>
    <!-- Include metas, stylesheets and scripts here -->  
  </head>
  <body> 
    <!-- Include page content here -->  
  </body>
</html>

The <head> element contains the page title text, meta information and references to included stylesheets and scripts. The <body> element contains the content of the page, like the logo image, the navigation bar, the page text, and the footer with copyright information.

In Zend Framework 3, you define this common structure with the "master" view template called the layout. The layout "decorates" other view templates.

The layout template typically has a placeholder in which ZF3 puts the content specific to a particular page (see figure 6.2 for example).

Figure 6.2. Content placeholder in layout template

In the Skeleton Application, the default layout template file is called layout.phtml and is located inside of the view/layout directory in Application module's directory (see figure 6.3 for example).

Figure 6.3. Layout directory

Let's look at the layout.phtml template file in more details. Below, the complete contents of the file is presented:

<?= $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/bootstrap-theme.min.css'))
        ->prependStylesheet($this->basePath('css/bootstrap.min.css'))
    ?>

    <!-- Scripts -->
    <?= $this->headScript()
        ->prependFile($this->basePath('js/bootstrap.min.js'))
        ->prependFile($this->basePath('js/jquery-2.2.4.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="<?php echo $this->url('home') ?>">
              <img src="<?= $this->basePath('img/zf-logo.png') ?>" 
                   alt="Zend Framework <?= \Application\Module::VERSION ?>"/>
                   &nbsp;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>&copy; 2005 - <?= date('Y') ?> by Zend Technologies Ltd. 
            All rights reserved.
          </p>
        </footer>
      </div>
      <?= $this->inlineScript() ?>
  </body>
</html>

You can see that the layout.phtml file (as a usual view template) consists of HTML tags mixed with PHP code fragments. When the template is being rendered, ZF3 evaluates the inline PHP fragments and generates resulting HTML page visible to site users.

Line 1 above generates the <!DOCTYPE> ¹⁰ declaration of the HTML page with the Doctype view helper.

¹⁰⁾ The <!DOCTYPE> declaration goes first in the HTML document, before the <html> tag. The declaration provides an instruction to the web browser about what version of HTML the page is written in (in our web site, we use HTML5-conformant document type declaration).

Line 3 defines the <html> element representing the root of the HTML document. The <html> tag is followed by the <head> tag (line 4), which typically contains a title for the document, and can include other information like scripts, CSS styles and meta information.

In line 5, the <meta> tag provides the browser with a hint that the document is encoded using UTF-8 ¹¹ character encoding.

¹¹⁾ The UTF-8 allows to encode any character in any alphabet around the world, that's why it is recommended for encoding the web pages.

In line 6, we have the HeadTitle view helper that allows to define the title for the page ("ZF Skeleton Application"). The title will be displayed in the web browser's caption. The setSeparator() method is used to define the separator character for the compound page titles¹²; the setAutoEscape() method enhances the security by escaping unsafe characters from the page title.

¹²⁾ A "compound" page title consists of two parts: the first part ("ZF Skeleton Application") is defined by the layout, and the second part - defined by a particular page - is prepended to the first one. For example, for the About page of your site you will have the "About - ZF Skeleton Application", and for the Documentation page you will have something like "Documentation - ZF Skeleton Application".

In line 9, the HeadMeta view helper allows to define the <meta name="viewport"> tag containing meta information for the web browser to control layout on different display devices, including mobile browsers. The width property controls the size of the viewport, while the initial-scale property controls the zoom level when the page is loaded. This makes the web page layout "responsive" to device viewport size.

In line 15, the HeadLink view helper allows to define the <link> tags. With the <link> tags, you typically define the "favicon" for the page (located in APP_DATA/public/img/favicon.ico file) and the CSS stylesheets.

In lines 17-19, the stylesheets common to all site pages are included by the prependStylesheet() method of the HeadLink view helper. Any page in our website will load three CSS stylesheet files: bootstrap.min.css (the minified version of Twitter Bootstrap CSS Framework), bootstrap-theme.min.css (the minified Bootstrap theme stylesheet) and style.css (CSS file allowing us to define our own CSS rules overriding Bootstrap CSS rules).

Lines 23-25 include the JavaScript files that all your web pages will load. The scripts are executed by the client's web browser, allowing to introduce some interactive features for your pages. We use the bootstrap.min.js (minified version of Twitter Bootstrap) and jquery-2.2.4.min.js (minified version of jQuery library) scripts. All scripts are located in APP_DIR/public/js directory.

Line 28 defines the <body> tag, the document's body which contains all the contents of the document, such as the navigation bar, text, hyperlinks, images, tables, lists, etc.

In lines 29-52, you can recognize the Bootstrap navigation bar definition. The skeleton application uses the collapsible navbar with dark inverse theme. The navbar contains the single link Home.

If you look at lines 53-61, you should notice the <div> element with container class which denotes the container element for the grid system. So, you can use the Bootstrap grid system to arrange the contents of your pages.

Line 54 is very important, because this line defines the inline PHP code that represents the page content placeholder we talked about in the beginning of this section. When the ZF3 page renderer evaluates the layout template, it echoes the actual page content here.

Lines 56-60 define the page footer area. The footer contains the copyright information like "2016 by Zend Technologies Ltd. All rights reserved." You can replace this information with you own company name.

Line 62 is the placeholder for JavaScript scripts loaded by the concrete page. The InlineScript view helper will substitute here all the scripts you register (about registering JavaScript scripts, you will see it later in this chapter).

And finally, lines 63-64 contain the closing tags for the body and the HTML document.