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
terimakasih mas, sangat membantu
BalasHapus