Building a Bug Tracker: Structuring the Navigation
Before we begin building the rest of our templates, what we’ll want to do is take a deep breath and think about our Bug Tracker’s structure.
In my experience there are two ways to approach this:
1. Plan out the navigation, then build your structure according to that or,
2. Build the structure, then figure out how to create navigation that makes sense.
A Bug Tracker is a fairly specific application that has straightforward needs. As we’re using a simple template, with only a left menu, we can already see that navigation needs be simple and easy to use.
This particular article is going to hint at some of the upcoming features of the Bug Tracker, since we’re going to add some links right now.
In Template Groundwork we set up a template, in our inc group, called .leftnav.
This is where you get a hint of what’s to come. We’re going to set up a list of links in .leftnav that will ultimately do Really Neat Things. The .leftnav template will now look like this:
<div id="leftnav">
<h3>Filter By</h3>
<ul>
<li><a href="#">Status</a></li>
<li><a href="#">Severity</a></li>
<li><a href="#">Version</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Reported by</a></li>
<li><a href="#">Assigned To</a></li>
</ul>
<h3>Search and Report</h3>
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">Report</a></li>
<li><a href="#">Your Reports</a></li>
</ul>
<h3>Subscribe</h3>
<ul>
<li><a href="#">RSS</a></li>
<li><a href="#">Atom</a></li>
</ul>
</div>
This gives us a basic setup for our navigation. Those filtering options aren’t really appropriate as direct links, so we’ll work with those later as we add each one as a real option.
The reason, in this series, that I’ve chosen to go with Navigation first is that it gives us a real map of what functionality we want to handle, and it becomes very easy to use that navigation as a checklist for what we have actually implemented. This will help us to stay on track and focused on completing a Bug Tracker that is extremely versatile in its filtering and sorting, and output options.
