Posted 07.28.2010

Posted 07.28.2010

Getting Started with CodeIgniter


This post assumes that you have basic understanding of PHP as well as a server and MySQL database that you can work off. If not and you’re on a Mac, MAMP is a great place to get started. Otherwise, you can look at setting up hosting at GoDaddy or MediaTemple, or any other hosting companies online with PHP and MySQL enabled.


  1. Go to and download the most recent set of files.
  2. Once it’s downloaded, you can unzip it and place the files on your server.
  3. Magic!! —well, there a few more things you might want to do, but for the most part, that’s it.


When you unzip the file, I’m sure you noticed, there are really only 4 items. Not intimidating at all.

Default File Structure

The user_guide folder contains all the documentation you need. If there’s one thing Ellis Labs does right is documentation. Technically, you don’t need this folder on your server, but I enjoy keeping it locally if I need to look something up and I don’t have access to the Internet. Otherwise, you can just use the documentation on CodeIgniter’s site.

The system folder contains all the files needed to make CodeIgniter (CI) work. This is where you’ll be spending a majority of your time.

One thing that confused me, when I got ready to build my site: Where do I put my images, css files, and javascript files? Right, wrong, or indifferent, I pull all folders in the root folder of my site. My directory ends up looking like this:

Other folders in structure

Let’s dig through the system folder a little more. Don’t worry, it’s not as complicated as it looks at first glance.

  • application This folder contains all the files specific to one application.
    • config This folder contains all the site’s configurations.  Generally, you just touch this once and then leave it alone.
    • controllers Remember earlier this week when I talked about the C in MVC? Controllers are the piece that talk control what you look at. All those files go here.
    • errors This folder contains all the templates for your error pages.
    • helpers This folder contains your application’s helper files. Helper files are a collection of functions for a particular category. They help you with tasks. For example, one of my favorite helpers is the form helper. Instead of typing
      <form method="post" action="http:/" />

      I can use a helper function instead and it will write the code for me

      echo form_open('email/send');
    • hooks This folder contains all the hooks for modifying CI’s core files. What’s a hook? Well, think of it as a cue. There’s a specific execution process. (If you’re interested, check out the Application Flow in CI’s documentation.) A hook, would interrupt that process so that you could step in and run one of your scripts.
    • language This folder contains all the files for making a multilingual site.
    • libraries This folder contains all the libraries specific to your application.  Honestly, I get libraries and helpers mixed up. The difference is that libraries are utility classes where object state is important (authentication, etc.) Helpers are collections of related functions (not classes) that do repetitive tasks. (I’m quoting bretticus’s response on the forum)
    • models As the name suggests, this folder contains all your models, or files that talk to the database.
    • views This folder contains all the views, or v in MVC. These are the pieces of the site that the user actually sees.
  • cache This folder contains all the cache files.
  • codeigniter This folder contains all of Ellis Lab’s files that make CI work.
  • database This folder contains CI core database files that enable you to connect to the database.
  • fonts This folder stores fonts
  • helpers This folder contains all of Code Igniter’s helper files
  • language Similar to the files inside, application > languages, this folder contains language files that allow your site to be multilingual
  • libraries This folder contains all of CI’s core library files
  • logs This folder contains any logs generated by CI.
  • plugins This folder contains any plugins for your site. These are generally files that other people have created that you can download and implement in your own application.
  • scaffolding This folder contains all the files that allow scaffolding. I know it’s a funny term. Basically, it allows you to easily add, edit, and delete entries from the database.

I know this seems like a lot of information, but really, you’ll spend most of your time in only 3 folders
1. system > application > controllers
2. system > application > models
3. system > application > views

Setting up the config file

Go to your system > application > config > config.php file and edit the base_url to wherever you’ve placed your files.

config.php in CI

I have everything running locally on my computer in a folder called awesome.

CI config URL

Making sure CI is working

Open up your web browser of choice and go to your URL. If everything’s running properly, you should see something like this:

CI Success

Setting up the database

Database structure and naming conventions
The cool thing about CI is that it allows you to dictate your own database structure. When I created my database, I used some of Cake’s conventions…they seem to help quite nicely.

For example, all my tables begin with ci_. You can guess what ci stands for. grin

The rest of the table name is plural, all one word. So, a table of tasks is citasks or a table of people is cipeople. Pretty obvious. If I have a relationship table (a table that connects tasks and people) then, I name it cipeopletasks. I separate the two items with an underscore and list people first because p comes first in the alphabet.

Redundant, maybe, but another example: blog posts and related comments = three tables. ciblogposts, cicomments, and ciblogpostscomments.

These are small things, but help tremendously when I’m working on my site. Not only is it easier to remember table names, but I know from glancing at the name whether it’s a relationship table or a regular table.

