Android OpenCV Programming

Learning the Packages of OpenCV SDK for Android

Return to OpenCV for Android Tutorials List

In the previous tutorial, you learnt about the file structure of OpenCV SDK for Android. Now, we will learn the packages which are available for us to use in OpenCV SDK for Android. At the end of this tutorial, you will definitely know what OpenCV for android has to offer.

Each package is imported like this:

import org.opencv.core.Mat;

Each packages has java classes which contain functions which you use.

First of all, lets find the packages in the sdk folder manually. On your computer, once you have downloaded the OpenCV SDK, you can browse to the following address in order to find all the OpenCV for Android classes.


There, you will find the following packages (OpenCV 3.0):

Also, when you have created an OpenCV project in Android Studio, you will find the packages in the project browser like this:

Now, I will explain to you the purpose of each and every package so that you learn about OpenCV without any effort :D. You won’t regret coming on my blog 🙂

Note that each package can be imported like this as I told before:

Package  Name Purpose Description
android OpenCV interaction with Android platform This package has functions which can allow you to implement an OpenCV project in your Android device. This package handles interactions between OpenCV and Your phone.
calib3d  Project 3D coordinates of objects in a scene. “calib3d” stands for Camera Calibration and 3D Reconstruction. This package has functions which can determine 3D coordinates of objects. So lets say you have a box in a picture. calib3D functions can project 3D coordinates of that box if you provide “intrinsic” and “extrinsic” coordinates.

There are functions to estimate intrinsic and extrinsic parameters 🙂

core Brain of OpenCV. Does all what OpenCV does elsewhere.  “core” is the core package of OpenCV. This package contains functions which provide the base functionality of OpenCV. This include mathematical and matrix operations, algorithmic procedures and much more.

This library is not responsible for image processing. That library is called “imgproc” and it is discussed below.

engine  Provides basic information about current OpenCV SDK installation in your project  Basically, if in your project, you wish to obrain basic information about your OpenCV SDK such as  its packages, version, SDK path, and list of libraries.

Moreover, you can specify a specific version of OpenCV that user’s phone should download from play store. Pretty cool, right?

features2d  Detect and track features in a a 2D test image/frame  You will use this library to detect features, draw them and track them on the screen.
imgcodecs  Read/write images from your disc  Well, imagine you wish to work on an image that is in your disk instead of receiving it from camera. In this case, you will use this library. Its functions allow you to do the following:

  • Read single image
  • Read multiple images
  • Write an image (output)
  • Read specific formats of images in different ways to suit your project and purpose (encode/decode)
imgproc  Image Processing. DUH!  Whether you have loaded an image, or are using camera as input, you will be needing OpenCV to process the image. Well, “imgproc” is the library that has all the functions that you can use, manipulate and exploit to your liking.

This library has functions and classes which allow you to blur image, draw shapes, compare shapes, write text on image, apply enhancement functions and much, much, much more!

This library also has functions which detect points of interest of your liking.

ml  Machine Learning (Artificial Intelligence)  You can train OpenCV to do do Computer Vision according to your requirements. All you need to do is to teach it.

This library has classes and functions that train OpenCV to perform computer vision job for you 🙂


objdetect  Detect features or an object  This library has functions that give you the ability to implement detection of a specific custom-defined object in an image or camera feed.

Ever heard of Haar like feature detection? You can do that in this library.

photo  Image Enhancement  This library handles Image enhancement.

Want to set ISO? Exposure setting? contrast? Saturation? hue? Shit? Well, this library has all these functionalities and much more! You can calibrate so much.

One interesting feature is de-noising which will let you play with noise in your image ;D. Useful, right?

utils  Compatibility converters to support different formats of data This library has functions that convert image data from one mathematical format into another. For example, you can convert from one matrix format into another for image processing using a specifically designed code. It is a life saver.
video  Video Processing  This library will help you to perform video processing. You can track objects in a video, subtract background, apply video filters and much more.
videoio  Interact with video files  Using this library, you can open video files, open different format of video files and work with them.


This tutorial was brief and was supposed to give you the starting knowledge in order to grow your knowledge about OpenCV by yourself. Let me know in the comments what you think. I will be glad to answer. Now proceed to hte next tutorial 🙂

Return to OpenCV for Android Tutorials List

Android OpenCV Programming

OpenCV SDK for Android File Structure

Return to OpenCV for Android Tutorials List

In this tutorial, you will learn about the file structure of OpenCV SDK for Android. The information here is very short and lacks details. My purpose here is to provide just enough information to get going with the rest of the tutorials. I highly recommend reading more about the folders, algorithms, libraries and classes on your own.


So you have downloaded SDK but you may be curious what the SDK files do. Lets see to that now. You can skip this tutorial if you are interested in going directly to the development.

