Kevin van Zonneveld

On Development and Internet System Engineering

Generate HTML with PHP

| Comments

Hi. Have you met KvzHTML? It’s a standalone PHP Class for generating HTML. It’s been hiding deep inside the caverns of my secret GitHub repo: kvzlib - a collection of code snippets too small or unfinished to deserve their own repository. But I find working with this class so pleasant, I thought I’d share the fun.

KvzHTML (yeah, not the most imaginative name, sorry for that) will generate regular HTML or XML, it just makes the job a bit easier on you because of these features:

  • Automatic Table Of Contents support
  • Very compact syntax
  • Tag nesting & automatic indentation

Without wasting your time going on & on about it, just let me show you some examples, and you be the judge.

Introduction

A basic usage example.

(sample1-introduction.php) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?php
error_reporting(E_ALL);
if (!defined('DIR_KVZLIB')) {
  define('DIR_KVZLIB', dirname(dirname(dirname(dirname(dirname(__FILE__))))));
}
?>
// Sample starts here
<?php
require_once DIR_KVZLIB.'/php/classes/KvzHTML.php';

// These are the default options, so might
// as well have initialized KvzHTML with an
// empty first argument
$H = new KvzHTML(array(
  'xhtml' => true,
  'track_toc' => false,
  'link_toc' => true,
  'indentation' => 4,
  'newlines' => true,
  'echo' => false,
  'buffer' => false,
  'xml' => false,
  'tidy' => false,
));

echo $H->html(
  $H->head(
      $H->title('My page')
  ) .
  $H->body(
      $H->h1('Important website') .
      $H->p('Welcome to our website.') .
      $H->h2('Users') .
      $H->p('Here\'s a list of current users:') .
      $H->table(
          $H->tr($H->th('id') . $H->th('name') . $H->th('age')) .
          $H->tr($H->td('#1') . $H->td('Kevin van Zonneveld') . $H->td('26')) .
          $H->tr($H->td('#2') . $H->td('Foo Bar') . $H->td('28'))
      )
  )
);

Result