If I’m over your head…
I would recommend checking out Sitepoint’s book, Build Your Own Database Driven Web site using PHP and MySQl.. Honestly, that’s how I got my start. Kevin Yank, the author does a fantastic job of explaining things in a way that me, a graphic designer can understand.

Working on your database
There are a few things I use so that I don’t have to build my database in the command line. I have phpMyAdmin installed on my server. —which is fantastic. I’ve also used Sequel Pro, but my personal favorite is Navicat. In fact, Navicat has a feature for syncing your database with your computer and your server, if you build your site locally. The light version is free, but doesn’t include syncing. The paid version is worth every penny, though.

Getting CI and your database to talk
Open system > application > config > database.php

CI configuring the database

Scroll down to line 40 and change the values. If you’re hosting the database on your machine, chances are you won’t change the hostname, it will stay localhost. Even if you’ve uploaded the files to your server, usually this will stay “localhost.”

On line 41, add your username, line 42 your password, and line 43 the name of your database.

Bam! Magic!


That’s it. Honestly. Now, we get to have fun.

I’m working on a series of blog posts to continue out of this one that will walk through creating your own blogging CMS. I know there are plenty of blogging platforms out there. In fact, I would recommend using WordPress or Tumblr or Expression Engine before we reinvent the wheel, but I thought it would be a good exercise in building a CMS / Application. The functionality is basic. There aren’t very many decisions that need to be made and it should give you everything you need to know to build an application of your own in CI. —Giddy up!


Posted 07.26.2010

Posted 07.26.2010

When I meet a freelance client…

Recently, I’ve had more people ask about doing freelance (YEAH!) I’ve been doing freelance work since I was in high school! Along the way, I’ve had some excellent clients and I’ve had some….well….some have been great learning experiences.

Over the years, I’ve learned that a lot of the issues that have come up could have easily been avoided if there was more communication on the front end. I’ve learned the value of Creative briefs and contracts, being able to explicitly define everyone’s expectations. It has proved invaluable particularly on the tail end of a project when we’re trying to determine what was agreed upon early on.

So, if process is so important, I thought I’d share mine.


A couple of years ago, I bought Sitepoint’s Web Design Business Kit. Even though it was a little over $200, it was money well spent. It came with two large notebooks — one explaining process and the other full of forms, letters, and templates. There was also a companion CD with all the documents in editable form. That notebook alone, was worth the $200.

One of the steps this book talks about is sitting down with the client and really discovering what they do and their process. One, this communicates that you’re interested in what they do and, two, it takes a lot of guessing and assuming out on my end. I’ll be the first to admit, I haven’t done this with all my clients (and hopefully the ones reading this that I haven’t done this with won’t feel slighted!) But for e-commerce clients, it’s almost a must, to determine how they figure pricing, release products, and market their company.

Some questions include:

  • Define the audience.
  • Influences on buying from the company?
  • Why do your current customers buy from you?
  • Main competition.
  • What do they do better than you?
  • What do you do better than your competitors?
  • How does the company currently market themselves?
  • What features of the site don’t you like?
  • Which products or pages are the most popular?
  • Who will update the content? (See my blog post on Developing a Content Strategy, this question is crucial!)
  • Defining site objectives and success. If there’s not a quantifiable measure of success, how will your client know you’ve done your job? Your measure of success may or may not line up with your client’s.
  • What the site should have.
  • What sites do you currently like? (To me, this is the most important question I ask. It helps me determine their tastes and aspects of sites they value.)
  • Training required?

In the sitepoint book, there are 14 pages of questions! I don’t ask all the questions, I pick and choose. I obviously can’t include all those questions (hello copyright!) But, check out the kit.


After I’ve gathered all the information I believe I need, I’ll write a Creative Brief. Basically, I regurgitate all the things a client has told me. The benefit? It allows them opportunity to make sure what I heard is what they meant. Here’s a list of all the things I include:

Overview + single purpose of the site

Typical tasks users might perform on the site
This may include discovering information, registering for a newsletter, reading a blog, contacting the author, etc.

Project Roles
Both mine and theirs

Domain Registration
Do they have one? If not, is it my responsibility or theirs to purchase it?

Are they currently using a company? My recommendations?

* Everything the project does include, does not include, and / or they might want to consider (good place for up selling)
* Here, I don’t just list, “contact page”, I say “1 contact page with a form that will email to this person once a user submits it.” I also talk about how many comps they’ll receive, how many rounds of revisions, how the site will be powered (WordPress? Expression Engine? PayPal?)

Information Architecture
Here, I’ll attach a site map, illustrating the site’s navigation

I list what and how the client will receive from me at the completion of a project (i.e. documentation, image files, html files, database files, etc on a CD)

Maintenance and Emergencies
This is where I include my contact information, email address and cell phone number.

Proposed Schedule
I list out the due date, who’s responsible, and the action item. This includes when I need approval, when designs will be submitted, etc. I also try and give myself way more time than I think it will take. Better, that I under promise and over deliver (I’ve learned that the hard way).

