How do I create a Facebook web app using CodeIgniter?

First things first, this tutorial assumes you have the following setup:

• A Mac
• A remote server running Debian 6.06 (Squeeze)
• A Facebook account
• And a copy of MAMP Pro running on your local machine

Okay, first we need to create a Facebook app. Go here: https://developers.facebook.com/apps?ref=bookmarks&count=0&fb_source=bookmark_apps&fb_bmpos=6_0 (and for the record, yes, I think that's a totally weird looking URL). Then, click the "Create New App" button as shown in the following screenshot:

Next, name your app and then click the "Continue" button:

Next, pass through the security check:

Great. Now fill out the rest of your application's profile as shown in this screenshot:

After clicking "Save Change" you'll see the following success message:

Okay, now download the latest version of CodeIgniter:

Then unzip your download:

Then add your own web root dir named "www" and rename your CI parent folder to your app's domain name:

Move the folder to your home directory:

Okay, now spin up a new web server:

Next, config your DNS:

Now open up Terminal and cd into your project directory.

cd ~/fbciexample.abovemarket.com

Now run the following command:

git init

You'll see the following output:

Initialized empty Git repository in /Users/johnerck/fbciexample.abovemarket.com/.git/

Next, add clitools for release management. If you don't already have clitools on your local machine, run the following command to git clone it to your home directory:

git clone git@bitbucket.org:abovemarket/clitools.org.git ~/clitools.org

You'll see the following output:

Cloning into '/Users/johnerck/clitools.org'...
remote: Counting objects: 132, done.
remote: Compressing objects: 100% (112/112), done.
remote: Total 132 (delta 41), reused 0 (delta 0)
Receiving objects: 100% (132/132), 256.54 KiB, done.
Resolving deltas: 100% (41/41), done.

Okay, after running that command, run this next:

php ~/clitools.org/clitools/installto.php ~/fbciexample.abovemarket.com/clitools

You'll see the following output:

Success: You've successfully installed clitools to ~/fbciexample.abovemarket.com/clitools/

Okay, now it's time to create both our local and remote databases:

After walking through the process pictured above twice (once locally, and once on your remote production machine), open the following two files:

open ~/fbciexample.abovemarket.com/clitools/_env.php
open ~/fbciexample.abovemarket.com/clitools/_release.php

Add your database credentials as illustrated:

The rest of this post is going to assume you have an empty database setup in both your local and remote environments and that you've properly filled out your _env.php and _release.php files.

We'll continue to use clitools throughout this tutorial but now is a good time to mention that you can read more about clitools at clitools.org.

Ok, back to the task at hand. Your local database should look like this:

Now again, on your local machine, run the following command:

php ~/fbciexample.abovemarket.com/clitools/uschema.php

After running that command you should see the following output:

mysql -h localhost -u fbciexample -p********** fbciexample < ~/fbciexample.abovemarket.com/clitools/changes/schema/1.sql
Success: Your database is up to date (at 1.sql)
Files Applied:
~/fbciexample.abovemarket.com/clitools/changes/schema/1.sql

Now, if you refresh your database page it should look like this:

If you click into the version table you'll see:

Next, create a BitBucket (or GitHub) project repo:

Next, on your local machine, go to the root of your project dir via the following command:

cd ~/fbciexample.abovemarket.com

Okay, now run the following commands:

git remote add origin ssh://git@bitbucket.org/abovemarket/fbciexample.abovemarket.com.git

git add .

git commit -m 'Initial commit'

Now open your .git/config file:

nano .git/config

Add the following lines to the end (make sure you indent using one tab rather than 4 spaces):

[branch "master"]
    remote = origin
    merge = refs/heads/master

Save the file. Push your changes:

git push -u origin --all

You'll see the following output:

Counting objects: 410, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (394/394), done.
Writing objects: 100% (410/410), 2.17 MiB | 3.96 MiB/s, done.
Total 410 (delta 127), reused 0 (delta 0)
remote: bb/acl: johnerck is allowed. accepted payload.
To ssh://git@bitbucket.org/abovemarket/fbciexample.abovemarket.com.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

Great. Now ssh into your remote machine:

ssh -p your_port you@your_ip_address

Remember that if you run into trouble here, it may be because you have MAMP turned on and so whatever domain you're using is resolving to localhost rather than hitting the net.

Now that you're on your remote machine, run the following command:

