CI3 – New layout using bootstrap RWD framework

Twitter bootstrap is the most popular responsive web design (RWD) framework today. This tutorial will be divided into 2 parts as below:

  1. Integrate codeigniter with twitter bootstrap responsive web design(RWD) framework.
  2. Create a new common layout and use in the view files.

Both of these steps are independent of each other and can be implemented alone if needed.

Integrate bootstrap 3 with codeigniter 3

This is a really simple task which can be implemented in two ways:

  • By using a content delivery network (CDN)

This is by far simplest and faster solution. Advantage of using CDN is that content is usually served faster since CDN servers may serve content to your users from a nearer location. Another advantage is that your users may already have accessed same CDN network and the content may be cached on your browser/computer, thus taking less time to load.

Below is how we implement it:

<!-- Latest compiled and minified CSS resource from bootstrap CDN -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Below two javascript links can be included at the bottom of page, just before </body> to improve performance -->
<!-- jQuery library by Google-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" async></script>

<!-- Latest compiled JavaScript from bootstrap CDN -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" async></script>

<!-- notice async usage in links, this is to make sure html pages continue to load while external JS resource are loading -->

create a view file bs_layout.php in the view folder. We are creating it under view/demo for demo purposes. Paste below content in the file:

demo/bs_layout.php
<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

?>
<html>
<head>
    <title> <?php if(isset($title)){echo $title ;} else {echo "Codeigniter Bootstrap layout by technology-central.org" ;} ;?> </title>
            <meta charset="UTF-8">
            <!-- viewport meta tag and device width directives ensure that the page adapts 
            as per the device width correctly.            
            -->
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!--
            bootstrap CDN, this will ensure styles are applied correctly.
            Go to http://getbootstrap.com/components/ for further reference.
            -->
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body class="container-fluid" style="padding-top: 70px;">
    <!--
    class="container-fluid" ensures that full width of device is utilized and not fixed width.
    -->
    <!--
    bs_header is the temple header located within the view folder.
    $body variable will contain the name of view file where body content is located. This will be passed from the
    controller method as a dynamic parameter.
    bs_footer is the footer template located in view folder.
    -->    
    <?php $this->load->view('demo/bs_header') ; ?>
    <?php $this->load->view($body); ?>
    <?php $this->load->view('demo/bs_footer');?>
    <!--
    Google CDN for loading jquery/ajax resources needed for bootstrap framework.
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" async></script>
    <!--
    Bootstrap CDN for loading JavaScript resources needed for bootstrap framework.
    -->    
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" async></script>  
</body>

This is the layout which will be called from the controller along with content parameters and it will ensure same layout is loaded every time without need to include all the resources on different pages.

  • Loading resources locally

If you do not want to use CDN , you can download resources from http://getbootstrap.com/getting-started/ and include the links instead of external CDN references.

e.g. you can do something like below:

<script src="<?php echo base_url();?>assets/bootstrap/3.3.6/js/bootstrap.min.js"></script>

This will include resources located within assets directory of your installation. Note that these need to be 
download to the same directory as your index.php file and their location will be relative to the index.php file 
location.

 

This concludes section for including bootstrap framework (and some part of layout) within the codeigniter. Now we will move to creating other parts of layout within the bootstrap framework.

Create other parts of layout and call them from controller

Now create 3 more files bs_body.php , bs_header.php (optional) and bs_footer.php (optional) within your view folder. Put below content if you want or you can include your own content as per application needs.

bs_header.php
<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

?>
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Put your header information like menus , logos etc. 
  refer to http://getbootstrap.com/components/ or http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
  for full reference on the bootstrap classes and other components
-->
</nav>
bs_footer.php
<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<p>
    Demo by technology-central.org | Your Terms & Conditions 
</p>
bs_body.php
<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>
This is sample content for the demo of responsive web design(RWD) implementation on a codeigniter installation.

Twitter's bootstrap 3 RWD framework has been used. Update the content as per you needs.

You can also include dynamic content by passing variables from controller or any other way you like.
Refer http://www.codeigniter.com/user_guide for details about MVC framework.

Demo by technology-central.org

 

Now we will call them from controller, lets say bootstrap. If you do not have a controller calling your view files already, create a controller bootstrap.php and copy below code:

Bootstrap.php
<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Bootstrap extends CI_Controller {
    public function __construct()
        {
                parent::__construct();
                // Your own constructor code here
        }
        
        public function index() {
           //this is the default controller if no specific controller method has been called
            $data_bs['body'] = "demo/bs_body" ; 
            // We are setting bs_body as the name of the view file within view/demo directory  which will 
            // be called from within the layout bs_layout. Change it as per your needs. You can 
            // pass any view names dynamically based on your application or keep it static.
           $this->load->view('demo/bs_layout',$data_bs) ; 
           // This will load the view file with dynamice data.
        }
}

Lets see how it works now:

  1. You go to url /bootstrap on your application.
  2. View bs_body needs to be called from this controller. We include this as variable name in the variable $data_bs['body'] and then load layout using $this->load->view('demo/bs_layout',$data_bs) .
  3. Within layout file demo/bs_layout :
    • <?php $this->load->view('demo/bs_header') ; ?> will load the header.
    • <?php $this->load->view($body); ?> will load the body content from demo/bs_body since it has been called dynamically from controller with variable name $data_bs['body'] . You can have multiple files for body or any other content and call them using variables.
    • <?php $this->load->view('demo/bs_footer');?> will load footer.
  4. Including header and footer is completely optional and you can skip them if not needed. In that case , do not create header and footer files and remove their reference from the layout.

That’s it. Your new layout with Twitter bootstrap RWD framework is integrated with codeigniter and ready to use.

Any questions or comments, leave a comment below.

References:

  1. http://getbootstrap.com/components/ for further reference on framework and different options e.g. glyphicons.
  2. w3schools resources
  3. http://www.codeigniter.com/user_guide/ for CI MVC framework documentation.
  4. http://technology-central.org/category/codeigniter/ for some other CI tutorials.

Leave a Reply

Technology Central © 2014 - 2017 | Privacy Policy | Website Terms & Conditions