How to setup CodeIgniter

Are you new to codeigniter? if you are, you're on the right place. This tutorial is intended for beginners who want to learn codeigniter framework from scratch.

Brief introduction

Codeigniter Framework is developed by EllisLab and is now maintained by British Columbia Institute of Technology. It is robust, light-weight Framework which lets you develop web applications in short time. It is very small footprint, built for developers who need a simple but elegant toolkit to create full-featured web applications. The framework loosely follow Mode-View-Controller (MVC) pattern. 

The Model-View-Controller pattern separates application logic from user interface and database communication. Codeigniter, however, does not force you to follow such architectural pattern. Although, it would be great to follow the MVC to organize your code.

• Model - Represents your data structure. It is a typically a class that contains functions which help you retrieve, insert, and update data in your database.
• View - It is the information presented to the end user. Basically, it is a webpage, but in CodeIgniter, it could be a page fragment which is appended to another page fragment to form a web page.
• Controller - Serves as intermediary between the view and the model. It controls what is sent to the view and to the model. It is also where libraries and helpers are loaded.

Bootstrap css library. Every designer should at least have a good grasp on how to use this library, most likely you would be working on projects which implements bootstrap. This doesn't just boost development time but also takes out the burden of having to create your own way of displaying stuff. It's really helpful to people who prefers to focus on development rather than on the UI. We won't be using this library on this tutorial but its crucial that you should know about it. There are tons of things to explore in this library so be sure to check that out.

Bootstrap Alpha 5 has just been released after Alpha 4 with some major feature improvements and boat load of bug fixes. Bootstrap handles most of the things you may want your user interface to look like. There are tons of free bootstrap template out there which you could use in case your wondering how to start using it.

Integrating Bootstrap with your Codeigniter project saves the hassle of having to write thousand lines of css stylesheet and lets you focus on the development. You could then write your own style sheet to suit your need. This is one of the advantages of MVC pattern since your application logic is separated with the presentation/UI. It allows you to modify the look and feel of the app without affecting your application logic.

Codeigniter Step By Step Tutorial for Beginners

You probably heard a couple times about getting your hands dirty. This is true in many cases wherein you have no idea on what your're doing. So the first and foremost is setting up the working environment. 

• Download & install XAMPP server
• Download codeigniter latest version
  
• Download & install HeidiSQL

Install xampp server then extract codeigniter zip. Navigate to “xampp/htdocs” folder located on C:\ and paste codeigniter folder. This is where all your project is stored. You should rename the codeigniter folder to "ci_proj".

Codeigniter Folder Structure

Codeigniter directory structure consists of three folders namely system, application and user_guide.

1. System contains the core application files and should not be edited. You could, however, make your own system classes on "application/core/some_class.php" then extend it on your controllers.
2. Application is where you would find yourself working most of the time. It contains bunch of sub-directories. We would be focusing on three sub-directories which are the Models, Views and Controllers.
3. User_guide contains CodeIgniter Documentation similar with what is online which is great when you prefer working offline or simply you don't have internet connection at home. Be sure to remove this folder when you move the application to production environment.

Configure and Setup CodeIgniter Environment

Before we could start building our project we should make some modification on CodeIgniter config file.

1. Open up application/config/config.php file.
2. We need to set the "base_url" of our application.

$root = "http" . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "s" : "") . "://" . $_SERVER['HTTP_HOST'] . str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);
$config['base_url'] = $root;

We can now then call base_url and get the application base url path.Base url is basically the same with site_url() without the index.php.

CodeIgniter URL Structure

Step 1. Enable Mod Rewrite Option on XAMPP Server

We need to enable mod_rewrite option on xampp before we create ".htaccess" file. To do that, open your XAMPP and right click on config button shown below then click on "appache(httpd.conf)".

Look for "LoadModule rewrite_module modules/mod_rewrite.so" and remove "#" as shown below.

Step 2. Create '.htaccess' File

By default CodeIgniter adds index.php on the URL which you might not want so we're getting rid of it. The default structure looks like this,

<base_url>/index.php/<controller_name>/<controller_function_name>

What we want is a clean URL without index.php hanging around. To generate clean URLs, we have to create “.htaccess”  file. 

Inside ".htaccess" paste this code and save it

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

If your planning on pushing your app on a sub-directory instead of root domain like http://personal.com/blog/ instead of http://personal.com/ then paste the following code instead,

<IfModule mod_rewrite.c>
    Options +FollowSymLinks
    RewriteEngine on
    RewriteBase /SubDomain
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?$1 [L]
</IfModule>

We're not done yet,

Step 3. Modify CodeIgniter Config Settings

Navigate back to "config.php" file under application folder and search for the line,

$config['index_page'] = 'index.php';

Then remove index.php to make it look like this,

$config['index_page'] = '';

You have to restart your XAMPP then check your project url on your browser by typing in "localhost/ci_proj". If you see the image below, Congratulation! go get a coffee. If not, keep trying.

If it's not working, try to change your uri_protocol on your config.php file

Look for the following code and change it to

$config['uri_protocol'] = 'REQUEST_URI';

Then restart your XAMPP and try to access your project URL again.