Creating Template in CodeIgniter 3 Using Bootstrap Theme

We will integrate bootstrap theme with CodeIgniter using layout. We will create own custom layout for CodeIgniter in this tutorial.This is master template which will use to render child view file, like each website template has header, footer and sidebar view which is constant and nothing has been changed between different pages.

We will define a master layout which has constant things as its and variable things like inner content will change based on routing or request of page, first question is our mind what will be variable in CodeIgniter layout?, the page title,page content etc, we will use page title and content as a variable into this CodeIgniter tutorial.

Pre-Requisites for CodeIgniter 3 Template Tutorial

There are following library and framework must be downloaded and configured

• Download CodeIgniter 3.
• Download Bootstrap Theme Bootstrap Admin Theme.
• WAMP, XAMPP or a Live Server
• Enable mod_rewrite module(for Apache)

Example of Codeigniter Templates Using Bootstrap Admin Theme

I am using bootstrap admin theme, you can change theme as per your application need, The CI templates integration process would be same like any other HTML theme.I am creating ci_test folder into xampp/htdocs/ directory and moved all files and directories from CodeIgniter 3 downloaded folder to xampp/htdocs/ci_test folder.

I am using following files and folder

We will create and modify following CI files.

• libraries/template.php : This file will use to create template class and method to render layout.
• views/layouts/default_layout.php : This file will use to create HTML layout using template.phpclass.
• config/config.php : This file will use configure application level params.
• config/autoload.php : This file will use to load libraries on project instantiate.
• config/router.php : This file will use to define route path of application.
• views/home.php, views/about.php : home and about view file.
• controllers/home.php : Default application controller file and use to render home,about view file using template.

Modify config.php file
We will modify some configuration parameters in application/config/config.php file, I made following changes into this file:

1 2 3

$config['uri_protocol'] = 'REQUEST_URI'; $config['base_url'] = 'http://ci_test/'; $config['index_page'] = ''; //remove index.php file from url

Added .htaccess file
We will add .htaccess file into route of /ci_test folder.We will write some rule for SEO and User-Friendly URLs, we can access employee list using this http://ci_test/employee instead of http://ci_test/index.php/employee.

1 2 3 4 5

RewriteEngine on RewriteCond $1 !^(index\.php|resources|robots\.txt) RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Modify autoload.php
We will modify autoload.php file for template library class.We will add helper library class in this file.You can find changes later on this tutorial.

Change Default controller in routes.php file

We will change default controller name from welcome to home, whenever page load without controller name, the default controller home and index() method will be call.

$route['default_controller'] = 'home';

How to Created Template Library in CI

Step 1: We will create template class for render template view file.We will create template.php file and stored into /library folder.

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

