Hack4.Build a Breadcrumb Trail


Hack 4. Build a Breadcrumb Trail

Use a breadcrumb trail to tell your users where they are on your site.

A breadcrumb trail is a list of links at the top of a page that indicates where a person is in the site's organizational hierarchy.

A breadcrumb trail is not, as the term might suggest, the set of pages that a person navigated through to get to his destination. The user already has the Back button for retracing his steps.


A breadcrumb trail allows a user to navigate back up the hierarchy a little to where he would find more relevant information. For example, the trail might be: Home | Platforms | Portables | PSP. The user could easily navigate back to the Portables page, which lists all of the portable game consoles, the Platforms page, which lists the different gaming platforms, or the home page, all with a single click.

Figure 2-3 shows the breadcrumb trail that Yahoo! uses in its directory to show where you are. In this case, I'm in the Buddy section of the Comedy category, within the Titles area of Movies and Films. As a user, I can go back to any level of organization that suits my interests.

Figure 2-3. The Yahoo! directory breadcrumb trail


By convention, the last item on the list is the current page and is not given a link. The first item on the list is the home page of the site.

2.3.1. The Code

To add breadcrumbs to your own site, save the code shown in Example 2-4 as showpage.php.

Example 2-4. Creating a breadcrumb trail
 <?php $id = $_GET['id']; if ( strlen( $id ) < 1 ) $id = "home"; $pages = array( home => array( id=>"home", parent=>"", title=>"Home", url=>"showpage.php?id=home" ), users => array( id=>"users", parent=>"home", title=>"Users", url=>"showpage.php?id=users" ), jack => array( id=>"jack", parent=>"users", title=>"Jack", url=>"showpage.php?id=jack" ) ); function breadcrumbs( $id, $pages ) {   $bcl = array( );   $pageid = $id;   while( strlen( $pageid ) > 0 )   { $bcl[] = $pageid; $pageid = $pages[ $pageid ]['parent'];   }   for( $i = count( $bcl ) - 1; $i >= 0; $i-- )   { $page = $pages[$bcl[$i]]; if ( $i > 0 ) { echo( "<a href=\"" ); echo( $page['url'] ); echo( "\">" ); } echo( $page['title'] ); if ( $i > 0 ) { echo( "</a> | " ); }   }    }    ?>    <html>    <head>    <title>Page - <?php echo( $id ); ?></title>    </head>    <body>    Breadcrumbs: <?php breadcrumbs( $id, $pages ); ?><br/>    Page name: <?php echo( $id ); ?>    </body>    </html> 

The code is fairly straightforward. It starts by defining the list of pages. The list of pages is constructed as a hash table, with the key as the ID of the page. Then the breadcrumbs function takes the ID of the current page and the overall list of pages and constructs the breadcrumb trail by searching back through the list from the current page. The HTML code then prints both the current page and the output of the breadcrumbs function for the current page.

2.3.2. Running the Hack

Upload this code to your server and navigate to showpage.php. By default, this will give you the home page (see Figure 2-4).

Figure 2-4. The home page


This isn't very impressive, because on the home page the breadcrumb trail is blank and lists just the home page without any links. Request a different page by adding ?id=jack to the URL, though; the result should look something like Figure 2-5.

Figure 2-5. The jack page with a breadcrumb trail


As you can see in Figure 2-5, now there's a breadcrumb trail, with the home page and the Users page as links, along with the static text (Jack) for the current page.

2.3.3. Hacking the Hack

It would be a little easier to maintain the page list if it were represented as XML. Here is an example of what that XML would look like:

 <pages> <page  parent="" title="Home" url="showpage.php?id=home" /> <page  parent="home" title="Users" url="showpage.php?id=users" />     <page  parent="users" title="Jack" url="showpage.php?id=jack" />  </pages> 

To parse this, you could use the XML parser functions built into PHP, or you could use some regular expressions [Hack #38].

2.3.4. See Also

  • "Create Dynamic Navigation Menus" [Hack #17]

  • "Create Pop-Up Hints" [Hack #12]



PHP Hacks
PHP Hacks: Tips & Tools For Creating Dynamic Websites
ISBN: 0596101392
EAN: 2147483647
Year: 2006
Pages: 163

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net