I also have a clause at the end that talks about if a deadline is missed on their end. If they’re 2 days late submitting revisions, I push the entire project’s deadlines back 2 days. It’s not fair to me to cram to hit a deadline when they didn’t meet theirs.

This is everyone’s favorite part. I explain my rates and breakdown the project according to hours. Here are all the items I list out:

  • Site specification development (needs analysis / content / planning / site structuring design)
  • Administration (preparation of contract / estimate, digital and paper file management, tacking hours, invoicing)
  • Meetings, phone calls, email correspondence with the client
  • Creation (including revisions) of the homepage prototype in a graphics program
  • Creation (including revisions) of the interior page prototype in a graphics program
  • Production work including coding the pages of the site
  • Connecting the site to a CMS
  • Final additions, corrections, and edits
  • Domain registration / DNS change / hosting arrangements, setup of client address
  • 15% contingency allowance

At the end, I explain what happens if we go over hours, as well as any additional charges that might apply (domain registration, hosting, stock photography, etc.)

I also include a payment schedule. Generally, the projects that I charge a percentage up front, go better than the projects I don’t. Psychological? Maybe.

Time stamp
I saw a video on vimeo the other week where a guy talked about his firm’s process. One of the things I picked up was including a time stamp. The creative brief is considered invalid after 30 days. Both scheduling and fees can easily change, particularly if a client sits on your proposal for years. (It’s been known to happen.)

Outstanding Questions
This is a good, central location for me to list out all the items I still have questions about.

Other freelancers I know include more information, others less. Here are a few more ideas:

  • Mode of payment (PayPal, credit card, or check?)
  • Samples of previous work you’ve done with similar client requirements
  • Clear indication of the next steps
  • Describe how you usually work with clients. How do you plan on communicating with them? Email? Phone? In person? Basecamp?

Since I mentioned the Sitepoint kit earlier, I thought I’d add what they include in their proposals too. They go as far as to include information about their company and their team, FAQ about the web, and user analysis (search engine optimization and surveys on what users value in a site). It definitely adds a little more light reading to proposal, but establishes you as an authority and professional.

Mark Boulton and Brian Hoff are two freelance designers that I really admire and appreciate.  They’ve both posted some of their templates online that are worth reading.

Just remember, the more you include up front, in writing, the less room there is for questioning on the back end!

Other tips and tricks

Figure out who the decision maker is

This is huge. I’ve gone through an entire discovery process with a client, written a creative brief, only to have it handed up the line and realize “I haven’t been talking to the decision makers.” The entire scope of the project changed, at that point. Boy, did I feel stupid! I had just wasted my time and theirs.

Are there other resources or processes that you’ve found useful? Other elements you include in your brief?


CentriKid Set = Kid Awesome

The summer is almost over. (Probably not what you wanted to be reminded of, first thing on a Monday morning grin ) It’s been hot and humid here, so I’m ready for a wardrobe change. Amy, what are you getting at? Well, the end of the summer means that I can finally share some of the stuff that I’ve been working on this past year.

One of the things I was challenged with in January was designing the set for CentriKid. This year’s theme was Bon Appetit. We went a French cafe, cooking motif.

One of the first things I did, was sit down with Neil, our event producer. He handles anything that happens on stage. Scripts, programming, set, you name it. For this particular set, Neil came up with the brilliant idea of portraying the outside of a cafe. Then, all the pieces spin around, and you’re inside the kitchen.

In our initial meeting, Neil gave me with a couple of things. First, some images that he had found online with elements that he enjoyed: cafe windows with plant treatments, awnings, umbrellas.

Second, he had “built” the set in Google Sketchup. He listed the dimensions of all the pieces and what he envisioned each piece being. (The piece that you see the drummer on, is actually a revolve that spins around, pretty fun.)

I left that meeting and did some “visual research” of my own.

I also spent a lot of time looking at Ratotouille

…and No Reservations. — any excuse to pull out a chick flick, right? grin

Most of these images I printed out and hung above my computer in my office. –I LOVE the whole mood board thing.

Then, I set out, drawing in my moleskine. First, I tried to think big picture.

Once I knew where I was going, I drew each piece according to scale (still in my Moleskine).

As you can tell, this sketch didn’t happen. We (we being my creative director and me) decided the artwork was so flat, that forcing perspective with the door would veer away from what we had already established.

You can tell this piece went through several iterations as well. I thought about creating a reservation stand. But, obviously, that didn’t happen either.

I scanned in all my drawings and traced them in Illustrator.

With the design finished, we hired an outside painter to paint all the pieces. We have 7 CentriKid teams that travel around the country during the summer. So, that meant she had to paint this set 7 times! — What a trooper!! She projected my designs onto each of the pieces and traced them. –As you can tell below, there are a few practicals. The lamp posts and the hoods both light up.

The final piece: