CodeIgniter Skeleton

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.

Include

Core

• 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

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)

Example

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

Directory Structure

Application

config/
    assets.php                      // Config base URL for assets
core/
    MY_Controller.php               // MY_Controller & Ajax_Controller
helper/
    MY_url_helper.php               // Contain assets_url() function
library/
    Dialog.php                      // Generate HTML for Bootstrap's Modal dialog
    Response.php                    // Handle response for ajax request
    Template.php                    // Handle masterview and views within masterview
modules/
    addons/                         // Add-ons management
    skeleton/                       // Showcase of all included components
    todo/                           // Todo example
third_party/
    MX/                             // Modular Extensions - HMVC
views/
    layout/
        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

Assets

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

css/
    modules/
        {{module}}.css              // Extra CSS for a specific module
    bootstrap.min.css               // Bootstrap core CSS
    main.css                        // CSS for all pages
js/
    modules/
        {{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

Usage

Setup

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.

Guidelines

Rendering page (with base view)

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

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

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.

<?php
// Must extend MY_Controller to use HMVC Modular Extensions
class Welcome extends MY_Controller {
    // Pagelet should have _pagelet_ prefix
    public function _pagelet_example()
    {
        $this->load->view('welcome/pagelet_example');
    }
}

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

Writing Javascript inside the page body

<?php
$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

<?php
// 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
        $this->response->script('console.log("Responded.");');
        $this->response->send();
    }
}

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

License

Copyright An Vo @an_voz, 2013-2014.

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