Home - Help & Support - Contact Us
    

Creating a Website Design Templating System Using PHP

Creating a Website Design Templating System Using PHP
Copyright © zeronese.net


Note: Although experienced coders might find some useful information in this tutorial, this tutorial is designed to be easily understood and comprehended by total beginners.

  1. Introduction
  2. Requirements
  3. The Tutorial
  4. Code Explanation & How it Works
  5. Extending Functionality and Usability
  6. Conclusion

Introduction:
Whether you have a small or a huge website, you know how much hassle and time it takes to upgrade your web site pages. The upgrade process becomes even more irritating when you make a change that needs to be upgraded on every page of your website; a good example of such a change is adding a button to the header or changing the copy right information in the footer of your website.
In this tutorial I will show you how PHP comes to the rescue with only few lines of code. You can use this tutorial to be the basis to make your website easier to maintain and upgrade.

Top

Requirements:
Server/Hosting capable of running php scripts.
No knowledge of php necessary!

Top

The Tutorial
  • Step 1
    Create a folder on your server and name it "design".
  • Step 2
    Create the following files in the design folder:
    'header.html', 'footer.html', 'right_column.html', 'left_column.html'
  • Step 3
    Create another folder and name it "pages"
  • Step 4
    In the "pages" directory, create a page and give it the name: 'main.html'
  • Step 5
    Now in the root directory create a file and give it the 'index.php'
  • Step 6
    Add the following code to your 'index.php' file (don't worry, it will be explained later!):

    <?php
    if (isset($_REQUEST['page']))
    {
    if($_REQUEST['page'] !="")
    if(file_exists("pages/".$_REQUEST['page'].".html"))
    $page_content = file_get_contents("pages/".$_REQUEST['page'].".html");
    else
    if (file_exists($_REQUEST['page'].".html"))
    $page_content = file_get_contents($_REQUEST['page'].".html");
    else
    echo "<center>Page:".$_REQUEST['page']." does not exist! Please check the url and try again!</center>";
    }
    else
    $page_content = file_get_contents("pages/main.html");

    $page_content = str_replace("!!HEADER!!", file_get_contents("design/header.html"),$page_content);
    $page_content = str_replace("!!LEFT_COLUMN!!", file_get_contents("design/left_column.html"),$page_content);
    $page_content = str_replace("!!RIGHT_COLUMN!!", file_get_contents("design/right_column.html"),$page_content);
    $page_content = str_replace("!!FOOTER!!", file_get_contents("design/footer.html"),$page_content);
    $page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content);

    echo $page_content;

    ?>


  • Step 7
    Go to your 'main.html' and design it as you would like your website layout to look at the end, only here, instead of adding the complete header design, add !!HEADER!! and then go to the 'header.html' file that you created in the "design" folder. Now in the 'header.html', design the main header of your website. This design will be the header of all your pages at the end.

    Now do the same thing for the other designs, that is: put !!FOOTER!! and design 'footer.html', !!RIGHT_COLUMN!! and design 'right_column.html', put !!LEFT_COLUMN!! and design 'left_column.html' respectively.

    Or simply copy the following pre-made design:

    'main.html'

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Main Page - PHP Simple Templating System By Zeronese</title>
    !!COMMON_TAGS!!
    </head>
    <body>
    <table width="95%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="3"><center>
    !!HEADER!!
    </center>
    </td>
    </tr>
    <tr>
    <td class="column" width="25%" height="100%">!!LEFT_COLUMN!!</td>
    <td> </td>
    <td width="25%">!!RIGHT_COLUMN!!</td>
    </tr>
    <tr>
    <td class="column" colspan="3"><center>
    !!FOOTER!!
    </center>
    </td>
    </tr>
    </table>
    </body>
    </html>

    'header.html'

    <div class="header">Welcome To The PHP Simple Templating System</div>


    'footer.html'

    <div class="footer">
    <center>
    <a href="http://www.zeronese.net">PHP Simple Templating System is a Copy Right of Zeronese.net</a>
    </center>
    </div>

    'right_column.html'

    <table class="column" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>Advertisement</td>
    </tr>
    <tr>
    <td>Zeronese.net offers professional web design templates for both web designers and end users. Save time and money and still get a high quality professional web site for business, ecommerce or personal use. <a href="http://www.zeronese.net">Learn More...</a></td>
    </tr>
    </table>

    'left_column.html'

    <table class="column" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><a href="">Home</a></td>
    </tr>
    <tr>
    <td><a href="!!WEBSITE_URL!!tutorial.html">Tutorial Page</a></td>
    </tr>
    <tr>
    <td><a href="!!WEBSITE_URL!!sub-directory/page.html">Tutorial Sub Page</a></td>
    </tr>
    <tr>
    <td><a href="http://www.zeronese.net">Visit Zeronese.net</a></td>
    </tr>
    </table>

    and to add a little touch to our design, we create a 'styles.css' file in the design folder and add the following code:

    body{
    background-color:#003399;
    color:#FFFFFF;
    }
    a{
    color:#FFFFFF;
    font-weight:bold;
    text-decoration:none;
    }
    a:hover{
    text-decoration:underline;
    }
    .column{
    background-color:#3366CC;
    vertical-align:top;
    }
    .header{
    background-color:#336699;
    }
    .footer{
    background-color:#336699;
    }

Now give it a test drive spin! Try and test your design by using the browser to go to: main_folder_of_files/index.php?page=main

Top

Code Explanation & How it Works:
Of course you can tell that the 'index.php' file is doing all the work. The design is base on creating a default page and a default folder to store pages.

if (isset($_REQUEST['page']))
This php code will check to see if a page is requested.

if($_REQUEST['page'] !="")
Of course, to eliminate errors, make sure a page is entered and it is not a blank argument.

if(file_exists("pages/".$_REQUEST['page'].".html"))
A page is requested and the page argument is not blank. Now we check to see if it exists in the default folder; in our case it is the pages folder. Note that we have included the '.html' extension here so we do not need to enter it when we request the page. By using this method, we also benefit from using standard html designs for the pages.
Hint: You can change the extension of the pages as you wish. Further more if you want to use different extensions for different pages, just delete the .".html" from the statement. Do not forget that in this case, when requesting the page you will have to provide the extension.


$page_content = file_get_contents($_REQUEST['page'].".html");
If every thing is alright, assign the contents of that page to a variable: $page_content.
Note that the file_get_content function will not execute any code. That is: putting php code in your pages will not work. If you need to use any php code, either add it to your 'index.php' or to separate files and then include it in the 'index.php'.
Hint: You can still add java code since this is executed on the client's side!


else
if (file_exists($_REQUEST['page'].".html"))
$page_content = file_get_contents($_REQUEST['page'].".html");

These lines will extend and go further than the default folder. You can use it to request pages in deeper folders in your website. For example, you can design pages in a sub-directory and request it in a similar way to requesting pages in the default folder using the following command in your browser:
main_folder_of_files/index.php?page=sub-directory/page
Actually, we could have came straight to this statement with out adding the default folder option, but a default folder is more convenient and you don't have to enter the folder name every time you request it in the browser. Also, it is good for the tutorial purposes so you can practice more options and extend based on this!

else
echo "<center>Page:".$_REQUEST['page']." does not exist! Please check the url and try again!</center>";

We looked for the requested page in the default folder, in the sub-directory requested but we did not find it....then it does not exist. Print an error statement!!!

else
$page_content = file_get_contents("pages/main.html");
If no page is requested at all, go to a default page. In our case here to the main page. This could be your error page, but it is convenient to go to the main page in this case because that is how the index file is translated on servers. It is the main page!


$page_content = str_replace("!!HEADER!!", file_get_contents("design/header.html"),$page_content);
$page_content = str_replace("!!LEFT_COLUMN!!", file_get_contents("design/left_column.html"),$page_content);
$page_content = str_replace("!!RIGHT_COLUMN!!", file_get_contents("design/right_column.html"),$page_content);
$page_content = str_replace("!!FOOTER!!", file_get_contents("design/footer.html"),$page_content);

