CodeIgniter Admin Panel

CodeIgniter Admin Panel

Introduction

This tutorial show you how to create an admin panel for a web application that is powered by CodeIgniter MVC framework. We will be building the admin panel for an online shopping store Bootsshop. You can read the tutorial series on how to build the front end from our other website Kode Blog CodeIgniter Tutorial

For the sake of simplicity, we will not integrate the admin panel into the project that we created for the front end. We will create a new project that will work with the database for the on-line shopping store.

SB2 Admin template

Topics to be covered

We will cover the following topics in this tutorial

  • Pre-requisites
  • CodeIgniter HMVC
  • Admin Panel Project Setup
  • Admin Panel Routes
  • Auth and admin controllers
  • SB 2 Admin template
  • Topics to be covered in the tutorial series

Pre-requisites

This tutorial assumes you are familiar with;

  • PHP basics and Object-oriented programming
  • CodeIgniter Basics
  • You have a web server, PHP and MySQL already configured and running
  • You have a cool IDE i.e. NetBeans IDE, Aptana Studio etc.

CodeIgniter HMVC

HMVC is the acronym for Hierarchical Model View Controller. It allows us to develop our application in a modular way. For more details on HMVC, read the tutorial CodeIgniter HMVC. This tutorial will use HMVC.

Admin Panel Project Setup

In this section, we are going to download CodeIgniter and setup a new project for the admin panel. We will also configure it to work with HMVC.

Step 1 – Download CodeIgniter and create a new project

Download CodeIgniter from the official website http://www.codeigniter.com/. As of this writing, the latest version if 3.0.1

Create a new directory in your web root ci-my-admin. I installed XAMPP to drive C:\xampp. My full directory path is C:\xampp\htdocs\ci-my-admin

Extract the contents of CodeIgniter into C:\xampp\htdocs\ci-my-admin

Load the following URL in your web browser

http://localhost/ci-my-admin/

You should be able to see the CodeIgniter welcome page

Step 2 – Setting up HMVC

We will now download and install the HMVC extension

  1. Download the extension from https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc
  2. Extract the contents of the download
  3. Copy the contents of core into the /application/core directory
  4. Copy the contents of third_party into the /application/thirdy_party directory
  5. Create the modules directory /application/modules/welcome/controllers
  6. Move the controller welcome.php from /application/controllers into /application/modules/welcome/controller

Load the following URL in your web browser

http://localhost/ci-my-admin/

You should be able to see the welcome home page

Step 3 – Create directories and files for the project

Our admin panel will require the following files and directories

  1. /application/config/ci_my_admin.php – this file will contain configurations that are unique to our application
  2. /application/core/MY_Controller.php – this file will extend the CI_Controller class
  3. /application/modules/admin – this is the module directory for our admin panel
  4. /application/modules/auth – this is the module directory for users authentication
  5. /application/views/admin – this directory will contain views responsible for loading the admin layout and pages
  6. /application/views/public – this directory will contain views responsible for loading the user authentication layout.
  7. /assets/admin – this directory will contain the admin CSS, JavaScript, Image files etc.

Create the above files and directories. The attached tutorial file already has the files and directories.

Step 4 – Configuration file

Open /application/config/ci_my_admin.php Add the following code

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

$config['ci_my_admin_template_dir'] = ""; // you need this line
$config['ci_my_admin_template_dir_public'] = $config['ci_my_admin_template_dir'] . "public/themes/default/";
$config['ci_my_admin_template_dir_admin'] = $config['ci_my_admin_template_dir'] . "admin/themes/default/";
$config['ci_my_admin_template_dir_welcome'] = $config['ci_my_admin_template_dir'] . "welcome/themes/default/";

HERE,

  • $config['ci_my_admin_template_dir'] = ""; defines the root path. It’s blank for now.
  • $config['ci_my_admin_template_dir_public'] sets the path to the public templates path. The public templates are used for the login window
  • $config['ci_my_admin_template_dir_admin'] sets the path to the admin section templates
  • $config['ci_my_admin_template_dir_welcome'] sets the path to the frontend templates

Step 5 – MY_Controller.php

Open /application/config/MY_Controller.php Add the following code

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

class MY_Controller extends CI_Controller {

