1. More about sections

As we mentioned in the introduction, sections are used to display lists. In ordinary programming languages the programmer may choose one of the classical loops, such as for or foreach. However, they were designed to be universal and in templates, their simplicity is the source of troubles due to a lot of technical stuff we have to deal with. Suppose we have an array with the content we would like to display, but in reversed order. There are many ways to do this:

$cnt = sizeof($array);
for($i = $cnt1; $i >= 0; $i--)
{
   echo display_element($array[$i]);
}

Or we can use array_reverse() function:

foreach(array_reverse($array) as $i => $data)
{
   echo display_element($data);
}

It is not a problem, if this is just one list. But in templates, there are dozens of lists; actually it is one of the most commonly used features we would like to have. Looking at the source code of an algorithm written in PHP or C it is hard to say, what it does and how without a detailed analysis. Templates are the same. Using many loops overloaded with implementation details lead to a messy code which is hard to read and modify. We could copy and paste many code snippets from one place to another, but this means we need to rewrite the loops, because too many things are left to the programmer.

Obviously, we need something new to display lists and OPT gives us such a tool: sections. They attempt to hide as many unnecessary details, as possible, making writing templates faster and more efficient (plus, OPT applies more precise optimizations that humans do).

Let's take a look, how a simple section in a template looks like. We can use it to display a list of news in our administration panel.

<table class="list">
 <thead>
  <tr>
   <th>#</th>
   <th>Title</th>
   <th>Date</th>
   <th>Options</th>
  </tr>
 </thead>
 <tbody>
  <opt:section name="items">
   <tr>
     <td>{$items.id}</td>
     <td>{$items.title}</td>
     <td>{$items.date_formatted}</td>
    <td><a parse:href="'/news/edit/'~$items.id">Edit</a></td>
   </tr>
  </opt:section>
 </tbody>
</table>

That's it. As we can see, section declaration is very simplified. All we have to do is to give it a name. The content of opt:section tags describes the layout of a single list element. The element variables are available through the special construct $sectionName.elementVariable. In templates, we do not consider, where the section takes the data from, what they are and how to cooperate with other sections. OPT encourages us to leave such details to the script and do not bother with them on the template side. We can notice that such section can be copied without any problems to other places thanks to the generality. Displaying the data in the reversed order is also possible:

  <opt:section name="items" order="desc">
   <tr>
     <td>{$items.id}</td>
     <td>{$items.title}</td>
     <td>{$items.date_formatted}</td>
    <td><a parse:href="'/news/edit/'~$items.id">Edit</a></td>
   </tr>
  </opt:section>

To hide the table, if the list does not have any elements, we can use opt:show:

<opt:show name="items">
<table class="list">
 <thead>
  <tr>
   <th>#</th>
   <th>Title</th>
   <th>Date</th>
   <th>Options</th>
  </tr>
 </thead>
 <tbody>
  <opt:section>
   <tr>
     <td>{$items.id}</td>
     <td>{$items.title}</td>
     <td>{$items.date_formatted}</td>
    <td><a parse:href="'/news/edit/'~$items.id">Edit</a></td>
   </tr>
  </opt:section>
 </tbody>
</table>
<opt:showelse>
 <p>Sorry, no elements.</p>
</opt:showelse>
</opt:show>

We pack the whole table to opt:show. The new tag also takes over the attributes from opt:section, which marks just a place that will be iterated now.

Once more we emphasise: moving the attributes from opt:section to opt:show is very important. Without it, OPT would make a separate section from it, instead of linking it with opt:show.