PHP
  Home arrow PHP arrow Page 3 - Setting up the Foundation for an Extensible Website Engine with PHP 5
Dev Shed Forums 
Administration  
AJAX  
Apache  
BrainDump  
DHTML  
Flash  
Java  
JavaScript  
Multimedia  
MySQL  
Oracle  
Perl  
PHP  
Practices  
Python  
Reviews  
Security  
Smartphone Development  
Style-Sheets  
Web Services  
XML  
Zend  
Zope  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Forums Sitemap 
E-Commerce Hosting 
Linux Web Hosting 
Managed Hosting 
Small Business Hosting 
VPS Hosting 
Weekly Newsletter

 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
Google.com  
PHP

Setting up the Foundation for an Extensible Website Engine with PHP 5
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: starstarstarstarstar / 14
    2006-10-24


    Table of Contents:
  • Setting up the Foundation for an Extensible Website Engine with PHP 5
  • Defining the core structure of a simple yet dynamic website
  • Creating a simple template file
  • Defining the database schema with MySQL

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      error-file:tidyout.log Del.ici.ous error-file:tidyout.log Digg
      error-file:tidyout.log Blink error-file:tidyout.log Simpy
      error-file:tidyout.log Google error-file:tidyout.log Spurl
      error-file:tidyout.log Y! MyWeb error-file:tidyout.log Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article

     
     
    ADVERTISEMENT


    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.



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

       

    PHP ARTICLES

    - Implementing the Iterator SPL Interface
    - Building a Data Access Layer for the Data Ma...
    - Building a Singleton Database with Restricti...
    - Working with Reflected Properties with the R...
    - The Iterator, Countable and ArrayAccess SPL ...
    - Implementing the Data Mapper Design Pattern ...
    - Defining an Abstract Class with Restrictive ...
    - The Reflection API: Working with Reflected M...
    - Using Restrictive Constructors in PHP 5
    - Getting Information on a Reflected Class wit...
    - Introducing the Reflection API in PHP 5
    - Swift Mailer's Batchsend Method and Other Fe...
    - Embedding Attachments into Email Messages wi...
    - Dynamically Attaching Files with Swift Mailer
    - Using Different Paths for Attachments with S...


    Code Analysis Tools
    Enterprise code analysis tools that deliver quality and reliable code

     



    © 2003-2010 by Developer Shed. All rights reserved. DS Cluster 3 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek