Creating a Website Design Template System Using PHP--tutorial.jcwcn.com

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;
}

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Creating a Website Design Template System Using PHP

relation tutorial

Category

New

Hot