git clone git@bitbucket.org:abovemarket/fbciexample.abovemarket.com

You'll see the following output:

Cloning into fbciexample.abovemarket.com...
remote: Counting objects: 410, done.
remote: Compressing objects: 100% (267/267), done.
remote: Total 410 (delta 127), reused 410 (delta 127)
Receiving objects: 100% (410/410), 2.17 MiB, done.
Resolving deltas: 100% (127/127), done.

The directory created when you get cloned the project needs to match apache's web root. If you're interested in knowing how to set up vhosts, checkout a post I did awhile back on that topic: http://oneqonea.blogspot.com/2013/04/how-do-i-set-up-apache-virtual-hosts-on.html

This tutorial assumes you have your remote apache server environment set up properly. You can exit your remote machine:

exit

Okay, now it's time to release our app!

You can run a git status just to see where we're at right now.

git status

It should output:

# On branch master
nothing to commit (working directory clean)

Okay, great. Since our current branch is "clean", we know we can release. Since we're on the "master" branch, we know we're about to release master (this is the nature of clitools).

Run the following command:

php clitools/releaseto.php production

clitools will tell you what it's doing while it runs. The last line should say:

Local status: You've successfully released your project from master to production (v00.001.000)

clitools just did a number of things for us. A quick review would include:

• Created a new release branch (rb00.001)
• Created a new release tag from that branch (v00.001.000)
• Ssh'd into our remote machine and checked out git tag v00.001.000
• Triggered clitools/uschema.php (updated the target machine's database)
• Triggered clitools/udata.php (php file that's available to be run on release if need be)
• Updated clitools/version.php's file content with v00.001.000
• Version stamped each change file applied (if target was "production")
• Version stamped a copy of udata's source file (regardless of target environment but only if udata's source file was not empty)
• Printed a success message to our screen and pushed the release branch to origin so the rest of our team can be in the loop!

Now access your fbciexample.abovemarket.com:
On your local machine, run the following command:

open ~/fbciexample.abovemarket.com/www/index.php

Add the following lines of php code to the top of the file after the opening php tag:

require_once dirname(__FILE__) . '/../clitools/_env.php';
date_default_timezone_set('UTC'); // So we can call new DateTime();

Where the file says:

define('ENVIRONMENT', 'development');

Replace it with:

$ci_environment_translation = CLITOOLS__ENVIRONMENT === 'local' ? 'development' : CLITOOLS__ENVIRONMENT;
define('ENVIRONMENT', $ci_environment_translation);

If you want errors to get logged in production, switch production's error_reporting from error_reporting(0); to:

error_reporting(E_ALL);

Now set $system_path and $application_folder like so:

$system_path = CLITOOLS__CI_SYSTEM_PATH;
$application_folder = CLITOOLS__CI_APPLICATION_FOLDER;

Now open your clitools/_env.php file:

open ~/fbciexample.abovemarket.com/clitools/_env.php

Add the following lines to your _env.php file (but translated for YOUR local machine of course):

define('CLITOOLS__CI_SYSTEM_PATH', '/Users/johnerck/fbciexample.abovemarket.com/system');
define('CLITOOLS__CI_APPLICATION_FOLDER', '/Users/johnerck/fbciexample.abovemarket.com/application');

Now open your clitools/_release.php file:

open ~/fbciexample.abovemarket.com/clitools/_release.php

Add the following lines to your _release.php file's $content var (but translated for YOUR remote machine of course):

"define('CLITOOLS__CI_SYSTEM_PATH', '/home/admin/fbciexample.abovemarket.com/system');
define('CLITOOLS__CI_APPLICATION_FOLDER', '/home/admin/fbciexample.abovemarket.com/application');"

Now run:

git status

git add .

git commit -m 'Updated some environment related settings (i.e. fixed bug in app)'

git push

php clitools/releaseto.php production

clitools will tell you what it's doing while it runs. The last line should say:

Local status: You've successfully released your project from master to production (v00.002.000)

Now access your fbciexample.abovemarket.com

Congrats! You're on fire!

Want pretty URLs? Me too. Add the following .htaccess file in www/:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

Then

open application/config/config.php

and update to:

$config['index_page'] = ''; // Was previously 'index.php'

That's all for now. At a future date I'll extend this post to show you how to install Sparks (SolidSess to be exact). That's where FB comes into the mix too! Later!