Creating Common Navigation For A Website: Part 2

Prerequisite: Basics of HTML.

Download example  Creating_common_navigation_for_a_website___Part_2.zip ( 3.41K ) Number of downloads: 1
(.zip) (needs a php enabled server to view the result of the scripts)

The first part of the tutorial (click here) described the method of creating common navigation for websites using pure html. That was posted almost a year ago. I happened to visit that, and thought to write a second part for it. As the previous article this article too is for absolute newbies guiding them to create a common set of links for a website. But this method uses PHP scripting. If you don't know what is PHP, for time being just know that the method described ahead will work on any free/paid web host offering php. Also don't worry about the php code, just read a basic php tutorial and you will be on the track. If you are php developer then you may also read the latter part of the article and leave your comments about it.

Ok, so let's get started.

1) Firstly, create an html page containing all the links which you want to appear on every page of your website. Name this file as "nav.html". The html code should look something like this:



You would better link those files as site relative (for example http://www.domain.tld/art/article.html). This will enable you to create any number of subdirectory combinations.

2) Now create the pages "page1.php", "page2.php" and "page3.php". But... wait, if you are using windows there is a problem in creating those files. So, first select the "Tools" menu, then select "Folder Options...". In the popup box select the "View" tab and uncheck "Hide extensions for known file types", press OK. Now right click anywhere and choose "New" "Text Document" to create the files.

3) In each of the pages, at the top of document, even before html tags/doctype you need to add the following code:



The code contains a simple php function which, when processed adds "../" after each loop until the path is correct. In simple, this function allows you to make upto 5 (change the number if you want more) folders and create a document just containing the code given in step 4. You don't have to worry about the paths at all.

4) Now place this code in each of the page wherever you want to show the link:



"include" is the top level folder containing the nav file. You can also have the file in server root, by making appropriate changes to the path.

Hey! That's it. You've done. Now if you did till here you know what to do next. Put the files on to the server and open page1.php from the browser. Now you have a common set of links which you can change once in "nav.html" and it is updated for the whole website (may be containing 100's of pages).

Advantages:
1) A simple, manageable set of links which you can change anytime only at one place and the whole site is updated.
2) Unlike the iframe method described in first part, this method doesn't add any extra code to the html.
3) Unlike in the iframe method, here, in this method nobody visiting your website can know that you are using a common set of links for every page.

Disadvantages:
1) Nothing in general, but just don't go overboard, "include"ing files everywhere on the page. Because each time you inlcude a file, the server has to open the file, read it, transfer it and then close it. So, the website may take a slight performance hit, not noticeable to living beings .
2) This is a solution for very basic websites. You will need CMS (Content Management System) if you want complex, dynamic, interactive websites. Even CMS's use "include"/"require", but that's another matter.

Some technical notes for the PHP developers:

You may ask "Why can't we use simple php include/require?". Wait... this tutorial is aimed at newbies who don't know much about server side scripting. So naturally they are creating individual pages instead of a PHP-MySQL templating system or similar methods. So what exactly happens is that, when we use include we have to change the path of the include file depending on the directory the current file resides. So the idea was to abolish the usage of default include funtion and automate the path defining process. That is what the function does.

As in include/require, there's no need to worry about directory relative/root relative/document relative paths. fsockopen includes are also not a good solution, as they are not enabled by default on most web hosts.

I came across that function in one of the php developer forums. One of my friends there told me about it. Actually I don't know who is the original creator of the function. Anyway that is really a creative idea. All the credit goes to that anonymous person. I have just presented you a practical example so that you can learn it and apply those in your projects. Happy coding.

Any doubts, comments are welcome.

Edit: Corrected malformed codes.

This post has been edited by pasten: Oct 28 2008, 06:02 AM