When you extract the “” from the precious tutorial, you will get a folder /OpenCV-android-sdk/.

Inside the /OpenCV-android-sdk/ folder, you will see:

  • /apk/
  • /samples/
  • /sdk/

Lets look at these in detail.

OpenCV for Android SDK file structure
OpenCV for Android SDK file structure


/apk/ This folder contains OpenCV manager API for different android device architectures. Chose the .apk file which is supported by your android device. Or simply download one from Google Play Store because that way, you will be downloading the apk file that is supported by your device/


/samples/ This folder contains sample android apps that you can install into your android device to test features of OpenCV. Also note that the source code of each sample is included in the /samples/ folder. It is a good place to start.


/sdk/ THE BRAINS OF OpenCV is here. I will explain about this folder below.


LICENSE Well, it can’t be said more precisely than what is written there as “By downloading, copying, installing or using the software you agree to this license.If you do not agree to this license, do not download, install,

copy or use the software.”

5 Contains a link to online documentation, resources and feedback. Quiet handy!

Now that the root file structure of OpenCV is out of the way, we can now take a look at the SDK folder contents to give you the idea of what exactly what it and its contents do.

The /sdk/ folder contains the OpenCV API and libraries that will be used in your android project. You need these to perform all the functionalities that OpenCV offers in order to help you perform your Computer Vision related job.

Inside the SDK folder, in my case, there are three folders:

  1. /sdk/etc/
  2. /sdk/java/
  3. /sdk/native/

Lets look at the contents of SDK folder here:

S.No Name Description
1 /sdk/etc/ This folder contains the “memory” of OpenCV. Memory being like the brain-memory :D. See, as the time passed, the geniuses who made OpenCV for us to feast upon collected data and fine-tuned it for algorithms to use. That data is kept here.

For example, face detection requires some data which is compared with the picture snapped by your x-megapixel camera. That data is kept inside this folder.

2 /sdk/etc/haarcascades HAAR or HAAR-like-features is a folder where you put post-OpenCV-training data.


In this folder, you can find data files which contain data generated by training OpenCV in order to detect face, eyes, nose etc detection.


You too can create such data files if you wish to detect something such as legs, airplane, cracks on wall (edge detection), pacman, ****, *******, *******888*88* detection 😛


Lets say you wish to train OpenCV to detect face of a “sick” person. So you take pictures of a (e.g.) 1000 sick people (positive images) and then resize those picture to a same small size that is easy to process in bulk :D. Now you will also need pictures of people who are NOT sick.  Now, you will train OpenCV on that load of 1000 pictures plus the people who are not sick. This data is put in this folder to be used.


HAAR algorithm is very accurate but is slower as compared to LBP.

3 /sdk/etc/lbpcascades LBP stands for local binary pattern. This method is unique in a way that instead of using generated data to detect features (as was the case of HAAR), the LBP takes a pixel and finds the intensity of its neighbor pixels.


So lets say there is a pixel. Practically, each pixel has eight neighbor pixels, so our pixel also has eight surrounding pixels. Now, for each pixel, a binary value is obtained. The value of binary number depends on the comparison between the center pixel and its test-neighbor pixel.


If pixel intensity is greater than center pixel, then value is 1.

If pixel intensity is lesser than center pixel, then value is 0.


LBP algorithm is very fast, but least accurate.

4 /java/ When creating a new Android project, you can import the OpenCV Java Api from this folder.
5 /java/.settings Contains settings that are implemented when importing the OpenCV for android Java API.
6 /java/gen Contains generated files. For example,, when generated is put here.
7 /java/javadoc This folder contains the documentation of OpenCV for Android. In my case, it is the documentation for the version 3.0.0

All the classes of OpenCV for Android are explained here. So if you ever find yourself in trouble, or wish to learn more, visit this folder.

8 /java/res Standard Android project folder that contains resources to be used in an android project. The resource file that came in my case contains camera information.
9 /java/src The /etc/ folder was the memory of OpenCV. But this folder is the actual brain of OpenCV. This folder contains the classes that perform all the functionalities of OpenCV in Android. Classes are written in Java.


Root files are self explainatory. If not, then what on Earth are you doing on this post? You should learn Android and then come here.

10 /java/src/org/opencv Exactly this folder contains the classes. Core, mathematical operation algorithm, training and all the shit that OpenCV gets done for you, is actually here. Every improvement in OpenCV is included here. Please respect the contents of this folder if you use OpenCV.
11 /native/ This folder contains C++ .h (header) files and native libraries for multiple android architectures.

This is it for this tutorial. I have explained to you the structure of the OpenCV for Android SDK file structure. In the next tutorial, I will explin to you about the classes available in OpenCV for Android SDK which you can use.

Return to OpenCV for Android Tutorials List

