Posted 10.07.2010

Posted 10.07.2010

Building a Basic Blog in CodeIgniter (Part 1)

A while back, I wrote a couple of posts about CodeIgniter (CodeIgniter and Understanding MVC and Getting Started with CodeIgniter). Recently, they’ve gotten a few hits. So, I’d thought I’d expand on that topic a little: we’re going to build a blogging platform.

Note

In real life, I wouldn’t recommend doing this. There are plenty of fantastic blogging platforms already out there. Instead of reinventing the wheel, I’d look into Expression Engine, WordPress, Tumblr, SquareSpace, or Blogger. However, as far as building a basic web application, I figured this would be the perfect example. We already know how they should function, so the up front, discovery process *should be* minimal. (famous last words, right?)


Planning things out

ACTUALLY PLANNING

I always err on the side of planning things out. There are different opinions about how and how much.

I’m a huge fan of 37signals. I know. I talk about them all the time. They hate planning.

That messy planning stage that delays things and prevents you from getting real is, in large part, a waste of time. So skip it. If you really want to know how much time/resources a project will take, start doing it.

But, I have a hunch that’s a slight exaggeration on their part. There are still sketches.. Plus, back in November, Ryan wrote a blog post called A Shorthand for designing UI flows. Besides, I’m going to assume that if you’re trying to assemble a team, particularly a team that’s not centrally located, there’s got to be some sort of planning to know what you need to work on. —I’m going to assume what they mean is that for some teams, planning becomes an excuse not to get started. At that point, just do it!


THE SITE MAP + WIREFRAMES

So, when I first started planning out this project, I sketched out what I wanted to include.


At the top is the site map. There are 2. One for what the user will see and one for the back end. Their corresponding wireframes (if you can call them that) are at the bottom. It’s a minimalist layout. The one on the left (what the user sees) will have a white background (day) and the one on the right (what the administrator sees), a black background (night).

One of the things that I like to do in my sketches is make notes to myself. For example, I thought about adding authors and categories. Go big or go home, right? But, adding those 2 small features, suddenly doubles my pages on the admin side—(1) add and (2) edit authors, (3) add and (4) edit categories. As you can see, next to categories, I wrote KISS. Keep it simple stupid. The benefit here, is that when I come back to my notes, instead of going through the same thought process, I’ve indicated why I ended up making that decision. Now, I won’t try and think through everything again. Do I sound like I speak from experience? because I do!

Here are the final site maps. These, designed site maps are what I would give the client in the creative brief.

User Side Site Map


Admin Side Site Map


The Design

Here’s the design I’m using for the user’s side:

Code Igniter Tutorial - User's Side

and the admin side:

Code Igniter Tutorial - Admin Side


DETERMINING FUNCTIONALITY

Earlier, I referenced 37Signals post, Designing for UI Flows. We’re going to use the same approach, here, for the figuring out the admin side.

I LOVE this method. It quickly describes everything that I need to program and helps me think through everything on the front end. I’ll even highlight / check off items as I finish them, using this as a to do list.


Production Files for the Site

This site wasn’t very complicated, so I actually just went ahead and built it in code before designing it in Photoshop, which is unusual for me.

I’m not going to go into the process of building a site, here. However, if you don’t know how to do something like this, and you’re interested, here are a few places online that can help you get started:


TYPOGRAPHY

I set up TypeKit for this site. I L-O-V-E it. If you’re interested in looking into it, register on their site and you can use their services for free on one site. I went ahead and have a paid account and use it on (almost all) my client sites. —It definitely multiplies my type library.

If you decide to use Typekit, I’m using Kulturista Web. All you would need to do is

  1. Add a kit
  2. Set the domains. (I’ll usually include localhost, if I’m building the site on my computer)
  3. Search for Kulturista Web
    Typekit Screenshot
  4. Click on the “+ Add to Kit” button (top right)
  5. Click on the “Launch Kit Editor” button (top right)
    Typekit Kit Editor Screenshot
  6. In the window opens up, click on the “Embed Code” link (top right)
  7. Copy and paste the javascript into the html header of the site
  8. Click on the “Publish” button (bottom right)

Now that everything’s accounted for, we can dig into Code Igniter…


  • Ipeleng

    I’ve gone through a lot of tutorials on CodeIgniter and watched a lot of videos. This single page is the missing link for me. I’m a bigger picture person, and while all these sites go into detail about the code, config files, routing, etc, this is the first I’ve come across that deals with the actual planning. Thank you so much for that.