Dynamic menu with php includesWhen I was learning HTML and making my first steps on server side scripting. PHP Includes was one of the earliest functions that I learnt. Even without any any specific server side knowledge it is a useful script to learn as it can simplify and make easier the creation and updating of html files.
If you’re footer mark-up is the same on every page, why produce it for every page?
Build all the necessary footer mark-up in one file and pull the contents of that file into everypage. Then when you need to update you’re footer you will only have to alter a single page of mark-up rather then multiple pages.
- Create a file with the necessary HTML mark-up contained witin.
- Save the file as footer.inc
- Within The html files where you require the footer markup to go, place:
<?php include('footer.inc'); ?> - This will pull in the html footer mark-up into all the pages with the footer includes.
- A reason why we use .inc instead of .php is that if a file is included using a url and it has a .php extension then that file is parsed by php, not just included, this means php functions within the included file will not work.
- Another version of
<?php include() ?>
is the function
<?php require() ?>
this works similar to includes but works differently in error handling. A require will produce a fatal error whereas a include will produce a error warning but still allow the file to be processed.
Using what we learnt, we can expand on this further and produce a website menu that is included from one file but is still able to be to have unique active ID’s to produce an active menu when on the correct page. The first step is to devise a very simple vertical menu.
<div id="navcontainer">
<ul id="navlist">
<li><a href="page1.php">Page one</a></li>
<li><a href="page2.php">Page two</a></li>
<li><a href="page3.php">Page three</a></li>
<li><a href="page4.php">Page four</a></li>
<li><a href="page5.php">Page five</a></li>
</ul>
</div>
Viewable here
The next step is a suitable CSS style sheet to give the menu some substance.
The CSS developed is viewable here
The finished styled menu can be viewed here
At the moment the menu is standalone with no active classes, only changing style on hover. We now need some sample pages for the navigation menu to be brought into.
<html>
<head>
<title><?php echo($page); ?></title>
<link rel="stylesheet" type="text/css" media="screen" href="navstyle.css" />
</head>
<body>
<div id="container">
<div id="content">
<h1>This is Heading;</h1>
<p>Content.</p>
</div>
<?php include('navincludes.php'); ?>
</div>
</body>
</html>
This is called page1.php and is duplicated 5 times, so that we have the following files: page1.php, page2.php, page3.php, page4.php and page5.php
A sample of what the page will now look like is here
To enable the navigation to dynamically change to active depending on what page they are on, we require some server side scripting that will return the name of a page and place within a variable. This script will need to be placed at the top of everypage
<?php
$path = $_SERVER['PHP_SELF'];
$page = basename($path, '.php');
?>
The function $_SERVER['PHP_SELF']; gets the filename of the current page, relative to the document root. For instance, $_SERVER['PHP_SELF'] in a script at the address http://example.com/folder/test.php would return /folder/test.php
This path is passed into the variable $path. To take away the folder path name and suffix, we use the function basename to return the basename of the file to the variable $page whilst stripping off suffix by placing , ‘.php’ with the parentheses.
Now that we have a variable $page that content changes depending on the name ofthe page that we goto, we can do a conditional that we check the name of the page, and if true print out a string.
The condition needs to be placed with the list item of the navigation and looks like:
<?php if ($page == "page1") {print("id=\"active\"");} ?>
This php statement checks if the variable page equals page1 and if true prints the id=”active” into the <li>
What we end up with is a navigation includes that looks like:
<div id="navcontainer">
<ul id="navlist">
<li <?php if ($page == "page1") {print("id=\"active\"");} ?>>
<a href="page1.php">Page one</a></li>
<li <?php if ($page == "page2") {print("id=\"active\"");} ?>>
<a href="page2.php">Page two</a></li>
<li <?php if ($page == "page3") {print("id=\"active\"");} ?>>
<a href="page3.php">Page three</a></li>
<li <?php if ($page == "page4") {print("id=\"active\"");} ?>>
<a href="page4.php">Page four</a></li>
<li <?php if ($page == "page5") {print("id=\"active\"");} ?>>
<a href="page5.php">Page five</a></li>
</ul>
</div>
The files for this tutorial are available at: Download
