Creating some basic web page sections - PHP

Welcome to the conclusion of a five-part series on the Composite View design pattern. This article will focus on a way to make use of this design pattern when you're building dynamic web pages. It involves a simple two-step rendering process.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

September 01, 2010

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

As I said in the introduction, it’s fairly easy to use the composite view classes that you just saw in a slightly different way, and build from scratch a web page with sections that are rendered individually before being embedded into a general layout.

To illustrate more clearly how to accomplish this, first it’s necessary to create the corresponding web page sections, along with the mentioned layout. Take a look at the code below:

(header.php)

(body.php)

(footer.php)

(layout.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Master Layout</title>
    </head>
    <body>
        <?php echo $header->render();?>
        <?php echo $body->render();?>
        <?php echo $footer->render();?>
    </body>
</html>

As the above code fragments show, the web page sections are simple PHP files that print on screen the values assigned to their $content property. On the other hand, the master layout renders the sections via the corresponding “render()” method, in this way building a “well-formatted” web page.

While the presentation logic included in the structure of the layout file makes it pretty easy to guess how the containing web page will be generated from top to bottom by using the previous composite view classes, the best way to understand this process is by means of a concrete example. Therefore, I’m going to code that example for you, which will wrap up the entire series.

Rendering an entire web page with a two-step rendering process

If you want to see how the templates defined above can be used by the composite view classes defined previously to create an entire web page, the following code snippet should satisfy your curiosity. Check it out:

<?php

try {
    // include autoloader class and grab an instance of it
    require_once 'Autoloader.php';
    $autoloader = Autoloader::getInstance();

    // create the header section
    $header = new Partial('header');
    $header->content = 'This is the header section';

    // create the body section
    $body = new Partial('body');
    $body->content = 'This is the body section';

    // create the footer section
    $footer = new Partial('footer');
    $footer->content = 'This is the footer section';

    // create the master layout
    $layout = new View('layout');
    $layout->header = $header;
    $layout->body = $body;
    $layout->footer = $footer;
    echo $layout->render();
}
catch (Exception $e) {
    echo $e->getMessage();
    exit();
}

As the above script shows, each section of the web page is rendered by creating different instances of the “Partial” class, which are assigned later on as properties of its counterpart “View.” At the end of this process, the whole page is echoed to screen via the “render()” method, which generates the following output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Master Layout</title>
    </head>
    <body>
        <div id="header">
          <h2>This is the header section</h2>
         </div>
         <div id="body">
           <h2>This is the body section</h2>
          </div>
         <div id="footer">
             <h2>This is the footer section</h2>
          </div>
</body>
</html>

The previous example demonstrates how to build a web page in a snap; indeed, when it comes to flexibly creating dynamic (X)HTML pages, a typical implementation of the Composite View pattern will fit the requirements of most use cases. However, there are times when it’s necessary to utilize an approach similar to the one shown before (called in programming jargon the “two-step view” design pattern). So, if you’re planning to use composite classes to generate your web pages, feel free to pick the method that best suits your needs.

Final thoughts

We’ve come to the end of this series. Hopefully, the code samples shown in its five articles have provided you with the right pointers to start using the Composite View design pattern within your own object-oriented PHP applications. Even though at first glance the driving logic of the pattern seems to be somewhat difficult to grasp, learning it is really worthwhile, as the paradigm is one of the most representative examples where the functionality of Composition can be used for simplifying the manipulation of multiple view objects and their associated templates.

Now that you've learned the theoretical concepts that surround the implementation of the Composite View design pattern, go ahead and put it to work for you. You won’t be disappointed with the results.

See you in the next PHP development tutorial!