Partial URLs - A Learning Experience

As my technical skills have grown over the years, so has my common sense approach to solving the technical problems which I encounter in my work. If I seem to be working too hard on a particular bit of code, my history has proven that there is likely an easier (better) solution than the one I am currently working at. I usually take a step back, reexamine what it is I am trying to accomplish, and look for the easier solution. This common sense approach to solving my problems has served me well over the years.

Of all the times when I really should have applied this simple bit of logic, I can think of no better illustration than my cumbersome method of implementing Server Side Includes (SSI) in templates. Specifically, my method for defining links which need to be included in multiple pages.

Path to Root

Let’s take a look at the implementation of SSIs within a site. To be more specific, let’s examine the options you have for creating working links within a navigation SSI. The issue with links in an SSI has to do with nested directories. If you are dynamically including a set of links, relative urls will be defined “relative” to the file in which they have been included. Pages which exist outside of root (pages that reside in their own folders in other words) need a different path to root than those that exist directly within root.

My Method - Variable Definition

My method involves (used to involve I should say) setting a server side variable to equal the path to root. That is, I would point this variable to the root of my website, and prepend it to the links in my SSIs. While I was using this solution I thought it was rather clever. You’ll soon see that there is a much cleaner and efficient solution.

At the top of each page which will contain the server side include, I would set a variable to equal the path to my site root. For example, if the page I was adding my navigation include to existed in a sub directory, my path to root variable would look something like this:

1. <?php $rootPath = "../"; ?>

And my server side include might look like this:

1. <div id="main-navigation">
2. <ul>
3. <li id="contact"><a href="<?php echo $rootPath;?>contact.php">contact</a></li>
4. <li id="about"><a href="<?php echo $rootPath;?>about.php">about</a></li>
5. <li id="home"><a href="<?php echo $rootPath;?>">home</a></li>
6. </ul>
7. </div>

Though this option worked for me on more than one occasion, it is not very elegant. Let’s take a look at the approach I should have been taking all along.

The Better Option - Partial URLs

This option makes the previous option look silly. I have been making web pages since 2000, and it was only 2 months ago that I learned about this option. I have read numerous books, and I’ve lived web design for the past 3 years. You would think I should have known that, when writing your href value, if you want to start at root, all you have to do is begin with a forward slash. To illustrate:

1. <div id="main-navigation">
2. <ul>
3. <li id="contact"><a href="/contact.php">contact</a></li>
4. <li id="about"><a href="/about.php">about</a></li>
5. <li id="home"><a href="/">home</a></li>
6. </ul>
7. </div>

The same holds true for images, media, etc. It is as easy as that. Just place a forward slash in front of your links, images, CSS, or JavaScript, and those links, images, etc, will be resolved relative to the site root.

So, Ask Yourself …

I attended a conference a long time ago, and the keynote speaker stated more than once throughout his talk:

You want to work smarter, not harder

If you want to work smarter and not harder, ask yourself if your solution to the problem at hand is the best solution. If you think you are working too hard, step back and take another look at what you are trying to accomplish. You might be surprised by the results.