Creat Bread Crumb Trail Like In Yahoo With PHP


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 1 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 1. 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.

The Code

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

Example 2. 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 breadcrums 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.

Running

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

Figure 3. 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 4

Figure 4. The jack page with a breadcrumb trail

As you can see in Figure 4, 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.

Starting

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 id="home" parent="" title="Home" url="showpage.php?id=home" />
               <page id="users" parent="home" title="Users" url="showpage.php?id=users"
        />
            <page id="jack" parent="users" title="Jack" url="showpage.php?id=jack" /> 
        </pages>

0 komentar:

top