Setting up the Foundation for an Extensible Website Engine with PHP 5

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.

I’m sure that you still remember those old, sweet days, when building websites was a matter of coding a bunch of all-static HTML pages, including a few images on them, and creating the corresponding hyperlinks to use the goodies of the HTTP protocol. Yeah, those times were great, weren’t they?

However, not all things must have that nostalgic feeling. This is particularly true when it comes to stressing the advantages of developing modern dynamic websites, which are mostly driven by a database backend. Definitely, creating websites that use different layers for storing content, handling visual presentation and structure, and performing all sorts of clever tasks via a server-side programming language (like PHP, among others), has become the usual scenario for many web developers.

Of course, since the subject is rather huge, there are many ways to build dynamic websites, aside from using a group of database tables for storing distilled content. You can use flat files for saving data, or in the best case, if your storage requirements aren’t particularly demanding, server memory can be also a fairly good option. Nevertheless, as the web grows to unimaginable dimensions, databases are by far the most used mechanism for saving the contents of a website, and certainly that tendency has been continuing steadily for a considerable amount of time.

So, what’s the point of this introduction, after all? Well, for experienced PHP developers, building database-driven websites can be considered a straightforward process, which probably will be performed with minor hassles, but for beginners or intermediate programmers, this experience surely may be quite troubling.

Therefore, in response to all the reasons that I mentioned above, over the course of this two-part series, I’ll walk you through the development of a highly extensible and “pluggable” website engine with PHP 5, which will allow you generate web pages on the fly based on a predefined (but simple) database structure. By using a few comprehensive PHP classes, along with a single template file, you’ll be able to create truly dynamic websites that maintain a consistent look across their pages.

Have you been missing the “dynamic” feature of your websites lately? Let’s fix that up quickly with this expandable, PHP 5-based website engine!

{mospagebreak title=Defining the core structure of a simple yet dynamic website}

As I said right at the beginning of this article, the website engine that I plan to build will be based on the functionality provided by some PHP 5 classes, which will be reviewed later. For now, I’d like to commence by defining the general structure of the dynamic website itself to give you a good idea of how it will look.

Basically, the skeleton of the sample website that I’ll create will be comprised of the following sections: header, main navigation bar, left-placed column, center-placed column, right-placed column, and finally the usual footer section. Nothing unexpected, right?

As you can see, the structure that I described before corresponds to a typical three-column web page layout, which is properly exemplified by the set of screen shots included below. Please, have a look at the first one, which shows not only the overall appearance of the sample website in question, but also depicts the appearance of a “Profile” page included within the site:

As you’ll realize, the above image reaffirms the concepts that I explained before. The layout of the sample website will be made up of a header, then three central columns, and finally a footer area.

In this specific case, the previous picture shows the look and feel that corresponds to a hypothetical “Profile” page, but there are still some other pages that I’d like to you show you. Take a look at the following screen shot, which shows the visual appearance of a “Products” page:

As you can see, the above image demonstrates the consistent look and feel of the sample website, and at the same time shows the basic appearance of a “Products” page. Of course, the overall visual presentation of the site can be significantly improved to fit your particular needs, but for the moment I decided to keep it simple. That will give you an accurate idea of how each section of this website will look, without having to mess up the overall development process too much.

Al right, at this point you’ve hopefully grasped the key points of how to define the general structure of this sample website. So let me show you finally a few additional screen shots, aimed at demonstrating the look and feel of the eventual  “Services,” “Customers” and “Contact” pages. Here is how they look:

Okay, I think that the above screen shots are more than enough for demonstrating the core structure of the dynamic website that I plan to construct. As I mentioned before, each section of the site presents a consistent look, a fact that makes them very convenient to generate with a simple static template file.

Speaking of the concrete template file that will be used in this tutorial, in the following section I’ll show you its source code. Click on the link below and keep reading to learn how this will be achieved.

{mospagebreak title=Creating a simple template file}

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.

{mospagebreak title=Defining the database schema with MySQL}

Since the previous section was dedicated to demonstrating the complete process for creating the pair of files that put the presentation layer to work, the current one will be focused on defining the simple database schema which will be used for storing the contents of each dynamic web document.

