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:

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:

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

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:

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:

to:

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.

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:

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

to

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.