Membuat Breadcrumbs di CodeIgniter

Oct 22, 2009 // by anggie // CodeIgniter, PHP // 11 Comments

Breadcrumbs, menurut tante Wikipedia, adalah sebuah bantuan navigasi yang ada pada sebuah user interface, sehingga user tahu dimana posisi ia sekarang. Teorinya, ada tiga macam versi breadcrumbs, yakni path, location, dan attribute. Breadcrumbs versi path bersifat dinamis, menunjukkan alur histori sang user menuju halaman yang sekarang. Sedangkan versi location bersifat statis, menunjukkan posisi sekarang di dalam hirarki/peta website. Lain lagi dengan versi attribute, breadcrumbs versi ini memberikan informasi yang mengkategorikan halaman yang sedang dibuka. Untuk lebih detailnya, Anda dapat membaca tulisan ini.

Breadcrumbs – Path Version

Breadcrumbs versi ini biasanya menggunakan session dalam pembuatannya. Prinsip dasarnya, untuk setiap user meng-klik link, maka sistem akan menyimpan informasi link di dalam session dan menyusunnya dalam bentuk urutan Breadcrumbs. Untuk pembuatannya di CodeIgniter, saya sudah menemukan library yang bagus untuk dipakai. Disini saya akan coba sajikan tahap-tahapnya. Pertama, buat library breadcrumb.php dan breadcrumblist.php (tempatkan di app/libraries/ ).

<?php  if (!defined('APPPATH')) exit('No direct script access allowed');
session_start();
/*
 * @Author: Dean Ericson
 * @Email: mail@deanericson.com
 *
 */

final class BreadCrumb{
	private $title;
	private $url;
	private $isRoot;
	/*
	 * No need to set anything up.  I autoload it and
	 * let the setters mutate the properties through the
	 * setBreadCrumb function
	 */
	function BreadCrumb(){}
	/*
	 * Takes an array which represents this class (BreadCrumb)
	 * as a parameter. Sets the class through it mutators,
	 * then sets itself within the BreadCrumbList Object.
	 */
	function setBreadCrumb($bcObjArr){
		$this->title=$bcObjArr['title'];
		$this->url=$bcObjArr['url'];
		$this->isRoot=$bcObjArr['isRoot'];
		$CI =&amp; get_Instance();
		$CI->breadcrumblist->add($this);
		$_SESSION['breadCrumbList'] = $CI->breadcrumblist->getBreadCrumbs();
	}
	function getTitle(){
		return $this->title;
	}
	function setTitle($t){
		$this->title=$t;
	}
	function getUrl(){
		return $this->url;
	}
	function setUrl($u){
		$this->url=$u;
	}
	function isRoot(){
		return $this->isRoot;
	}
	function setIsRoot($r){
		$this->isRoot=$r;
	}
}

<?php  if (!defined('APPPATH')) exit('No direct script access allowed');
/*
 * @Author: Dean Ericson
 * @Email: mail@deanericson.com
 *
 */

final class BreadCrumbList{
	private $breadCrumbs;
	private $CI;
	private $delimiter;
	function BreadCrumbList(){
		$this->CI =&amp; get_Instance();
		$delimiter = $this->CI->config->item('breadcrumbDelimiter');
		if(!empty($_SESSION['breadCrumbList'])){
			$s1 = $_SESSION['breadCrumbList'];
			$this->breadCrumbs = $s1;
		}else{
			$this->breadCrumbs = array();
		}
		if(!isset($delimiter)){
			$this->setDelimiter('&rarr;');
		}else{
			$this->setDelimiter($delimiter);
		}
	}
	function reset(){
		$this->breadCrumbs = array();
	}
	function add($bc){
			$tmpArr = array();
			if($bc->isRoot()){
				$this->reset();
			}
			if(!in_array($bc, $this->breadCrumbs)){
				$this->breadCrumbs[] = $bc;
				$_SESSION['breadCrumbList']=$this->breadCrumbs;
			}else{
				// in array, remove objects after index
				$index = array_search($bc,$this->breadCrumbs);
				for($i=(count($this->breadCrumbs)-1); $i>=($index+1); $i-- ){
					unset($this->breadCrumbs[$i]);
				}
				$_SESSION['breadCrumbList']=$this->breadCrumbs;
			}
	}
	function display(){
		$iter = $_SESSION['breadCrumbList'];
		$i=1;
		$return_str='';
		foreach($iter as $bc){
			$uBC = $bc;
			$del = $i < count($iter)?$this->delimiter:'';
			if($i < count($iter)){
				$return_str .= anchor($uBC->getUrl(),$uBC->getTitle(), array('class'=>'activeBreadCrumbs')).' '.$del;
			}else{
				$return_str .= "<span class="nonActiveBreadCrumbs">".$uBC->getTitle().'</span> '.$del;
			}
		$i++;
		}
		return $return_str;
	}
	function getBreadCrumbs(){
		return $this->breadCrumbs;
	}
	function setBreadCrumbs($b){
		$this->breadCrumbs=$b;
	}
	function getCI(){
		return $this->CI;
	}
	function setCI($c){
		$this->CI=$c;
	}
	function getDelimiter(){
		return $this->delimiter;
	}
	function setDelimiter($d){
		$this->delimiter='<span class="delimiter" >'.$d.'</span>';
	}
}

Kemudian, buka file config.php (app/config/) dan tambahkan kode berikut.

