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

Object-oriented approach

So if generating the HTML is only a slight improvement on mixed HTML/PHP what is the solution?




A comon way for programming languages to generate their user interfaces, and after all HTML is the user interface for PHP, is to create objects for each type of user interface control that can be used.

For example, if you want to create an HTML button you first create a Button class complete with a range of properties corresponding to the attributes of a button.

To create a button in HTML you would simple create an instance of the button class, set its properties and finally invoke a RenderToHTML method to actually generate the HTML. Alternatively if you wanted to avoid the need to use a Render method you could insist that all of the properties had to be set as part of the constructor and simply generate the HTML as part of the object's creation.

The problem with this approach is that once the HTML has been generated there is no way of propagating any changes to the object into the HTML - at least a render method means you can re-render the HTML.

For example a very basic class for a button would be something like:

class Button
public $value;
public $width;
public function RenderHTML(){
return '<input type="button" value="'.
'" style="width:'.
$this->width.'px" />';

At this point you might very well complain that this is no improvement - the HTML in string form is still needed. This is true but the advantage of the approach isn't in the creation of the class, it is in its use.

For example, once you have the Button class you can create as many buttons as you like in your PHP code without any sign of HTML mixed in or in string form:

$Mybutton= new Button();
$Mybutton->value="My Button";

Of course the setting of the attributes could have been done in the constructor and we could have set default values for them and a range of other attributes.

Finally when the button is required to be made part of the HTML page that the PHP is creating all you have to do is something like:

echo $Mybutton->RenderHTML();

which outputs:

<input type="button" 
value="My Button"
style="width:150px" />

Of course the Render method could include the echo and make the task even simpler - but less flexible.

The point is if you have a suitable library of HTML classes then you can write PHP programs that use them and there is no mixing of HTML and PHP and there is no visible HTML anywhere in the part of the program you are actually writing. If you adopt this approach the HTML generation part of you PHP programs will be much simpler to understand and maintain.

The problem is finding a suitable library and the temptation is to write your own. There are a number of off-the-shelf PHP object oriented libraries but there isn't a clear front runner - html-object and PHP Object-Oriented HTML API are two of the best known candidates.

DOM generation

There is another way to generate HTML without any HTML at all.

On the other side of the transaction, client side Javascript often manages to do without HTML by working with the DOM - see Spartan Ajax and Javascript controls.

On the server side there is no DOM for the page because the page is still being built. However, the fact that there is no DOM doesn't stop us from creating one using the standard PHP DOM classes.

The idea is to create a DOM that represents the page or part of the page by creating and adding elements to a DOM document object. Then generating the HTML is just a matter of using the DOM object's render methods. 

For example, using the DOM approach we can easily create the button used in the previous examples.

First we need a document object to build up:

$html=new DOMDocument(
'1.0','iso-8859-1' );
$html->formatOutput = true;

The constructor gives the XML version number and the character encoding. Setting formatOutput to true forces the rendering method to indent.

Next we need to create a button or rather input element that can be customised to a button:


The create method creates a writeble node unlike the DOMelement constructor which creates a read-only node. Following the creation of the input element we can set attributes:

'My Button');

Finally we add the element to the DOM:


Following this we can create additional elements and insert them into the DOM into the correct position.

Once the DOM is complete we can render it to HTML using:

echo html_entity_decode( 

which produces:

<input type="button" 
value="My Button"

Notice that all of this is achieved using nothing but standard PHP.









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.