Larger Text Normal Text Smaller Text

IT 280 Web Development II, Spring 2008

Another Modularization Technique

Another approach to modularizing sites

You learned one technique for simplifying site maintenance.
It uses a template with all of the common elements and then includes specific page content.
As presented, it can be somewhat inflexible - for example, all pages have the same title.
Another approach, suitable for small sites, is more flexible, but takes more work.
The common components of the pages, such as headings, navigation menus, and footers, are saved separately and included in each page.

Advantage

Supports modularization - pages can have several standard components, such as headers, footers & sidebar menus, and each page can include customized variations.

Disadvantage

Although there is only one copy of each included file, the #include statements are repeated many times, which could lead to errors (such as typographical errors) and inefficiencies (for example, if the name of an included file is changed, all the statements will have to be changed).

Example

The general concept can be implemented in different languages. Here is an example in PHP.

File main.php

<?php include "top.txt" ?>

    <title>More PHP: Main page</title>
    <!-- Custom style -->
    <style type="text/css">
        h1 {background: yellow; color:red;}
    </style>

<?php include "nav.txt" ?>

<h1>Welcome to PHP demo</h1> 


<p>This is the home page</p>

<?php include "bottom.txt" ?>

File second.php

<?php include "top.txt" ?>

    <title>More PHP: Second page</title>
    <!-- Optional additional styles and other head elements would go here- -->

<?php include "nav.txt" ?>

<h1>Continued PHP demo</h1> 

<p>This is the second page</p>
<?php include "bottom.txt" ?>

File top.txt

This file contains all of the common information for the top of each document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <!-- Link to common stylesheet-->
    <link rel="Stylesheet type="text/css" href="sharedstyle.css">

File nav.txt


</head>
<body>

<hr />
<div class="nav"><a href="main.php">HOME PAGE</a> |  <a href="second.php">SECOND PAGE</a></div>
<hr />
<hr />

File foot.txt

<hr />
<p>Foot Foot Foot Foot Foot </p>

</body>
</html>

The example site

Comments to: chang@hood.edu

Last Modified: 08 April 2008. 07:58