(sample1-introduction.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

// Sample starts here
<html>
    <head>
        <title>
            My page
        </title>
    </head>
    <body>
        <h1>
            Important website
        </h1>
        <p>
            Welcome to our website.
        </p>
        <h2>
            Users
        </h2>
        <p>
            Here's a list of current users:
        </p>
        <table>
            <tr>
                <th>
                    id
                </th>
                <th>
                    name
                </th>
                <th>
                    age
                </th>
            </tr>
            <tr>
                <td>
                    #1
                </td>
                <td>
                    Kevin van Zonneveld
                </td>
                <td>
                    26
                </td>
            </tr>
            <tr>
                <td>
                    #2
                </td>
                <td>
                    Foo Bar
                </td>
                <td>
                    28
                </td>
            </tr>
        </table>
    </body>
</html>

Automatic TOC

Keeping track of a Table of Contents can become quite tedious because every change you make; you have to make twice. So why not let KvzHTML handle this for you?

In this example I also show you that

  • you don’t have to nest KvzHTML functions to nest HTML Elements, per se.

You can open a tag by setting it’s body to TRUE, or by leaving it empty.

You can then later close it with ->tag(false)

  • You can set echo on if you don’t nest KvzHTML functions, so that every function will immediately get echoed.

  • ..unless you turn on buffering.

all these different options can lead to the same thing. But are there to reduce your need to type to an absolute minimum.

(sample3-toc.php) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<?php
error_reporting(E_ALL);
if (!defined('DIR_KVZLIB')) {
  define('DIR_KVZLIB', dirname(dirname(dirname(dirname(dirname(__FILE__))))));
}
?>
// Sample starts here
<?php
require_once DIR_KVZLIB.'/php/classes/KvzHTML.php';

// Some options:
// - create a ToC
// - don't automatically create links for ToC navigation
// - echo output, don't return
// - save all echoed output in a buffer
// - Don't automatically Tidy the output (btw, only works with buffer on)
$E = new KvzHTML(array(
  'track_toc' => true,
  'link_toc' => false,
  'echo' => true,
  'buffer' => true,
  'tidy' => false,
));

$E->h1('New application');
$E->p($E->loremIpsum);

$E->h2('Users');
$E->blockquote($E->loremIpsum);

$E->h3('Permissions');
$E->p($E->loremIpsum);

$E->h4('General Concept');
$E->p($E->loremIpsum);

$E->h4('Exceptions');
$E->p($E->loremIpsum);

$E->h3('Usability');
$E->ul(); // An empty body will just open the tag: <ul>
  $E->li('Point 1');
  $E->li('Point 2');
  $E->li();
      $E->strong('Point 3');
      $E->br(null);  // NULL will make a self closing tag: <br />
      $E->span('Has some implications.');
  $E->li(false);
$E->ul(false);  // False will close the tag: </ul>

// Save both chucks so further KvzHTML calls
// wont impact them anymore
$toc    = $E->getToc();
$document = $E->getBuffer();

// Print a heading that says TOC
$E->h1('Table of Contents', array('__buffer' => false));

// Print toc
echo $toc;

// Print original document
echo $document;

Result

(sample3-toc.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

// Sample starts here
<h1>
    Table of Contents
</h1>
<a name='toc_root'></a>
<ul>
 <li>New application</li>
 <ul>
  <li>Users</li>
  <ul>
   <li>Permissions</li>
   <ul>
    <li>General Concept</li>
    <li>Exceptions</li>
    </ul>
   </ul>
   <li>Usability</li>
   </ul>
  </ul>
 </ul>
</ul>
<h1>
    New application
</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum
</p>
<h2>
    Users
</h2>
<blockquote>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum
</blockquote>
<h3>
    Permissions
</h3>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum
</p>
<h4>
    General Concept
</h4>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum
</p>
<h4>
    Exceptions
</h4>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum
</p>
<h3>
    Usability
</h3>
<ul>
<li>
    Point 1
</li>
<li>
    Point 2
</li>
<li>
<strong>
    Point 3
</strong>
<br />
<span>
    Has some implications.
</span>
</li>
</ul>

Generating XML

As an added bonus, you can even make XML documents with KvzHTML

(sample4-xml-simple.php) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
error_reporting(E_ALL);
if (!defined('DIR_KVZLIB')) {
  define('DIR_KVZLIB', dirname(dirname(dirname(dirname(dirname(__FILE__))))));
}
?>
// LANG::xml
// Sample starts here
<?php
require_once DIR_KVZLIB.'/php/classes/KvzHTML.php';

$H = new KvzHTML(array(
  'xml' => true,
));

echo $H->xml(
  $H->auth(
      $H->username('kvz') .
      $H->api_key(sha1('xxxxxxxxxxxxxxxx'))
  ) .
  $H->server_reboot(
      $H->dry_run(null) .
      $H->hostname('www1.example.com') .
      $H->server_id(888)
  )
);

Result

(sample4-xml-simple.html) download
1
2
3
4
5
6
7
8
9
10
11
12

// LANG::xml
// Sample starts here
<?xml version='1.0' encoding='UTF-8'?>
<auth>
    <username>kvz</username>
    <api_key>a7a7c2e911a47b967d34b5a8807c040e9d167815</api_key>
</auth>
<server_reboot>
    <dry_run />
    <hostname>www1.example.com</hostname>
    <server_id>888</server_id>
</server_reboot>

Special functions

I had most fun with KvzHTML while generating HTML that would be converted to PDF afterwards. These were massive HTML documents that no designer was going to touch. So no need to keep the HTML plain for Dreamweaver or anything.

In this light, some of the functions below will make more sense.

(sample6-specials.php) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<?php
error_reporting(E_ALL);
if (!defined('DIR_KVZLIB')) {
  define('DIR_KVZLIB', dirname(dirname(dirname(dirname(dirname(__FILE__))))));
}
?>
// Sample starts here
<?php
require_once DIR_KVZLIB.'/php/classes/KvzHTML.php';

// I find it easy to work with 2 instances.
//    One that will echo directly: $E
// and One that supports nesting: $H
$H = new KvzHTML();
$E = new KvzHTML(array('echo' => true, 'buffer' => true, 'tidy' => true));

// To save you even more typing. The following tags
// have an inconsistent interface:
// a, img, css, js

$E->html();
  $E->head(
      $H->title('Report') .
      $H->style('
         div.page {
             font-family: helvetica;
             font-size: 12px;
             page-break-after: always;
             min-height: 1220px;
             width: 830px;
         }
     ') .
      $H->css('/css/style.js') .
      $H->js('/js/jquery.js')
  );

  // Page 1
  $E->page(true, array('style' => array(
      'page-break-before' => 'always',
  )));

  $E->h1('Report') .

      $E->p(
          $H->a('http://true.nl', 'Visit our homepage') .
          $H->img('http://true.truestatic.nl/pivotx/templates/true/img/logo.gif')
      );

      $E->ul(
          $H->li('Health') .
          $H->li('Uptime') .
          $H->li('Logs') .
          $H->li('Recommendations')
      );
  $E->page(false);

  // Page 2
  $E->page();
      $E->float($H->img('http://en.gravatar.com/userimage/3781109/874501515fabcf6069d64c626cf8e4f6.png'));
      $E->float($H->img('http://en.gravatar.com/userimage/3781109/874501515fabcf6069d64c626cf8e4f6.png'));
      $E->clear();
  $E->page(false);

  // Page 3
  $E->page(
      $H->h2('Warnings') .
      $H->p('Disk space', array('class' => 'warning'))
  );

$E->html(false);

echo $E->getBuffer();

Result

(sample6-specials.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

// Sample starts here
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>
            Report
        </title>
        <style type="text/css">

                    div.page {
                        font-family: helvetica;
                        font-size: 12px;
                        page-break-after: always;
                        min-height: 1220px;
                        width: 830px;
                    }
        </style>
        <link type='text/css' rel='stylesheet' href='/css/style.js'>
        <script type='text/javascript' src='/js/jquery.js'>
</script>
        <style type="text/css">
div.c3 {clear: both;}
        div.c2 {float: left;}
        div.c1 {page-break-before: always;}
        </style>
    </head>
    <body>
        <div class='page c1'>
            <h1>
                Report
            </h1>
            <p>
                <a href='http://true.nl'>Visit our homepage</a> <img src='http://true.truestatic.nl/pivotx/templates/true/img/logo.gif'>
            </p>
            <ul>
                <li>Health
                </li>
                <li>Uptime
                </li>
                <li>Logs
                </li>
                <li>Recommendations
                </li>
            </ul>
        </div>
        <div class='page'>
            <div class='c2'>
                <img src='http://en.gravatar.com/userimage/3781109/874501515fabcf6069d64c626cf8e4f6.png'>
            </div>
            <div class='c2'>
                <img src='http://en.gravatar.com/userimage/3781109/874501515fabcf6069d64c626cf8e4f6.png'>
            </div>
            <div class='c3'></div>
        </div>
        <div class='page'>
            <h2>
                Warnings
            </h2>
            <p class='warning'>
                Disk space
            </p>
        </div>
    </body>
</html>

And there you have it..

Get it while it’s hot, and if you have improvements: Leave me a comment or even better: GitHub me some patches! : )

Imported comments

These were imported from my old blog. Please use disqus below for new comments

Lars on 2012-04-26 19:52:40
Hi Kevin,

you might also like my fresh class phpcreatehtml.
It follows the same intention. Easy html creation from within php.
http://code.google.com/p/phpcreatehtml/

Cheers Lars

gi on 2012-01-09 17:09:00
good

luttan on 2011-09-21 11:56:10
Hi,
I am a newbie
Can you please tell me how to add & lt;tr class=’xyz’& gt; & lt;/tr& gt;

luts

DannyB on 2011-03-02 21:18:49
Hey, love this nice library.
Came here after using the excellent AlphaID and found some additional fun code.

Going to dig some more in the kvzlib package.

Kevin on 2010-05-15 19:12:47
@ Inzercia: Yeah there's a performance penalty involved. In my case that didn't matter, but it's something to consider for sure.

Inzercia on 2010-05-02 09:43:41
Looks crispy and aesthetic but I can't imagine to call a function for every row in my html template.

Kevin on 2010-01-07 18:52:39
@ Matt Kukowski: There are many ways to go. I personally use cake views nowadays, mix them with SASS & amp; HAML and you get very powerful stuff.
So I don't even use this class in all cases, but in some, it's quite nice, thanks ;)

Matt Kukowski on 2009-12-16 11:31:30
Nice class.. however, the template engine Smarty is the real way to go. It seperates all your PHP logic from all the HTML/CSS/JS.

However, this class doesn't look to shabby, as I like the syntax and formatting.

Very nicely done!

Jazz on 2009-11-17 21:54:04
Great stuff..i was actually working on a class like this..since i hated coding html.

I will peak at what you've done.

Thanks.

Kevin on 2009-11-08 14:46:15
@ Quazatron: Glad you like it!

Quazatron on 2009-11-03 11:50:13
NIce work! Just what I need for a quick and dirty database frontend.

Comments