Published by Mijingo

movie icon image

ExpressionEngine How-to Articles

Topics range from beginner to advanced, but are all born out of real world, professional, day-to-day use of ExpressionEngine. Need more information? Get training videos and ebooks on ExpressionEngine from Mijingo.

Building with CodeIgniter: Beginning your Tumblelog

Editors Note: I’d like to welcome back Kenny Meyers as a guest author on EE Insider. Kenny is a web developer at Seattle, WA based Blue Flavor. He loves ExpressionEngine & CodeIgniter for their “less is more” approach and the ability to generate good, clean standards-compliant markup. He will be writing a series of articles on building a simple web application with CodeIgniter.

In my previous article, we went over the basics of CodeIgniter. Now we’re going to actually build something. For this four-part series we’ll build a tumblelog using many of the features CodeIgniter has built-in as well as third-party libraries.

A tumblelog is more then just a blog, it’s your lifestream; your tweets, your bookmarks and your blog posts. To keep this series simple we’ll be building a basic Tumblelog that allows you to post blog posts, grab your delicious bookmarks and show your tweets.

To begin, we must first install CodeIgniter.

Requirements
  • PHP 5
  • CodeIgniter
  • Apache
  • MySQL 5

I also suggest you have

  • A MySQL Admin Tool. I love Querious http://www.araelium.com/querious/ but if you’re flyin’ on the cheap, Sequel Pro (http://www.sequelpro.com/) or the MySQL Admin Tool (especially for Windows) work well.
  • A great text editor. I use Textmate; e-Text Editor for Windows works well, but really it’s your preference.
  • MAMP or WampServer for easy local hosting.
Getting Started

The first thing we need to do is to make sure we have the CodeIgniter framework. To do this download the latest files from the CodeIgniter website. There’s a giant download button that should service you well. Then, simply copy these files to the root of your server. In a production environment, you would not want to leave the “system” folder in the site root, but instead move it below. For our purposes (and for brevity) we’ll skip over this and refer you to the CodeIgniter Forums for best practices.

If you’ve copied the files over and are looking at your server, you should see something like this:

               

Welcome Screen for CodeIgniter

The next step is to rename the application folder to the name of our application. For this project I’ve asked the clever gnomes to come up with a name and they have returned with “tumbleupon.” So go into your system folder that came with the the CodeIgniter framework and rename name application to tumbleupon. When we do this, we have to change the value of the $application_folder variable in the index.php located in the site root. On line 43 of index.php edit this line:

$application_folder "application"


To match your application folder name. In our case this line becomes:

$application_folder "tumbleupon"
Setting up the database

I’m going to use a GUI to create a database, and if you know the command line or MySQL and are comfortable creating your own database, please do so. I’m going to create a database called “ci_tumbleupon.” I’ll be using the root user for this example, but, please, in a production environment create a separate user with limited permissions. I refer you to this great article on MySQL practices.

Now there are a couple more configuration items to setup. Go to /system/tumbleupon/config/database.php and enter your hostname, database, username and password. For my example, I’m using a local install of MAMP, so it looks like:

$db['default']['hostname'"localhost";
$db['default']['username'"root";
$db['default']['password'"root";
$db['default']['database'"ci_tumbleupon"

If you would like to use a different database driver, it’s up to you, but MySQL is what we’re doing here.

Creating your homepage controller

CodeIgniter is controller-heavy, so it makes sense to start from the controller’s perspective and work from there. Fortunately for us, CodeIgniter comes with a homepage controller called welcome.php in your controllers directory under applications. We are going to rename the controller tumble_upon.php and this will control our homepage.

Then, we will change our code from:

<?php

class Welcome extends Controller {

    
function Welcome()
    
{
        parent
::Controller();    
    
}
    
    
function index()
    
{
        $this
->load->view('welcome_message');
    
}
}

/* End of file welcome.php */
/* Location: ./system/tumbleupon/controllers/welcome.php */ 

to:

<?php

class Tumble_upon extends Controller {

    
public function __construct()
    
{
        parent
::__construct();
    
}
    
    
public function index()
    
{
        $this
->load->view('home');
    
}
}

/* End of file tumble_upon.php */
/* Location: ./system/tumbleupon/controllers/tumble_upon.php */ 

What changed?

  • We changed the class name to reflect the filename. This is important, as well as capitalization. The underscore is not, you can use whichever naming method you prefer.
  • Functions now properly declare their access levels. “public” instead of just “function”. The reason for this is to follow good coding practices. Eventually, we will use multiple scopes (“private” and “protected” are the others) to perform functionality that only our class or objects need to access.
  • The End of file and Location at the bottom. This is important to remember and easy to forget. Once again, just for implementing good coding practices.
  • Changed function Welcome() and parent::Welcome() to __construct() and parent::__construct(). Constructor methods are a little advanced for our purposes, but there is abstraction with the PHP 5 __construct() that may come in handy when we modify this code later.
  • We changed the $this->load->view method parameter to home. This loads the view we’re going to make in the next step.
  •                                          

There you have it your first Controller, but it’s not going to do much without…

Your first view.

Create a file in the views directory called home.php and paste the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<
html>
<
head>
    <
meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <
title>Welcome to TumbleUpon</title>
    
</
head>
<
body id="home" onload="">
    <
h1>{hello:world}!</h1>
</
body>
</
html

Yes, it’s a “hello, world” reference, but hey, why break convention? We’ve now created our first view, which the Tumble_upon class will load, but if you go to your homepage you’ll see this:

CodeIgniter 404 page

Uh oh. You broke it. No, actually you’re not following CodeIgniter’s URL pattern. So, in order to correctly view your site you need to go to yoursiteurl.com/index.php/tumble_upon/ (See the URLs link above on how to remove index.php). It works!

Wait, but isn’t this supposed to be the homepage?

Yes, it is, and to do this we need to override CodeIgniter’s default URL handling. Fortunately, CodeIgniter makes it easy. All we have to do is go to /config/routes.php and change

$route['default_controller'"welcome"

to

$route['default_controller'"tumble_upon"

Load up your site’s homepage and you should see your hard work.

Coming up…

In the next article, we will build the blog functionality of our Tumblelog.

Posted on Jun 01, 2009

Filed Under: How-To, CodeIgniter, Web Development,

Kenny Meyers
About Kenny Meyers

Kenny Meyers is a web developer based out of San Francisco who currently works for the excellent Virb.com. Kenny has worked on the web in some capacity for 12 years and has helped organize, write and build some great ExpressionEngine sites including Mithun.com and the upcoming Omni Group website. When he's not crying alone, Kenny writes regularly, abusing adjectives and hyperbole, at Happy Magic Fun Time and runs his mouth on twitter @kennymeyers.