Working smarter: Building expandable, modular websites
From experience, clients who commission DigiKev to build a small website solution, perhaps even just a mini site with a handful of pages, at some point in the future may require additional pages or sections to be added. Larger websites with a multitude of information and complex structures will more than likely require expansion or remodelling of the configuration to accommodate a new campaign style or to work more efficiently for search engine optimisation after studying the analytics.
Building websites that are to expand using a modular structure is the best way to accommodate this. No matter what size the website is, building a modular based website will save a lot of time and money in the future. So how is this done? Even with little or no server side coding knowledge it is possible to make life a whole lot easier using some very nifty server side controls to build a modular template for the whole website.
This post will assume knowledge of building static HTML web pages and will mainly benefit those that have no prior knowledge of using PHP or ASP.NET to build a website.
Firstly take a look at a simple open source solution that can be run on Linux, Apache or other equivalent server. You do not require a database to run this, all I am going to use is some very simple PHP includes which will allow the HTML web document to be broken down into different modules so that the content of a page is separated from menus, the Head tag and other parts of the website which will be accessed by several pages. For a mini site this may only be used for one page but you will be able to see the scope for expansion.
Firstly I will separate the opening HTML tag, Head and opening Body tag into its own document. Nothing special need be done here, as soon as you write the opening Body tag save the file as header.php.
Next we will create the main menu. In a new file we begin the next line after the Body tag which we opened in header.php. I have opened up a containing Div, added in the markup for the menu and left the containig Div open in this particular file. Save this file as menu.php.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New website</title>
</head>
<body>Rather than moving on to the next markup that will appear after the menu, we will now skip right down to the footer which will incorporate the copyright statement, quicklink menu items and the closing container Div, Body and HTML tags. Save this document as footer.php.
<div id="container">
<div id="menu">
<ul>
<li class="home"><a href="index.php" title="home" accesskey="1" tabindex="1">Home</a></li>
<li class="about"><a href="about.php" title="about" accesskey="2" tabindex="2">About</a></li>
<li class="shop"><a href="shop.php" title="shop" accesskey="3" tabindex="3">Shop</a></li>
<li class="sitemap"><a href="sitemap.php" title="sitemap" accesskey="4" tabindex="4">Sitemap</a></li>
<li class="contact"><a href="contact.php" title="contact" accesskey="5" tabindex="5">Contact</a></li>
</ul>
</div>Now that we have the header, the menu and the footer that will be consistent on each page we can now call each of these elements to each new page that is created in order to complete our HTML document. This is easily done with PHP includes which are written in the following example. The header first, followed by the menu and then the markup for the particular page being worked on. This is then all closed by calling the footer. Save this file as index.php so that it becomes your home page.
<body>
<div id="footer">
<ul>
<li class="copyright">© Copyright 2008. All rights reserved</li>
<li class="home"><a href="index.php" title="home" accesskey="1" tabindex="6">Home</a></li>
<li class="about"><a href="about.php" title="about" accesskey="2" tabindex="7">About</a></li>
<li class="shop"><a href="shop.php" title="shop" accesskey="3" tabindex="8">Shop</a></li>
<li class="sitemap"><a href="sitemap.php" title="sitemap" accesskey="4" tabindex="9">Sitemap</a></li>
<li class="contact"><a href="contact.php" title="contact" accesskey="5" tabindex="10">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
This should give you a taster of how to markup a page with PHP includes. Any element that is going to be duplicated over multiple pages can be written into a separate document and called from an include. Any changes that are then made to these files will reflect site wide without unnecessary repetition.
<?php
include("header.php");
include("menu.php");
?>
<div id="content">
<!-- Add page markup here -->
</div>
<?php
include("footer.php");
?>
In the next part I will take you through ASP.NET master pages and how these can be used to template a website in an even more powerful way than you have witnessed here with PHP includes.
Liked this post? Subscribe to my RSS feed to keep up to date on my other posts.
Tags: asp.net master pages, modular websites, PHP includes, Web design, working smarter
This entry was posted on Friday, May 2nd, 2008 at 10:35 pm and is filed under Web design, Web development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Loading... 
