Selasa, 20 September 2011

Membuat Breadcrumb Otomatis



Membuat Breadcrumb Otomatis
Breadcrumb adalah salah satu bentuk navigasi. Biasanya digunakan untuk memberitahukan user dimana posisi dia berada sekarang. Dengan adanya breadcrumb maka akan memudahkan user untuk berpindah ke top level dari current page.
Berikut ini adalah salah satu library codeigniter yang bisa di gunakan untuk membuat breadcrumb. Baik secara otomatis dan manual

Langkah 1. Buat File library Breadcrumb.php

Buatlah sebuah file Breadcrumb.php di folder applications/library yang berisi :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');
/**
 * Breadcrumb class
 *
 * DESCRIPTION : Class to show breadcrumb navigation
 *
 * MODIFICATION HISTORY
 * V1.0 2009-07-03 04:05 PM - Ibnu Daqiqil Id   - Created
 *  2009-07-03 02:32 PM     - Ibnu Daqiqil id - change html element to display using <ul>
 *
 * @package    Markeet
 * @author     Ibnu Daqiqil Id
 *
 **/
 
class Breadcrumb
{
 protected $data = array();
 
 /**
  * Class Constructor
  *
  * @return void
  * @author Ibnu Daqiqil Id
  **/
 function __construct() 
 {
 
 }
 
    /**
  * add new crumb element
  *
  * @param  string $title The crumb title
  * @param  string $uri Crumb url path 
  * @return void
  * @author Ibnu Daqiqil Id
  **/
 
 public function add($title, $uri='') 
 {
  $this->data[] = array('title'=>$title, 'uri'=>$uri);
  return $this;
 }
 
 /**
  * Fetch crumb data
  *
  * @return void
  * @author Ibnu Daqiqil Id
  **/
 
 public function fetch() 
 {
  return $this->data;
 }
 
 /**
  * Reset crumb data
  *
  * @return void
  * @author Ibnu Daqiqil Id
  **/
 public function reset() 
 {
  $this->data = array();
 }
 
 
 /**
  * Dislpay all crumb element
  *
  * @param  string $home_site first path title
  * @param  string $id id of ul html
  * @return void
  * @author Ibnu Daqiqil Id
  **/
 public function show($home_site ="home", $id = "crumbs"  ) 
 {
  $ci = &get_instance();
  $site = $home_site;
  $breadcrumbs = $this->data;
  $out  = '<ul id="'.$id.'">';
  if ($breadcrumbs && count($breadcrumbs) > 0) {
   $out .= '<li><a class="pathway" href="' . base_url() .'"/>'. $site . '</a></li>';
   $i=1;
   foreach ($breadcrumbs as $crumb): 
 
    if ($i != count($breadcrumbs)) {
     $out .= $sep . '<li><a class="pathway" href="' .site_url($crumb['uri']). '">'. $crumb['title'] .'</a></li>';
    } else {
     $out .= $sep . '<li class="selected">'. $crumb['title'] .'</li>';
    }
    $i++;
   endforeach;
  } else {
   $out .= '<li class="selected">' . $site . '</li>';
  }
  $out .= '</ul>';
  return $out; 
 }
 
}
 
// END  Breadcrumb class
 
/* End of file Breacrumb.php */
/* Location: /Applications/XAMPP/xamppfiles/htdocs/multishop/application/library/Breadcrumb.php  */

Langkah ke 2. Contoh Penggunaan (secara Manual)

Buatlah sebuah controller yang berisi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
 * Contoh class
 *
 * @package default
 * @author Ibnu Daqiqil Id
 **/
 
class Contoh extends Controller 
{
 
 function __construct()
 {
  parent::__construct();
 }
 
 /**
  * Index function
  *
  * @return void
  * @author Ibnu Daqiqil Id
  **/ 
 function index()
 {
  $this->load->library('breadcrumb');
  $this->breadcrumb->add('Pages','pages')
            ->add('Management','pages/manage')
            ->add('Add new Page','pages/manage/add');
  $this->load->view('crumb');
 }
 
}
 
// END  Contoh class
 
/* End of file contoh.php */
/* Location: /Applications/XAMPP/xamppfiles/htdocs/multishop/application/controllers/contoh.php  */
dan sebuah view
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Bread Crumb Example</title>
  <style type="text/css" media="screen">
  body {
   font:71%/165% "Lucida Grande", Lucida, Verdana, sans-serif;
   }
  ul, li {
   list-style-type:none;
   padding:0;
   margin:0;
   }  
  #crumbs {
   height:2.3em;
   border:1px solid #dedede;
   }
  #crumbs li {
   float:left;
   line-height:2.3em;
   color:#777;
   padding-left:.75em;
   }  
  #crumbs li a {
   background:url(images/crumbs.gif) no-repeat right center;
   display:block;
   padding:0 15px 0 0;
   }       
  #crumbs li a:link,
  #crumbs li a:visited {
   color:#777;
   text-decoration:none;
   } 
  a:link, a:visited, 
  #crumbs li a:hover,
  #crumbs li a:focus {
   color:#dd2c0d;
   }
  </style>
 </head>
 <body>
  <?php echo $this->breadcrumb->show() ?>
 </body>
</html>
Untuk images/crumbs.gif bisa anda download di sini

(OPTIONAL) Penggunaaan Otomatis

Jika anda ingin menggunakan breadcrumb ini secara otomatis tampa harus menambahkannya satu-satu bisa dilakukan dengan meng extend controller. Contoh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
class My_Controller extends Controller{
        /// add this function
 function _remap($func)
 {
 
  $nama_controller = get_class($this);
         $this->load->library('breadcrumb');
  $this->breadcrumb->add(  ucwords(($nama_controller)), site_url($nama_controller));
  if (method_exists($this,$func))
  {
      $URI =& load_class('URI');
             if ($func!='index')
   $this->breadcrumb->add(  ucwords(($func)),site_url( $nama_controller.'/'.$func));  
   call_user_func_array(array(&$this, $func), array_slice($URI->rsegments, 2));
  }
  else
  {
      show_404(get_class($this).'/'.$func);
  }
   }
}
anda dapat langsung menggunakannya secara langsung tampa menambahkan satu satu seperti pada contoh sebelumnya

0 comments:

Poskan Komentar