Smarty - Part 3 - Creating tables and lists

[Orjan]

Content
This tutorial will be in several parts:

Part one, Installation and Setup
Part two, Smartify your Forms
Part three, Creating tables and lists
... more to come

This Part
Finally, I have the drive to write this third part of the Smarty tutorial. First, I'd say that Version 3.0 of Smarty is coming soon in a beta release, so a complete reworked Smarty will probably come in a while, more info on the Smarty webpage.
This part will be about how to easily create tables and/or lists with help of Smarty.

A basic list
You all probably know how to do a normal bullet list in HTML. With Smarty, it is as simple as it is while outputing straight from php, almost.

Your php-code:

$res = mysql_query("SELECT * FROM MyTable");
while ($row = mysql_fetch_array($res)) {
    $mylist[] = $row['item'];
}
$smarty->assign("mylist", $mylist); 

Here, we just create a normal array of the items, and assign it to smarty.

Smarty:

<ul>
{section name=myitemslist loop=$mylist}
<li>{$mylist[myitemslist]}</li>
{/section}
</ul>

This will simply create a bulleted list for you...

Ponder that you want it reversed?

<ul>
{section name=myitemslist loop=$mylist step=-1}
<li>{$mylist[myitemslist]}</li>
{/section}
</ul>

there you go, the list, but backwards. if you want every second item, just do step=2, and you know the drill I assume.

Tables
Tables is a little more complex, as you want more than one field to be shown. but not much more complex.

PHP:

$res = mysql_query("SELECT * FROM MyTable");
while ($row = mysql_fetch_array($res)) {
    $mylist[$row['id']] = $row['item'];
}
$smarty->assign("mylist", $mylist); 

Here is another, almost identical array, but now it's associated, not pure unsociative as the last one, therefore, we use the {foreach} instead of the {section} which is only for unassociative arrays. (mind that section can be used if you make an unassociative array of associatived arrays (nested))

Smarty:

<table>
{foreach from=$mylist key=k item=i}
<tr><td>{$k}</td><td>{$i}</td></tr>
{/foreach}
</table>

Now, we have a simple table here.

Advanced tables
Think that you might want to give every other row a different color, which isn't unusual. This is sooo somple.

<table>
{foreach from=$mylist key=k item=i}
<tr style="background-color: {cycle values="#eeeeee,#d0d0d0"}"> <td>{$k}</td><td>{$i}</td></tr>
{/foreach}
</table>

That's not hard, was it? If you want to apply an different class instead, well, do it with the class names instead. if you want it to be a each three rows to be marked, do a {cycle values="#eeeeee,#eeeeee,#d0d0d0"}

More comprahensive tables
Well, a table with two columns is very limited, we want more columns!

$res = mysql_query("SELECT * FROM MyTable");
while ($row = mysql_fetch_array($res)) {
    $mylist[$row['id']]['item'] = $row['item'];
    $mylist[$row['id']]['cost'] = $row['cost'];
    $mylist[$row['id']]['size'] = $row['size'];
}
$smarty->assign("mylist", $mylist); 

Now, we have a little bit more, we have the id, and we have item, cost & size to show. That's not a problem.

<table>
{foreach from=$mylist key=k item=i}
<tr style="background-color: {cycle values="#eeeeee,#d0d0d0"}"> <td>{$k}</td><td>{$i.item}</td><td>{$i.cost}</td><td>{$i.size}</td></tr>
{/foreach}
</table>

What about empty listings then?
At times, your queries might not have any results. then Smarty can handle that in a special way too.

<table>
{foreach from=$mylist key=k item=i}
<tr style="background-color: {cycle values="#eeeeee,#d0d0d0"}"> <td>{$k}</td><td>{$i.item}</td><td>{$i.cost}</td><td>{$i.size}</td></tr>
{foreachelse}
<tr><td colspan="3">No items to list</td></tr>
{/foreach}
</table>

Same with the section, but you use sectionelse instead then...

Conclusion
There are more with this if you like to, but this is at least the basics on the section and the foreach parts of Smarty. More will come about smarty in the next part, but what it will be, I don't know right now.

[debtboy]

Great Tutorial +rep

[Jordan]

Well done, Orjan! I often use your other two smarty tutorials for reference. +Rep