ASPit - Totally ASP JSit - Totally JavaScript
Search PHPit

Use this textbox to search for articles on PHPit. Seperate keywords with a space.


Create your own HTML widgets with PHP

(Page 4 out of 4)

Creating two sub tags

The two sub tags will be used to actually be able to get data from the array with our Repeater Control. The tag will hold the key of the item, and the tag will hold the actual value of the item. To parse these tags, we first have to slightly modify the loop first:

// Loop through array
$new_html = '';
foreach ($this->_arrays[$array] as $key => $value) {
        // Copy innerHTML
        $html = $innerHTML;

        // Parse children
        $html = $this->_parse_subtags($html, $tag, $key, $value);

        $new_html .= $html;

As you can see we use another function called _parse_subtags to parse the two sub tags, which looks like this:

function _parse_subtags($html, $tag, $key, $value) {
        // Any children?
        if (!isset($tag['children']) OR !is_array($tag['children'])) { return $html; }

        foreach ($tag['children'] as $child) {
                // Is a key tag?
                if ($child['name'] == 'KEY') {
                        $html = str_replace ('', $key, $html);

                // Is a value tag?
                if ($child['name'] == 'VALUE') {
                        $html = str_replace ('', $value, $html);

                // Do children of this child
                $html = $this->_parse_subtags($html, $child, $key, $value);

        return $html;

The above function loops through all the sub tags, and check if the sub tag is a key or value tag. The function will also loop through all the sub tags of the sub tags, and so forth until it's been through all the tags. This makes it possible to nest our custom sub tags in other tags (i.e. putting tags around our custom sub tags).

It's now possible to use the key and value of each item, and we've now got a complete repeater control. Use the following HTML and a list of names will be printed:

        Name: >
        Surname: >

You can click here to view a live demo of the Repeater Control and you can click here to download the Repeater Control.


In this tutorial I've shown you exactly how to create your own HTML widgets, making it possible to create custom HTML tags. I started you off with the basics and slowly moved to the advanced functionality.

The Repeater Control we've created is obviously far from perfect, and a lot more functionality could be added. In fact, I'm currently working on a similar HTML widget which can handle almost anything.

I've really only shown you the basics, and there's plenty more you can do. Just experiment yourself, and see what you can come up with.

If you have any questions or comments, drop them below in the comments section and I will reply as soon as possible. Also join us at the PHPit Forums for some more PHP discussion.

« Previous: Creating the Repeater Control

One Response to “Create your own HTML widgets with PHP”

  1. RosSoft » Custom HTML Tags (WidgetHelper) Says:

    […] HTML * that contains the subtags and  * It replaces the subtags with the key & value from an associative array. * You must bind the widget to the array through * Example: * ’Elijah Wood’,’Aragorn’=>’Viggo Mortensen’) * $repeaterWidget->bind(’cast’,$array))?> *  *  *     :  *    
     *  *  * Will output the html: *     Frodo:: Elijah Wood *    
     *     Aragorn:: Viggo Mortensen *    
     * * @author RosSoft * @version 0.1 * @license MIT *  * @link  */require_once(dirname(__FILE__) . DS . ‘widget_helper.php’);class RepeaterWidgetHelper extends WidgetHelper{    //main tags name => array subtags    var $tag=array(                ‘repeater:repeater’=>array(’repeater:key’,’repeater:value’)            );        function tag_repeater_repeater($attr,$inner_html)    {        $array=$this->_get_bound($attr[’array’]);        […]

Leave a Reply

About the author
Dennis Pallett is the main contributor to PHPit. He owns several websites, including ASPit and Chill2Music. He is currently still studying.
Article Index
  1. Introduction & Using output buffer callback
  2. Using an HTML parser
  3. Creating the Repeater Control
  4. Creating two sub tags & Conclusion
Bookmark Article
Download Article
Download this article as a PDF file