A decent starter for most web apps. Includes HMVC, jQuery, Bootstrap, Bootstrap TLDR, Ajax and Template libraries. Unit tests with PHPUnit and vfsStream.
PHP Other
Latest commit 4bc139c Aug 3, 2014


CodeIgniter Skeleton Build Status

CodeIgniter Skeleton (CIS) is not only a decent starting point for most web apps but also a new experience for CI-based development to ajaxify everything.




  • CodeIgniter 2.2.0 (last updated: Jun 6, 2014)
  • Modular Extensions - HMVC 5.4 (last updated: Oct 4, 2013)
  • jQuery 1.11.1 (last updated: May 2, 2014)
  • Bootstrap 3.2.0 (last updated: Jun 26, 2014)
  • Bootstrap TLDR 1.1.0 (last updated: Mar 22, 2014)
  • Template library: handle masterview and views within masterview
  • Ajax request & response library: provide rapid ways to ajaxify everything


Add-ons are custom builds of some useful libraries and plugins. They are not included in the project but already have a quick mechanic to install by (at least) simply clicking on the Copy button in Add-ons page.

  • Bootstrap form helpers: generate HTML form fields and buttons with Bootstrap CSS style
  • Ion Auth 2.6.0 (last updated: Jul 31, 2014)
  • jQuery File Upload 9.5.7 (last updated: Mar 11, 2014)
  • validate.js 1.4 (last updated: Apr 14, 2014)


Getting started with a basic todo example which will help you learn how to use CIS in the right way.


Directory Structure


    assets.php                      // Config base URL for assets
    MY_Controller.php               // MY_Controller & Ajax_Controller
    MY_url_helper.php               // Contain assets_url() function
    Dialog.php                      // Generate HTML for Bootstrap's Modal dialog
    Response.php                    // Handle response for ajax request
    Template.php                    // Handle masterview and views within masterview
    addons/                         // Add-ons management
    skeleton/                       // Showcase of all included components
    todo/                           // Todo example
    MX/                             // Modular Extensions - HMVC
        default.php                 // Header + full width container
        pagelet.php                 // Header + half width container
    base_view.php                   // Masterview
    dialog.php                      // HTML template for Bootstrap's Modal dialog
    header.php                      // Page header


Use MY_url_helper assets_url() to get URL of Javascript, CSS or image resource

        {{module}}.css              // Extra CSS for a specific module
    bootstrap.min.css               // Bootstrap core CSS
    main.css                        // CSS for all pages
        {{module}}.js               // Extra JS for a specific module
    bootstrap.min.js                // Bootstrap core JS
    html5shiv.js, respond.min.js    // IE8 support of HTML5 elements and media queries
    jquery.min.js                   // jQuery core JS
    main.js                         // JS for all pages



By default, you will be albe to check all features on the home page without doing any of the following instructions. Just unzip the package and put the source code in your server.

  • Set your base URL in application/config/config.php file.
    Example: $config['base_url'] = 'http://example.com/';
  • Set your assets URL in application/config/assets.php file.
    Example: $config['assets_url'] = 'http://example.com/assets/';

Note: Base and assets URLs should be absolute, including the protocol.

H5BP's Server Configs: Best-practice server configurations to help improve site performance.

CodeIgniter Nginx Rewrite Rules

Unit Tests

phpunit --coverage-text --configuration tests/phpunit.xml

Please take a look at this for more info.


Rendering page (with base view)

Base view (masterview) is a well-designed HTML page based on Bootstrap and HTML5 Boilerplate template.

class Welcome extends MY_Controller {
    // URL: {{site_url}}/welcome/example
    public function example()
        // The below function is as same as $this->load->view('welcome/example')
        // but its output will be placed inside a base view

Use other methods of the Template library to customize base view: set_layout, set_title, set_description, add_metadata, add_js, add_css.

Rendering pagelet

A single web page should be broken down into small pieces which are called pagelets. Pagelet is a set of self-contained MVC and Javascript functions that should be loaded independently via both normal page render and ajax request render.

// Must extend MY_Controller to use HMVC Modular Extensions
class Welcome extends MY_Controller {
    // Pagelet should have _pagelet_ prefix
    public function _pagelet_example()

Use Modules::run('welcome/_pagelet_example') to get pagelet HTML output.

Writing Javascript inside the page body

$this->_load_script('$(function() {
    console.log("The DOM is loaded.");

To minify blocking time while the browser is executing Javascript, the script will be queued and only be executed after the page is completely rendered.

Note: The _load_script function simply echos the script so you can not use it in the same block with $this->template->load_view function which will echo a whole page. It should be used inside a pagelet, please check this example.

Executing function after all of the required Javascript files were loaded

CIS.Script.require('{{js_file_path}}', function() {
    console.log("Plugins are loaded.");
    $(function() {
        console.log("The DOM is loaded.");

Ajaxifying request

Via links: <a href="#" rel="async" ajaxify="{{ajax_url}}">...</a>

Via forms: <form rel="async" action="{{ajax_url}}">...</form>

Via Javascript function: CIS.Ajax.request('{{ajax_url}}'[, settings])

Handling ajax response

// Should extend Ajax_Controller to use the Response library
class Welcome_ajax extends Ajax_Controller {
    // URL: {{site_url}}/welcome/welcome_ajax/example
    function example()
        // The request must be called via
        // <a rel="async" href="#" ajaxify="{{URL}}">
        // or CIS.Ajax.request() function (located at main.js)
        // to be able to execute the response script below

Use alert, confirm and dialog functions of the Response library to display dialog in client-side.


Copyright An Vo @an_voz, 2013-2014.

CodeIgniter License Agreement, everything else is released under the MIT License.