Setting up the Foundation for an Extensible Website Engine with PHP 5 - Creating a simple template file (
Page 3 of 4 )
After showing you how each one of the different website sections will look, it's time to translate the respective screen shots to functional (X)HTML code. Since I want the aforementioned website to have a consistent appearance across different pages, all the corresponding web documents that will integrate into the site will be generated from a single template file.
Having said that, here is the structure of the mentioned template file, which I called "default_template.htm." It is responsible for building up the three-column layout that you saw previously.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>{title}</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
</head>
<body>
<div id="header"><p>{header}</p></div>
<div id="navbar">
<ul>
<li><a href="index.php?pageid=2">PROFILE</a></li>
<li><a href="index.php?pageid=3">PRODUCTS</a></li>
<li><a href="index.php?pageid=4">SERVICES</a></li>
<li><a href="index.php?pageid=5">CUSTOMERS</a></li>
<li><a href="index.php?pageid=6">CONTACT</a></li>
</ul>
</div>
<div id="leftcol"><p>{leftcolumn}</p></div>
<div id="centercol"><p>{centercolumn}</p></div>
<div id="rightcol"><p>{rightcolumn}</p></div>
<div id="footer"><p>{footer}</p></div>
</body>
</html>
Definitely, there are many interesting things to note regarding the template file listed above. First, notice the inclusion of the typical placeholders that eventually will be filled with real data, obviously coming from a database table. In this case, I opted to code the corresponding placeholders by using a couple of curly braces as delimiters, but you can use other characters for that.
In addition to creating the generic structure for all the web documents that compose the dynamic website, I moved all the CSS declarations to an external file, as you do usually when building your own websites. However, there's still one thing I want you to pay attention to here. Do you see how each of the links that are part of the main navigation bar contains a "pageid" variable, which is passed via the query string?
You guessed right! Based upon the functionality provided by this single parameter, each time a main link is clicked, a new web document will be generated on the fly. In this way we implement the so-called "dynamic" feature that I explained right at the very beginning of this article.
Although this approach for generating web pages dynamically is well known among experienced developers, the truth is that if you wish to start quickly building database-driven websites, the method I'm developing here is pretty straightforward and generally it's easy to implement with minor problems.
Now, returning to the definition of the "default_template.htm" file that you learned before, its signature would be rather incomplete if I didn't show you the respective CSS file attached to it. Here is the full listing for the CSS declarations included inside the previous template file:
/* body */
body{
padding: 0;
margin: 0;
background: #fff;
}
p{
font: bold 14pt Arial, Verdana;
color: #000;
margin: 0;
}
/* header section */
#header{
height: 100px;
background: #3cc;
}
/* navigation bar section */
#navbar{
height: 35px;
background: #3cc url(../images/bgnav.gif) top center repeat-
x;
padding: 0 0 0 180px;
}
#navbar ul{
list-style: none; /* main links list */
display: inline;
}
#navbar li{
display: inline;
}
#navbar a,#navbar a:visited{ /* main links */
display: block;
float: left;
width: 80px;
margin: 10px 0 0 0;
font: normal 11px Tahoma, Arial;
color: #333;
text-align: center;
text-decoration: none;
border-right: 1px solid #666;
}
#navbar a:hover{ /* hovered main links */
color: #f60;
}
/* left column section */
#leftcol{
float: left;
width: 182px;
height: 500px;
background: #cfc;
}
/* center column section */
#centercol{
float: left;
width: 63%;
height: 500px;
background: #fff;
}
/* right column section */
#rightcol{
float: right;
width: 180px;
height: 500px;
background: #cfc;
}
/* footer section */
#footer{
clear: both;
height: 50px;
background: #3cc;
}
Those are all the CSS rules that you need to build the three-column page layout that was shown previously. As you can see, in this case the outer columns are coded as fixed elements, while the central area has been constructed as a liquid one, but as you know this can be easily changed to create an all-liquid page layout.
So far, I showed you all the source code that corresponds to the presentation layer of the dynamic website that I'm currently developing. The question that comes up now is: what's the next step? Well, in the upcoming section, I'll be defining the corresponding database schema in MySQL to construct the tables responsible for storing the contents of each dynamic web page.
Sounds really interesting, right? Therefore, go ahead and read the next few lines. I'll be there, waiting for you.
/ 14 
