Creating some web page sections - PHP

In this fourth part of a series, I demonstrate how to use all the composite view classes defined previously for generating a simple yet dynamic web page using a single rendering method. This example shows the real functionality of the Composite View pattern when it comes to rendering individual web page sections (partials) by using uncluttered, easy-to-follow client code.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

August 30, 2010

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

As you probably know, dynamic web pages are usually created nowadays by combining different sections, or “partials,” which are rendered individually. Well, in this case this process can be simplified and even taken one step further by using the previous composite view classes. You're probably wondering how, right? Well, before I answer that question, let me show you the web page sections mentioned in the preceding segment. Here they are:

(partial1.php)

<div id="top_container">
<h2>Partial View A</h2>
<p><?php echo $message;?></p>
</div>

(partial2.php)

<div id="bottom_container">
    <h2>Partial View B</h2>
    <p><?php echo $message;?></p>
</div>

As you can see above, the previous web page sections will print a sample message on the browser. In this case they've been created in two separate files called “partial1.php” and “partial2.php” respectively. Now, it’s time to define a layout file, which will embed the pertinent sections in a whole web page. Here’s how this layout will look:

(layout.php)

Frankly speaking, the definition of this layout file is so trivial that it doesn’t bear any further analysis. However, the goal here is to render an entire web page by replacing the $content variable embedded in the layout with the two partial sections just created. So, the question that comes up is: can this be achieved by using the composite view classes? Fortunately, the answer is a resounding "yes!" as you'll see when you read the section below.

Embedding the web page sections into a master layout

If you’re anything like me, you probably want to see if the composite view classes developed previously are really as flexible as they seem to be for rendering (X)HTML templates. Well, to satisfy your curiosity, I suggest you to take a look at the example below. It uses the isolated sections created before for rendering a complete web page:

<?php

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

    // create a partial view using the previous 'partial1.php' file
    $partialA = new Partial('partial1');
    $partialA->message = 'This is a message from partial view A.';

    // create another partial view using the previous 'partial2.php' file
    $partialB = new Partial('partial2');
    $partialB->message = 'This is a message from partial view B.';

    // create a composite View and add the partials to it
    $compositeView = new View('layout');
    echo $compositeView->addView($partialA)
                       ->addView($partialB)
                       ->render();
}
catch (Exception $e) {
    echo $e->getMessage();
    exit();
}

Didn’t I tell you that it was feasible to create an entire (X)HTML document from top to bottom with a single method call? That’s exactly that the above code sample shows. What’s more, if you test the example by using your own web server, this is the output that you should get:

<!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>
        <h1>Master Layout</h1>
        <div id="top_container">
          <h2>Partial View A</h2>
            <p>This is a message from partial view A.</p>
        </div>
        <div id="bottom_container">
            <h2>Partial View B</h2>
            <p>This is a message from partial view B.</p>
        </div>
    </body>
</html>

There you have it. Even though I have to admit that the web page generated above is extremely simple, it's handy for demonstrating the actual functionality that the Composite View design pattern hides under the hood. As usual, feel free to edit all of the code samples included in this tutorial. Doing so will help you to gain a better understanding of how to use the pattern for manipulating dynamic (X)HTML templates in a truly flexible fashion.

Final thoughts

In this fourth part of the series, things became really interesting (from a practical point of view), since I demonstrated how to use all of the composite view classes defined previously for generating a simple, but dynamic, web page using a single rendering method. This example clearly shows the real functionality of the Composite View pattern when it comes to rendering individual web page sections (partials) by using uncluttered, easy-to-follow client code.

However, we’re not done testing the earlier sample classes. In the final tutorial I’m going to teach you how to utilize them for generating a web page similar to the one that you saw before, but this time by using a two-step rendering process.

Don’t miss the last part!