30 Second Introduction to CodeIgniter

This 30 second series covers the CodeIgniter PHP framework. We are going to install CodeIgniter, create a CodeIgniter controller and a CodeIgniter view. Then we are going to bind the controller to the view using the router. If you get lost at any step of the way the entire project source code can be found in the repo https://github.com/mbejda/30-second-Introduction-to-CodeIgniter.
Lets get started.


Download,fork or clone CodeIgniter frame work from their repo and extract the files. The directory structure should look similarly to the following :

Navigate to the root of the project and run composer install to install CodeIgniter dependencies.

Creating A View

CodeIgniter views are located in application/views directory. Navigate to application/views and create a new view file. I named my CodeIgniter view file hello.php. Paste the following code into the CodeIgniter view file.

defined('BASEPATH') OR exit('No direct script access allowed');  
?><!DOCTYPE html>
<html lang="en">  
    <meta charset="utf-8">
    <title>Welcome to CodeIgniter</title>

    <style type="text/css">

    ::selection { background-color: #E13300; color: white; }
    ::-moz-selection { background-color: #E13300; color: white; }

    body {
        background-color: #fff;
        margin: 40px;
        font: 13px/20px normal Helvetica, Arial, sans-serif;
        color: #4F5155;

    a {
        color: #003399;
        background-color: transparent;
        font-weight: normal;

    h1 {
        color: #444;
        background-color: transparent;
        border-bottom: 1px solid #D0D0D0;
        font-size: 19px;
        font-weight: normal;
        margin: 0 0 14px 0;
        padding: 14px 15px 10px 15px;

    code {
        font-family: Consolas, Monaco, Courier New, Courier, monospace;
        font-size: 12px;
        background-color: #f9f9f9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;

    #body {
        margin: 0 15px 0 15px;

    p.footer {
        text-align: right;
        font-size: 11px;
        border-top: 1px solid #D0D0D0;
        line-height: 32px;
        padding: 0 10px 0 10px;
        margin: 20px 0 0 0;

    #container {
        margin: 10px;
        border: 1px solid #D0D0D0;
        box-shadow: 0 0 8px #D0D0D0;

<div id="container">  
    <h1>Welcome World</h1>



Creating A Controller

Controller deal with the application logic. CodeIgniters controllers are in the application/controller directory. Navigate to application/controller and create a new CodeIgniter controller file. I named my controller file Hello.js. Paste the following code into the controller.
Make sure that your class name reflects your controller file name and your view matches your views file name.

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

class Hello extends CI_Controller {

    public function index()

Creating A Route

Routes bind controllers to views. CodeIgniters routes are in application/config/routes.php file. Open the route file and add the following:

$route['hello'] = 'hello';

The $route['hello'] assigns the necessary URI structure to the hello controller.

Testing It Out

Lets test everything out. Navigate to the project root and launch the application. In the terminal run

php -S localhost:9000  

Then navigate to the URI that has been added to the route. You should see something like this :
codigniter hello