Android OpenCV Programming

OpenCV for Android: Download Required Software

Return to OpenCV for Android Tutorials List

In this tutorial, you will learn which tools to download for creating your OpenCV project in Android Studio if you follow this tutorial series 🙂

  1. Download and install Android Studio from HERE. Make sure that it is working.
  2. Download  OpenCV for Android SDK from HERE.
    • Demonstration of SDK download.

      OpenCV for Android Download-Required Software
      OpenCV for Android Download-Required Software
  3. Basically, after downloading the SDK, simply extract it on a folder and it will be ready for usage.
  4. That’s it! You have downloaded the OpenCV for Android SDK.

In the next tutorial, you will make a new project and set it up so that your application is ready to OpenCV!

Return to OpenCV for Android Tutorials List

Android OpenCV Programming

Android OpenCV Pre-requisites

Return to OpenCV for Android Tutorials List

Welcome to the beginning of the OpenCV for Android (OpenCV4Android) tutorial series. Before we start, you must know that this series expects you to know:

  • Basics of Java
  • XML
  • Computer Vision
  • Object Orient Programming concepts
  • Know how to use Android Studio
  • Know how to make and install an APK file in a real Android device.

Moreover, it is assumed by this series that you have:

  • Downloaded Android Studio.
  • Installed Android Studio.
  • Download Android SDK
  • Installed Android SDK

It may look like too much to ask for, but in reality, a seasoned programmer may already have satisfied the above requirements.

If there is a problem, then let me know, I will sort it out for ya 😉

Return to OpenCV for Android Tutorials List

Android Programming

Android: How to fix “null object reference” error (with code)

This post is specifically for a problem whose solution is usually hard to find (at least now). The solution is at the end.

Basically, the problem lies in the referencing method being used to make reference towards the current activity. The solution is to make the referencing dynamic. Read below for solution with code example.


  1. You are developing an android app.
  2. You have loaded a fragment.
  3. You are taking inputs from EditText and calculating.
  4. Moreover, you are showing the result in a TextView.

Basically, it looks like this,

Now, when the fragment is loaded and you fill in the values and press the button, you get this error in Logcat

java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.CharSequence android.widget.TextView.getText()' on a null object reference

As evident from my Logcat as well.


Problematic code is given below:

 * Created by Codeonion on 9/26/2015.
