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

 

24 Comments

 

  1. August 1, 2009  7:28 pm by Dangstars Reply

    Kunjungan pertama.disini.ditunggu kunjungannya.Salam kenal.
Trims infonya.

  2. August 1, 2009  7:29 pm by Dangstars Reply

    Assalamualaikum,
I like your article and all the great tips that are mentioned on it, it has really helped out. Thanks for share the information.
I hope you can visit my blog and give me suggestion.
Thanks again.
Kunjungan pertama.disini.ditunggu kunjungannya.Salam kenal.
Trims infonya.

  3. August 15, 2009  7:15 pm by ianjuve Reply

    mantap om.. thnaks bgt artikelnya...:D

  5. September 16, 2009  10:45 am by ibnoe Reply

    purezentos pake ci juga ya..

  6. Pingback : blog.putraweb.net » Blog Archive » Membuat Breadcrumbs di CodeIgniter – blog.putraweb.net

  7. November 5, 2009  8:23 pm by Apriza Reply

    Noe, klo pakai routes, modifnya gmana?

    thanks

  8. November 14, 2009  8:03 pm by ghprod Reply

    wow .. hebaaattt bgt Bro :D

    mantaaabbb :)

    aku baru mulai blajar CI hari ini, jadi makasih bnyak bt ilmu nya :D

    salam

  9. February 9, 2010  4:12 pm by seno Reply

    koq error ky gini ya?...

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: sep

    Filename: libraries/Breadcrumb.php

    Line Number: 90

  10. February 9, 2010  10:46 pm by ibnoe Reply

    ow itu cuman error notice. coba tambahkan $sep= ''; pada baris 82

  11. February 10, 2010  9:22 am by seno Reply

    thanks ya mas ibnoe

  13. June 15, 2010  2:05 pm by rani Reply

    mau tanya mas, kalo misal tapi kebaca error T_ENDIF itu maksudnya apa ya?

  14. June 15, 2010  2:06 pm by rani Reply

    tag php nya ngak kebaca tuh..

  15. August 28, 2010  2:31 am by ucen Reply

    ijin nyimak aja ^^ ,. belum paham " CI "

  16. November 16, 2010  8:27 am by Raidoutoshi Reply

    Mas ad demonya gak biar bisa ngeliat viewny/ tampilannyagt.. thx for infonya juga yup gan..

  18. December 1, 2010  9:08 am by dwi Reply

    thx infonya mas,
    pas saya coba muncul kaya gini
    Fatal error: Call to undefined function base_url() on line 86
    itu kenapa ya mas, mohon bantuannya, saya baru belajar ci.
    terima kasih

  19. April 14, 2011  11:27 pm by tw Reply

    bagus tutornya mas, bisa buat referensi belejar CI neh.
    @dwi: Coba di autoload nya masukin helper 'url'

  20. June 24, 2011  5:03 pm by aris Reply

    om... tak coba kok belum bisa ya.... tuh sintak yang paling atas ada nya ya,,,,,,

  21. July 1, 2011  9:46 am by Novian Reply

    Nice Blog, mantap, ane udah lama ga blogging lagi nihh...

  22. August 24, 2011  9:52 am by pabx panasonic Reply

    keren mas tutorialnya, makasih ya mas.. :)

  24. September 26, 2011  11:19 pm by andi Reply

    buat versi yang 2.0.3 gimana mas??

    -----------------------------------------------

    Warning: Unterminated comment starting line 37 in C:\xampp\htdocs\green\application\controllers\contoh.php on line 37
    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: sep

    Filename: libraries/Breadcrumb.php

    Line Number: 90

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: sep

    Filename: libraries/Breadcrumb.php

    Line Number: 90

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: sep

    Filename: libraries/Breadcrumb.php

    Line Number: 92

Leave a reply

 

Your email address will not be published.

Related posts

 

Read more →
 
 

Blueprint - CSS Framework

Blueprint Css adalah sebuah framework CSS. Herankan kenapa css pun memiliki framework. "CSS Framework” sebenarnya di targetkan untuk developer yang merasa bosan melakukan hal-hal y[...]

Read more →
 
 

Belajar CSS

CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website. Cascading Style Sheet (CSS) memberikan kenyamanan mendesain [...]