<?php class Template { //ci instance private $CI; //template Data var $template_data = array(); public function __construct() { $this->CI =& get_instance(); } function set($content_area, $value) { $this->template_data[$content_area] = $value; } function load($template = '', $name ='', $view = '' , $view_data = array(), $return = FALSE) { $this->set($name , $this->CI->load->view($view, $view_data, TRUE)); $this->CI->load->view('layouts/'.$template, $this->template_data); } } ?>

Step 2: We will create default_layout.php view file into views/layouts/ folder.This file will contains all js, css libraries files with html inner container variable.

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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title>Test CI Application - <?php echo $title;?></title> <meta name="description" content="overview &amp; stats" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <!-- bootstrap & fontawesome --> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css" /> <link rel="stylesheet" href="<?php echo base_url();?>assets/font-awesome/4.2.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/theme.min.css" class="theme-stylesheet" id="theme-style" /> <link rel="stylesheet" href="<?php echo base_url();?>assets/fonts/fonts.googleapis.com.css" /> <!-- page specific plugin styles --> </head> <body class="no-skin"> <div id="navbar" class="navbar navbar-default"> <div class="navbar-container" id="navbar-container"> <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar"> <span class="sr-only">Toggle sidebar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-header pull-left"> <a href="/" class="navbar-brand"> <small> <i class="fa fa-leaf"></i> Sample CI Example </small> </a> </div> <div class="navbar-buttons navbar-header pull-right" role="navigation"> <ul class="nav ace-nav"> <li class="light-blue"> <a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-user-photo" src="<?php echo base_url();?>assets/avatars/user.jpg" alt="Admin Photo" /> <span class="user-info"> <small>Welcome,</small> Admin </span> <i class="ace-icon fa fa-caret-down"></i> </a> <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> <li> <a href="#"> <i class="ace-icon fa fa-cog"></i> Settings </a> </li> <li> <a href="#"> <i class="ace-icon fa fa-user"></i> Profile </a> </li> <li class="divider"></li> <li> <a href="#"> <i class="ace-icon fa fa-power-off"></i> Logout </a> </li> </ul> </li> </ul> </div> </div><!-- /.navbar-container --> </div> <div class="main-container" id="main-container"> <div id="sidebar" class="sidebar responsive"> <ul class="nav nav-list"> <li class="<?php echo $title == 'Home' ? 'active' : '' ?>"> <a href="/"> <i class="menu-icon fa fa-tachometer"></i> <span class="menu-text"> Dashboard </span> </a> <b class="arrow"></b> </li> <li class="<?php echo $title == 'about' ? 'active' : ''?>"> <a href="/home/about"> <i class="menu-icon fa fa-list-alt"></i> <span class="menu-text"> About us </span> </a> <b class="arrow"></b> </li> </ul><!-- /.nav-list --> <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> </div> <div class="main-content"> <div class="main-content-inner"> <div class="breadcrumbs" id="breadcrumbs"> <ul class="breadcrumb"> <li> <i class="ace-icon fa fa-home home-icon"></i> <a href="/">Home</a> </li> <?php if($title != 'Home') :?> <li class="active"><?php echo $title;?></li> <?php endif;?> </ul><!-- /.breadcrumb --> <div class="nav-search" id="nav-search"> <form class="form-search"> <span class="input-icon"> <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input1" autocomplete="off" /> <i class="ace-icon fa fa-search nav-search-icon"></i> </span> </form> </div><!-- /.nav-search --> </div> <div class="page-content"> <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> <?php echo $contents;?> <!-- PAGE CONTENT ENDS --> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.page-content --> </div> </div><!-- /.main-content --> <div class="footer"> <div class="footer-inner"> <div class="footer-content"> <span class="bigger-120"> Copyright © js-tutorials.com. All rights reserved. </span> </div> </div> </div> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i> </a> </div><!-- /.main-container --> <!-- basic scripts --> <script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.2.1.1.min.js"></script> <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script> <script src="<?php echo base_url();?>assets/js/theme.min.js"></script> </body> </html>

Step 3: Made template entry in config/autoload.php file to load template class when CI has been initialize.

$autoload['libraries'] = array('template');
$autoload['helper'] = array('url');

Created Home Controller in CI

We have made change in config for default controller which was home, so we will create new php file Home.php file into controllers folder.We will also create index() method into it.Please add below code into Home.php controller file.

1 2 3 4 5 6 7

public function index() { header("Access-Control-Allow-Origin: *"); $data = array(); $this->template->set('title', 'Home'); $this->template->load('default_layout', 'contents' , 'home', $data); }

Create home view file

We have defined home view file in index() controller method.We will create a new home.php file into views/ folder.Please add below code into this file,

1 2 3 4

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Codeigniter Pages Using Template

We will add a new page into this codeigniter tutorials so that you can understand the use of layout.We will create about page which will render on same layout.We just send view to default layout file and rest of theme structure same as home.

Step 1: Create a new entry route into route.php file.
$route['home/about'] = 'home/about';

We have mentioned home is controller and about is a method.

Step 2: Created about method into Home.php controller file.

1 2 3 4 5 6

public function about() { $data = array(); $this->template->set('title', 'about'); $this->template->load('default_layout', 'contents' , 'about', $data); }

Step 3: Created about.php view file into views/ folder.

1 2 3 4

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Conclusion

This is a codeigniter beginners tutorial help to integrate beautiful bootstrap theme with Codeignitor using Layout.You can also integrate simple HTML theme using this codeigniter tutorial.We have create new controller and view file and render them using template.

You can download source code from below link.