public class CustomFragmentClass extends Fragment implements View.OnClickListener{
    TextView mFirstNumber;
    EditText mSecondNumber;
    TextView m_resultHolder;
    Button btnAdd;
    double num1, num2, result;

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View fragmentHandle = inflater.inflate(R.layout.myLayoutName, container, false);
        btnAdd              = (Button) fragmentHandle.findViewById(;

        btnAdd.setOnClickListener(new OnClickListener()
            public void onClick(View view)
                // Get references from the views
                 mFirstNumber   = (EditText) view.findViewById(;
                 mSecondNumber  = (EditText) view.findViewById(;
                 m_resultHolder = (TextView) view.findViewById(;

                // Get the actual usable values of views
                num1 = Double.parseDouble(mFirstNumber.getText().toString());
                num2 = Double.parseDouble(mSecondNumber.getText().toString());

                // Calculation Area
                result = num1 + num2;

                // Show Result

        return fragmentHandle;

    public void onClick(View v) {




In my case, the problem was in the line 25, 26, 27.  instead of “view.“, I need to dynamically get the current activity using “getActivity().“. As a result, the current activity reference is obtained dynamically and the error is resolved.

Here is the correct code. Please note the difference in lines 26, 26 and 27.

 * Created by Codeonion on 9/26/2015.
public class CustomFragmentClass extends Fragment implements View.OnClickListener{
    TextView mFirstNumber;
    EditText mSecondNumber;
    TextView m_resultHolder;
    Button btnAdd;
    double num1, num2, result;

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View fragmentHandle = inflater.inflate(R.layout.myLayoutName, container, false);
        btnAdd              = (Button) fragmentHandle.findViewById(;

        btnAdd.setOnClickListener(new OnClickListener()
            public void onClick(View view)
                // Get references from the views
                 mFirstNumber   = (EditText) getActivity().findViewById(;
                 mSecondNumber  = (EditText) getActivity().findViewById(;
                 m_resultHolder = (TextView) getActivity().findViewById(;

                // Get the actual usable values of views
                num1 = Double.parseDouble(mFirstNumber.getText().toString());
                num2 = Double.parseDouble(mSecondNumber.getText().toString());

                // Calculation Area
                result = num1 + num2;

                // Show Result

        return fragmentHandle;

    public void onClick(View v) {


Now, I will show you my app working.


Now, when I input the values and press the button, the activities are obtained dynamically and the error does not appear any more.

As you see! swift arithmetic operation! Speaking of which, do check out my Android Tutorials Series for more!

Android Development Tutorials by Codeonion Learn more!



Codeigniter Programming

CodeIgniter 3 – Create your own Hello World with simple form and database!

In the previous tutorial, you you learnt how to remove the “index.php” from URL. Now, we are ready for the “Hello World!” complete with code


In this tutorial, we will learn CodeIgniter 3 MVC by making a Hello World! program, complete with database, introduction to CRUD operations, form, switching pages and code. We will cover a LOT in this tutorial and I am sure you will get a lot of knowledge about CodeIgniter 3. Check the following list to see what you will learn.

  1. Create a database to be used by Model
  2. Connect the database to the web application
  3. Create a custom model:
    • Model will use the Database
    • model will contain a “Hello World!” in a function as a return value for controller to use.
  4. Create two custom views:
    • We will Load views from controller.
    • Pass data to the views using controller.
    • Use data from controller in Views.
    • Make a form which will work along with Controller.
    • Call controller custom function.
    • Pages association (move from page to page)
  5. Create a controller that will:
    • Load the model.
    • Use model function in controller.
    • Receive input from model in controller.
    • Interact with database using model.
    • Pass data to views using data[] array.
    • Create custom controller function.
    • Load views.
    • Load view from a button in another view.
    • Use helper;
    • Use constructor.

As you can see, this is a seriously deep “Hello World!” tutorial. I am sure that you will learn a lot in the end. You will be prepared to learn more without having to worry about learning the basics. Lets get started!


Creating the Database

1. Create a Database

We will create a database to be used for this tutorial.

  1. In XAMPP, go to localhost/phpmyadmin/
  2. Create a  database called “citutorial
  3. Create a table using this SQL query
    CREATE TABLE `citutorial`.`helloworldtable` ( `id` INT NOT NULL AUTO_INCREMENT , `message` VARCHAR(255) NOT NULL , PRIMARY KEY (`id`) ) ENGINE = InnoDB;
  4. Now make a simple “Hello World!” entry in the table so that the table has just a single entry of
    id = 1
    message = Hello World!

Eventually, your table should look like this,


2. Connect the Database

Go to the /application/config/database.php and modify the settings for the database citutorial. You need to input the database username, password and database name. By default, the username in XAMPP is “root” and password is empty i.e. “”. And the database name is “citutorial. So the settings are,

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'citutorial',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE

Creating the Model

Understanding the Model

We will now understand the model which will retrieve the “Hello World!” message from the database table we created in steps 1 & 2. First, I will show you what method I used and then you will get the entire model code.

For this tutorial, I have first selected the “table” in our database using this line of code.

// $this->db->from("NAME_OF_TABLE");
$query = $this->db->from("helloworldtable");

Then, I provided the criteria to find the “Hello World!” message from the table like this. Note that in the following line of code, “message” is the column name and “Hello World!” is the specific search keyword that is to be matched in order to retrieve the value.

//$this->db->where('TABLE_COLUMN_NAME', "SEARCH_KEYWORD");
$query = $this->db->where('message', "Hello World!");

Then, I checked if the query was successful and performed an action on the basis of the success or failure of the query like so.

	echo "Failed to find the \"Hello World\" Entry<br>";
	echo "Successfully found the \"Hello World\" Entry<br>";
	return $this->db->get()->result();

Note that in the end, I simply returned the result of the query like this.

return $this->db->get()->result();

(Alternative approach)

Now, note that all of this could also have been done using the following model function (which I won’t use).

function return_helloworld_message(){
	$this->db->where('message', "Hello World!");
	return $this->db->get()->result();

3. Creating the model

Lets finally create the model file and add the code.

  1. Go to \application\models\1_hello_world\ and create a file called “Helloworld_model.php”.
  2. Double check that the file name starts with a capital letter since it is important in CI3.0+ versions.
  3. Now, open the file and add the following code to it.
    defined('BASEPATH') OR exit('No direct script access allowed');
    class Helloworld_model extends CI_Model {
    	public function __construct()
                // Call the CI_Model constructor
        function return_helloworld_message(){
        	// From the given table,
        	$query = $this->db->from("helloworldtable");
        	// Find where the column "message" has a value called "Hello World!"
        	$query = $this->db->where('message', "Hello World!");
        	// Check if the query was successful
        		echo "Failed to find the \"Hello World\" Entry
        		echo "Successfully found the \"Hello World\" Entry
        		return $this->db->get()->result();
        	// Then, return the value from Model to the calling controller

This completes the model to be used in this tutorial.  Next, we will prepare our views to receive the input.


Creating the Views

For this tutorial, we will make two views.

  1. First view will be used to request a “Hello World!” query.
  2. Second view will be used to show the output (either failure or success)

4.1 Creating a view to request for a “Hello World!” message

This view will show a page which will ask the user to press a button to perform a request. Here are some points to note:

Follow these steps to make the request view..

  1. Go to \application\views\1_hello_world\ and create a file called “request_a_helloworld_message.php”.
  2. Add the following code to it.
    defined('BASEPATH') OR exit('No direct script access allowed');
         echo $buttonText;
         echo $pageTitle;
         echo $heading;
    <form action="<?php echo base_url();?>1_hello_world/helloworld/requestModel" method="post">
    <?php echo $button_info; ?>
    <input type="submit" value="<?php echo $buttonText; ?>" />

4.2 Creating a view to show result

Upon completion of the request, an output message will be generated. This could contain either the “Hello World!” or an error message informing us about the failure to find the “Hello World!” message in database table.

    1. Go to \application\views\1_hello_world\ and create a file called “resultDisplay.php”.
    2. Add the following code to it
      <?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
            echo pageTitle;
            foreach ($modelData as $row) { 
                  echo $row--->message;
      <form action="&lt;?php echo base_url();?&gt;1_hello_world/helloworld/" method="post">
      	<input type="submit" value="<?php echo $buttonText; ?>" />
      			<td><?php echo $button_info; ?></td>


Creating the Controller

Now comes the really interesting component of CodeIgniter. The Controller! The controller will allow us to perform the following functions of the Hello World! tutorial application.

    1. Load the database to be used by the Model.
    2. Allow switching between two views with a button.
    3. Send data from controller and model to the view.
    4. Loading views.
    5. Calling model functions and passing its result into the view.

Now, lets first understand how I used the controller in this tutorial.

Understanding the Controller

In my controller. I have two functions which are,

    1. index() function which by default loads a request view.
    2. requestModel() function which is called by clicking a button in the “request_a_helloworld_message.php”  view.



In this function, I am simply loading a view and passing data to it. The data is passed as an array like this,

$data['pageTitle'] = "Codeonion Tutorials!";
$data['heading'] = "Welcome to Hello World! Request page!";
$data['button_info'] = "Press the button to see the message from model.";
$data['buttonText'] = "Submit a Request to model";

The reason I have done it is to show you how it is possible to control the data you wish to show in view from the controller, instead of actually typing it into the view as simple HTML.

When loading views, it is possible to pass data to it. You can even load entire views into variables and pass them into the view.

$this->load->view('1_hello_world/request_a_helloworld_message', $data);



In this function, I am calling a model function and basically passing its result into the view.

I am calling a model and giving it a name of “helloworldmodel” like this,

$this->load->model('1_hello_world/Helloworld_model', 'helloworldmodel');

Afterwards, I have called a model function called “return_helloworld_message()” and stored its output in “$data[‘modelData’]” like this,

$data['modelData'] = $this->helloworldmodel->return_helloworld_message();

Finally, as before, I have loaded a view to show results and passed data to it like this.

$this->load->view('1_hello_world/resultDisplay', $data);


5. Creating the controller

Now, we will finally create a controller and put the code in it.

  1. Go to \application\controllers\1_hello_world\ and create a Helloworld.php” and make sure that the file name starts with a capital letter
  2. Copy the following code into the Helloworld.php controller.
    defined('BASEPATH') OR exit('No direct script access allowed');
    class Helloworld extends CI_Controller {
    	public function __construct()
                // Helpers and libraries called in constructor will be available
                // in every function of this Helloworld controller class
    	public function index(){
    		// General strings stored in $data array
    		// These are to be displayed in the "request_a_helloworld_message" view
    		$data['pageTitle'] = "Codeonion Tutorials!";
    		$data['heading'] = "Welcome to Hello World! Request page!";
    		$data['button_info'] = "Press the button to see the message from model.";
    		$data['buttonText'] = "Submit a Request to model";
    		// And we pass the data into the view.
    		$this->load->view('1_hello_world/request_a_helloworld_message', $data);
    	public function requestModel(){
    		// General Variables just like in index() function of this controller
    		$data['pageTitle'] = "Codeonion Tutorials!";
    		$data['heading'] = "This is the result!";
    		$data['button_info'] = "Press the button to see the Hello World! message.";
    		$data['buttonText'] = "Back";
    		// We load the model
    		$this->load->model('1_hello_world/Helloworld_model', 'helloworldmodel');
    		// We store the result of modal function in $data array
    		$data['modelData'] = $this->helloworldmodel->return_helloworld_message();
    		// We pass $data array into the "resultDisplay" view
    		$this->load->view('1_hello_world/resultDisplay', $data);

    Now, you are ready to test the application.


Testing the Hello World! application

  1. Go to your browser (chrome in my case) and go to the following address (or the correct address according to your own setup)
  2. You will see the following on the browser
  3. Press the “Submit a Request to model” button and you will go to the following link
  4. At this point, you will be seeing this output,
  5. At this point, you can press back to start over.

You can now see that your application can retrieve data from database. This is it! the tutorial is complete!


You have learnt how to create a complete MVC application using CodeIgniter complete with the database. You now have the knowledge required to learn and develop more advanced web applications.

If you found my post helpful or have any questions, please leave a comment. [button link=”” type=”small” newwindow=”yes”] Facebook[/button] [button link=”” type=”small” newwindow=”yes”] Twitter[/button]

If you think that there is something missing, or you would like me to add something or even, if you wish to request a tutorial, just let me know and I will make a tutorial just for you.

Back to CodeIgniter Tutorials


CodeIgniter 3.0.1 Tutorial 3 – Getting Rid of “index.php” from URL (with download)

In the previous tutorial, you learnt about the purpose of each and every folder in the /application/folder of your web applicaiton.

This is a short tutorial in which you will learn how to get rid of the “index.php” from the URL of your web application using a .htaccess file.


In a default installation of CodeIgniter 3, the URL looks like this


The URL looks bad because of the “index.php”. It is possible to get rid of “index.php” using a simple file in your application’s root.


The “index.php” can be removed by simply putting a .htaccess  file in the root of your web application. Download the file from GitHub

[button link=”” type=”big” newwindow=”yes”] DOWNLOAD from Github[/button]

The .htaccess file should contain the following text. The link I have provided from my github repository is ready for you to use.

RewriteEngine On

RewriteCond $1 !^(index\.php|resources|robots\.txt)

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Now go to the root folder of your CodeIgniter web application and make sure that you put the .htaccess file there.

Now, you can safely change your URLs from

<form method=”post” action=”<?php echo base_url();?>index.php/1_hello_world/helloworld/”>


<form method=”post” action=”<?php echo base_url();?>1_hello_world/helloworld/”>

Note that it is still possible to keep using the “index.php” in your URLs and it will show up in URL if you do.

That’s it! You have successfully removed the “need” to have “index.php” in your URLs.


If you found my post helpful or have any questions, please leave a comment.

Back to CodeIgniter Tutorials


Tutorial 2 – CodeIgniter 3.0.1 Understanding application folder structure

Back to CodeIgniter Tutorials

In the previous tutorial, you learn how CodeIgniter is downloaded, installed, and viewed the welcome screen to make sure that it worked.

In this tutorial. you understand how the the purpose and working of \application folder in your CodeIgniter project. This tutorial is meant to be simple to understand so that new users of CodeIgniter get a general idea of how to organize the project in CodeIgniter.

You can skip this tutorial if you already understand the structure of \application\ folder’s contents.

First of all, go to the CodeIgniter folder and open the application folder as shown below.


Inside the \application\ folder, you will see the following directory structure.



Now I will try to make it simple for you to understand the purpose of these folders. Chose the folder name you are interested in learning about from this list below. Enjoy!


Generally, cache stores data that is to be used in future. So, lets say if your application uses data that is used a 100 times in a minute, it would be preferable to “cache your data” so that time and processing power is saved by reducing the “loading” process.

In CodeIgniter, you can perform Caching too. Once your page is loaded, subsequent loads will trigger your application to load from the cache. This will improve your web application’s performance.

In order to perform caching, all you need to do add the following code (replace n with value) in the controller on which you wish to perform caching.


Where, n is the number of minutes that you wish your page/controller to be cached. So if is set 100, the controller will remain cached for 100 minutes. Afterwards, the page will be cached again.

In order to stop caching, simply remove the above code and caching will stop and pages will be loaded every time.


The config folder contains configuration files that allow you to configure your CodeIgniter application. For example, the “database.php” configuration file allows you to setup one or more databases to be used in your application. The “autoload.php” config file will load up libraries, helpers or even your custom defined config files so you don’t have to call them again and again in your project. This feature should be used on a need-basis.

Speaking of custom config files, it is also possible to define your own config files in this folder and call them up in your controller. This will allow you to make your web application more flexible. Many 3rd party tools would require you to put their config files in this folder.

Please note that you might put critical information in this folder so it is important to have security as your top priority when hosting your projects.


The flow of the web application is controlled by the “controller”. If the user presses a button, the controller handles its server side functionalities. If database request is made, it is moderated by the controller. If a web page is to be loaded, (i.e. a view) the controller does it. Roughly, we can say that controller is the brains of the CodeIgniter web application. If the controller does not work, nothing else associalted with it will!

The controller can pass parameters to the view, such as a username of a logged in user is retrieved from the database table of users. First the controller will use a model to retrieve username on the basis of logged in user’s authentication and identification. Afterwards, the controller will pass that username parameter to the view and view will be able to use it to show it on the browser.

As of CodeIgniter 3.0, the name of the Controller class file must start with an uppercase letter. So for instance, I would name my class as Calculator.php. The name “calculator.php” is incorrect. My next tutorials will cover Controllers.


CodeIgniter has core classes in \system\ folder (outside the application folder). These core classes make up the CodeIgniter framework of PHP. In most cases, you won’t need to make any changes to the core classes of CodeIgniter.

But, if you actually need to modify the core classes of CodeIgniter, all you need to do is to create a class in “\application\core\” folder that has the same name as the core class file name in “\system\” folder. CodeIgniter will use your defined class instead of the native CodeIgniter class.

Again, it is not something that one does every day. But it is good to know that a wonderful feature such as this one does exist.


Need help in doing a task? Use a Helper!

A helper either a native one, or a custom defined helps you in tasks. Take a few examples:

  • FORM HELPER: Used to create a form that works perfectly with CodeIgniter and hosts a lot of added features.Call it using the following line in Controller.
  • DATE HELPER: This won’t get you on a date, but you will definitely get date features in your web applications. Date, time, time zones, it has so much to offer.

I will cover more on the helpers more in the coming tutorials.


While “\core\” folder hosts class files that completely replace native CodeIgniter files, the Hooks feature allows you to hook into the flow of CodeIgniter application and meddle with it. Here are some simpler features for you to know about what hooks can do:

  • You can use hooks to performs actions before even system files are loaded.
  • You can do something before the first controller is called (check routes.php in \application\config\ folder).
  • You can perform an action between calling a controller’s constructor and calling its methods. Twisted, eh?
  • Do something after a controller is completed its functions.

There are more features for you to learn and utilize if you are interested, check out the official documentation Here.


This folder allows you to create and organize text in a specific language. You can create files and folders for your desired language into this folder and use them in your project. All you need to do use the language helper and libraries accordingly.


The \application\library\ folder hosts your custom libraries. Lets say you are tired of implementing the “date” features over and over in your projects. Reinventing the wheel in other words. All you need to do is simply create a library and simply carry it throughout the projects.

The libraries can call models too. Roughly, libraries are similar to controllers.


Your application can be configured to store status messages such as errors, exception handling messages or your custom log messages. These get stored in this folder. This is a very helpful feature. If you have an error that is hard to understand, take a look at the logs here in this folder. The logs need to be turned on by modifying the “\index.php” file. Note that there are different levels of logging available for you to set.


Simply put, “Models” allow you to perform database queries. The controller requests the model to perform database queries, upon completion, the model (if programmed) will send the response data back to the controller and the controller may use it however we desire it.

Third Party

Many times, if you download some third party plugin for usage with CodeIgniter, its core files will be put in this folder. It is well known that CodeIgniter is flexible enough for almost every 3rd party plugin to be set up in its environment without a hassle.


All your web design elements come here. You can keep the assets out of here, but the html code goes in here as “.php” files. The controller can call views. For example, a chat bubble can be made using a view and called on demand by the controller to be shown/overlaid in a different view. Moreover, It is possible to create a control panel separately and its sub pages separately in different views. This helps us in minimizing code drastically, thanks to CodeIgniter.

In the next tutorials, I will get started with teaching you how to program in CodeIgniter 3. Let me know in comments if you need a better explanation of a folder. Don’t forget to share :D. Thanks for reading. I hope it helped.

Back to CodeIgniter Tutorials

Codeigniter Programming

CodeIgniter 3 Tutorial 1: Download, Installation, Introduction and Welcome!

Back to CodeIgniter Tutorials

This is the first part of CodeIgniter 3 tutorials. CodeIgniter 3.0 introduced a lot of upgrades over 2.x versions of CodeIgniter. Users who wish to upgrade to CodeIgniter 3 may have to perform changes as mentioned here in the official CodeIgniter 3.0 documentation.

Here are my Tutorials for CodeIgniter:

CodeIgniter 3 Tutorials
CodeIgniter 2.2 Tutorials

This tutorial series is for new users of CodeIgniter users who wish to start with CodeIgniter 3.x. We will start with downloading Codeigniter.

CodeIgniter can be obtained from any of the two places.

  1. Official Website Here
  2. Official Github Repository Here

Lets download from the official website

Now, install XAMPP as I have explained here and also here for my CodeIgniter 2.2 Tutorials Series.

Now, once you have installed XAMPP and downloaded CodeIgniter 3, we can now start installing CodeIgniter. Follow the following steps.

  1. Assuming you installed XAMPP in D:\, go to D:\xampp\htdocs
  2. For this example, create a subfolder “tutorial” so we now have,
  3. Now, extract the contents of downloaded CodeIgniter files here.
  4. You will now have the following base structure of CodeIgniter.
  5. CodeIgniter is INSTALLED!
  6. Here is the simple explanation of all of these files and folders (You can skip if you are already familiar otehrwise, I highly recommend reading the brief descriptions below):
    1. \application\
      (108Kb, 45 Files)
      This folder contains the web application that you will develop using CodeIgniter.
    2. \system\
      (2.05MB, 202 Files)
      This folder contains the actual CodeIgniter framework. In other words, the cool stuff! It is not necessary, but it would be nice to open this folder by yourself and see how everything works behind the scenes. Also, this is the folder that is affected with each version. So yuou might be required to make changes to this folder if you ever wish to upgrade.
    3. \user_guide\
      (6.41MB, 191 Files)
      This folder contains the latest CodeIgniter documentation at the time of release of whichever version that you downloaded. It is SAFE TO DELETE this folder at the cost of losing offline official guide. I personally delete these from my projects to save size.
    4. \.gitignore
      This file tells Github to ignore the specified files and folders to be ignored when committing to a repository.
    5. \composer.json
      This file is used with composer to keep the packages up to date.
    6. \
      Simply put, this is a readme file for “contributing to the CodeIgniter project” topic.
    7. \index.php
      This file contains variables that control how your application behaves. For example,

      1. Error Reporting levels
      2. \system\ folder name (which it allows to be changed)
      3. Want to know how to change \application\ folder name? This file does it!
      4. Want to move the \application\view\ folder out of the \application\ folder? index.php does it!
      5. Override application routing.
      6. Meddle with the config parameters.


And some more parameters which should not be touched and if you did, then God help you.


    • \license.txt
      Legal stuff about CodeIgniter Project
    • \readme.rst
      Official Readme of the CodeIgniter project!
    • You will see the following default welcome screen:

Back to CodeIgniter Tutorials

General Programming Review

Review and Tutorial: Mobirise! A FREE WYSIWYG Responsive website editor is out!

Designing a website requires an artist to be able to program in multiple languages. That person has to learn multiple languages and frameworks to be able to design like a boss!

Such nonsense! This is 2015 and all you need is the Mobirise software on your desktop and you will be ready to go! Now I should get back to what I do best! I mean writing a tutorial on how to make a webpage using Mobirise.

What this tool does is that it SAVES YOUR TIME by doing the hard work by itself. All you need to do is that after you are done, simply edit the HTML file as per your liking to fine tune it according to your need.

Follow this tutorial and you will get the following benefits:

  1. An HTML file.
  2. Properly written code.
  3. CSS Code.
  4. Plugins required in a seperate folder.
  5. Assets you used in their own respective folder.
  7. A sweet web page.
  8. You will share 🙂

This is UPDATED for version 2.6 Now lets get started!

Download Mobirise From Here


Now, install it and run.

You will see this.


Click the + button and see the sidebar like below.


As teh Catz has pointed out, when  you click the + button, a sidebar will EXPAND. Now, we add a MENU.

Mobirise - A WYSIWYG web designign tool

And the added menu will look like this.


Now, lets add some more components, a header, and a footer.


Now do the following.

  1. In MENU. click icon and then select ANY image. I will be updated in the interface.
  2. In HEADER, click image and change it the same way.
  3. In MENU, click any text, and its options will become visible, like font, size, color and HYPERLINK. you can delete and rename the text as you like.
  4. In Header, click text or BUTTONS and they will be editable.
  5. In footer, everything is editable as stated above.
  6. More components can be added to have a parallax effect. Let me know if I should tell you how to make a parallax effect in Mobirise 1.8.1.

Now, after editing, I got this in like 3 minutes.


Now, we publish and look at the files for the designed page. Simply click the “Publish” button and save to a folder in your folder/




  • The backup files of your Mobirise project are saved in
  • Do not completely rely on Mobirise to do the job for you. I highly recommend making the structure of the website using Mobirise and then fine-tuning the features using your favourite code editor or an IDE.
  • Mobirise seems to have issues with parallax videos. I suggest you watch out and test not only on your local machine, but also on a real server and multiple browsers. Stupid IE5! x(
  • Mobirise can’t do everything, but you can :).

That’s it! You have just created a web page without writing a single line of code. My suggestion is to use this tool to make a template, then grow upon the template. For example, once you have made this, you can use the HTML code and assets in a CodeIgniter project. CodeIgniter is a PHP framework that makes PHP programming very quick and easy.

CodeIgniter 3 Tutorials are HERE

If you liked this tutorial and enjoyed it, then do like and share this page on Facebook, twitter and Reddit. Let me know if there are any problems. If you would like me to write a tutorial for you, then let me know about that. Take care and happy coding!