Programming
Article
By Harry Fuecks

A Challenge

By Harry Fuecks
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

How much effort does it take to display the results of a query in HTML? More specifically, how many lines of code?

Recently, Jason has done an amazing job of putting together a Data to Table tag for WACT.

You can see some examples of what it does here

It’s that good that I’m foolhardy enough to bet you can’t beat it in this challenge…

The Challenge

For the sake of bragging rights or just keeping ourselves amused; using any programming language you like and any public domain (i.e. available for download) libraries you wish, try producing the same results as the following three examples, with less lines of code.

I know number of lines of code isn’t necessarily the best measure of the value of code but it became one of the main issues in the J2EE vs. .NET Petstore shootout so I figure we can follow the lead.

To set the scene, the table should be displayed in an HTML layout like;







The Table Challenge



That tag is where your table should appear (feel free to remove it – it’s another WACT tag there to make my life easier).

The example.css file mentioned above looks like;


html, body {
font-family: georgia, serif;
}

/**
Table related
*/
.data {
color: blue;
background-color: silver;
border: ridge silver;
}
.data tr {
vertical-align: top;
}

/* Real browsers only... */
.data tr:hover {
background-color: yellow;
}

.data th {
color: black;
background-color: white;
font-weight: bold;
}
.data td {
font-size: 80%;
}
.even {
background-color: Bisque;
}
.odd {
background-color: Silver;
}
.deprecated {
background-color: DimGrey;
}

/**
Pager related
*/
.pager {
font-size: 80%;
color: red;
}
.pager a:link {
color: black;
}
.pager a:visited {
color: navy;
}
.pager a:hover {
background-color: yellow;
}

We won’t count the lines of code in the above HTML or CSS.

The database schema (plus sample data) for the table “phpmodules” used in the examples can be found here.

Example 1: A Simple Table

Kicking off, this example simply shows all columns in the phpmdules table;

The PHP Script (6 lines);


setChildDataSource('MyTable',DBC::NewRecordSet('SELECT * FROM phpmodules'));
$Page->display();
?>

The template (example1.html: 2 lines);



Total Lines: 8

Here’s what it looks like:

Here’s a snapshot of the output HTML (whitespace formatted for readability);

The Table Challenge

Example 2: A Little Formatting

The first example displays a little too much information. First I want to hide the “Id”, “Url” and “Deprecated”. I also want to have the name of the PHP module link to the page in the PHP manual. Meanwhile the rows should be displayed with alternating row colors, to make it easier to read. And if a module is deprecated, I want a different, darker, row color to indicate that.

The PHP Script (19 lines);


get('Deprecated') == 'Y' ) {
return 'deprecated';
}
if ( ($rowNum % 2) == 0 ) {
return 'even';
}
return 'odd';
}
}
$Page =& new Template('/example2.html');
$Table = & $Page->getChild('MyTable');
$Table->registerDataSet(DBC::NewRecordSet('SELECT * FROM phpmodules'));
$Table->registerRowCssClassFilter(new RowColorFilter());
$Page->display();
?>

The Template (9 lines):





{$Name}




Total Lines: 28

OK it’s crept up a bit, mainly thanks to the RowColorFilter class I introduced but such is the price of meeting user requirements.

Here’s how it looks:

And a snippet of the generated HTML;

The Table Challenge

Id Name Description Url Configuration Deprecated
1 Apache-specific Functions These functions are only available when running PHP as an Apache 1.x module. http://www.php.net/manual/en/ref.apache.php
2 Array Functions These functions allow you to interact with and manipulate arrays in various ways. http://www.php.net/manual/en/ref.array.php
3 Aspell functions The aspell() functions allows you to check the spelling on a word and offer suggestions. http://www.php.net/manual/en/ref.aspell.php --enable-mailparse Y

Example 3: Paged Result Set

Now we get to the knock out… right now the table displays all the rows at once; not a good idea for load on the database plus hard work scrolling down for users. It definately needs a “pager” so we only see something like 10 rows per page.

The PHP Script (20 Lines):
(Only needed to change two lines of code…)


get('Deprecated') == 'Y' ) {
return 'deprecated';
}
if ( ($rowNum % 2) == 0 ) {
return 'even';
}
return 'odd';
}
}
$Page =& new Template('/example3.html');
$Pager = & $Page->getChild('ResultPager');
$Table = & $Page->getChild('MyTable');
$Table->registerDataSet(DBC::NewPagedRecordSet('SELECT * FROM phpmodules',$Pager));
$Table->registerRowCssClassFilter(new RowColorFilter());
$Page->display();
?>

The Template (22 lines):



First Prev ... Next Last


{$Name}




The lines of code in the template have jumped here to provide a fully customizable “pager”.

Total Lines: 42

You can now see the pager sat right above the table:

The result set pager is “Google style” (has First, Prev, Next, Last links plus links to individual pages).

Some of the generated HTML;

The Table Challenge

First
Prev
1 2
3
4
5
6

Next
Last

Name Description Configuration
Apache-specific Functions These functions are only available when running PHP as an Apache 1.x module.
Array Functions These functions allow you to interact with and manipulate arrays in various ways.
Aspell functions The aspell() functions allows you to check the spelling on a word and offer suggestions. --enable-mailparse

So that’s the challenge.

Example 1: 8 lines

Example 2: 28 lines

Example 3: 42 lines

Will be interested to see if anyone can beat it (or can be bothered).

And even if you can beat it on lines of code, will there still be a clean separation between application logic and presentation? With the above eamples you could give just hand the CSS and templates to a designer and they’d be able to radically alter the look and feel without touching any PHP.

You may also have a hard time beating these examples on performance…

Note there’s still a few things you can’t yet do with the data table tag, most editable cells (input text fields). WACT still has some fundamental changes to undergo before that’s a reality, but it’s not too far away now.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?
Name Description Configuration
Apache-specific Functions These functions are only available when running PHP as an Apache 1.x module.
Array Functions These functions allow you to interact with and manipulate arrays in various ways.