www.themetallian.com
home
metal
rpgs
tech
misc
How This Site Works


When I started building this website, the basic idea was to build it dyamically without making it look dynamic. You see, a lot of dynamic sites suffer from "ugly query string syndrome." Since one or more scripts (or Java Servlets, or whatever) usually accept a few parameters and use them to determine what content to display and how to display it, these sites tend to have a bunch of links that look like this: http://www.mydomain.com/index.asp?section=9&content=123456&style=7. Sure, it's efficient (because there's just one script to take care of all of the repetitive page elements, and you only need to change one file to make site-wide changes), but nobody wants to look at that. People are less likely to follow a link like that, because it's not eye-catching, and it doesn't indicate what's on the other end. People are certainly not likely to remember it. I also hear that some search engines will not spider links like that, because they only accept links that end in ".html," ".htm," or the like.

On the other hand, a link like this: http://www.themetallian.com/metallian/metal/generators/diolyrics.html looks much cooler. It's pretty easy to infer that it leads to a metal page, and that it probably contains either a random Ronnie James Dio lyric generator or information about an amazing new power source that runs on copies of "Holy Diver." It's unlikely to be a front for Doubleclick, or to redirect you to a porn/gambling/news portal site. You'll probably get what you're looking for, and you might even remember the url if you forget to bookmark it.

So, since aesthetically pleasing links were one of my design goals, I had to sacrifice some efficiency. As it's not a big site, and I'm not running a business or anything, that's okay. Still, I wanted it to be somewhat scalable and easy to maintain...after all, if it's a pain in the ass to maintain, I'm unlikely to update or change it very often.

Fake File Extensions


The first thing I did was put the following line in in my .htaccess file:

AddType application/x-httpd-php .html .htm .php

That basically tells Apache (the web server), to treat files with the .html, .htm, or (obviously) .php, extensions as PHP files. So, while a file may look like a plain old .html file, it's actually a PHP file, with code, includes, and all that good stuff. I did this because I find that links to static html pages tend to be less likely to be broken or to redirect me to something unexpected. I want my site to apear that way to others.

Pointer Pages


These files with .html extensions are basically just "pointer pages" that do nothing but look pretty in the address bar and include the important stuff. The pointer page for this page looks like this:

about_this_site.html :

<?php

/*
Every pointer page includes a master file that defines a bunch of universally-important variables. That way I don't have to define them on every page, and any change to the master file will be reflected in all of the pages.
*/


include($DOCUMENT_ROOT."
[the path to the master file]");

/*
The variable $PAGE_CONTENT tells the template what content to stick in the main "box", as opposed to the stuff on the top, left, or bottom. That stuff stays the same on most pages, but the content is always different.
*/


$PAGE_CONTENT = $MYDOCUMENT_ROOT."/content/tech/about.php";

/*
The variable $PAGE_SECTION defines what section of the site this page is in. It is used to determine which section name should be highlighted (with bigger flames) on the left side, and it is used on the links page (there's only really one links page, but several pointer pages use it as $PAGE_CONTENT) to determine what kind of links to pull out of the database.
*/


$PAGE_SECTION = "tech";

$PAGE_TITLE = "The Metallian's Lair - How This Site Works";

/*
The variable $PAGE_TEMPLATE points to the appropriate template to use. A template defines the basic page structure, where all of the "boxes" go, where they are in relation to one another, how they are positioned, etc. It accepts variables (like $PAGE_CONTENT) to determine what to stick in the various boxes. The "printable version" of a given page is really just the same content using a different template (as well as a different stylesheet, different table widths, etc.).
*/


include($PAGE_TEMPLATE);

?>


The Master File


I created one file to hold all of the important site-wide variables and functionality. It is included by every pointer page (see above), and it looks a little something like this (passwords, code and other sensitive information changed to protect the innocent):

master.php :

<?php

/*
This file defines the basic variables used to represent page components, like the stylesheet, the template, the left navigation, etc. Since the vast majority of pages will use the same page components, only differing in the $PAGE_SECTION and the $PAGE_CONTENT, I set some default values so I don't have to set them in every pointer page except in the rare cases that they differ.
*/


$MYINCLUDE_ROOT = "
[the directory that contains all the good stuff - i.e., not pointer pages]";
$MYDOCUMENT_ROOT = $DOCUMENT_ROOT.$MYINCLUDE_ROOT;

$PAGE_TITLE = "The Metallian's Lair";
$PAGE_STYLESHEET = $MYINCLUDE_ROOT."/styles/main_styles.css";
$PAGE_LEFT = $MYDOCUMENT_ROOT."/left/main_left.php";
$PAGE_TOP = $MYDOCUMENT_ROOT."/top/main_top.php";
$PAGE_CONTENT = $MYDOCUMENT_ROOT."/content/home/home_main.php";
$PAGE_BOTTOM = $MYDOCUMENT_ROOT."/bottom/main_bottom.php";
$PAGE_SECTION = "home";
$PAGE_TEMPLATE = $MYDOCUMENT_ROOT."/templates/main_template.php";

/*
Various pixel widths and things...the templates use this stuff to dynamically determine the thickness of the borders, the size of different components, the space between the different components, etc. It's set up to "squeeze" the content area when it needs more room for thicker borders or whatever.
*/


$BORDER_THICKNESS = 1;
$CELLSPACE_THICKNESS = 5;
$CONTENT_MARGIN_THICKNESS = 5;
$PAGE_WIDTH = 764;
$TOP_WIDTH = 764-($BORDER_THICKNESS*2);
$LEFT_WIDTH = 134;
$CONTENT_WIDTH = $PAGE_WIDTH-$LEFT_WIDTH-($BORDER_THICKNESS*2)-($CELLSPACE_THICKNESS)-($BORDER_THICKNESS*2)-($CONTENT_MARGIN_THICKNESS*2);

/*
2 left nav borders, 1 space between the left nav and the content, 2 content borders, 2 content margins
*/


$BOTTOM_WIDTH = 764-($BORDER_THICKNESS*2);

/*
There were some database access variables here. Snipped for security purposes.
*/


/*
Any page that is viewed with "printable=yes" in the query string will automatically use a different stylesheet, template, top nav, and page width. Obviously, I'm not going to make an actual "printable version" of every page, or even a different pointer page for every page, because they'd be almost identical and it'd be annoying. Better just to read the query string and decide whether or not to put a different set of "clothes" on the content.
*/


if ($printable == "yes") {
$PAGE_STYLESHEET = $MYINCLUDE_ROOT."/styles/print_styles.css";
$PAGE_TOP = $MYDOCUMENT_ROOT."/top/print_top.php";
$PAGE_TEMPLATE = $MYDOCUMENT_ROOT."/templates/print_template.php";
$PAGE_WIDTH = 520;
$CONTENT_WIDTH = 520;
}

/*
Handles login via the database, sets user data into an array, which is serialized and jammed into a session cookie
*/

if ($action == "login" && $username && $password) {
/*
Code snipped for security purposes
*/

}

if ($action == "logout") {
/*
Also snipped for security purposes. Basically just unsets the cookie and any related variables
*/

} else {
/*
Also snipped for security purposes. Looks for the cookie, and if it exists, it unserializes the array and sticks it in a variable that can be easily accessed by individual pages.
*/

}

?>


Anyway, that's basically it. Now I can create an entirely different look and feel (replace the top image with a different logo, put the main navigation buttons on the top or on the right, swap out black for white, red for pink, and my normal font for some kind of fancy script, etc.) simply by creating a new stylesheet (with the same style names, of ocurse) and template, and changing the master file so it uses them as the new default settings. That's how the printable version of this page works, except it's not the "default" setting. If I want to add a new section to the left-side navigation menu, I only need to change one file, which is included in every page via the template. The site is easier to change and maintain, and therefore I'm (at least theoretically) more likely to actually work on it.

Of course, I am left with a bunch of "pointer pages," and if I wanted to, say, change the location of the master file, I'd have to go and change each and every one of them. It would have been more efficient to build one pointer page and have it use a query string to determine which content, section, template, etc. to use, but then my site would suffer from "ugly url syndrome," and I can't have that.

Copyright © 2002 The Metallian
Click here for a printable version of this page