This is the fun part! Our $page_content variable now holds the design and the content of the page requested. We simply use the str_replace function to replace our tag holders with our predesigned pages.

$page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content);
Added to demonstrate how you can add any file and create your own files and place holders. The '!!COMMON_TAGS!!' place holder in this case has the link to the styles sheet that we created in the design folder. This becomes handful if you want to add any content that you want to change more often. For example, you can create a text file and put inside it your add sense code, create a place holder for it, add a similar line of code to this one, then add your place holder to the right or left column to see it on all pages instantly.

echo $page_content;
Now show our design. Voala.... simple!!!

Top

Extending Functionality and Usability:
To make this even greater, we can make our links static and search engine safe.
Create a .htaccess file in the root folder and the following lines of code:

RewriteEngine on
Options +FollowSymLinks
RewriteRule (.*).html ?page=$1



Save the .htaccess file and instead of having to write main_folder_of_files/index.php?page=main to go to your main page, you simply can now go there by typing: main_folder_of_files/main.html
Also, typing main_folder_of_files/ will take you to the default page!!!
Don't worry, it also works with sub directories too, try: main_folder_of_files//sub-directory/page.html

Also you can extend by adding static variables that rarely is changed but you want them to change on all the pages once changed. For example, let's say you want to transfer your design to another domain name, and you want to change the links to the domain name instantly. This can be a hard task if you have to change it page by page.

To easily do this, make it a variable, and this is how it is done:
Add the following code to your 'index.php' file just after the opening statement of your code, that is: after the <?php
$website_link = "http://www.mywebsitelink.com";

now before the 'echo $page_content;' statement add this line of code:
$page_content = str_replace("!!WEBSITE_LINK!!", $website_link,$page_content);

It should be obvious now that you can add the !!WEBSITE_LINK!! place holder to any of your pages to get it replaced by your website link!

Top

Conclusion:
This tutorial is designed for total beginners, it is simple yet very powerful and could be a base for very large and complicated systems that want to offer an easy way for their clients to design their script. Many scripts have great functionality, but when it comes to the design templating they lack this important feature, or when they have the templating system, the templating system is usually very hard to manipulate for un-experienced users.
Using this method will separate the script code from the design. This separation is useful in numerous ways. One very important issue is when modifying the design you don't have to worry about the code!

I hope this tutorial has been useful for some one. Feel free to use it in your scripts and designs even the commercial ones. However the script and tutorial files included are not for resale or distribution without our permission and it is only fair and polite to credit and reference this page!

Tutorial by Hassan Sayed webmaster at zeronese.net

Top

You can download all script and design files from the attachments section below!

Have fun coding!


NEW:If you are really serious about learning the php template system, we have built a php/mysql photo gallery that is based on this system. By studying the script, you can learn a lot of how to advance on building websites using this template system. The photo gallery script uses lots of functions, a template design switch which allows you to have many design templates and the ability to switch between them, also shows you how to use mysql, functions and lots of many other coding techniques. Check it out...the price is too low if you really want to learn.


Attachments & Downloads


Would you like to...



Print this page Print this page Email this page Email this page Post a comment Post a comment Subscribe me (Subscribe to receive notification when this article is updated.) Add to favorites Add to favorites Remove Highlighting Remove Highlighting Edit this Article

User Opinions (37 votes)

89% thumbs up 10% thumbs down

How would you rate this answer?




Thank you for rating this answer.


Related Articles


No related articles were found.

