RSS

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

Mon, Jul 30, 2007

CodeIgniter, SEO, Web Design, Web2.0

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.

CodeIgniter Project View in Mac OS X

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.

htaccess file in textmate

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.

View in CodeIgniter

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.

This post was written by:

Daniel - who has written 36 posts on the web developer’s journal.


Contact the author

0 Comments For This Post

3 Trackbacks For This Post

  1. the web developer’s journal » CodeIgniter Routes Trick - Removing Controller Names from the URI to Keep URLs Short. Says:

    [...] Another great thing is when you create a website with CI, you automatically use friendly URLs (if you use an .htaccess file). If you have a bunch of unrelated pages however, you might wonder how you can keep those URLs as [...]

  2. the web developer’s journal » How CodeIgniter Keeps You Organized Says:

    [...] up. You can start building CI apps in about 10 minutes after watching the CI tutorials and reading my tutorial on getting set up. If you are new to Object Oriented Programming, you can read my introduction to [...]

  3. the web developer’s journal » Blog Archive » How to Design a Website from Scratch | BizWidgets / PHP Web Design Says:

    [...] In order to create dynamic, interactive pages you need to learn a programming language such as PHP. PHP is used in conjunction with a MySQL database if you need one to provide more functionality such as an online store, blog, or just for capturing visitor information. I use a PHP framework called CodeIgniter that takes care of the basics when it comes to building websites such as session handling, database connetion and data retrieval, and also provides you more organization when building websites. If you want to learn more about CodeIgniter, read my article about building your first PHP web2.0 app. [...]

Leave a Reply