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,
<!DOCTYPE html> <html lang="en"> <head> <title>Welcome</title> <!-- Include metas, stylesheets and scripts here --> </head> <body> <!-- Include page content here --> </body> </html>
<head> element contains the page title text, meta information
and references to included stylesheets and scripts. The
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).
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).
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 ?>"/> 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>
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.
<!DOCTYPE> declaration goes first in the HTML document,
<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.
<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 11 character encoding.
11) 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.
setSeparator() method is used to define the separator character for the compound page
setAutoEscape() method enhances the security by escaping unsafe characters from
the page title.
12) 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
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, you typically define the "favicon" for the page
and the CSS stylesheets.
In lines 17-19, the stylesheets common to all site pages are included by
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).
The scripts are executed by the client's web browser, allowing
to introduce some interactive features for your pages. We use the
(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
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.
concrete page. The
InlineScript view helper will substitute here
you will see it later in this chapter).
And finally, lines 63-64 contain the closing tags for the body and the HTML document.