The CodeIgniter directory structure is one topic I often see a lot of people new to CodeIgniter asking about. And for good reason, it can be kind of confusing knowing where things go within the pre-defined structure. This post should serve as a very basic idea of how things work within the CodeIgniter directory structure.

The System Folder


The system folder holds the brains of CodeIgniter. When you download CodeIgniter your downloading the current version of the codebase. The current version as of writing this is 1.7.0. A default installation of CI looks like this:

  • system
    • application <- very important directory
      • config
      • controllers
      • errors
      • helpers
      • hooks
      • language
      • libraries
      • models
      • views
    • cache
    • codeigniter
    • database
    • fonts
    • helpers
    • language
    • libraries
    • logs
    • plugins
    • scaffolding
  • user_guide
  • index.php
  • license.txt <- must accompany all installations of CI


For the purposes of article, we are going to focus on how to alter the directory structure in order to accomadate your images, javascript, css files, etc...

The important thing to realize about CodeIgniter is that everything is relative to the index.php file, which as you can see above is located directly in the document root. This is where you should put folders for all of media (images, css, js, etc...). Lets alter the above structure and add the folders below:

  • images
  • css
  • javascript


You will put all of your images, css files, javascript files in these direcories. Your new directory structure should look like this:

  • system
    • application <- very important directory
      • config
      • controllers
      • errors
      • helpers
      • hooks
      • language
      • libraries
      • models
      • views
    • cache
    • codeigniter
    • database
    • fonts
    • helpers
    • language
    • libraries
    • logs
    • plugins
    • scaffolding
  • user_guide
  • index.php
  • license.txt <- must accompany all installations of CI
  • images
  • css
  • javascript


Now that we have that out of the way, we can begin to easily reference our images and other files we wish to include in our web pages. This will help keep site organized and easily portable should you have to move your site to another server. Here is how you use built in CodeIgniter functions to load your content. The first example is going to be loading an image. We are going to do this using the base_url() function. This function returns the full URL that you entered on the config.php file found in the system/application/config folder.

Loading an image in a CodeIgniter view


<img src='<?=base_url()?>images/your_image.jpg' alt='Your Alt' />


Loading an CSS file in a CodeIgniter view


<link rel='stylesheet' href='<?=base_url()?>css/your_style_sheet.css' type='text/css' />


Loading an Javascript file in a CodeIgniter view


<script type='text/javascript' src='<?=base_url()?>javascript/scripts.js'></script>


That's the long and short of how to organize the CodeIgniter directory structure to easily use images, css, and javascript in your web pages. Note that you can make any kind of folder in the root directory and reference it in the same way (to easily organize your mp3, video files, etc...) Also it's important to note that the above syntax assumes that you have added the ending forward slash (/) to your URL in your config file, like so:

$config['base_url']	= "http://www.your-domain.com/";