Home arrow PHP arrow Page 3 - Setting up the Foundation for an Extensible Website Engine with PHP 5

Creating a simple template file - PHP

Building a dynamic website with a database backend is something that nearly every PHP programmer will need to do, usually sooner rather than later. If you haven't done it yet (or even if you have), this two-part article series will show you how to develop a website engine that can generate pages on the fly from a simple database structure.

  1. Setting up the Foundation for an Extensible Website Engine with PHP 5
  2. Defining the core structure of a simple yet dynamic website
  3. Creating a simple template file
  4. Defining the database schema with MySQL
By: Alejandro Gervasio
Rating: starstarstarstarstar / 14
October 24, 2006

print this article



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.

<link rel="stylesheet" href="styles/styles.css" type="text/css" />
<div id="header"><p>{header}</p></div>
<div id="navbar">
<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>
<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>

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 */
    padding: 0;
    margin: 0;
    background: #fff;
    font: bold 14pt Arial, Verdana;
    color: #000;
    margin: 0;
/* header section */
    height: 100px;
    background: #3cc;
/* navigation bar section */
    height: 35px;
    background: #3cc url(../images/bgnav.gif) top center repeat-
    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 */
    float: left;
    width: 182px;
    height: 500px;
    background: #cfc;
/* center column section */
    float: left;
    width: 63%;
    height: 500px;
    background: #fff;
/* right column section */
    float: right;
    width: 180px;
    height: 500px;
    background: #cfc;
/* footer section */
    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.

>>> More PHP Articles          >>> More By Alejandro Gervasio

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates


Dev Shed Tutorial Topics: