Easy Navigation

Introduction

This is something that alot of people ask about for some reason, i'm sure you've all seen urls to pages on peoples sites that are something like website.com/index.php?page=blah well i actually think alot of people just want to use it because it looks "cool" or something, but it can be a useful way to manage multiple pages and it sure beats using frames.

This is really just an extension of the PHP Includes tutorial, if you've not already read that it might be worth doing so before carrying on here as it'll make things a little clearer.

Setting Up Your Pages

I guess the best way to demonstrate this is just to create a couple of example pages, you can follow this through using these pages then should be able to apply everything to your own.

It would be best to create a directory called test or something so you don't overwrite your existing pages by mistake, create and save the following files to that directory:

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body>
<div style="height:50px;border:1px solid #000;margin-bottom:10px">
      
</div>

<div style="float:left;width:15%;border:1px solid #000">
 <ul style="margin-left:10px;list-style-type:none">
     <li><a href="index.php">Home</a></li>
     <li><a href="index.php?page=about">About</a></li>
     <li><a href="index.php?page=contact">Contact</a></li>
 </ul>
</div>

<div style="float:right;width:80%;border:1px solid #000">
     <div style="padding:4px">
     <!-- content here -->
     </div>
</div>
</body>
</html>

Home.php

<h2>News Item 1</h2>
    <p>This is my home page, news and stuff will go here.</p>

<h2>News Item 2</h2>
    <p>More news and stuff will go here.</p>

about.php

<p>This is my about page, it's about me.</p>

contact.php

<p>This is my contact page, for contacting me.</p>

Upload all the files to the directory you created, and if you go to the index page in your browser, you should see something like this

Writing the script

That's our basic layout, but as you can see there's no content in the main table, and the links don't work, so this is where we need to create the script that'll call our pages.

Rather than break this down into several sections, i've heavily commented each part so hopefully you can understand what everything does:


<?php

# default page
$default = 'home.php';

# set document root path
$base = $_SERVER['DOCUMENT_ROOT'];

# list of all site pages + the id they will be called by
$pages = array('about' => 'about.php','contact' => 'contact.php');

if(array_key_exists($_GET['page'], $pages))
{
foreach($pages as $pageid => $pagename) {
if($_GET['page'] == $pageid && file_exists($base.$pagename))
{
          /* if somebody's making a request for ?page=xxx and
          the page exists in the $pages array, we display it
          checking first it also exists as a page on the server */
          include $base.$pagename;
      }
   } // end foreach
}
else {
          /* if the page isn't listed in $pages, or there's no ?page=xxx request
          we show the default page, again we'll also just make sure it exists as a file
          on the server */
          if(file_exists($base.$default)) include $base.$default;
}

?>

The value "page" in $_GET['page'] can be anything you like, this is what will come after the question mark (?) in the url for example www.domain.com/index.php?page=contact so if we used "module" in place of that value our links would be formed like www.domain.com/index.php?module=contact instead. If you want to change this make sure you do so in both places it appears in the script.

Obviously you would add any other pages you wanted in the same format as the two in the example in the $pages array, the most important thing is to make sure you give the correct path to the pages relative to your home directory, so if you created a directory called "test" for this as i suggested, you would use 'about' => '/test/about.php' instead, same for the other pages in the array and also for the $default page.

Put it together

Now you need to open up the index.php page that you made earlier, and add this entire code at the point where you want your content to display, (i marked it with a comment ) that's where you need to place your code, and you can either leave that comment line in or take it out, it doesn't matter.

So now, if you go to back to the index page in your browser, the content should display and the links should also work, something like this

Hopefully, you can now apply that to your own pages, and do away with any frames if you have them.