Writing view scripts

by Naneau

A substantial part of my time I spend looking at other people’s code, for various reasons. Sometimes it’s just to figure out how others have solved a problem I am facing, and other times I’m trying to figure out why something doesn’t work. There has a growing focus on coding standards for a while now, and people are even adhering to them ;) .

Modern editing software will auto-indent your code, put a docblock in front of your functions, and do a lot of other useful things that make your code easier to read. But there is one area that is often overlooked: templates. Whether you use a “real” templating engine, or just mix blocks with html, templates have a tendency of getting messy.

When I started this blog, a few months ago now, I thought it would be nice if I created my own wordpress theme. I started out by looking at other people’s themes, and tried to edit them, this proved to be difficult. It shouldn’t have to be that hard. By using just a few rules, your code will be easier to read, and therefore easier to maintain.

A few simple rules

For instance, when using PHP in your templates/views, use the alternative syntax for control structures. Brackets really lose their meaning after ten lines of HTML, and you can’t tell the closing bracket from an if-statement apart from the closing bracket of a foreach-statement.

Also, indentation matters. It matters a lot. I don’t care how you indent, really, but please, be consistent. Either let your control structures define indentation, or let the HTML be boss, just don’t let them both indent. Personally, I only indent HTML, and make the control structures match the level they output. This is counter-intuitive for someone with a coding background, and took me a while before I got used to it. The point it is that you can immediately see the resulting HTML from looking at the code that produces it. Spotting missing closing tags, and other common problems, gets easier.

One of the reasons you write templates and/or view scripts is to separate logic from design. Especially those of us with a bit of experience in writing code, sometimes find it hard to get rid of all logic. I force myself to put all “code” on a single line, unless I really can’t. Even though it may not guarantee a complete separation, I find it difficult to define any real logic on only one line ;) .

Example

As a simple example I have put together a foreach-loop for which the output depends on a variable ($someCondition). It’s a common situation, that I’m sure you’ve seen before. The HTML output is an unordered list, with a paragraph inside the list elements.

Regular syntax with brackets and indentation over HTML and the control structures. I edited it a bit, but it comes from a real-life template:

1
2
3
4
5
6
7
8
9
10
11
12
<?php if ($someCondition) { ?>
    <ul>
        <?php foreach ($someVar as $item) { ?>
             <li>
                <p>
                    <span class="name"><?php echo $item->name ?></span>
                    <?php echo $item->description ?>
                </p>  
             </li>
        <?php } ?>
    </ul>
<?php } ?>

Alternative syntax, indentation over HTML only:

1
2
3
4
5
6
7
8
9
10
11
12
<?php if ($someCondition) : ?>
<ul>
    <?php foreach ($someVar as $item) : ?>
    <li>
        <p>
            <span class="name"><?php echo $item->name ?></span>
            <?php echo $item->description ?>
        </p>  
    </li>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

While my code-coloring plugin doesn’t do it justice, it is easier to read. For instance, if you look at the bottom, you will notice there was an if that started the <ul>, and right above the <?php endforeach; ?> there’s the </li>. When your templates grow this becomes ever more useful.

While I don’t want to tell you how to do your job, I would like to stress the point that templates have always been overlooked when it comes to coding standards. It doesn’t matter how you do it, but please take some time making your code easy to read for others.