Membuat Breadcrumb Otomatis

Posted on July 5th, 2009 in Codeigniter, Php by ibnoe Discuss this article »

navigation23Breadcrumb 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



Artikel yang berhubungan

Tags:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses Add your own

  1. Dangstars says:
    August 1, 2009 at 7:28 pm

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

  2. Dangstars says:
    August 1, 2009 at 7:29 pm

    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. ianjuve says:
    August 15, 2009 at 7:15 pm

    mantap om.. thnaks bgt artikelnya…:D

  5. ibnoe says:
    September 16, 2009 at 10:45 am

    purezentos pake ci juga ya..

  6. blog.putraweb.net » Blog Archive » Membuat Breadcrumbs di CodeIgniter – blog.putraweb.net says:
    October 22, 2009 at 1:38 am

    [...] karena sudah ada artikel yang membahasnya. Anda dapat mencoba membuatnya dengan panduan artikel ini. Jika ada kesulitan, jangan sungkan untuk share melalui komentar di bawah, mungkin saya atau [...]

  7. Apriza says:
    November 5, 2009 at 8:23 pm

    Noe, klo pakai routes, modifnya gmana?

    thanks

  8. ghprod says:
    November 14, 2009 at 8:03 pm

    wow .. hebaaattt bgt Bro :D

    mantaaabbb :)

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

    salam

  9. seno says:
    February 9, 2010 at 4:12 pm

    koq error ky gini ya?…

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: sep

    Filename: libraries/Breadcrumb.php

    Line Number: 90

  10. ibnoe says:
    February 9, 2010 at 10:46 pm

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

  11. seno says:
    February 10, 2010 at 9:22 am

    thanks ya mas ibnoe

Leave a Reply