Tutorial Blog

PHP includes – For Rapid Web Design

December 18, 2008 by Philip Beel · 8 Comments Post to TwitterPost to Yahoo BuzzPost to DiggPost to RedditPost to StumbleUpon




I was asked a while ago for some advice by a fellow web designer on how to save time when creating and updating web pages, it became apparent after talking to him for a few minutes that he was unaware of the possibilities that PHP could offer to rapidly improve site turnaround time. This tutorial is aimed at web designers with familiarity in HTML and CSS, no former PHP knowledge is required. I will show you just how easy it is to use PHP’s include method to clean up and speed up your web design practice.

What Can Includes Do for Me!?

There are a multitude of reasons why you would want to use includes, the primary one however is to stop the duplication of code, imagine you have a 100 page website to design, every page has the same template design, just different content, this means you will find yourself most probably copy and pasting all your headers and footers across all pages. Then imagine you are asked to add a new item to the menu, do you really want to go through every page and make the change by hand? if no is the answer, then this is the tutorial for you. I will show you how to source a file from one location, meaning updating and maintaining is easier than ever!

What You Will Need

In order for this to work all you will need is a web sever which supports PHP, most providers will offer this as standard. Other than this open up your favorite text editor and away we go.

The Page

To start with we will create a new page, call it index.php, note here that we are using a .php syntax, all this does is tell the sever that our page may contain some PHP code for it to interpret. In this file lets create  a simple page like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My Page</title>
</head>
</body>
<h2>My Page Heading</h2>
<p>The contents of my page</p>
</body>
</html>

The Structure

Now we have laid out a very basic html file with a title, heading and a paragraph, lets create a new folder, call it includes, inside of this we want to create 2 new files, 1 called header.php, and another called footer.php so your folder structure should look like this.

The Includes

Lets take header.php first, now you don’t have to use a .php syntax, but for consistency I have chosen to do so. In this file lets put the header information from the original index.php file, we will take everything from the <body> tag upwards. which should look like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>

This now contains all the header information for our file. Lets put the footer information in our footer.php file which will look like this.


</body>
</html>

Now we have everything in place we can put in our PHP code to tie it all in together. All we want to do is lace together 3 files, by using the include() method. The code will want to look like this.

<?php
include('includes/header.php');
?>
<h2>My Page Heading</h2>
<p>The contents of my page</p>
<?php
include('includes/footer.php');
?>

The above code wraps our PHP code in  <?php ?> tags, all this does is tell the PHP engine on our sever that we are encountering a script inside which will need to be interpreted, for more information on this check out the killerphp. Inside these tags all we are doing is calling our PHP’s include() then inside the brackets we put the relative path to the file we are calling. For more information on includes check out the full documentation, if your feeling confident you should also check out the require statement, to see how you could improve this script depending on your requirements.

Now if we put all the code together and upload the files, you should see a completely rendered page, by checking the source you will be able to see the HTML tags also. This is a really easy and powerful way to create and control you pages quickly. It also cleans up your code, by having your content organised and structured. Try it out for yourself and see what it can do for you.



Comments

8 Responses to “PHP includes – For Rapid Web Design”
  1. Jo - http://www.think-robot.com says:

    OMG, what obviousness. Is there really a reason we need to have gazylion bloggers post about things that are in the PHP manual?

    It is especially annoying considering the online version of the manual is an amazing place for learning on it’s own.

  2. Adam - says:

    Cool tutorial thanks!

  3. Jack - says:

    OMG Jo, your arrogance astonishes me. Just because you know how to do something, you shouldn’t assume everyone else does. I thought this was an informative tutorial with clear examples. – get over yourself!

  4. munky - http://www.fyfi.net says:

    LOL, soooooooooooooo last century.

  5. Judy Benedict - http://www.giraffeweb.com says:

    This is a great post regarding what we at Giraffe Web have been doing for years! I personally like to use the includes of which have saved me hours of time updating sites. Because we went this route, we have not ever tried to use the DW template feature which seems to be very popular.

  6. Mike - http://www.takadesigns.com says:

    Looks like you can’t enter code… Here is a link:

    http://www.boutell.com/newfaq/creating/include.html

  7. Nikki - Logo Design Guru - http://www.logodesignguru.com says:

    I didn’t know about this. Thanks for giving me a better insight. Tutorials can be so helpful, I appreciate it.

  8. Adanal?,Adanal? Dizisi - http://adanali.kral.tc says:

    Thank You.

Tutorial Blog