Codeigniter Free Responsive Bootstrap Template with Basic Setup

Today we will perceive how to stack the bootstrap format to CodeIgniter system. I have made a Codeigniter free notice format with essential set up autoload work. It will be helpful for freshers. In the event that you need to swap your ordinary HTML site to CodeIgniter take after the beneath basic strides. there I have clarified about entire CodeIgniter library, URL, constant, route setup.

Live demo                Download

Index of the content

• Codeigniter downloads latest version file and setup with the local server.
• Load HTML templates to the Codeigniter project folder.
• Creating controller class name and function 
• Load css,js,images ect (Application assets location).
• Autoload file basic (url,session) Setup.

Codeigniter download

Download latest version CodeIgniter file, Extract your localhost or server.

Download Link : https://codeigniter.com/download

Free bootstrap templates download

I have utilized a free responsive bootstrap layout for demo reason. In this way, I would recommend you download agency template files.

Download Link : https://startbootstrap.com/template-overviews/agency/

How to integrate HTML template in CodeIgniter

Paste and extract downloaded codeiginter.zip file to your local server. If you are using XMPP server extract your files to htdocs folder. For wamp users www folder.

          

Create one new folder name called as 'resources' paste your all CSS,js,images file to that folder.

Xampp --> htdocs --> codeiginter --> resources -- > load all css,js folder here

Paste or create your HTML files to views folder. Make sure all the files should be the .php function. 

htdocs--> codeiginter --> application-- > Views --> template files with .php  (home.php)

Load CSS,js,images etc (Application folder location)

We have completed the 3 simple level now we need to configure the CodeIgniter files and give the connection of CSS and JS files.

open  codeigniter --> application --> config --> constants.php  for configuring CSS and JS. Add below 3 line code.

define('CSS','resources/css'); // <?php echo base_url(CSS) ?> css files locations

define('JS','resources/js'); // <?php echo base_url(JS) ?> access js file

define('IMAGES','resources/img'); <?php echo base_url(IMAGES) ?> images location

Make sure that you're all style sheet,script,images file to the respected folder(resource) .
after that change all style sheet, script, images local server link.

<script src="http://localhost/codeiginter/agency.min.js"></script>
(to)

<script src="<?php echo base_url(JS); ?>/agency.min.js"></script>

Codeigniter Basic Setup configuration,libraries,ht-access

This very important step first load your project file base_url. It will specify your project path location.

application-->config-->config.php

$config['base_url'] = 'http://localhost/codeigniter/';

application-->config-->autoload.php

Find the below replace the code

$autoload['libraries'] = array();
                       to 
$autoload['libraries'] = array('database', 'email', 'session');

Load URL helper

$autoload['helper'] = array();
                       to 
$autoload['helper'] = array('url', 'file');

controllers

Open default controller welcome.php files load your HTML files.

welcome.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
    
    public function index()
    {
        //path views/home.php
        //home is a templatefile name.
        $this->load->view('home'); 
    }

    public function demo()
    {
        $this->load->view('demo');
    }
}

htaccess

If you want to remove index.php URL structure use this below code.

RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]