<?php
/*
|--------------------------------------------------------------------------
| BreadCrumb Delimiter
|--------------------------------------------------------------------------
|
| If left blank will be the double arrow, otherwise it will default to what you
| set here
|
*/
$config['breadcrumbDelimiter'] = "»";

Lalu, masukkan dua library yang telah dibuat tadi ke dalam array autoload library yang ada di autoload.php (app/config/).

$autoload['libraries'] = array('session','breadcrumb','breadcrumblist');

Oke, mari kita coba di controller…

<?php
class Home extends Controller {
	function Home()
	{
		parent::Controller();
		$this->session->set_userdata( array('activeTab'=>'home') );
	}
	function index(){
		$bc = array(
               'title' => 'Home',
               'url' => 'home',
               'isRoot' => true

        );
		$this->breadcrumb->setBreadCrumb($bc);
		$data = array(
               'title' => 'My Home Title',
               'content' => 'This is Home',
               'breadcrumbs'=>$this->breadcrumblist->display()
        );
		$this->load->view('header',$data);
	}
	function test(){
		$bc = array(
               'title' => 'Test',
               'url' => 'home/test',
               'isRoot' => false

        );
		$this->breadcrumb->setBreadCrumb($bc);
		$data = array(
               'title' => 'My Test Title',
               'content' => 'This is test',
               'breadcrumbs'=>$this->breadcrumblist->display()
        );
		$this->load->view('header',$data);
	}
	function test2(){
        $bc = array(
               'title' => 'Test 2',
               'url' => 'home/test2',
               'isRoot' => false

        );
        $this->breadcrumb->setBreadCrumb($bc);
		$data = array(
               'title' => 'My Test 2 Title',
               'content' => 'This is test 2',
               'breadcrumbs'=>$this->breadcrumblist->display()
        );
		$this->load->view('header',$data);
	}
	function test3(){
        $bc = array(
               'title' => 'Test 3',
               'url' => 'home/test3',
               'isRoot' => false

        );
        $this->breadcrumb->setBreadCrumb($bc);
		$data = array(
               'title' => 'My Test 3 Title',
               'content' => 'This is test 3',
               'breadcrumbs'=>$this->breadcrumblist->display()
        );
		$this->load->view('header',$data);
	}
}

Terakhir, buat view header.php sbb.

<span style="padding-left: 5px">
	<?php if(isset($breadcrumbs)): ?>
		<?=$breadcrumbs?>
	<?php endif;?>
</span>
<h1><?=$title?></h1>
<?=$content?>
Link to <?=anchor('home','home')?>, <?=anchor('home/test','test')?>, <?=anchor('home/test2','test2')?>, and <?=anchor('home/test3','test3')?>.

Ok, kita selesai. Jika kita klik link dengan urutan berbeda, maka kita akan mendapatkan urutan breadcrumbs yang berbeda pula. Inilah yang dinamakan path breadcrumbs.

Breadcrumbs – Location Version

Versi ini sering digunakan dalam website yang memiliki hirarki/peta situs yang membutuhkan navigasi untuk mempermudah user dalam menjelajahi isinya. Untuk pembuatannya di dalam CodeIgniter, sepertinya tidak perlu saya sampaikan disini, 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 pembaca lain dapat membantu. Selamat mencoba, happy coding!

Tags: PHP, tutorial codeigniter

• Twitter • StumbleUpon • Digg • Delicious • Facebook

11 Comments

Jack 25/10/2009 at 9:38 am

mantafff…….
ferrypey 16/12/2009 at 6:06 pm

great tutorial;
happy coding too!!
Permana Jayanta 25/02/2010 at 8:40 am

cara menarik untuk menampilkan breadcumb. saya udah lama bgg gmana enaknya menampilkan breadcumb, tak coba pake cara ini dulu
sirgobang 09/07/2010 at 3:32 pm

Tutorial yang menarik, sangat bermanfaat
IzC 19/10/2010 at 5:50 pm

Bagaimana mengakali yang

$data = array(
‘title’ => ‘My Test 2 Title’ ,
‘content’ => ‘This is test 2′ ,
‘breadcrumbs’ =>$this->breadcrumblist->display()
);

Agar dinamis sesuai dengan page, category, atau halaman apapun yang kita buat.

Kalau di tulis manual seperti itu kan gampang mas.
anggie 19/10/2010 at 7:55 pm

Artikel ini hanya awalan saja mas…pengembangannya sangat luas…tentu saja itu hanya contoh, untuk aplikasi nyata kita sebaiknya memakai automated entry dengan hasil query ke database, jadi akan dinamis tentunya.
yuda supri 15/03/2011 at 9:33 am

mas cara buat breadcrumbs di blogger tolong di buat tutorialnya juga. kebetulan saya punya blog tapi bingung cara pasang breadcrumbs nya.
thanks banget,
anggie 15/03/2011 at 7:24 pm

Cari di google banyak mas tut nya…
http://beautifulbeta.blogspot.com/2009/02/breadcrumbs-for-blogger.html
http://www.blogspottutorial.com/2008/12/how-to-make-in-blogger.html
Jodie21FRANKS 28/08/2011 at 4:10 pm

Various people in every country take the home loans from different banks, just because that is simple.
cahya sena 03/09/2011 at 6:34 am

sintak error ktnya .. dsni $CI =& get_Instance(); ane pake CI 202 heuhuehue
Ster 06/10/2011 at 4:50 pm

Kerennn!!!