    var $_container;
    var $_modules;

    function __construct() {
        parent::__construct();
        $this->load->helper('url');

        $this->load->config('ci_my_admin');

        // Set container variable
        $this->_container = $this->config->item('ci_my_admin_template_dir_public') . "layout.php";
        $this->_modules = $this->config->item('modules_locations');

        log_message('debug', 'CI My Admin : MY_Controller class loaded');
    }
}

HERE,

  • var $_container; defines the contain variable. We will use it to load the template paths
  • var $_modules; defines the modules variable. We will use it to load the modules
  • $this->load->helper('url'); loads the url helper
  • $this->load->config('cimyadmin'); loads the custom config file
  • $this->container = $this->config->item('cimyadmintemplatedirpublic') . "layout.php"; sets the default _container value.
  • logmessage('debug', 'CI My Admin : MYController class loaded'); writes the log information for debugging purposes

Admin Panel Routes

Open application/config/routes.php

Add the following routes

$route['admin/dashboard'] = 'admin/admin';

//brands routes
$route['admin/brands'] = 'admin/brands';
$route['admin/brands/create'] = 'admin/brands/create';
$route['admin/brands/edit/(:any)'] = 'admin/brands/edit/$1';

//categories routes
$route['admin/categories'] = 'admin/categories';
$route['admin/categories/create'] = 'admin/categories/create';
$route['admin/categories/edit/(:any)'] = 'admin/categories/edit/$1';

//products routes
$route['admin/products'] = 'admin/products';
$route['admin/products/create'] = 'admin/products/create';
$route['admin/products/edit/(:any)'] = 'admin/products/edit/$1';

Add the following .htaccess file to force all requests to pass through index.php and eliminate index.php from the URL.

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|assets|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Auth and Admin controllers

We will now create the controller for authentication

Create a new file in /application/modules/auth/controllers/auth.php

Add the following code

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

class Auth extends MY_Controller {

    function __construct() {
        parent::__construct();
        log_message('debug', 'CI My Admin : Auth class loaded');
    }

    function index() {
        $data['page'] = $this->config->item('ci_my_admin_template_dir_public') . "login_form";
        $data['module'] = 'auth';
        $this->load->view($this->_container, $data);
    }
}

HERE,

  • class Auth extends MY_Controller {…} extends the MY_Controller class
  • function __construct() executes the parent constructor method and writes a log file entry
  • function index() this method loads the login page

SB2 Admin Template

Our Admin Panel will use the SBM2 Free Admin Template. The following image shows a preview of the template

SB2 Admin template

You can download the above template from SB2 Admin Template

Topics to be covered in the tutorial series

The following are some of the topics that will be covered in these tutorial series

  1. Converting HTML Templates to CodeIgniter views
  2. CodeIgniter Database Forge
  3. CodeIgniter Migrations
  4. CodeIgniter Form Helper
  5. Code Form Validation
  6. CodeIgniter Custom Helpers
  7. CodeIgniter Authentication
  8. CodeIgniter sessions
  9. …and many more

Summary

We created a CodeIgniter project, configured it to work with HMVC and added application specific files and directories. In the next tutorial, we will convert the HTML5 template into CodeIgniter views.

What’s next?

The next tutorial will convert the HTML template into CodeIgniter views.

If you found this tutorial useful, support us by using the social media buttons to like and share the tutorial. If you didn’t find it useful, please use the comments section below to let us know how we can do better next time.

Each week, a new CodeIgniter tutorial is added to our collection. Subscribe to our newsletter, like our Facebook fan page or follow us on Twitter to get free updates when the collection is updated.

Tutorial History

Tutorial version 1: Date Published 2015-09-24

Our Curriculum

This tutorial introduces you how to convert a HTML template into CodeIginiter Views and define a single layout for common HTML code....readmore

This tutorial introduces you to migrations and database seeding in CodeIgniter using the command line interface....readmore

This tutorial introduces you to CodeIgniter model conventions over configurations to speed up development using a real world example...readmore

This tutorial shows you how to implement user authentication in CodeIgniter using Ion Auth Library. (Complete source coded included)...readmore

This tutorial shows you how to implement user authorization in CodeIgniter using Ion Auth Library...readmore

Related Tutorials