Help
Language: php, XHTML, CSS
Skill Level: Basic
Author: Sazzad Hossain & RIT webDEV club
Demo: http://webdev.netnub.com/template.php
Authors Note: PHP is perhaps one of the simplest language you can earn that can grant you soo much freedom with your site. In addition, it can also make your life a lot easier. If you are a webdesigner you will see why. First of all, php has many functions that allow you to substitute for a long list of codes. For example, in this tutorial I will talk about php include. What php include basically does is takes an entire page of coding from one location and brings it to the page where you requested it. So if I have a head section located in "/include/head.php" and I want it to show up in my index.php file; all I have to do is call for it using php include.
So whats an advantage of include?
If you want to modify your site, and you have tons of page, and do not want to modify each one of them separately; when you use php include, all you have to modify is the file your including. In this example, all you have to do is modify the header.php and footer.php (also the style.css) that will change the layout to whatever you wish. It sort of acts as an StyleChanger effect but it requires a bit more work.
Step 1: Create the file you want to call for. Example, this header file: "includes/header.php." So we have these codes for the header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="includes/style.css" /> </head> <body> <div id="holder"> <!-- holds the title and the navagation bar --> <div class="header"> <!-- holds the logo --> <div id="logo"> <img src="../images/logo.idontknow" alt="RIT Web Dev Logo" /> </div> <div id="nav"> <br /> <a href="index.php" alt="home">Home</a>| <a href="forum.php" alt="forum">Forum</a>| <a href="members.php" alt="members">Members</a>| <a href="about.php" alt="about">About</a>| <a href="contact.php" alt="contact">Contact</a> </div> <hr /> </div>
Step 2: Since we will not have the ability to edit this page for the pages that will have a different title, we will need to add a variable that will allow us to accomplish that. So in order for us to give custom title to our main pages, we will need to replace the title tags with the following:
<title> <?php echo $title; ?> </title>
Step 3: Now lets create our footer file (you can create a sidebar, but I'm skipping that for the sake of time). We don't have to make any changes in this file unless you want to include something else from another location. Lets call this file footer.php and put it also in the includes folder.
<hr /> <div class="copyright"> © 2007 RIT Web Developers, All Rights Reserved <br /> <a href="contact.php"> Contact Us </a> </div> </div> </body> </html>
Step 4: Okay, since we are now done with all the files we want to include in our index.php file, lets create the most important file: index.php. A general HTML file without header and footer will look something like this:
<div id="content"> <h1> Content Title </h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis ante. Ut sit amet arcu eu lacus sodales egestas. Sed metus risus, placerat vitae, molestie sit amet, consequat eu, erat. Quisque tincidunt, urna sed pellentesque adipiscing, risus nulla congue urna, et pharetra tortor massa in leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tellus. Phasellus iaculis lacinia diam. In nonummy, tortor id rutrum fermentum, metus lacus ultrices turpis, sit amet hendrerit pede leo vitae neque. Aenean lacinia metus eu tellus. Quisque tempor dolor at velit. Etiam luctus fermentum justo. Pellentesque erat mauris, consectetuer a, commodo at, ultrices vel, lacus. Proin sit amet leo. Vivamus sit amet tellus. </p> </div>
But that does not include our header.php and footer.php. So we need to call for it. We can accomplish this by using 3 lines of php codes. So above all the codes in our index.php code, we want to include our header. We can do this by pasting the following code:
<?php
include("includes/header.php");
?>Step 5: Remember when we added echo $tittle; in our header to allow us to give the page custom title? Well this is the additional work needed to accomplish that. Before the area where it states include("includes/header.php"); we will add the following line of title:
$title = "Page 1";
Simply replace the Page 1 with your own page title.
Step 6: Now its time for us to call our footer. This can be accomplished the same way as in step 4. Simple paste the following code towards the bottom of the index.php file.
<?php
include("includes/footer.php");
?>Well your done! What you have to note is that you can place footer.php and header.php in any folder you want, just make sure you call it correctly. Many php programmers make that mistake, thereby end up spending hours finding the problem, although the problem is simple. Just as a word of warning/caution Windows versions of PHP prior to PHP 4.3.0 do not support accessing remote files via this function.
If you put all these codes together, you should get a page similar to the demo page (unless I end up modifying the page). If you want to use the same css, then here it is:
.copyright {
}
.header {
border: thick #000000;
text-align:center;
}
#holder {
margin: auto;
width: 700px;
}
#logo {
}
#main {
}
#nav {
}
/***************
Links
***************/
a:hover {
text-decoration:underline;
}
a {
text-decoration:none;
color:#0066CC;
}Cool Extras:
- PHP Date & Time function
im getting my grasp on basic PHP i dont feel a urgent need to be A hardcore php coder.