With reference to the above concept, first I’ll create a single database table called “pages” where each row will store web page data. It will be structured as follows: page id, page title, header contents, left column contents, center column contents, right column contents, and finally footer contents.

As you’ll realize, the previous schema is extremely simple to implement, and certainly can be translated to real SQL code by the following statement:

CREATE TABLE ‘pages’ (
  ‘id’ INTEGER(4) NOT NULL AUTO_INCREMENT,
  ‘title’ VARCHAR(45) NOT NULL DEFAULT ”,
  ‘header’ TEXT NOT NULL DEFAULT ”,
  ‘leftcol` LONGTEXT NOT NULL DEFAULT ”,
  ‘centercol’ LONGTEXT NOT NULL DEFAULT ”,
  ‘rightcol’ LONGTEXT NOT NULL DEFAULT ”,
  ‘footer’ TEXT NOT NULL DEFAULT ”,
  PRIMARY KEY(`id`)
)
ENGINE = InnoDB;

Now that the above “pages” database table has been properly created, I’ll do something more useful with it. I’m going to fill it up with some basic data to create the contents of all the web site sections that I showed you previously. How will this be done? That’s as simple as running the following SQL INSERT statements:

INSERT INTO pages (id,title,header,leftcol,centercol,rightcol,footer) VALUES
(NULL,’HomePage’,’Content of header section goes here’,’Content
of left column goes here’,’Content of main section goes
here’,’Content of right column goes here’,’Content of footer
section goes here’);

INSERT INTO pages (id,title,header,leftcol,centercol,rightcol,footer) VALUES(NULL,’
Profile Page’,’Content of header section goes here’,’Content of
left column goes here’,’ Content of main section for profile page
goes here’,’Content of right column goes here’,’Content of footer
section goes here’);

INSERT INTO pages (id,title,header,leftcol,centercol,rightcol,footer) VALUES(NULL,’
Products Page’,’Content of header section goes here’,’Content of
left column goes here’,’ Content of main section for products
page goes here’,’Content of right column goes here’,’Content of
footer section goes here’);

INSERT INTO pages (id,title,header,leftcol,centercol,rightcol,footer) VALUES(NULL,’
Services Page’,’Content of header section goes here’,’Content of
left column goes here’,’ Content of main section for services
page goes here’,’Content of right column goes here’,’Content of
footer section goes here’);

INSERT INTO pages (id,title,header,leftcol,centercol,rightcol,footer) VALUES(NULL,’
Customers Page’,’Content of header section goes here’,’Content of
left column goes here’,’Content of main section for products page
goes here’,’Content of right column goes here”,’Content of
footer section goes here’);

INSERT INTO pages (id,title,header,leftcol,centercol,rightcol,footer) VALUES(NULL,’
Contact Page’,’Content of header section goes here’,’Content of
left column goes here’,’ Content of main section for contact page
goes here’,’Content of right column goes here’,’Content of footer
section goes here’);

Okay, as shown above, the previous six INSERT statements populate the corresponding “pages” database table with some basic data that belong to each one of the website’s sections. Following this schema, you can see that every web page now contains a concrete title, and some descriptive texts for the respective header and footer areas, as well as for the pertinent columns. Wasn’t that easy?

Now that the “pages” database table has been filled with information related to each particular section of the website in question, it should be clear to you how to construct a simple application with PHP that fetches data from the mentioned table and injects it straight into the previous template file.

And best of all, this process can be performed with a unique “pageid” parameter! Definitely, we’re on the right way to constructing a  simple yet efficient website engine with PHP. But, to see how this will be done, you’ll have to wait till the next tutorial.

Wrapping up

In this first article of the series, I introduced the key points for how to build an extensible website engine with PHP 5. More specifically, I developed a comprehensive presentation layer, in conjunction with the respective data layer. However, as I mentioned before, there’s a missing piece in this puzzle: the PHP-based application, which will be developed in the next part. Thus, you won’t want to miss it!

[gp-comments width="770" linklove="off" ]

chat