Build your First Web 2.0 App with PHP, Ajax and CodeIgniter

CodeIgniter is an awesome tool if you want to learn PHP or start to use object oriented programming (OOP) with your new website. CodeIgniter is flexible with a small footprint and offers tons of features already built in, such as session management, active record use with mysql databases. The best part is it lets you use Model-View-Controller (MVC) programming. This way, your styling (view) is separate from your content (generated by controller) and lets you manipulate your raw data with a model.

There are two awesome video tutorials on CodeIgniter to show you how powerful and easy CodeIgniter can be when starting a website; however the first time I tried setting up an application I had trouble linking to images, css, and javascripts and setting up an htaccess file for friendly URLs. I have included a set of directions to help with these issues in your first CodeIgniter app.

I am working on a mac so if you have one also the tutorial may be a bit easier to follow. This tutorial also assumes you have a running apache web server with PHP and MySQL installed.

You will need a few files to start with your CodeIgniter app. You can download them from their websites below or download the zip file full I have compiled with everything you need (including CodeIgniter 1.5.4 and full compiled mootools). If you download my zip file with all the necessary components, just drag the files to a new directory in your server folder and you can skip right to developing a controller and view.

• If you don’t have CodeIgniter already, download it at codeigniter.com.
• If you want to use ajax, download the javascript file at mootools.net. There are also some really cool demos of mootools in action. The best part is mootools is object oriented just like CodeIgniter is! It really is a simpler way to program.
• If you want to use friendly URLs, such as http://your-host-name/blog or http://your-host-name/contact, you will need an htaccess file, which helps in redirecting browser queries to the right place. Otherwise, your URLs will have index.php stuck in the middle of them (http://your-host-name/index.php/contact).

Now that you have CodeIgniter, drag the index.php file and system folder to a new project folder in your hosting root. I named my project folder c3. In this folder, I have created a few folders: images, _js, css, and uploads. Remember the names of these folders because you will need them for your .htaccess file.

In order to use friendly URLs with CodeIgniter, you need to set up an .htaccess file in your project folder. On my Mac and the web server I use, the file is invisible, but if you open your project folder with textmate you will be able to create the file and access it later. Inside this is what I have successfully used on my mac for rerouting to work.

Options +FollowSymLinks
RewriteEngine on
#RewriteCond $1 !^(index\.php|images|css|_js|uploads|robots\.txt)
#RewriteRule ^(.*)$ /~danielerrante/bizwidgets/index.php/$1 [L]

Creating an .htaccess file will solve a lot of headaches later down the road. This enables your website to get photos, javascripts and css files from the appropriate folders while still re-routing page calls.

Next, you want to create a controller. This will handle any processing you may require before sending a view to your visitor. Here, I have a controller called home.php

You need to create a class that extends Controller like this:

class Home extends Controller {

function Home() {
parent::Controller();
}

function index() {
$this->load->view('home_view', $data);
}

}

Now, you have a working controller. Next we will make a view for the home controller. Since we want to load the view ‘home_view’, we are going to create home_view.php in the views folder.

As you can see in the top of the HTML code, I like to create a header (and footer further down) for each one of my pages. Then I call the header and footer at the top and bottom of each page. This way, If I need to change something in the header, such as the page title or meta tags, I can do it on the header file once.

If you visit http://your-host-name/home your page should be working.

And, that’s it. Have fun with CodeIgniter. The forums are a great resource when you get stuck. Also check out the forum on mootools. The user guide included with CodeIgniter will also help you understand MVC programming and give you more instructions on how to use CI to its full advantage.

Thanks for reading! Tell me what you think!

Come back soon for Part 2 on MooTools.