Object-oriented HTML generation
Thursday, 30 December 2010
Article Index
Object-oriented HTML generation
Object-oriented approach
PHPQuery

PHP is a programming language designed to generate HTML pages but one of the topics that is rarely discussed is exactly how to do this. In this article the idea that HTML generation should be object oriented is proposed and explored.

So how do you generate HTML?

 

Banner

 

The fundamental problem of PHP is how best to actually generate HTML.

Before going on to consider some solutions let's look at the nature of the problem in more detail.

Mixing markup

You might not think of it as a problem but mixing code and markup is never a good idea and it certainly isn't pretty. Why should you worry about how pretty code is? Because pretty code is easy to read, easy to understand, easy to modify and easy to debug.

The problem is that a PHP page can contain a mixture of PHP and HTML. The PHP has to be within <?php ?> tags and the HTML can be anywhere it pleases.

So for example, you can write:

<?php
echo "hello world 1"
?>
<input type="button"
value="My Button"
style="width:125px" />
<?php
echo "hello world 2"
?>

which first outputs the text "hello world 1" from PHP, then lapses into HTML to create a button and then goes back to PHP to generate the second piece of text.

This is often referred to as inline code and in this simple example it isn't too bad, but take a look at a page where PHP is used to generate some complicated web pages layouts and the result is usually very difficult to follow with lots of PHP fragments scattered through lots of HTML fragments.

Code behind

PHP being a server side language could adopt a "code behind" approach like ASP .NET programmers tend to use but the structure of the language and its relationship to the HTML means that this doesn't work very well.

The basic idea though is to treat the markup as a language that creates objects which the code can work with. The best examples of this idea are in Flash and .NET where MXML and XAML are used as object instantiation and initialization languages.

In short, the markup creates and initializes objects which the code then manipulates. HTML, however, doesn't actually create anything until it reaches the client and server side code has finished running by the time it creates any programmable objects.

What this means is that client side code can consider HTML to be an object-instantiation language, but this is difficult for PHP.

For example, Javascript can interact with the HTML on a page by working with the DOM, i.e. the object that the HTML has created rather than with the HTML tags themselves. This is an important observation and we will return to it and its implications later.

Generate everything

The obvious alternative is to try to separate the code from the HTML by always making the code generate the HTML. This works up to a point. For example the previous mixed HTML and PHP program could be written as:

<?php
echo "hello world 1";
echo '<input type="button"
value="My Button"
style="width:125px" />';
echo "hello world 2";
?>

In other words, instead of having to drop in and out of PHP to write some HTML, we simply use strings for the HTML tags and echo them to the output.

This may seem like a small and almost pointless change but it does have some advantages. In particular, it stops the mixing of HTML and PHP control structures.

For example suppose we wanted five buttons in the previous example. Then this could be achieved using:

<?php
echo "hello world 1";
for($i=0;$i<5;$i++){?>
<input type="button"
value="My Button"
style="width:125px" />
<?php }
echo "hello world 2";
?>

If it has never occurred to you to write this sort of code then try to forget it once you have followed what is going on.

To any reasonable programmer this sort of expression is horrible.

The program starts off in PHP and creates the start of a for loop. The PHP ends and some HTML occurs, followed by some more PHO complete with the end of the for loop. The result is that the for loop repeats 5 times and repeats the HTML as if it was written five times.

This is horrible because the interaction of PHP and HTML is quite unnatural. Used in this way PHP looks more like a scripting language for a word processor or text editor. Notice that the same sort of behavior works for all of the other PHP control statements and the result is just as objectionable.

Using the generate all HTML approach the same loop can be written more reasonably as:

<?php
echo "hello world 1";
for($i=0;$i<5;$i++){
echo '<input type="button"
value="My Button"
style="width:125px" />';
}
echo "hello world 2";
?>

Now we have a standard for loop which simply repeats an echo command five times and all in PHP with no sign of an odd interaction between PHP and HTML.

The problem with generating all of the HTML that a program needs in this way is that as the amount of HTML increases the need to quote it or to build strings up that contain it obscures the meaning and layout of the PHP program almost as much as mixing PHP and HTML. Also notice that you can't do what the program listing above suggests - i.e. you can't format the contents of the string to make it more readable!

This is a better, but not perfect, approach - and sometimes it can seem like a lot of additional work for little gain. The temptation to drop out of PHP and simply write the HTML is often too much to resist.You can make use of Heredoc syntax to simplify the creation of multi-line strings complete with the values of variables already slotted in. For example:

<?php
$name="world";
echo <<<EOT
Hello $name
<input type="button"
value="My Button"
style="width:125px" />
EOT;
?>

In this case the variable $name is expanded to its current value i.e. world. 

However, as before, if there is a lot of HTML to encode as Heredoc then the result is almost as difficult to read - especially so because you cannot use indenting to mark out the Heredoc block - the EOT; has to be at the start of the final line..

Banner

<ASIN:0596006810>

<ASIN:1430228989>

<ASIN:1933988320>

<ASIN:0470563125>

<ASIN:0672329166>

<ASIN:1430231149>



Last Updated ( Thursday, 30 December 2010 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.