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.
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
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
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.phpfile.
Example:$config['base_url'] = 'http://example.com/'; - Set your assets URL in
application/config/assets.phpfile.
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
phpunit --coverage-text --configuration tests/phpunit.xml
Please take a look at this for more info.
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.
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.
<?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.
CIS.Script.require('{{js_file_path}}', function() {
console.log("Plugins are loaded.");
$(function() {
console.log("The DOM is loaded.");
});
});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])
<?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.
Copyright An Vo @an_voz, 2013-2014.
CodeIgniter License Agreement, everything else is released under the MIT License.