(0)
In this tutorial, we will be learning how to take an HTML template and convert it into PHP. We will also be learning how to make a simple template system including a header, footer, navigation, and index. This will save you a lot of time when making a large website with many pages that need the same header and footer. We will explore how to include pages, and how to use simple PHP switch functions to keep your site's navigation simple and clean.
Find your template:
First, you must find or make a template that you will be using for your website.
I will be using this template : http://www.free-css-templates.com/download/GreyBlog.zip
If you would like to download this template to follow along with us, please click the link above.
Edit the template:
When using a template, you should always modify it to fit your needs. I have modified the template as seen below.
I have modified it to what I would need for the website I'm making.
Know your divisions:
When using a template, you must know where to divide the header, footer, and index.
Above I have showed you where the template will be divided. The blue is the header, red is the index, and green is the footer. This template is set up differently than others as the navigation is on the right, and it doesn't have a full header. Most templates have it marked where the header, footer, and index are.
Start the header:
Now that we have the website coded and divided to perfection, we start by making the header.
Code:
<html>
<head>
<title>WDDB</title>
<style type="text/css" media="all">@import "images/style.css";</style>
</head>
<body>
<div class="content">
<div class="toph">
</div>
<div class="right">
<div class="title">B-RiZzY's <br> Portfolio</div>
<div class="nav"> <ul>
<li><a href="index.php">HOME</a></li>
<li><a href="index.php?id=about">ABOUT</a></li>
<li><a href="index.php?id=downloads">DOWNLOADS</a></li>
<li><a href="index.php?id=tutorials">TUTORIALS</a></li>
<li><a href="index.php?id=links">LINKS</a></li>
</ul>
</div>
<h2>Affiliates</h2>
<ul>
<li><a href="http://www.webdesigndatabase.net">Web Design Database</a></li>
</ul>
<br /><br />
<hr />
<div class="footer_text">
Copyright © 2008 <a href="http://www.wddb.com">Web Design Database</a><br />
Design: <a href="http://www.free-css-templates.com/" title="Free CSS Templates">David Herreman</a>
</div>
</div>
<div class="center">
Shown above, I took my header (The right section of my template) from the html file, and just simply pasted it into a php file. I named this php file "index.php".Do the main page:
Now that we have done the header, we must do the main page. I have coppied all of the main page's text from the center box. We included the <div class="center"> in the header, so that we do not have to include it on every page.
Code:
<h1>NEWS</h1><br> <h2><img src="images/more.gif"> Welcome!</h2> <p class="text">Welcome to the site. Please check my downloads... ect.</p> <p class="date"><img src="images/timeicon.gif"> Posted by B-RiZzY on Feburary 21, 2007 at 7:26 PM</p><br /> Notice: <div class="boxad">Website released soon!</div>Above is the code from the main content box. We will save this as "news.php" and save it in the same directory as everything else.
Now the footer:
Finally we must do the footer of our website. In most cases, the footer just closes off all tables and dividers that are opened in the website.
Code:
</div> <div class="footer"></div> </div> </body> </html>Above is the rest of the template left in our index.html file. Simply paste the remaining code and name it "footer.php" and save it into your directory.
The index:
The template is now done, but do not have an index to show our template. We must use include functions to include our header, footer, and news into our page.
Code:
<?php include("header.php"); ?>
<?php
$browser = $_SERVER['HTTP_USER_AGENT'];
switch($_GET['id']){
default: $inc = "news.php";
break;
case "links": $inc = "links.php";
break;
}
if(strpos($browser, "MSIE")){
print "<font color=red><b>This page may not be displayed properly in Internet Explorer</b></font><br />";
}
if(file_exists($inc)){
include $inc;
}
else{
echo "File not found";
}
?>
<?php include("footer.php"); ?>
As shown above, we are including the header and footer into our website. Below the header, you will see a switch function. We will go into description on that later, but if you look above, the default is set for your news.php (you main page.)Now the switch:
For our index, we included a simple PHP switch. This is used to keep our navagation nice and clean.
What the switch does is give you a clean website navigation, such as "index.php?id=links".
The "id=links" can take you to any page you would want and it would still include your header and footer on that page, so you do not have to include the header and footer on all of your pages.
($_GET['id']) is your variable you will be using. You can change the "id" to "page" "p" "c" or whatever you want.
Changing the variable would change the way you link to your pages. Changin the "id" to "page" would make your navigation "index.php?page=links" rather than "index.php?id=links"
For every page you want to have, you need to add another case.
Code:
case "links": $inc = "links.php";
break;
That shows the case for "links."For example, if you wanted to add another case for lets say, an About Us section... you would put:
Code:
case "about": $inc = "yourpagehere.php";
break;
You can add as many cases as you want. You can also have multiple switches and variables.Keep in mind, you do not have to use the switches. You can use
Code:
<?php include("header.php"); ?>
Your Content Here
<?php include("footer.php"); ?>
for every page if you would like.Doing this would not give you the variables, and you would have to directly link to your links.php page in your navigation and all of your other pages. For now, we will be using the switch function.
Keeping your template even cleaner:
To keep my template even cleaner, I have separated the navigation from he header.
In your header.php, find:
Code:
<div class="nav">and cut out all of the links down to the next </div> and paste them into a new file named nav.php and save it to your directory.
The code you will be putting in nav.php is:
Code:
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="index.php?id=about">ABOUT</a></li>
<li><a href="index.php?id=downloads">DOWNLOADS</a></li>
<li><a href="index.php?id=tutorials">TUTORIALS</a></li>
<li><a href="index.php?id=links">LINKS</a></li>
</ul>
Where that code was (below <div class="nav">) put Code:
<?php include("nav.php"); ?>
This will separate your navigation to help you when adding links with speed.Creating your other pages:
Now that we have the header, footer, index, and everything else done... you will create your other pages. This is the easy part.
In your index.php, add other cases for your pages.
I added downloads, tutorials, links, and an about us.
You will call to these pages as described above.
To call to the downloads, you would go to index.php?id=downloads, and so on for the rest of your pages. Add these links to your nav.php in the appropriate place.
For every page you want to add, you will need to add a case for it in your index.php
Create your pages one by one with ease now that we have the template system.
You now do not have to include the header and footer in your pages, which will keep your website nice and clean.
For your links.php, you may want to add something similar to mine:
Code:
<h1>LINKS</h1><br>
<table class="cells">
<tr>
<td class="coltop">Name</td>
<td class="coltop">Category</td>
<td class="coltop">Description</td>
</tr>
<tr align="center">
<td class="centerall"><a href="http://www.webdesigndatabase.net">Web Design Database</a></td>
<td class="centerall">Web Design</td>
<td class="centerall">Great web-design community.</td>
</tr>
</table>
That is just a simple links page for you to add your links to. Save this file as links.php in your root directory.Now you can add all of your pages this way.
Conclusion:
In conclusion, we have easily created a PHP website with only ONE template that we can include on every page. This website took merely minutes to make, and it should function as any other website, but be a lot cleaner and more efficient for your uses.
If you would like to see this in action visit:
http://www.wddb.com/demos/tutorialsite/
I uploaded everything we created in our tutorial. The about, downloads, and tutorials pages are missing because I haven't created them.
Below you will find our website that we have created from this template. Please leave the copyright intact for the original template maker.
Enjoy this tutorial, and I hope it helped everyone!
