breadcrumb trail on php

Discussion in 'Design & Development' started by yannick, Mar 2, 2012.

  1. yannick

    yannick
    Expand Collapse
    Junior Member

    Joined:
    Mar 1, 2012
    Messages:
    11
    Likes Received:
    5
    Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.
    Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.
    Typical breadcrumbs look like this:
    Home page > Section page > Subsection page
    or
    Home page : Section page : Subsection page
    Types of breadcrumbs


    There are three types of web breadcrumbs:
    • Path: path breadcrumbs are dynamic and show the path that the user has taken to arrive at a page.
    • Location: location breadcrumbs are static and show where the page is located in the website hierarchy.
    • Attribute: attribute breadcrumbs give information that categorizes the current page.
    Usability

    Some commentatorscriticize path-style breadcrumbs because they duplicate functionality that properly subsists in the browser; namely, the 'Back' button and browsing history. And unlike the 'Back' button, the breadcrumbs move around horizontally.
    Location breadcrumbs are not necessarily appropriate for sites whose content is so rich that single categories do not fully describe a particular piece of content. For this reason, a tag may be more appropriate, though breadcrumbs can still be used to allow the user to retrace their steps and see how they arrived at the current page.
    Cookie crumb

    Some commentators and programmers alternatively use the term "cookie crumb" (or some variant) as a synonym to describe the previously mentioned navigation technique. Cookies are pieces of data stored in a web browser machine by the visiting websites in a HTTP cookie file. However, cookie crumb is rarely or ever referred to as this token of data. This is another technology used on the web that is different from the navigational method.

    1º-writes these codes in a file named breadcrump.php

    PHP:
    <?php
    /*
    * Breadcrumb navigation class
    * Mick Sear
    * http://www.ecreate.co.uk
    *
    * The key to using this is to decide on a $level for each page.  (array, starting position 0)
    * This determines where in the trail a link will be placed.  So, I normally make the homepage level 0,
    * then every page that can be accessed from the top level nav becomes level 1, and every page
    * from that second level becomes level 2, and so on.  When users return to a higher level (e.g. level 1)
    * the surplus links are removed.  Only one page can occupy a $level in the crumb trail.
    * There might be several routes to a page.  In which case, the trail will reflect the route that the
    * user actually took to get to that page.
    */
     
    class Breadcrumb{
     
      var 
    $output;
      var 
    $crumbs = array();
      var 
    $location;
     
     
      
    /*
        * Constructor
        */
      
    function Breadcrumb(){ 
     
          if (
    $_SESSION['breadcrumb'] != null){
            
    $this->crumbs $_SESSION['breadcrumb'];
          } 
     
      }
     
      
    /*
        * Add a crumb to the trail:
        * @param $label - The string to display
        * @param $url - The url underlying the label
        * @param $level - The level of this link. 
        *
        */
      
    function add($label$url$level){
     
          
    $crumb = array();
          
    $crumb['label'] = $label;
          
    $crumb['url'] = $url;
     
          if (
    $crumb['label'] != null && $crumb['url'] != null && isset($level)){     
               
            while(
    count($this->crumbs) > $level){
     
                
    array_pop($this->crumbs); //prune until we reach the $level we've allocated to this page
     
            
    }
     
            if (!isset(
    $this->crumbs[0]) && $level 0){ //If there's no session data yet, assume a homepage link
     
                
    $this->crumbs[0]['url'] = "/index.php";
                
    $this->crumbs[0]['label'] = "Home";
     
            }
     
            
    $this->crumbs[$level] = $crumb
                 
          }
     
            
    $_SESSION['breadcrumb'] = $this->crumbs//Persist the data
            
    $this->crumbs[$level]['url'] = null//Ditch the underlying url for the current page.
      
    }
     
      
    /*
        * Output a semantic list of links.  See above for sample CSS.  Modify this to suit your design.
        */
      
    function output(){
     
          echo 
    "<div id='breadcrumb'><ul><li>Click trail: </li>";
     
          foreach (
    $this->crumbs as $crumb){ 
     
            if (
    $crumb['url'] != null){
     
                echo 
    "<li> > <a href='".$crumb['url']."' title='".$crumb['label']."'>".$crumb['label']."</a></li> ";
     
            } else {
     
                echo 
    "<li> > ".$crumb['label']."</li> ";
     
            }
          }
     
          echo 
    "</ul></div>";
      }
    }
    ?>
    2º-How to use

    PHP:
    <?php
    session_start
    ();
    include(
    "Breadcrumb.php");
    $trail = new Breadcrumb();
    $trail->add('Home'$_SERVER['PHP_SELF'], 0);//where is "home" puts the name of your page
     
    //Sample CSS
    echo "
    <style>
    #breadcrumb ul li{
      list-style-image: none;
      display:inline;
      padding: 0 3px 0 0;
      margin: 3px 0 0 0;
    }
    #breadcrumb ul{
      margin:0;padding:0;
      list-style-type: none;
      padding-left: 1em;
    }
    </style>
    "
    ;
     
    //Now output the navigation.
    $trail->output();
    ?>
    on another page, change the name of the page and change the number "0" to "1"

    home> script> script php> php download

    PHP:
    <?php
    session_start
    ();
    include(
    "Breadcrumb.php");
    $trail = new Breadcrumb();
    $trail->add('script'$_SERVER['PHP_SELF'], 1);//where is "home" puts the name of your page
     
    //Sample CSS
    echo "
    <style>
    #breadcrumb ul li{
      list-style-image: none;
      display:inline;
      padding: 0 3px 0 0;
      margin: 3px 0 0 0;
    }
    #breadcrumb ul{
      margin:0;padding:0;
      list-style-type: none;
      padding-left: 1em;
    }
    </style>
    "
    ;
     
    //Now output the navigation.
    $trail->output();
    ?>
     

Share This Page