Visitor Comments

  1. Comment #1 (Posted by Matt)
    Monday February 11th, 2008 09:17:42 AM
    Very nice tutorial!

    Hard to find tutorials now a days where people actually explain what they mean!

    Thanks :)

  2. Comment #2 (Posted by Anonymous)
    Wednesday February 20th, 2008 06:10:46 PM
    Please post demo site

  3. Comment #3 (Posted by zeronese)
    Wednesday February 20th, 2008 08:20:47 PM
    Attachments section contains a complete demo of the tutorial. Just download, unzip and upload to any folder on your site and you should have a complete working demo!

  4. Comment #4 (Posted by qamcio@gmail.com)
    Thursday February 21st, 2008 10:06:12 AM
    It doesn't work in .php files! It doesn't remove !!HEADER!! after putting there correct content

  5. Comment #5 (Posted by zeronese)
    Thursday February 21st, 2008 01:54:13 PM
    It does work my friend, it does!
    I have created a demo for you at:
    http://www.zeronese.net/knowledge-base/demos/php_templating_system/
    I also updated the url in the zip file to take you to the demo.

    Now, if your design files are .php files, you will have to change the extension request command, that is:
    in the index.php file you will have to tell the script to read design files as php not html. You do that by replacing the ".html" to ".php"

    Let me know if this helps.

  6. Comment #6 (Posted by Tom)
    Friday March 21st, 2008 07:37:24 PM
    There is an error in your article in this sentence:

    "Now give it a test drive spin! Try and test your design by using the browser to go to: main_folder_of_files/index.php?page=main.html"

    It should be without the .html extension, or it won't work.

    Thanks for the article.

  7. Comment #7 (Posted by Hassan)
    Friday March 21st, 2008 09:01:06 PM
    Ooooops! You are right, I have fixed it! Thanks.

  8. Comment #8 (Posted by Branko)
    Tuesday April 1st, 2008 08:42:45 PM
    Thank you very much for this tutorial. It is very well explained, but despite that i still can't figure out how to put, for example, <?php echo 'Hello World!'; ?> into the header section.

  9. Comment #9 (Posted by Hassan)
    Tuesday April 1st, 2008 09:57:51 PM
    Just do it the same way we did the website url. That is: at the top of your index.php file, after the <?php add a new string: $hello_world = "Hello World!!"; Then at the butom add: $page_content = str_replace("!!HELLO!!", $hello_world,$page_content); go back to your template files, and anywhere you want the string to show just add !!HELLO!!.... Review the Extending Functionality and Usability of the tutorial.
    Good Luck


  10. Comment #10 (Posted by Branko)
    Wednesday April 2nd, 2008 05:59:35 PM
    Yes! It works now. Thank you.

  11. Comment #11 (Posted by http://best-mortgage-lenders.com)
    Sunday April 6th, 2008 07:41:12 PM
    Hi, I am following your instructions exactly and getting the following error:

    Warning: file_get_contents(design/common_tags.html) [function.file-get-contents]: failed to open stream: No such file or directory in /home/pacecom/public_html/index.php on line 19
    Welcome To The PHP Simple Templating System
    Home
    Tutorial Page
    Tutorial Sub Page
    Visit Zeronese.net

    Advertisement
    Zeronese.net offers professional web design templates for both web designers and end users. Save time and money and still get a high quality professional web site for business, ecommerce or personal use. Learn More...
    PHP Simple Templating System is a Copy Right of Zeronese.net

  12. Comment #12 (Posted by Hassan)
    Sunday April 6th, 2008 08:48:42 PM
    file_get_contents(design/common_tags.html) line is 18 in my index file, you must have made a tiny change that is cuasing the error. Make sure the common_tags.html file is in the design directory.

    Since you are seeing the other stuff, like the ones in the footer, this means it is working. other wise, delete the line (19 in your case) and create your own common tags file. If you delete the line, the styles.css file will not load, so you want to make sure you put in the pages <head> tag if you want to use it.

  13. Comment #13 (Posted by http://www.best-mortgage-lenders.com)
    Sunday April 6th, 2008 09:15:06 PM
    Thanks Hassan, I was just following the tutorial above and there is no commons_tags.html file listed in the tutorial process. I just downloaded the templating_system.zip and installed all the files and things are working fine. Great tutorial for a beginner like me. I really want to develop this template to be my master template for article writing and adding adsense to the pages along with rss feeds for news etc. I have a lot to learn about php. Thanks again.
    Peter

  14. Comment #14 (Posted by Peter)
    Monday April 7th, 2008 04:27:21 PM
    Hassan, Here is the code I have changed so far. I am trying to make a two column page with 3 "headers" on top. TOP "header" will be an image that will appear on all pages. The MIDDLE "header" will have google link ads. The BOTTOM "header" will have a 728x90 google leaderboard. The !!LEFT_COLUMN!! will be the navigation bar. The right side of the left column will have the MAIN ARTICLE TEXT flowing around a large rectangle 336 x 280 of google ads. The bottom !!FOOTER!! will have links to HOME, TERMS OF SERVICE, SITE MAP, etc.
    Here are my questions:
    1) Right now there is no way to affect cell padding or alignment issues in the MAIN ARTICLE TEXT area without affecting the !!LEFT_COLUMN!! What code changes would need to be made to correct this?
    2) How do you code the TOP "header to put an image in the box?
    3) I believe you already covered this but to make adsense ads flow into the MIDDLE "header" the BOTTOM "header" and the MAIN ARTICLE TEXT area I would need to make a text document of each type of ad unit and then put the css code in the common_tags.html page to link to each document. Then I would put the !!LEADERBOARD!! , !!GOOGLELINKS!!, !!LARGERECTANGLE!! code in the main.html page. Could you show what the code in the common_tags.html would look like? Thanks for all your help and I hope these questions will benefit others reading the post.
    Peter

  15. Comment #15 (Posted by Hassan)
    Monday April 7th, 2008 07:48:31 PM
    Peter, first I am sorry I had to delete the long html code you posted because it looks so distracting in the comments area.
    I cannot get involved in a web design project, but I will try to give you suggestions that might help you and the people reading the post.
    1- I see that you are starting to find your way through html and design. The design of the pages does not have to be done the way the demo is done. Also, you can place a <div> in the main area text; make necessary padding to go away from the columns, header and footer. Furthermore, the text there can also be html; that is, the text can be in its own table that has its own style!

    2- The top header is also html. So you do images the normal way you do any image in html. Your only problem might be when you place the link to the image. I would create a main tag and call it !!IMAGES_FOLDER!! And then in the html source my images will have something similar to this:
    <img src="!!IMAGES_FOLDER!! /myimage.gif">

    3- The common_tags.html would stay the same in this case. You will have to modify the styles.css sheet, put your design classes in it, and then in the header have your codes like “!!LEADERBOARD!!” in a <div class="yourclassinstylesheet"> tag.
    I recommend 2 things, first read some html tutorials, look at the html tutorials in here:
    http://www.zeronese.net/knowledge-base/categories/Web-Design-and-Development/HTML/
    Second, the best way to learn is the way you are doing it, work on a project until you complete it and don’t give up in the middle of the way.

    Also subscribe to this article by clicking the “subscribe me” link above to receive emails when the tutorial gets updated.
    Good Luck
    Hassan

  16. Comment #16 (Posted by Peter)
    Tuesday April 8th, 2008 02:31:12 AM
    Thanks Hassan

  17. Comment #17 (Posted by Hassan)
    Tuesday April 8th, 2008 09:00:14 AM
    You are very welcome

  18. Comment #18 (Posted by Anonymous)
    Friday April 25th, 2008 07:04:12 AM
    "If you need to use any php code, either add it to your 'index.php' or to separate files and then include it in the 'index.php'. "

    How would i go about doing this? sorry I'm really stuck.

    Any help will be appreciated.

  19. Comment #19 (Posted by Hassan)
    Friday April 25th, 2008 05:00:13 PM
    Let me try and help.
    The main purpose of the templating system is to seperate the code from the design, I will give an example.
    - Create a file and call it code.php
    inside the code.php put the following code:
    <?php
    function example_function(){
    $ex_string = "This is an example function!";
    return $ex_string;
    }
    ?>

    - Place the code.php in the same directory of index.php
    - At the top of index.php at the following line:
    include("code.php");
    -Now you can use the example_function() anywhere you like, for example in the index.php add the following line before the echo statement:
    $page_content = str_replace("!!EXAMPLE!!", example_function(),$page_content);

    Any where in your design file, put !!EXAMPLE!! and this should be replaced by: This is an example function!.

    You see, the code.php could contain any code, the function could be doing anything like database storage, manipulating input...etc

    Hope this helps :)




  20. Comment #20 (Posted by www.synchcomdesign.com)
    Saturday April 26th, 2008 12:19:04 AM
    I've seen several tutorial attempts for PHP templates, none with this level of ingenuity. I'm going to work from this to develop my own system and hope to move on to other areas in PHP, I will certainly return to your site for more information.

    Thanks for the tip on search engine friendly URL's and for sharing your insights.

    Dennis

  21. Comment #21 (Posted by Dan)
    Saturday April 26th, 2008 02:52:53 PM
    Thanks mate.

    Still having a problem though, I have two php codes for my user log in. One that must sit at the top of my site above html;

    <?php
    $curdir = getcwd ();
    chdir('/hsphere/local/home/username/my_site_root/forum');
    require_once('/hsphere/local/home/username/my_site_root/forum/global.php');
    chdir ($curdir);
    ?>

    the other sits in the body;

    <?php
    require_once('/hsphere/local/home/username/my_site_root/c_login.php');
    ?>

    I created two files for the codes, added the include code for both at the top of the index.

    Not sure what the function line would be though. Please help.

    Sorry I'm new to all this.

  22. Comment #22 (Posted by Hassan)
    Saturday April 26th, 2008 06:49:59 PM
    I don’t quite understand your question, but if the c_login.php contains the html for your login form, just deal with it like any other file in the design folder like the header.html or the footer.html.

    Also, there is no html sent to the browser until the echo $page_content.php; statement is called in the index.php.


  23. Comment #23 (Posted by Dan)
    Sunday April 27th, 2008 06:29:31 AM
    Not sure how to explain it clearer. But the c_login.php contains php code. Obviously when I put the php code in the design it doesnt execute. I just need to know how can I execute;

    <?php
    require_once('/hsphere/local/home/username/my_site_root/c_login.php');
    ?>

    It's the code I would normally have to put in the design.

    It uses the login code from my vbulletin forums.

  24. Comment #24 (Posted by Hassan)
    Wednesday April 30th, 2008 07:13:07 PM
    If I understand right, then your file contains both html and php code. In this case, you might need to do some re-programming in your file to separate the php code from the html code.
    Use the methods in the tutorial to do that. Create functions that produce the html instead of using the echo or print functions (review comment 19).

  25. Comment #25 (Posted by stan)
    Friday May 30th, 2008 10:03:19 AM
    Your article "Creating a Website Design Templating System Using PHP"left out one very important aspect; main content. How do you add html pages to the main content of the window? Are your templates set up with headers and left columns like this?

    Thanks

  26. Comment #26 (Posted by Hassan Sayed)
    Friday May 30th, 2008 10:15:23 AM
    The center of the page can be any text or html.
    If you go to the demo and click on “Tutorial Sub Page” on the left, you will see some demo content (text) saying “This is a subpage.”
    This text can actually be any html. You can do the same thing in the main page or any other page you want to create.
    The demo is at:
    http://www.zeronese.net/knowledge-base/demos/php_templating_system/
    Let me know if you still need any further help :)

  27. Comment #27 (Posted by Kinda)
    Friday May 30th, 2008 12:03:17 PM
    let me first say thx. its a grt tutorial for a novice like me.
    question i am gonna ASK may as well sound trivial.
    how u start creating more pages e.g. contact us, about us, or even the home page.
    I'm guessing my introducing something similar to !!CONTENT!!, but that would change for every other page.
    if someone could please post their dummy 'other pages' including main.php (with content), index.php, and folder structure.
    this really would be grt help!
    n pardon my ignorance, m just some tech Kid trying my hand on.

  28. Comment #28 (Posted by Hassan Sayed)
    Friday May 30th, 2008 12:30:51 PM
    Just download the demo, go to the "sub-directory" folder. Copy page.html to your pages folder, rename it about-us.html, contact-us.html or whatever pages you might have.
    Replace "This is a subpage." with your text or html or whatever.
    Follow the tutorial to link to it.
    And you got your 'other pages'

    I hope this helps:)

  29. Comment #29 (Posted by Kinda)
    Friday May 30th, 2008 11:41:41 PM
    thx for that fast reply!! I get it!!
    going back to my !!CONTENT!! issue.
    I'm planning on avoiding inline content on every page.
    I guess I've 2 options, use 'include' or something like !!CONTENT!!. although I've no idea how to use !!CONTENT!!, even though I would like to, keeping in sync with the format used. If I do end up using 'include', will I have relative linking issues!?
    please advice. and again thx for ur grt help Hassan.

  30. Comment #30 (Posted by Hassan Sayed)
    Saturday May 31st, 2008 12:37:20 AM
    No problem. I am happy to help :)
    we are not using any "inline" content! The content is all html code. !!CONTENT!!, can be a html file, html code or any other text block that can be produced by your functions.

    Try and eye ball the comments aboce, there is a lot of relevant information

    If you still need help, let me know

  31. Comment #31 (Posted by Kinda)
    Saturday May 31st, 2008 04:09:40 AM
    I get it, I guess :)
    first of all thx for ur patience, really appreciate that.
    Comment 14, 15 proved useful.

    for all common design/ content for diff. pages, u do this:
    in index.php
    $page_content = str_replace("!!COMMON!!", file_get_contents("design/common.php"),$page_content);
    ..and so on...
    add !!COMMON!! in diff. pages residing in pages folder or any sub-folder.
    but for content material Which is diff. for every other page, I guess the best Way to go is 'include'!?
    e.g. if u have a container
    <div id="content"></div>, for ur content u can include actual data for this container, <?php include("data/content.php") ?>

    I guess I 'm going in right direction!?

    I 've run into couple of problems.

    <li><a href="!!WEBSITE_URL!!contactus.php" title="CONTACT US">CONTACT</a></li>
    this LOOKS for contactus.php in the root dir. even though or atleast I thought, should LOOK in pages dir.

    including .htaccess at root gave me error 500. is it coz I m testing it locally?

    thz 4 ur patience With me man. don't loose ur coool.

  32. Comment #32 (Posted by Hassan Sayed)
    Saturday May 31st, 2008 12:00:28 PM
    locally or not, it does not make a difference. However, this is a whole different subject, i trust you will figure it out your self :)
    If you go back to the code in Step 6, you will see that it first look in the pages directory, if it did not find it, it will look in the root.
    Get a blank paper, a pencil and go with code on Step 6 step by step to see how it is looking for pages and code, then you can grasp what is happening easier and build on it.

    And Yes, you are on the right direction!
    Keep trying, the best way to learn programming is by trial and error. One trial is worth a thousand question :)

  33. Comment #33 (Posted by Kinda)
    Friday June 13th, 2008 10:12:07 PM
    I've been out all this time.
    is there something Wrong I'm doing. I've,

    $website_url = "http://localhost/linda/";
    $page_content = str_replace("!!WEBSITE_URL!!", $website_url,$page_content); (in index.php)
    <a href="!!WEBSITE_URL!!contactus.php" title="CONTACT US">CONTACT US</a> (in left_column)

    When I press for contactus.php page from left column of main page, it gives me,
    The requested URL /linda/contactus.php was not found on this server.
    although contactus.php is in pages folder along With main.php

    Can I have some spoon feeding on this maybe, m losing my hair over this!

  34. Comment #34 (Posted by Hassan Sayed)
    Saturday June 14th, 2008 09:56:06 AM
    Kinda...
    My best guess is that you are trying this on a windows system and you don't have the .htaccess setup right!
    Try using dynamic pages to see if it works, then you know where to start your research.
    Note:
    Dynamic meaning something like:
    http://localhost/linda/index.php?page=contactus
    instead of:
    http://localhost/linda/contactus.php

  35. Comment #35 (Posted by curtis)
    Thursday July 10th, 2008 01:10:17 AM
    This tutorial has the potential to become a big security problem, especially where the author mentioned leaving off a file extension check. You never give your users a direct access to manipulate the URI for your scripts to include content. You should totally abstract user access from the URI for including data. The user can potentially manipulate the request to traverse up beyond allowed access in the file system (unless the user is jailed), display .htaccess files, or even the source of other php files (file_get_contents will NOT parse PHP). Mainly for this fact that maintaining a template via ?page=blah is a bit tedious, I don't even like that approach, and it can't be the most SEO-friendly either.

    In addition, if you're expecting page requests from the URI, then use $_GET, not $_REQUEST, there's no reason to unnecessarily accept POST and COOKIE data, which, in this case, makes exploitation all the more inviting. Also, it's a big pain to maintain and read your code horribly formatted. You're allowed to use white space for a reason (displaying code in a monospace font would also be nice).

    Regardless of whether or not it's a beginner tutorial, it should always have solid, secure code, which this doesn't. If you are a beginner, the first thing you should keep in mind is security, because you really don't want to find out about it after your site's been cracked.

  36. Comment #36 (Posted by Hassan Sayed)
    Monday July 14th, 2008 09:06:22 PM
    We had an argument on whether to approve your comment “Curtis”, especially because it does not provide real identifications but raises some good concerns.
    Also, it looks like the tutorial was not well studied before posting the comment as it is intended, but rather is “read” only.
    1 -The system do check for an “html” extension. Actually, if(file_exists("pages/".$_REQUEST['page'].".html"))
    Refuses to read any other file if it was not .html as you can see.
    2- the whole point of using this method is not to have a combination of php code and design html in the same file, both for security and readability, so no need to parse and code using the ‘file_get_contents’.

    3- “$_GET vs $_REQUEST”, debatable… maybe in a standalone article!
    The purpose of this tutorial again is to teach, this is not a complete system. Sometimes we think about removing the download because most people just download the zip file and never bather to study the tutorial. This page is not for them!!!

  37. Comment #37 (Posted by curtis)
    Tuesday July 15th, 2008 12:42:01 AM
    Thanks for letting it through.

    I just want to clarify, I wasn't trying to state that you had bad intentions of propagating bad code. Regardless of what your intent is, it's good practice to protect the impatient/lazy people from themselves. Even if you're posting just a snippet of code, there's no reason to not make it as secure as you can.

    "...The system do check for an 'html' extension."
    Yes, I acknowledged this. It's still not entirely secure, for reasons I mentioned before. Perhaps I misread the first time around, but it appeared that you suggested the possibility of leaving off the extension check, altogether, when explaining under the section "Code Explanation & How it Works". After rereading, I see you don't actually say that, so my mistake. However, you might want to emphasize to your audience, how important the file extension check is for your approach, and the consequences for leaving it off.

    "'$_GET vs $_REQUEST', debatable… maybe in a standalone article!..."
    It isn't an issue of security, as much as it is of clarity. If you only need query string data, there's no reason to accept POST or COOKIE data. Notice I said, "only." I'm not saying $_REQUEST is never useful. When it comes down to it, it doesn't matter too much, so yeah, this is more my opinion.

    Like I said, though your intentions are good, some people will probably not read through your article much, and just try to get a basic templating system going. Even if it's "not for them", it can still contribute to bad security on the web, as a whole, when not used correctly.

    I don't mean any disrespect, I'm just trying to suggest improvements.

    Curtis

  38. Comment #38 (Posted by Hassan Sayed)
    Tuesday July 15th, 2008 12:56:52 PM
    The discussion turned out useful after all.
    Thanks Curtis, if you would like to suggest any improvements, be my guest :)

  39. Comment #39 (Posted by Anonymous)
    Tuesday July 29th, 2008 01:15:52 PM
    I wonder if you can help with something. what I want to do is like comment 19. I kinda struggle with it. I want to use cutenews that will display in the content area of the main page. I made a new cutenews.php page and put the cutenews code in it. Can you please help me to put the right code in the index.php. Thank will appreciate it.

  40. Comment #40 (Posted by Hassan Sayed)
    Tuesday July 29th, 2008 01:51:38 PM
    I'll try to help.

    Lets say your cutenews.php file contains the function shownews() that produces the html code of the "news";

    The function could be something like:
    function shownews(){
    $thenews = "<b>I am using the php templating system by zeronese</b>";
    return $thenews;
    }

    now $thenews could be any string that also might be comming from a database or whatever.

    To place the $thenews in your pages, include the cutenews.php in the index.php file by adding:
    include("cutenews.php");//just below the <?php

    then just before the echo $page_content; statement add:
    $page_content = str_replace("!!NEWS!!", shownews(),$page_content);

    Now anywhere in the design pages where you want the news to show, just put !!NEWS!!

    cute news should now show...cute huh?!?

  41. Comment #41 (Posted by Anonymous)
    Wednesday July 30th, 2008 01:24:38 PM
    Thanks for helping with the cutenews but I'm kinda stuck again. What happens now is that where I put the include("cutenews.php"); at the top just below the <?php that is where cutenews appears. It is now before the header and in the content table is nothing. I think that my mistake may be here:

    function shownews(){
    $thenews = "<b>I am using the php templating system by zeronese</b>";
    return $thenews;
    }

    I know that this is probably stupid question but what do I have to put in this line "<b>I am using the php templating system by zeronese</b>"; because whatever I put here shows in the content box.

    Once again thanks for the help. This is a great tutorial.

  42. Comment #42 (Posted by Hassan Sayed)
    Wednesday July 30th, 2008 02:21:33 PM
    It is not stupid, but I think that you are still not doing it the way it is supposed to be done.

    If when adding the include("cutenews.php"); the contents of the cutenews.php shows.. This means that you are actually using the echo, print functions, or your cutenews.php file prints html to the browser.

    To test that, browse to your cutenews.php file using your browser. If you are doing everything right, you should see a blank page, if you see any kind of html or content, then you are still not following the tutorial accordingly.

    This is simply how it is done:
    The function shownews() returns a string ($thenews) and prints nothing to the browser. By including the file with the statement ( include("cutenews.php"); ) we are able to use the shownews() function from the index.php file. page_content is the string variable that is read from our design template file. page_content is a string, so we can replace the !!NEWS!! in our page_content with the string returned by our function.
    So to abbreviate, cutenews.php should not print anything to the browser, the contents that you want to show in the browser should be collected into a string through a function, put the !!NEWS!! token into your design template file that contains the entire html, replace !!NEWS!! with the string generated from your cutenews.php function or functions.
    That is basically how the template system works!

    Good luck :)

  43. Comment #43 (Posted by Stealth)
    Friday August 1st, 2008 01:30:22 PM
    HELP
    I have it all roughly set up and it works fine but it adds a space at the top of everything it retrieves so it doesnt look how it should, how do i stop it?

  44. Comment #44 (Posted by Hassan Sayed)
    Saturday August 2nd, 2008 03:18:23 PM
    Try to debug the produced html by viewing the source (in internet explorer, go to View => Source) to check where the extra space is comming from.
    Check your css sheet.... do what you do when designing a page and you see that you do not like the result.

    Note:: The templating system does not do any design work, it only gathers the peaces and puts it in one place!
    Take care

  45. Comment #45 (Posted by Adrian)
    Monday August 4th, 2008 08:51:59 AM
    Hi,

    Apologies if this has been answered, but I cannot find the answer.

    I have developed a number of websites in the past using Dreamweaver based templates, but want to move away from them and have started to look into php include statements to build up a template.

    What happens with relative linking? Do all links using this system have to be absolute? I have include files saved within an includes folder - but all links are relative and therefore do not work in the main page, which is saved within an entirely different folder.

    Thanks for your time.

  46. Comment #46 (Posted by Hassan Sayed)
    Monday August 4th, 2008 01:22:54 PM
    No need for apologies, this is a good question.

    Relative links will work just fine, because the design folder is only used within the system. The links must be relative to the folder where your index.php resides.
    If so, you should have no problem.

  47. Comment #47 (Posted by Creativity Release)
    Thursday September 4th, 2008 04:01:44 AM
    is there a way to have html header. and php columns?

  48. Comment #48 (Posted by Hassan Sayed)
    Thursday September 4th, 2008 09:55:48 AM
    The header is html, so there is no problem. The php columns, you will have to use methods we use in comments 19, 40 and similar posts.

  49. Comment #49 (Posted by www. strictlyfps .com)
    Monday September 22nd, 2008 05:39:25 AM
    Hey, the only tutorial of its type i could find on the internet and a great one at that. Only one thing...now that i have my header and things all working where do i put my main content? I'm just having a bit of trouble finding out where i put each individual content of each page. In the sub-directory folder i have my main pages eg. index.html, contactus.html, episodes.html. Whenever i put content on them none of the styles or anything applies.

    what i guess i want to know is, where does the actual content for all the pages go?...i know its a stupid question and you probably can't understand half of it but if you could just try and unscramble it'd be much appreciated.

    Cheers, Finn

  50. Comment #50 (Posted by www. strictlyfps .com)
    Tuesday September 23rd, 2008 02:58:19 AM
    Actually don't worry mate i think i've sorted it.

  51. Comment #51 (Posted by Hassan Sayed)
    Tuesday September 23rd, 2008 09:06:46 AM
    Great..
    Tell others how you did it :)

  52. Comment #52 (Posted by www. strictlyfps .com)
    Wednesday September 24th, 2008 01:22:50 AM
    what i was having trouble with was what i previously said so i:

    copied index.php and made several of them named different things like episodes.php, screenshots.php etc. inside these .php files i used the same code as index.php only changing the src from pages/main.html to sub-directory/episodes.html or sub-directory/screenshots.html. In sub-directory/episodes.html i copied main.html code then edited the main content leaving the !!HEADER!! and !!COMMON_TAGS!! and whatnot.

    Hope this helps someone out there.

  53. Comment #53 (Posted by Hassan Sayed)
    Wednesday September 24th, 2008 02:28:44 AM
    It is always great to find our own solutions, especially if it works because we understand our solution the most.
    Your solution is very good, although it creates some unnecessary extra files and subfolders. For your purpose, you can cheat the system and put the name of the page in the ‘if statement’.
    For example
    after
    if (isset($_REQUEST['page']))
    you can have something like:
    if (isset($_REQUEST['page']) == “episodes”){
    … here goes the code replacements that are specifically for the episodes page in your template system.
    }

    If your code works, work on enhancing it :)

  54. Comment #54 (Posted by http://ereus.blogspot.com)
    Thursday October 23rd, 2008 08:05:41 AM
    Very nice tutorial.. Help me a lot! Thank you!

  55. Comment #55 (Posted by Hassan Sayed)
    Monday October 27th, 2008 01:05:46 AM
    If you are really serious about learning the php template system, we have built a php/mysql photo gallery that is based on this system. By studying the script, you can learn a lot of how to advance on building websites using this template system. The photo gallery script uses lots of functions, a template design switch which allows you to have many design templates and the ability to switch between them, also shows you how to use mysql, functions and lots of many other coding techniques. Check it out...the price is too low if you really want to learn.
    The script is at:
    http://www.zeronese.net/webmaster-tools/php-photo-gallery/

  56. Comment #56 (Posted by relizers.ueuo.com)
    Wednesday November 26th, 2008 12:43:02 AM
    finally i found..

  57. Comment #57 (Posted by D.)
    Saturday December 20th, 2008 02:00:19 PM
    hi,
    i've used the exact code from the tutorial, and i'm getting an error which says it can't find /design/common_tags.html

    this seems logical, since i don't have that file anywhere. it was nowhere in the tutorial and i googled it, but didn't find anything...

    i'm feeling pretty stupid, could someone tell me what im doing wrong? would be a great help.

    thanks,
    D.

  58. Comment #58 (Posted by Hassan Sayed)
    Saturday December 20th, 2008 03:31:12 PM
    Try one of these, the best that suits your situation:
    1- You can download the templating_system.zip from the Attachments section above just below the rating area. That has the common tags file.

    2- Create your own common tags file "common_tags.html", place it in the design folder and place in it any common tags that you need for your website, such as some javascript or the source to your styles file.

    3- If you do not need the common tags file, in the index.php file you can delete the line that says:
    $page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content);
    or at least comment it by adding at begining of the line two forward slashes. //

    Hope that help, good luck

  59. Comment #59 (Posted by Deane)
    Wednesday December 31st, 2008 09:57:15 PM
    I'm just starting to learn PHP and although I understand what this system is doing, there is one thing I need to clear up before I can truly understand how it works:

    if(isset($_REQUEST[.....].....

    how is the $_REQUEST set? I know $_POST and $_GET, there are a lot of examples of them on the web. But I can't find a single thing on $_REQUEST, about how it is used, and how it is set...

    If you can clear this up, I would be much grateful and maybe I can finally appreciate this templating system of yours. Thx a bunch

  60. Comment #60 (Posted by Hassan Sayed)
    Thursday January 1st, 2009 02:17:25 AM
    The simplest answer is: If you are comfortable using the $_GET, replace all the $_REQUEST by $_GET, the system will work just fine.

    Good luck and
    Happy new 2009 :)

  61. Comment #61 (Posted by Deane)
    Thursday January 1st, 2009 08:04:03 PM
    Ok I think I got it. Please correct me if I'm wrong here Hassan.

    The if(isset($_REQUEST['page']) part will not translate to TRUE and will therefore continue to the ELSE part. In this code of yours, you provided no way of setting the variable $_REQUEST['page'], so the above mentioned IF() will never be TRUE unless we add some code to set its value. Is that right? Or did I just made a rookie mistake? I'm a beginner so I hope you understand.

    A good place to set the value of that $_REQUEST (or $_GET in my case) is via links to other pages like for example, in your main.html, there's a link to a page called "content.html", the code would probably look like:

    <a href="index.php?page=content.html"> *using $_GET here :)

    The only problem I see with this is the website address will always stay at index.php. The workaround I can think of is copying the index,php code to a new file and call it contents.php, then make necessary changes on the link.

    Like I said, that's my beginner's way of doing it, I don't even know if I'm right about the whole thing. Any input from you, or anyone else, will be greatly appreciated. THX!

  62. Comment #62 (Posted by Hassan Sayed)
    Thursday January 1st, 2009 11:37:23 PM
    Deane, Deane…I don’t know how you got to that conclusion. Ofcourse, if(isset($_REQUEST['page']) will translate to true whenever the page variable has a value. Otherwise how would we let the templating system work with more than one page?

    In your example:
    index.php?page=content.html means that
    $_REQUEST['page'] = content.html

    Now note that in this case, inside the if statement, it checks to see if “content.html.html” exists in the pages folder. What you want is for it to check for “content.html” (with one .html extension) and not content.html.html

    For that purpose, either have your link to be:
    index.php?page=content ( I prefer this method because I think it is more secure not to let your users know the extension of your pages)
    or inside the if statement change
    if(file_exists("pages/".$_REQUEST['page'].".html"))
    to
    if(file_exists("pages/".$_REQUEST['page']))
    The code then will fetch the content.html content.

    All this is the same and valid if you are going to use the $_GET value.

    Since you are starting to learn php, I suggest when you are in doubt to use some debugging statements to print the values of your variables, for instance, to see the values of the $_REQUEST['page'] or $_GET['page'], simply add an echo statement that prints the values of these variables and see how they change.
    For example,before the if statement add
    echo “The $_REQUEST['page'] value is: ”. $_REQUEST['page'];

    This should clarify some ambiguities.
    Let me know if you need any more help.

  63. Comment #63 (Posted by Deane)
    Friday January 2nd, 2009 03:06:14 AM
    Some faults of mine that I'm gonna apologize for:

    1. I didn't see the statement wherein you said we have to type "main_folder_of_files/index.php?page=main" to see this template at work. Obviously, this will assign a value to the 'page' variable so the if(isset($_REQUEST... bit will be TRUE. I just assumed to type just "index.php" which will still work although it will lead to the ELSE statement of the main IF. That's the reason why I made a mistake in saying the IF part will not be true. I even used the ECHO trick before I even got your answer but I didn't get any value bcoz I didn't add the "?page=main" bit. I just assumed it will be given a value inside the code.

    2. Yea, I realized about the content.html part soon as I submitted my previous comment, my mistake.

    I got this one totally understood now, and I like it even more, I'm gonna build on this, try to improve it if I can to suit my needs. Thank you for this tutorial Hasssan. I should read everything first before I comment from now on :)

  64. Comment #64 (Posted by Stan)
    Thursday January 8th, 2009 10:35:32 PM
    I love this template system however I have two questions/problems:

    1.) I used the system as the tutorial states and it worked great however. I would like the header, sidebars and footer to remain constant and the "body" section to change. How can I create the links to have the pages display in that space. I tried <div id="content"> but dont know what to add to the link.

    2.) I am going to have a php page setup to have a form that my users can submit information to. This form will write a html or text file. I need to be able to ahve the main.html include the contents of that file. I have tried
    <?php include("filename.html") ?> also I checked to make sure SSI were possible and they were using .shtml so I tried adding <!--#include virtual="filename.shtml" --> in both cases the file was in the same folder as main.html.

    Can you provide any assistance? My wife is really getting on my back to add this functionality.

  65. Comment #65 (Posted by Hassan Sayed)
    Friday January 9th, 2009 12:29:17 AM
    Well, the purpose of the template system is to do just that, have some constants such as the header and the footer; then have variables such as the content of each separate page.
    Your answer is in the tutorial if you study it well and in the comments also that discussed several scenarios. Look at comments: #19, #31,#33,#40,#53 for example.

    If you have downloaded the templating system, you will see that the demonstration page has an empty space in the middle where you can add any html or content.

    You can also work in reverse. For example, create the page content that you want and then add the header, footer and column tags as needed. Then call it using the page name as directed in the tutorial.
    Look at the demo here:
    http://www.zeronese.net/knowledge-base/demos/php_templating_system/
    you can replace the empty space in the middle with any content that you want.

  66. Comment #66 (Posted by Stan)
    Thursday January 15th, 2009 10:31:05 AM
    Ok, I think I have it all worked out and am thoroughly enjoying the ease of use a templating system like this provides. I am stuck though on including a .php page.

    The following is what I have:

    right_column.html includes the code:
    !!SERVER_STATUS!!

    index.php includes the code before echo $page_content; :
    include("serverstatus.php");

    $page_content = str_replace("!!SERVER_STATUS!!", file_get_contents("subpages/serverstatus.php"),$page_content);

    and serverstatus.php includes the code:

    <?php

    include_once('war_ss.php');
    $status = war_ss('Ungrim');
    echo 'Ungrim Server is '. ucfirst($status);

    ?>

    What happens is the include statement in index.php places the executed php code in the main page and not in right_column.html. The $page_content is totally ignored.

  67. Comment #67 (Posted by Hassan Sayed)
    Thursday January 15th, 2009 08:34:20 PM
    Stan, that will happen if you have echo or print statements in the "serverstatus.php".
    You are in the right direction, but you should use functions to get strings and replace them in the $page_content.
    Look at Comment #19 it explains how to approach what you are trying to do.

  68. Comment #68 (Posted by http://forseti-ro.mn4free.com/)
    Saturday January 31st, 2009 12:51:15 AM
    First of all thank you for the tutorial, I'm learning PHP and this helped me a lot.
    Now I have a question:
    How can the content of a div at main.html be replaced with something different?

    My layout is similar to this image:
    http://i469.photobucket.com/albums/rr60/ForsetiRO/layout.jpg

    I want to use an image as a link and when the user clicks the image it will remove all the content of "content" div and replace it with a different one. I'm lost at this point, tried with onclik and AJAX but it didn't work.

  69. Comment #69 (Posted by Hassan Sayed)
    Saturday January 31st, 2009 09:33:05 AM
    I will try to understand your question.
    First I don’t recommend the ajax or javascript approach to change content, this is not good for your search engine optimization.
    The layout that you have provided is exactly the same layout in the template files. You can download the template files from the attachement section just below the end of the tutorial.
    If you want your menu to be available on all your web site, put it in the header. If the menu is only for a specific page, your would include it in the content of that specific page.
    To change the content, you will just need to create a new page and put the content their and then link to it.
    The template files have a main page and a tutorial page. They are two different pages with different content. In your main page put the image and link it to the subpage, I don’t see the problem.

    check the demo here:
    http://www.zeronese.net/knowledge-base/demos/php_templating_system/

  70. Comment #70 (Posted by http://forseti-ro.mn4free.com/)
    Saturday January 31st, 2009 11:11:55 AM
    Let's put it this way, I want to make the "content" div a variable and make a link that can change the variable.
    Example:

    - 'content' div at main.html displays "Welcome to the website!"
    - user clicks link 'information' in the menu
    - "Welcome to the website!" in 'content' div at main.html will be erased and then be replaced by "This is the web info" (which is the text at information.html).

  71. Comment #71 (Posted by Hassan Sayed)
    Saturday January 31st, 2009 11:28:14 AM
    The appropriate way is to make the pages variables not the content. Like I said it is a bad idea to change the contents of the div on your web page using javascript and ajax because this will lower your seo. Besides,ajax and javascript will deviate the subject of this tutorial.

    What I would do, create the information.html page, put whatever content you want in it and link to it from menu, main page or wherever appropriate.
    Now this does not mean that the templating system will not work with ajax to change content. Just take the confusion of using a templating system from your head and work as you would on any regular web page. The templates in this system are regular html, so if you want, make it work out side the system and then copy paste it to your main page.

    It is like when you first learn recursion, you have to trust it works and then it will!


  72. Comment #72 (Posted by Neeraa (http://www.neeraa.co.cc))
    Wednesday March 25th, 2009 08:25:55 AM
    Thanks for the useful tutorial.
    I am very new to PHP,
    1).I am building a website with lot of pages with the same template like in your example.
    But I need it to make very easy, i am thinking of a navigation system which not call for a page but only change the content part of the page.
    that allow me to create only a new content1.html file when i needed to add a new page to the navigation.

    Is there a any possibility of doing this by altering this PHP template

    2).When i use some java script pop up boxes with this navigation system it doesn't work (which you can find in this my page-http://neeraa.site40.net/index.php?page=main.html)
    this script allows to open a external file in the same page as a pop up (like which comes in, when opening images in the yahoo mail)

    Could you help me on this

    Thank you for your time.

  73. Comment #73 (Posted by Hassan Sayed)
    Wednesday March 25th, 2009 01:42:57 PM
    Hi Neeraa,
    For question one, I would say it is already implemented in the template and if you tweak the code a little you will get what you want. Let me try and give you a scenario.

    If all the pages are the same, you can remove the if statements at the beginning and make the $page_content always have the value of the page you want to be the template for all the pages.

    So instead of having:
    if (isset($_REQUEST['page']))
    {
    if($_REQUEST['page'] !="")
    if(file_exists("pages/".$_REQUEST['page'].".html"))
    $page_content = file_get_contents("pages/".$_REQUEST['page'].".html");
    else
    if (file_exists($_REQUEST['page'].".html"))
    $page_content = file_get_contents($_REQUEST['page'].".html");
    else
    echo "<center>Page:".$_REQUEST['page']." does not exist! Please check the url and try again!</center>";
    }
    else
    $page_content = file_get_contents("pages/main.html");


    You would have
    $page_content = file_get_contents("pages/your_template_page_here.html");


    Then you would create a content token that works the same like all the other tokens such as the header and the footer. You would then change the content according to the page that is requested.

    For question 2, I looked at the html that you provided at ttp://neeraa.site40.net/index.php?page=main.html, and that html is a mess, you have many head and body tags.
    I suggest that you take that html and debug it to see where the problem is. You should have no problem with java.

    Always remember this when programming php: the output to your client is html, so you have to make sure you produce good html.

    I hope that helps :)

  74. Comment #74 (Posted by Neeraa)
    Thursday March 26th, 2009 12:47:34 AM
    Thanks for your quick reply Hassan, you may not understood my question
    I am thinking of a way
    How to call a separate .html page in to a token, just clicking on a link on the same page. (Some thing like when we are using .html frames we can call a external page in to the frame with out changing the address in the address bar).
    Is there a possibility of doing this using PHP

  75. Comment #75 (Posted by Hassan Sayed)
    Thursday March 26th, 2009 12:02:26 PM
    The short answer for this question is yes. Yes you can do that.
    However, I do not recommend doing that for search engine optimization purposes. Unless you are providing a thank you page or a confirmation for something, do NOT do that.
    Like I said, php outputs html, but to do what you are talking about, you need to know more than html, maybe ajax or javascript.
    If you want to do it using pure html and php, I recommend that you download our free contact us form, study the code and see how something like that might work for you. After the contact page is submitted, error codes or confirmation shows on the same page and same url. This can be done in many different ways depending on the different scenarios that you might have.
    You can look at the contact us form by clicking at the webmaster tools in the main tool bar above, then on the left menu there is a link to the contact us form. Download it, test it and see how something like that might work for you.

    Good luck

  76. Comment #76 (Posted by Joanne)
    Wednesday April 8th, 2009 11:43:22 AM
    Great work Hassan! This is a fantastic tutorial:)

    I have an issue when I upload the .htaccess file to the server. The following error comes up:

    Server error!

    The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there was an error in a CGI script.


    I really need to have search engine friendly urls. Can you please offer any suggestions?

    Thanks a lot

  77. Comment #77 (Posted by Hassan Sayed)
    Wednesday April 8th, 2009 02:33:51 PM
    The error message that you are getting is not enough to figure out the problem.
    The .htaccess included with the download is very simple and all what you have is directing the urls. You might want to check your server’s configuration to detect the problem.
    You can also try to find the problem by elimination. That is start with a blank .htaccess, check if the problem still exists and then add the code line by line to see which code is causing the error.
    Let us know where you get with this.
    Good luck

  78. Comment #78 (Posted by Joanne)
    Sunday May 3rd, 2009 10:35:46 PM
    Further to this .htaccess issue: the site files have been uploaded to a different server now.

    Htaccess code is as you've stated above.

    There is no error message, but the pages don't display as www.sitename.com/about-us.html, etc.

    They still display as www.sitename.com/index.php?page=about-us.

    Would you have any idea as to how I can make the URLs search engine friendly?

    Thanks a lot

  79. Comment #79 (Posted by Hassan Sayed)
    Sunday May 3rd, 2009 10:48:19 PM
    Looks like you are confusing what the .htaccess file does with your html code!

    The .htaccess file does not make the links display in any manner, it makes them “work” in certain manner.

    The files and code that are responsible of displaying the links on yourpage are your html files and code, or any file generating your html code such as your php scripts.

    The rules that you include in the .htaccess file makes the links behave in a certain way. For example, the ‘RewriteRule (.*).html ?page=$1’ rule only redirects the about-us.html to /index.php?page=about-us

    To know if your .htaccess file is working, point your browser to: http://www.sitename.com/about-us.html
    If you see the about-us page, this means your .htaccess redirect rule is working and you need to change the link in your html code. You know that becuase you actualy do not have about-us.html file in your root directory, but the .htaccess and php make it look as if you do have the file in the root folder!

    I hope that this helps and I recommend that you do some more research about the .htaccess.

    Good Luck :)

  80. Comment #80 (Posted by Joanne)
    Monday May 4th, 2009 02:33:02 AM
    Sorry, I'm still confused:(

    I have the index.php, then I have the pages folder which contains all pages - e.g. main.php, about-us.php, contact-us.php.

    The code in the .htaccess file is:

    RewriteEngine on
    Options +FollowSymLinks
    RewriteRule (.*).html ?page=$1

    When I browse to www.sitename.com.au/about-us.html, it comes up with page not found.

    Can you please help me get this right?

    Thanks a lot.


  81. Comment #81 (Posted by Paul Marchinton)
    Sunday May 10th, 2009 07:51:40 AM
    Sorry this is probably a very basic question but i am just beginning to learn

    You say create folders on the server and files within these folders. Also you say create a php index file within the root directory
    For the learning process can these files be put directly within the C drive IE C/index.php Etc Etc if they can then which file or folder do i direct my root directory path to within the appache configuration

    I have put the 2 folders then files within the folders you have instructed in you tutorial in a folder where the path was C/public/then the 2 folders and index php. I then deirected the directory path within the appache config to the public folder but this gave errors please can you help

    Not sure if i explained this 2 well

    Paul Marchinton

  82. Comment #82 (Posted by Hassan Sayed)
    Sunday May 10th, 2009 02:09:08 PM
    To Joanne
    Sorry for the delayed answer. You propably has solved the problem.
    However I think you are still in the first phases of testing your php scripts. What heppens when you try to access the about-us page with out redirection?? I mean does it load when you access it using:
    main_folder_of_files/index.php?page=about-us
    Does it load? What is the message you get? Let me know if you are still having trouble.

    To Paul:
    When we say the root folder, we are talking about the root of the website. In a windows case (which I think is yours), it is the htdocs folder. So the root folder would be:
    C:\pathtohtdocs\htdocs\yourwebsiteroot\index.php
    So as you can see, ‘yourwebsiteroot’ is the root folder, and 'folders' under it is a sub-folder (also called sub directory).

    There is never simple question, there is always simple answers :)

    Best wishes.
    Hassan

  83. Comment #83 (Posted by Brian)
    Tuesday May 12th, 2009 07:10:29 PM
    This may be a silly question, but I'm trying to query results from MySql into a list menu. The following is what I have...and works perfectly outside of the template engine.

    ------------------------------------

    <select name="select">
    <option value="">--- Select ---</option>

    <?

    $list=mysql_query("select * from table order by id asc");

    while($row_list=mysql_fetch_assoc($list)){
    ?>

    <option value="<? echo $row_list['id'];?>"><? echo $row_list['record']; ?></option>

    <?

    }

    ?>

    </select>

    ------------------------

    I understand I need to create include this within my index file, and create a function to call to. ...but I'm having a heck of a time getting the function to work. How exactly would I create a function around the above code?

    Thanks so much!

  84. Comment #84 (Posted by Hassan Sayed)
    Thursday May 14th, 2009 12:02:00 PM
    We discussed something like that several times in the comments, for example see comments numbers: 40,41,42

    Basically, you would not use an echo statement to show your code, otherwise you would be working outside the system!!

    I would do something like this:
    //code begin
    function mylist(){
    $list_query=mysql_query("select * from table order by id asc");
    $list = '<select name="select"> option value="">--- Select ---</option> ';
    while($row_list=mysql_fetch_assoc($list_query)){
    $list.= '<option value="'.$row_list['id']'">'.$row_list['record'].'</option>';

    }
    $list .= '</select>';
    return $list;
    }

    $page_content = str_replace("!!MY_LIST!!", mylist(),$page_content);

    //code end

    So, now put !!MY_LIST!! where you want it to show!

    Good Luck :)

  85. Comment #85 (Posted by php)
    Friday June 5th, 2009 01:16:09 AM
    Your template is in full implementation and has been 4 an Year NOW....
    One ques. on extending it....
    suppose I Want to ad delete containers on a regular basis...
    n for that I have divided me css in three main parts, uppercss, midcss, and bottomcss and for each of then I have !!UPPERCSS!!, !!MIDCSS!!, and !!BOTTOMCSS!!
    if I have 3 diff sub containers for uppercss i.e. topmenu, logo, banner
    HOW do I achieve this using this template machine...?

  86. Comment #86 (Posted by Joanne)
    Tuesday June 9th, 2009 09:47:24 PM
    Hi Hassan,

    My apologies for not replying sooner. The problem I was having was server related. I have since developed two more sites on different servers and the redirect works perfectly as you state:)

    Thanks for your help and patience with my question.

    I have another question now:

    One of the website owners wants to update their site using Adobe Contribute, but this is not possible, I presume?

    Can you advise how to add a CMS (hopefully a simple one) to this templated website?
    Thanks

  87. Comment #87 (Posted by Hassan Sayed)
    Saturday June 27th, 2009 04:08:13 PM
    php i did not understand your question...sorry!!!

    Joanne, unfortunatly i am not familiar with Adobe Contribute so i do not want to miss advise you. However, i have done some projects before where i implemented this templating system to dreamweaver templates.

    this template system is a great base for a CMS, and it is the base of many websites that we build at zeronese. A hint to start is to remember that we use tokens to show content also, instead of getting the pages from html you can pull that from mysql.
    It is a whole project which goes byond a comment, you can do it if you do enough research, planning and work.

    Good Luck.

  88. Comment #88 (Posted by John)
    Monday August 24th, 2009 07:11:07 PM
    Hello Hassan,

    I apreciate your tutorial to help learning PHP with a Website. Have read your tutorial and the 87 comments over and over. I have Ubuntu's LAMP server loaded with your zip file.

    When I go to the web site “www.../zero", it comes up fine. But when clicking on the tutorial link, all I get is the !!COMMON_TAGS!!, !!HEADER!!, !!LEFT_COLUMN!!, !!RIGHT_COLUMN!!, !!FOOTER!! over the screen.

    How does clicking on this link run through the index file again so these variables can be assigned by selected page?

    Is this caused by Apache when a link is clicked on the web page?

    Tried this from XP Pro with IE 8 and Linux with Firefox, same results.

    The dynamic method, "www.../zero?page=tutorial" does works.

    I am new on learning PHP. Appreciate any suggestions or solution to get this running.

    John

  89. Comment #89 (Posted by Hassan Sayed)
    Tuesday August 25th, 2009 02:54:11 PM
    if the dynamic method is working, then your problem is in the .htaccess file.

    i can't guess, but check if your server is configured to execute the .htaccess or chech if you have it at all.

  90. Comment #90 (Posted by John)
    Friday August 28th, 2009 11:59:44 PM
    Hello Hassan

    Thanks for the response. I was still digging into this issue.
    Googling, reading, trying several suggested solutions

    Finally, located the working solution.

    1) In the /etc/apche2/site-available folder, edited the default file.

    Changed the "AllowOverride" from "None" to "All"
    - without this, I was not getting any Apache errors the /var/log/apache2/error.log
    - now errors started to list when clicking the links on the first page.

    2) Ran "sudo a2enmod rewrite" to enable the rewrite module in Apache2

    Clicking the links on the initial page now work!!

    John

  91. Comment #91 (Posted by Hassan Sayed)
    Saturday August 29th, 2009 04:58:40 PM
    Great! I am glad it did :)

  92. Comment #92 (Posted by http://rapid4me.com)
    Monday November 2nd, 2009 04:18:49 AM
    Very helpful, thanks a lot!

Post a comment, a question or any related helpful information

To post a comment for this article, simply complete the form below. Fields marked with an asterisk are required.
   Name or Website::
   Email:
* Comment:
* Enter the code below: