This is the first of several articles covering a method of making long-term web development easy. The series will not cover databases.
Layout
Personally, I don’t like seeing “.php” at the end of every URL I go to. It makes the experience that much less organic. Any website I develop now uses index files in subfolders so that the public never has to see the extension. It may seem picky, but I have come to find that details can make or break a website.
With that in mind, I always start with the same folder structure. It’s simple and logical. The blank index.htm files protect against directory browsing if a server allows it.
- ROOT
- assets/
- css/
- all.css (clears browser defaults)
- globalscreen.css
- globalprint.css
- index.htm (BLANK)
- flash/
- index.htm (BLANK)
- images/
- index.htm (BLANK)
- js/
- index.htm (BLANK)
- phpincludes/
- global.php
- index.htm (BLANK)
- pngfix/ (adds IE6- PNG support)
- iepngfix.htc
- blank.gif
- index.htm (BLANK)
- index.htm (BLANK)
- css/
- favicon.ico
- favicon.png
- index.php
- robots.txt
- assets/
The Bank
The true heart of this system is global.php inside the phpincludes folder. It acts a bank for things that are often accessed throughout a website. Each page in the site includes it in its processing before anything else is done. Being a small article in itself, I will try to explain the global.php idea briefly.
Before I ever begin the design process, I setup a backend. I ask myself, “What will be needed on almost, if not all pages in this site?” Usually, a universal title (in the browser’s top-bar) is shared on every page along with a secondary description of each respective section. Meta-data is often universal as well.
Let’s set some variables.
<?php
$globalTitle = "JuiceEmedia";
$globalSeparator = " // ";
$globalTitleAppend = "";
$globalMetaDescription = "JuiceEmedia is a professional web design and development company based in Southwest Michigan.";
$globalKeywords = "web design,web developer,michigan";
The global title (GT) is self explanatory. It will appear on every page as the first thing in the titlebar. The global separator (GS) comes after the GT and before each individual page’s title. The global title append variable comes after everything else in the titlebar. These variables are put together (with independent titles) in this function:
function titleBar($currentTitle) {
global $globalTitle,$globalSeparator,$globalTitleAppend;
echo $globalTitle.$globalSeparator.$currentTitle.$globalTitleAppend;
}
$currentTitle is included from each page when the function is called. (Individual pages will be covered later) The global function makes the variables defined after it accessible within the function. In a production environment, each variable’s existence is checked to avoid error messages but I won’t overcomplicate things right now.
Another function, this time for meta-data, is defined using the same concept:
function globalMeta() {
global $globalMetaDescription,$globalKeywords;
?>
<meta name="description" content="<?php echo $globalMetaDescription; ?>" />
<meta name="keywords" content="<?php echo $globalKeywords; ?>" />
<?php
}
Individual Page Use and Introduction to the Level System
Each page has the same basic code snippet before any HTML begins.
<?php
// level = 1 (root), 2 (one folder up), 3 (two folders up), etc.
$level = 1;
$slashes = str_repeat('../', $level-1);
include $slashes.'assets/phpincludes/global.php';
$thisTitle = "Home";
?>
As you can read in the PHP-comment, $level relates to how far a given page is away from the site’s root. $slashes is used to put in front of the global include so that all you have to do is change a number when you want to use relative URLs. $thisTitle pertains to that page’s individual title and is called within the <title> tags like this:
<title><?php titleBar($thisTitle); ?></title>
Since the global.php file has been included, the titleBar function can be called. Meta-data is added to the page right after the title like this:
<?php
globalMeta();
?>
In the next article I will cover global CSS and more.