continued from part one .
This is the second in a planned six part tutorial on PHP and building web sites.
What you will need for this tutorial :
- You will need either PHP enabled web space provided by your ISP, or a PHP enabled web server installed on your own computer.
- You can create PHP pages the same way as you do HTML pages, so no specific editor is required or assumed, use what you normally would in your web site creations.
- Finally, this tutorial assumes you are familar with the basics of web design in general and that you understand the basics of HTML coding. Future Tutorials may require the presence also of the mySQL database, but we only touch on it with a simple example. This six part series is not set in stone as to which route we are taking, so please, if you want something specific covered, let us know.
Step 1 - a quick recap
Part One introduced you to the use of the 'include' statement within PHP and gave a brief but powerful example of its more common uses, that of including files to reproduce the 'header' and 'footer' of the page, leaving just the main content of the page as hard code. A summary of which is below :-
Created file 'header.inc'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body>
Created file 'footer.inc'
</body> </html>
Created simple.php, which called upon above 2 files using include statements, and also contained a simple bit of html as part of the actual page content.
<? include 'header.inc'; ?> <p> This is a default site template page.</p> <? include 'footer.inc'; ?>
This time, we build on this, using the same principles, to include a navigation menu. This can then be used as the basis for all pages in the site. The advantage of this is that by changing just this one 'nav.inc' file (see below), we change the navigation on every page of the site.
step 2 - create the navigation menu
As you get familiar with include files and their usefuless, you might go straight ahead and produce code directly into these files, add and include statement into your PHP pages, and your done. If you are more comfortable you can do what we did in Tutorial One, that is create the code in the actual web page, get it working how you like it, then strip out that code and copy it into the include file. It's up to you , and I do both, depending on the complexity of the code. Or, you may have existing code already. Lets create a simple nagivation menu using our existing example 'simple.php', once tested and working, we'll strip it out and place it in a new file for including later.
A simple navigation menu can be something like :-
<div id="navmenu" > <ul class="level_one"> <li> <a href="#">Home Page</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Articles</a> <ul class="level_two"> <li> <a href="#">Article One</a> </li> <li> <a href="#">Article Two</a> </li> <li > <a href="#">Article Three</a> </li> </ul> </li> <li> <a href="#">Contact Us</a> </li> </ul> </div>
If we add that directly to our existing 'simple.php' we end up with:-
<? include 'header.inc'; ?> <p>This is a default site template page.</p> <div id="navmenu" > <ul class="level_one"> <li> <a href="#">Home Page</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Articles</a> <ul class="level_two"> <li> <a href="#">Article One</a> </li> <li> <a href="#">Article Two</a> </li> <li > <a href="#">Article Three</a> </li> </ul> </li> <li> <a href="#">Contact Us</a> </li> </ul> </div> <? include 'footer.inc'; ?>
Now, you can test that as it is in a web page, make sure it works, validate it to xhtml1.1 standards etc. If you are then satisfied with it all, we will go ahead and move our menu to a separate file.
step 3 - move the navigation code
Ok, so now the navigation code is working how we like it, we can remove it and place it in our 'nav.inc' file.
Create a text file and place our navigation code in it, but we leave the container 'divs' as part of our structure in the main file.
<ul class="level_one"> <li> <a href="#">Home Page</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Articles</a> <ul class="level_two"> <li> <a href="#">Article One</a> </li> <li> <a href="#">Article Two</a> </li> <li > <a href="#">Article Three</a> </li> </ul> </li> <li> <a href="#">Contact Us</a> </li> </ul>
Save this file as 'nav.inc' . Now we need to include it in our main simple.php file using this statement:-
<? include 'nav.inc'; ?>
Our main PHP file now looks like this :-
<? include 'header.inc'; ?> <p> This is a default site template page.</p> <div id="navmenu" > <? include 'nav.inc'; ?> </div> <? include 'footer.inc'; ?>
Lets save this file as 'simple_2.php'.
step 4 - upload and test
We have in this session created two new files, the first is our altered main page now called 'simple_2.php' and our navigation menu code in 'nav.inc'. Upload these to your webspace and test. The result should be like our simple2.php . It's not pretty I'll admit, and we do not have any styling or other content, but that is for CSS and why I prefer to leave the <div></div> elements in the actual page and not transfer them with the rest of the code into an include file - you can see at a glance in simple2.php that to style the contents of our 'nav.inc' file all we do is edit the stylesheet and create an entry for #navmenu.
summary
I hope that now you understand even further the power of PHP Includes. Every page on your site only need be the same generally as our above example except for the actual main content, then each page on your site will reference them as they are being requested. This has the advantage that all you need to do to change your navigation menu across the whole site is to edit just one file - 'nav.inc' - thus saving you having to edit and upload every affected file on your site !
Equally as important IMHO is the fact that you only then need to upload just this one file for the effect to be immediate. For those that do not use templates as provided by WYSIWYG editors such as Dreamweaver you might not get that last statement.
Dreamweaver templates also allow you to make sitewide changes from just one file - the .dwt template that a site is based on. Any change to this one template will be instantly changed in all the files on the site that are based on that template. Re-read that last sentence as it highlights one important fact between templates and our PHP include way of doing things. The Dreamweaver template when changed, will then change every affected file on the site, so you will still need to upload EVERY affected file, not just one but all of them.
Want to know more?
This tutorial saw the addition of another include file (nav.inc) , and 'simple.php' from Part One has been re-named to 'simple2.php'. These files along with 'header.inc' and 'footer.inc' are available for download as a zip package. Just unzip them all into the same directory and it will work as-is, you can then customize them or base your existing site on them, or just wait until next month when even more will be added.
Download the PHPTut2.zip files.
I think we have done enough on includes for the time being, next time we move on and introduce some variables. With the page 'title' being in our header.inc file, this means that all pages will have the same title, amongst other things, we show you how to cure this.
Related Tutorials
Introduction to PHP - Part One
Introduction to PHP - Part Three
Introduction to PHP - Part Four
