Building a Bug Tracker: Template Groundwork
In parts one and two of the Building a Bug Tracker, we got our infrastructure setup - our weblog, our path.php variables, and our custom groups. We’ve also added some entries to our Bug Tracker so that we have some data to work with as we do the real core of the work - building the templates.
So now it’s time to decide is what template to use for the Bug Tracker. For this tutorial, I decided to go with the Liquid two column layout from Floatutorial. This is a nice, clean, simple layout that is really easy to build on top of.
This particular entry is going to be a bit longer than previous articles. The reason for this is that we’re doing the real work of getting recurring elements into Embeds and User Defined Global Variables. This will let us quickly churn out the templates we need for use throughout our Bug Tracker.
Shall we begin?
With any template, you’re going to want to split out the recurring elements into variables and embeds. This makes editing these elements much easier down the road - edit in one place, and the change is reflected across the site.
One of the first things to do is to set up a template group for those recurring elements. For this tutorial, we’ll use a template group called “inc”. It would be good to create the “inc” template group before continuing.
You’ll also want your stylesheet setup. So, create a CSS Template and call it “bug_tracker_css” - paste your CSS into it. We’ll call this later, in our head template.
For your Doctype and HTML declaration, you can choose an Embed or a User Defined Global Variable. I prefer a User Defined Global Variable here since it does not need to parse PHP or EE code, At the top of your Templates screen, choose “Global Variables” and create a new global variable called html_begin and place this code in it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
It’s also good to have a quick and easy way to close off the HTML pages. So make another global variable called html_end and put this in it:
</body>
</html>
Down the line, if you decide to add code at the bottom of your page - such as statistics tracking code, it will be easy to add it to every page by modifying only a single global variable.
These variables will be called, at the very top and very bottom of your template, with {html_begin} and {html_end} respectively.
Now, there are a few other recurring elements that we’ll want on all of our Bug Tracker pages. These include the head element, the top banner, the left navigation, and the footer. Let’s take these final steps and get this setup for pushing out more Bug Tracker Pages.
In your inc template group, create 4 new Web Page templates. Call them:
.head
.banner
.leftnav
.footer
The leading period indicates a Hidden Template - an easy way to disallow direct access to the template so that it can only be displayed via embeds.
First, let’s get a head element added to our template. Open up the index template and add this code:
{embed="inc/.head" title="Bug Tracker"}
In inc/.head, place this code:
<head>
<title>{embed:title}</title>
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet="{bug_tracker_template_group}/bug_tracker_css"}" />
</head>
This gives you a hint, also, that we’ll be Passing Variables through the Embed tag.
It’s time to move the code for recurring elements from the index template into embeds, and call those embeds. Move:
<div id="top">
<h1>Bug Tracker</h1>
</div>
into inc/.banner and replace that area in the index template with:
{embed="inc/.banner"}
Move:
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
into inc/.leftnav, and replace that area in the index template with:
{embed="inc/.leftnav"}
and finally, move:
<div id="footer">
Footer
</div>
into inc/.footer and replace that area in the index template with:
{embed="inc/.footer"}
Once all of this work is done, the main index template looks like this:
{html_begin}
{embed="inc/.head" title="Bug Tracker"}
<body>
<div id="container">
{embed="inc/.banner"}
{embed="inc/.leftnav"}
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
{embed="inc/.footer"}
</div>
{html_end}
and the rendered template should look like the original template that you started with. We have added the doctype, head element, and body element, as well as closing those off. Other than that, we haven’t removed or added to the template - we’ve simply moved pieces around around so that we have a good basis for growing the Bug Tracker.
