Today i would like to write about Generating Breadcrumb in Codeigniter.After generating it, we gonna apply Twitter Bootstrap Styles to it.
Breadcrumb are most commonly used secondary navigation menus , which will improve user navigation experience and they are also Search Engine friendly(improve SEO).
Example Controller : In this example Controller i am gonna create breadcrumb array and make it available to view file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
// create a breadcrumb array , and pass it to view file
$this->data['breadcrumb'] = array('/' => 'Home','#' => 'Welcome Page');
$this->load->view('welcome_message',$this->data);
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
|
NOTE: In the breadcrumb array key is the URL String and Value is the label.
its time to create a view file called welcome_message.php(which we are loading in our above example controller)in application/views/ directory.
After creating file just copy past the blow HTML markup, where we have included Twitter Bootstrap style sheets and javaScript file.
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="<?php echo base_url();?>css/bootstrap.css" rel="stylesheet">
<link href="<?php echo base_url();?>css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body >
<div class="container-fluid">
<?php
if(isset($breadcrumb)&& is_array($breadcrumb) && count($breadcrumb) > 0){
?>
<div class="row-fluid">
<div class="span12">
<div class="span2">
</div>
<div class="span10" style="margin-left:5px;">
<div>
<ul class="breadcrumb">
<?php
foreach ($breadcrumb as $key=>$value) {
if($value!=''){
?>
<li><a href="<?php echo $value; ?>"><?php echo $key; ?></a> <span class="divider">></span></li>
<?php }else{?>
<li class="active"><?php echo $key; ?></li>
<?php }
}
?>
</ul>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
|
That’s it.
- See more at: https://arjunphp.com/twitter-bootstrap-style-breadcrumb-in-codeigniter/#sthash.C80PTHa2.dpuf
No comments:
Post a Comment