Creating Generic Website Branding in PHP
Ray Hunter on 2002 May 23
Ray Hunter on 2002 May 23
Have you ever had the need to create a custom look and feel for a website? Many sites today have a custom look and feel to them "branding". In this article, I will show you how to set up a generic branding for your site by using PHP
.How to create a generic website brand
Here are the steps we need to take:
1. Create a template page with all the basic navigation elements and logos that we want to have on each page. Here is an example: http://phpbugtrax.sourceforge.net/ . Just ignore the welcome part. Note the navigational links, logos, and images (branding).
2. Next, take the page and divide it into two sections. One will be for the header and the other will be for the footer. The header will be displayed at the beginning of each page and footer section at the end of each page.
3. Each section needs to be in its own file. For example, the header can be header.php and the footer can be footer.php.
4. Add the header and footer to each page on our website. This allows for branding and usability.
Easier said than done, right? Okay, let's walk through this and get it going!
Step 1
Here is the HTML file that I created for PHPBUGTRAX.
<html>
<head>
<title>PHPBUGTRAX .::. Bug Tracking System</title>
<script language="JavaScript">
<!--
function preLoad()
{
images = new Array( 'sitebg.gif', 'corner2.gif', 'logo.gif', 'tdbg.gif' );
myimage = new Array();
for( i = 0; i < images.length; i++ )
{
myimage[ i] = new Image();
myimage[ i].src = images[ i];
}
}
-->
</script>
<!-- Cascading Stylesheet -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="preLoad()">
<table style="width:100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" height="36" width="50%" class="header">BUG TRACKING SYSTEM</td>
<td bgcolor="#000000" height="36" valign="bottom" align="right">
<table bgcolor="#000000" cellspacing="3" cellpadding="3">
<tr>
<td class="link"><a href="index.html" class="link">HOME</a></td>
<td class="link"><a href="index.html" class="link">ABOUT</a></td>
<td class="link"><a href="index.html" class="link">DEVELOPMENT</a></td>
<td class="link"><a href="index.html" class="link">DOWNLOAD</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="corner.gif" width="15" height="15"></td>
<td><img src="corner2.gif" width="15" height="15"></td>
</tr>
</table>
<table style="height: 70px; width: 100%; background-color: #FFFFFF;" cellpadding="0" cellspacing="0">
<tr>
<td><img src="logo.gif"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table bgcolor="#FFFFFF" width="100%" height="100%">
<tr valign="top">
<td align="center">
<!-- START PAGE CONTENT -->
<table valign="top" cellpadding="0" cellspacing="0">
<tr>
<td class="tdhead">WELCOME</td>
</tr>
<tr>
<td class="tdbody">
PHPBUGTRAX is an advanced bug tracking system developed using PHP.
</td>
</tr>
</table>
<!-- END PAGE CONTENT -->
</td>
</tr>
</table>
<table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#FFFFFF">
<a href="http://sourceforge.net">
<img src="http://sourceforge.net/sflogo.php?group_id=34175&type=5" width="210" height="62" border="0" alt="SourceForge Logo">
</a>
</td>
</tr>
</table>
</body>
</html>
A simple HTML file. Now we move to step two.
Step 2
Create the header and footer sections from this page. Notice the two comments in the file <!-- START PAGE CONTENT --> and <!-END PAGE CONTENT -->. They are there to show us that all content for that specific section is found between them.
Step 3
Now create a header file and a footer file. Everything above the first comment <!-- START PAGE CONTENT --> belongs in header.php and everything after the <!-END PAGE CONTENT --> belongs in the footer.php.
What's next then? Set up the include parameter for the PHP parser. We are going to learn two ways of doing this. One is to modify the php.ini file and the other is to configure it at runtime.
php.ini Modification
If we have access to the php.ini file then we can modify the following lines in the file:
auto_prepend_file = <the location of header.php >
auto_append_file = <the location of footer.php >
Example:
auto_prepend_file = /var/www/html/web/template_header.php
auto_append_file = /var/www/html/web/template_footer.php
What does this do when we run PHP? The parser will insert the contents of template_header.php in the beginning of every PHP file and insert the contents of template_footer.php at the end of every PHP file that gets parsed.
Runtime modification
If we don't have access to the php.ini file there is something a little bit different we can do. We can set the runtime include path option for the parser by using some PHP functions. Why use the include path option? It is easier to specify the include path once than always passing the path with the include function.
How do we do this then? We can create a configuration file that has all the default parameters that we need. We create a file called config.php. In that file, we have the following text:
<?php
/* SITE CONFIGURATION FILE */
$SITETITLE = "PHPBUGTRAX .::. Bug Tracking System";
$SITEBRAND = "BUG TRACKING SYSTEM";
ini_set( 'include_path', '/var/www/html/web/template/' );
?>
Using the configuration file, we place all branding data for our website here. That way we can edit one area and change it everywhere in our site. Let's turn our attention to the only function in the configuration file. This is one of the numerous functions in PHP that we can use to change the behavior of the PHP parser at runtime. Check them out here: http://www.php.net/manual/en/ref.info.php.
Let's see how this function works. The function ini_set takes two parameters: string option name and string attribute. The options can be found here: http://www.php.net/manual/en/function.ini-set.php . There is a list of all the configuration options. We pass the option of include_path and the value for it /var/www/html/web/template/ to the parser. The value that we have supplied names the directory where the header and footer files are found.
Note this: When we use this runtime setup, we are only changing the value for the duration of the execution of the script. It will not change the actual value in the php.ini file. After the execution the include_path value will again have the value found in the php.ini file.
Step 4
Now we need to add the header and footer files to our web pages for the branding to take place.
Example of index.php file:
<?php
require_once( 'config.php' );
function Main()
{
/* Including the Header section */
include( 'template_prepend.php' );
echo '<table valign="top" cellpadding="0" cellspacing="0">';
echo '<tr>';
echo '<td class="tdhead">';
echo 'WELCOME';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td class="tdbody">';
echo 'PHPBUGTRAX is a bug tracking system developed with PHP.';
echo '</td>';
echo '</tr>';
echo '</table>';
/* Including the Footer section */
include( 'footer.php' );
}
Main();
?>
In the Main function, we add the include statement that names the header file at the beginning. Whatever's in header.php will be displayed followed by the echo statements and then whatever's in footer.php.
Notice that the echo statements between the include statements contain the content for the page. By following this example, you can create other pages with the same look and feel or branding.
Summary
Keep in mind that there are many ways to create branding in PHP. However, my main purpose in writing this article is to show how to do generic branding. Here is one pointer to remember: try to keep all code in the header and footer files static because, that will allow your site to run faster.
References
1. User Interface Engineering http://world.std.com/~uieweb/branding.htm
Ray "BigDog" Hunter