Moray Web Solutions

Having discovered the joys of CodeIgniter only recently myself, I have spent many happy hours learning more about the framework and how it is constructed. In this article I take you through some simple ways I have found of customising a CI install to better suit my preferred structure and development style. Some of these I these techniques I see many people asking for in various forums etc, so hopefully you will find them useful!

If you are brand new to CodeIgniter I would suggest that you first read Ben Haines Everything You Need to Get Started With CodeIgniter article before reading on. The following tips are more about customising the structure and configuration of CI, rather than configuring it for first use.

Tip 1 – Removing ‘index.php’ from the URL

I know this one has been covered in many tutorials already but I thought I would include it anyway so as to keep things together in one place. As you will be aware if you have already downloaded and installed CodeIgniter on your server or localhost, by default CI includes ‘index.php’ in it’s URLs. This is one of the first things I change when setting CI up for a new project, and it’s really simple to do!

There are two stages to this, the first being an edit in the config.php file in the system/applications/config folder. You simply need to change the index_page array (line 26 on a standard install) to a blank string
$config['index_page'] = "";
The second stage is sorting a .htaccess file for the root folder to deal with the required rewrites. Don’t worry if you’re not a mod_rewrite guru, you don’t have to be! I have included an example of a basic htaccess file that should get you up and running, this was taken from the CodeIgniter User Guide.
RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
And that’s it; you should now be rid of the annoying ‘index.php’!

Tip 2 – Your ‘application’ folder

Many CI developers prefer to move the applications folder outside of the system folder, and I am no exception. I feel it makes the separation of the application code and the core code more obvious, whilst offering opportunities to further tighten security. There is nothing special you need do for this other than physically move the folder.

At this point in the process my project root folder contains the following…

• /application
• /system
• index.php

Now I would like to change the name of the application folder to something more meaningful. I do this partly as I am usually working on a number of projects so it helps me work out where I am! The other reason this may be helpful is if you plan to run multiple applications from one CodeIgniter code base, this is something I may cover in a later tutorial.

First, rename the application folder to whatever you like. Then we need to make a change to the index.php in the root of our site. When you open this file in your editor you are looking for the $application_folder definition on or near line 43. Enter the new name for the application folder.
$application_folder = "NewApplicationFolderName";
It’s worth a quick check at this point that everything is still working okay, so have a quick check in your browser before carrying on.

Tip 3 – Moving the ‘system’ folder

This is where security of the application can be tightened, but it does require suitable access to your server (not a problem on a localhost obviously). What we are going to do is move the system folder up a level so that it’s outside the public area of our site, and out of harm’s way.

I use Wamp as my localhost for development, so the new structure now looks like this: (assuming we followed Tip 2 above!)

• www/system/
• www/projectfolder/newappname/
• www/projectfolder/index.php

We now need to change the $system_folder definition in the index.php file in the site root to reflect this change. You should find it around line 26.
$system_folder = "../system";
Again it’s worth checking that everything is still working okay at this point, before carrying on.

Tip 4 – Using an alternative ‘views’ folder

This was one that I spent quite a while looking for, but was surprised just how easy it was in the end. I like to keep a clean separation of code and interface if at all possible, and having the views folder buried deep inside the application folder doesn’t really achieve that. Wouldn’t it be much nicer if we could drop a themes or templates directory in the root and use that for our view files? Well that’s exactly what we will do!

Create your folder as you normally would, in this case we’ll call it templates and place it in the root of our site, but you can call it whatever you want.

In order for CI to recognise this as the views folder we need to extend one of the core libraries. This is where CI is great as we can use the simple extension system that they have created without hacking the core code. First you need to create a new library inside your application folder (or whatever you called it earlier!), this needs to be named carefully in order for CI to acknowledge it! It MUST be called MY_Loader.php, and contain the following:

Class MY_Loader extends CI_Loader {

	function MY_Loader() {

		parent::CI_Loader();
		$this->_ci_view_path = 'templates/';

	}

}

WAIT!! Don’t hit refresh yet! Remember to move any existing view files into your new folder before you check your app, otherwise you’ll get errors.

Tip 5 – Using an images/assets folder

And finally if you have elements that you would like to use throughout the site such as javascript libraries or stylesheets, wouldn’t it be nice to pop them in a central directory that’s separate from the view files? This is another one that there are many questions about that is in fact, really simple! The following is the way that I achieve this, that’s not to say it’s the only way.

I usually work with an assets folder in the root, with subdirectories for images, javascript, css etc. and this is how I link to them…

// To link to a stylesheet in your view document header
// (Requires the html helper to be loaded)
echo link_tag('assets/css/styles.css')."\n";

// Linking to a javascript file in your view file header
<script type="text/javascript" src="<?=base_url().'assets/js/jquery.js';?>"></script>

// Setting the source of an images file
<img src="<?=base_url().'assets/images/filename.png';?>" alt="alt text" />

Get Developing!

So that’s it your off and running, so get making that nice new app that we are all waiting for! This is by no means a definitive list, or indeed the only way of achieving some of these outcomes it’s just the way that I have found easiest (so far).