TNETWeather Notebook - Constructing an Included Web Page System

This series of pages is part of the TNET Weather notebook pages that demonstrate how to do various functions in a weather station environment.

Constructing an Included Web Page System

These pages show how you can create a series of included files that will enable you to build a large website with common features. The result is that you can then update sections of ALL pages, by making changes to common included files rather than having to make the changes to every page in the system every time you want a main component to change.

These examples use PHP which means you need to have PHP enable web hosting to use them.

There are 6 basic include files that are used to build a page, each of which are described in more detail further down the page (or you can use the menu on the left to jump to them:

Settings.php
common.php
top.php
header.php
menubar.php
footer.php

You can create and add new include files as well as your pages may requirement. Some examples:

Weather_math.php - File that contains various weather related math functions
Clientraw.php - File that contains parsing of clientraw data files and inclusion of their data into common arrays that then can be use by each section
JpGraph.php - Include file to source the JpGraph functions, where they are located etc on your web page

You would use those types of includes only on pages that actually needed them.

Below is a discussion of the various sections mentioned above and what their purpose is

Settings.php

This file contains the underlying configuration info used by all pages in the website. It includes a base array called $SITE. This is loaded with all common defaults you want to use for your entire website.

Example:

$SITE = array();    	
$SITE['REMOTE_ADDR'] = $_SERVER['REMOTE_ADDR'];
$SITE['REMOTE_HOST'] = $_SERVER['REMOTE_HOST'];
$SITE['WEBROOT']     = $_SERVER['DOCUMENT_ROOT'];
$SITE['REQURI']      = $_SERVER['REQUEST_URI'];
$SITE['SERVERNAME']  = $_SERVER['SERVER_NAME'];

$SITE['organ']       = 'TNET Services, Inc.';
$SITE['copyr']       = '© 1992-2007 Copyright TNET Services, Inc.';
$SITE['remote']      = "onclick=\"window.open(this.href,'_blank');return false;\"";

Any module that includes this file, can now use any of the configuration settings by simply by using the variables like:

		
global  $SITE;

echo 'The visitor is from: <b>' . $SITE['REMOTE_HOST'] . '</b> [<b>' . $SITE['REMOTE_ADDR'] . '<b/>]<br/>';

Which would look just like:

The visitor is from: [38.107.179.217]

Back to Top

common.php

As an example of other types of file includes, this example has a file called common.php. It would be a place to put common functions that you want to use in your website pages that would be common throughout the site.

The Example included is a URL function called: MkLink:

MkLink( $url, $title, $desc, $type );

The four variables are. $usr which is the URL for the link. $title which is what is placed on the URL title element, $desc which is what the link will have, and $type which a flag indicating if the page is internal or external. A 1 would make it External and a marker would be placed on the URL displayed indicating it will leave the site.

Using code like:

MkLink("http://www.mwcil.org", "MetroWest Website", "MWCIL WEBSITE", 1);

would generate browser code like:

<a href="http://www.mwcil.org" title="MetroWest Website"
onclick="window.open(this.href,'_blank');return false;">MWCIL WEBSITE</a>
<img src="/images/offsite.gif" alt=">>"/>

and the visitor would see:

MWCIL WEBSITE *EXT*

An example of this function can be found used in other sections of these sample pages such as in the menubar.php, 404.php.

top.php

The top.php file is the first output for the page. It includes all the common HTML document info such as DocType, HTML start, Meta tags, Sytle Sheet definitions etc...

This file stops just short of sending out the </head> ending element tag so that you can include (in the main page), special Javascript or other code that needs to be in the HEAD section for that specific page.

Some of the definitions in the top section are obtained from the Settings.php file

Example:

<?php
############################################################################
require_once("Settings.php");
require_once("common.php");
global  $TITLE;
############################################################################
?>
<!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" xml:lang="en" lang="en-US">
<head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
    <meta name="author" content="TNET Services, Inc." />
    <meta name="generator" content="TNET Services, Inc." />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <meta name="robots" content="noindex,nofollow" />
    <meta name="DC.title" content="TNET Services, Inc." />
    <meta name="description" content="TNET Services Inc. demonstration included file web template."/>
    <meta name="keywords" content="TNET,TNET Services Inc,TNET Weather,Arizona,web design,graphics,weather"/>
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" title="Main (screen)" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<?php
if( isset ($TITLE) ) {
    echo "<title>" . $TITLE . "</title>\n";
} else {
    echo "<title>" . $SITE['organ'] . "</title>\n";
}

The header.php file basically contains the top of the web page that you see on every page. It includes the logo for the site and in this example, a datetime stamp.

Note tha the timezone for obtaining the date and time is set in the Settings.php file.

Example:

<?php
############################################################################
require_once("Settings.php");
require_once("common.php");
############################################################################
?>

<div id="header">
    <h1 class="headerTitle">
    <a href="index.php" title="Browse to homepage" lang="en">
        <img src="images/tnet-logo01.gif" alt="TNET Services, Inc."/></a>
    </h1>       
    <div class="headerLinks">
        <? putenv($SITE['tz']); ?>
        <? echo date("D M j, Y g:i A"); ?> <?=$SITE['tzname'];?>
    </div>
</div>

menubar.php

The menubar.php file.... this is the menu used by the site. It could be used as a menu across the top of the page, or as in this example, as a menu down the left side of the page.

The menubar is one of those things that you change as you add new pages and since it is enclosed in this sample, all you need to do is edit it, and every page will get the new contents the next time they are refreshed.

Note that you could use a Javascript menuing system here as well, you just need to make sure that if there are any require Javascript libraries, they are included in the top.php file.

You can get fancy with the menubar as well, by setting a global variable before including the menubar file, you can then within the menubar highlight or do other functions based on what setting was passed.

Example:

<?php
############################################################################
require_once("Settings.php");
require_once("common.php");
############################################################################
?>
   <div id="menu-bar">
      <p class="menuBarTitle">Site Navigation</p>
        <ul>
            <li><? MkLink("http://www.tnet.com/index.php","Home Page","TNET Home Page",0); ?></li>
            <li><? MkLink("index.php","Main Page","Main Page",0); ?></li>
            <li><? MkLink("sample.php","Sample Page","Sample Blank Page",0); ?></li>
        </ul>
        <br/>
        
      <p class="menuBarTitle">Jump Links</p>
        <ul>
            <li><? MkLink("/index.php#Settings","Settings","Setting File",0); ?></li>
            <li><? MkLink("/index.php#Top","Top","Top File",0); ?></li>
            <li><? MkLink("/index.php#Header","Header","Header File",0); ?></li>
            <li><? MkLink("/index.php#Menubar","Menubar","Menubar File",0); ?></li>
            <li><? MkLink("/index.php#Footer","Footer","Footer File",0); ?></li>
            <li><? MkLink("/index.php#Content","Content","All Together",0); ?></li>
            <li><? MkLink("/index.php#Other","Other","Other files used",0); ?></li>
        </ul>
        <br/>       
    </div>

Note the use of MkLink function for the links... this was obtained from the Settings.php file

This file contains the bottom of the displayable page for every page. It could contain page counters, validation information or other code that needs to be on every page

Example:

<?php
############################################################################
require_once("Settings.php");
require_once("common.php");
############################################################################
?>
<div id="footer">
    <div class="left doNotPrint">
        <a href="http://validator.w3.org/check/referer">Valid XHTML 1.0</a> |
        <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a> 
    </div>

    <div class="right">
        Modified: <?php echo date("F d Y H:i:s", getlastmod()); ?> MST
        <br/>
    </div>
</div>
</body>
</html>

Putting it All Together

Now you can put all the above together into a page by including the various files into a complete page.

Below is the source of the sample page showing all the sections above put into a single page

<?php
############################################################################
# A Project of TNET Services, Inc.
############################################################################
#
#   Project:    Sample Included Website Design
#   Module:     sample.php
#   Purpose:    Sample Page
#   Authors:    Kevin W. Reed <kreed@tnet.com>
#               TNET Services, Inc.
#
#   Copyright:  (c) 1992-2007 Copyright TNET Services, Inc.
############################################################################
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
# as published by the Free Software Foundation; either version 2
# of the License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software
# Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA
############################################################################
require_once("Settings.php");
require_once("common.php");
############################################################################
$TITLE="TNET Services, Inc. - Sample Blank Page";
include("top.php");
############################################################################
?>
</head><body>
<?php
############################################################################
include("header.php");
############################################################################
include("menubar.php");
############################################################################
?>

<div id="main-copy">
    <div id="top" class="boxLighter">
    
	<h1Sample Blank Page>		    
    
    <p>This is a sample Blank Page</p>

    <p> </p>
    </div>
</div>
<?php
############################################################################
include("footer.php");
############################################################################
# End of Page
############################################################################

You can see the above in action by using the following link:

Sample Page

Back to Top

Other Files Used in This Sample

Also used in these sample pages are

screen.css
The external CSS Style sheet used for these example pages.
images directory
Contains any images used by these example pages
404.php file
A page used to redirect 404 and 403 errors to. Uses the same structure used by these example pages to provide an additional example.
.htaccess file Used to redirect the error to the 404.php page. You would need to create this file for this to work. It would Contains the following assuming your pages are in the root of your webspace:
```
ErrorDocument 401 /index.php
ErrorDocument 403 /index.php
ErrorDocument 404 /404.php  	
		
```

Use of this material, examples

These scripts and included examples are free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

Inclusion of a credit link on your pages would be greatly appreciated:

Possible Credit Link:
Based partially on code provided by TNET Services, Inc. - http://www.TNETWeather.com

Support

As this is free software under the terms and conditions listed above, there is no support for this code for non-clients. However, if you have questions about the code, you can send email to the following email address, and if time permits, I will respond.

weather@tnetweather.com

If you are looking for paid client support for this or other items, please contact:

support@tnet.com

Back to Top

Download Source Code

The source code is built to be relative so that if you create a subdirectory on your currentw website and unpack the contents, you will have a self-contained website that will not interfer with your current website

There are two versions, a Zip version and a Tar gzip'd version. Both contain the same source code in tab 4 format.

Please refer to Use of this Material above for copyright and other related info.

Download inclusion-example.tar.gz *EXT*

Download inclusion-example.zip *EXT*