Programming Modern Social Web Experiences for Your Users

Or… Building the next Facebook, Twitter, YouTube

This tutorial was a popular ‘capstone’ lesson from my CSCI 3000 Web Programming course in Fall 2011, and I thought I’d share it as a post. It’s heavily programmer-focused, but it has all the source files to enable just about anyone with a web site to engage users in the same four ways Facebook, Twitter, YouTube and others do it:

1. Two-way email interaction with the user (email from the site AND reply to the site via email),
2. Two-way SMS or text messaging interaction with the user (the site sends SMS messages AND posts results from text message replies to the site),
3. Dynamic user directories (once you ‘register’ your username, typing sitename.com/username shows your ‘home’ page or user profile, and finally,
4. Automated follow-up on a regular basis via email/SMS (you can set a reminder for every week, every day at a certain time, etc.).

Put all these elements together, and you’ve got a socially engaging web experience users have come to expect in the second decade of the third millenium (look it up if you’re confused).

Here are the files you’ll need for this mega-tutorial: /apps/emailPHPsms.zip
And, if you’re in my CSCI 3000 course, you can use this mega-project as a replacement/upgrade for up to four projects from the semester. That’s right, replace up to four of your lowest grades (or just do it for fun) with this extra-credit extravaganza, and learn how to build “the next big thing” in the process.

A bit of background

Do you know when Facebook first went online? If you’re young, like one of the students in my CSCI 3000 course this semester who shall remain unnamed, you might think Facebook’s been around since before you were born (seriously, I heard a “1987?” quietly muttered when I asked this question in class).

It was 2004. That’s right, Facebook didn’t exist in 2003 (when the student above was in middle school). It started in 2004, and now it feels like it’s always been there. (Just a note, Google became a publicly traded company the same year, 2004.)When did YouTube come into existence? 2005. Twitter? 2006. The iPhone? You guessed it, 2007. The first Android phone didn’t come out until late 2009! My point is threefold: you don’t have to go back in time and join forces with Steve Jobs at Apple in the 1970’s, or Sergey Brin at Google in the 1990’s – you can invent something game-changing with the skills you’ve acquired this semester in PHP/HTML5/CSS/MySQL/JavaScript/server-config/mobile/etc.; now is as good a time as any, if not better, because innovation is happening at a faster pace than ever before – it took 11 years to sell the first 4 million television sets (1939-1950) [ref.], but only 3 days to sell 4 million of the iPhone 4S; and, none of the web innovations mentioned above started out with massive funding, just an idea, some server space, and some creative programming and user interface work.

The treasure trove of tutorial files

There are seven files in this tutorial – just seven files needed, along with some setup on your HostGator (or any other Apache server) accounts, to build a fully functional PHP-to-Email-to-SMS/text messaging-to-daily reminder web site with user-friendly URLs for user profiles (http://bodyreminder.com/Bryson for a demo). For my CSCI 3000 class at North Georgia, each piece of functionality counts for one make-up or replacement project grade (PHP-to-Email-to-PHP, SMS Text Messaging integration, dynamic user directories/profiles, and “cron job” daily/hourly task reminder automation).

PHP-to-Email-to-PHP and PHP-to-SMS-to-PHP files:

index.php 

reminder.php 

tasks.sql

Place index.php in the web root for your site/project (you’ll also need a config.php file that stores your MySQL database host, database name, username, and password information), place reminder.php in your server root (“/” in FTP, /home/username in HostGator), and run the SQL script tasks.sql to create the table needed for everything that follows in your phpMyAdmin or other MySQL interface. Important: You’ll need to set the permissions for reminder.php to 755 so that this script can be executed when emails come in.

Next, we need to do some server config. Set up an email forward to “pipe” email to your /home/username/reminder.php script by going to the cPanel in HostGator, under Mail select Forwarders, Add Forwarder, type an email address like “reminder@” your domain, click Advanced Options, Pipe to a Program, and enter /home/username/reminder.php with your HostGator username substituted. Click the Add Forwarder button. Now anytime an email goes to reminder@yoursite.com, it’ll get processed by reminder.php – you can edit reminder.php to make it do anything, but right now it updates tasks based on the email sent there. It’s also set up to handle SMS text messages forwarded by Google Voice (see the tutorial at http://sudocode.net/article/190/receiving-incoming-smstext-messages-from-google-voice-in-php/ for more detailed instructions).

The index.php file creates the task reminder and either emails or text messages the user, and displays the most recent 10 completed tasks. The SMS portion of the form has most US and European carriers, but more can be added from the list at http://en.wikipedia.org/wiki/List_of_SMS_gateways.

Dynamic user directories: yoursite.com/username

.htaccess

handler.php

user.php

You probably know that when you go to facebook.com/username, or twitter.com/username, youtube.com/username, etc., that facebook/twitter/youtube didn’t really create a folder on their web server just for you. They’re parsing your username out of the URL, searching their database, then showing your user profile/home whenever you use that address. It’s a slick, professional, clever way to make users feel connected to the site – people even use those addresses as their “home pages” on business cards, email signatures, etc. It’s like your users are a part of your site when you enable dynamic user home pages like this, and this exercise will show you how to treat your users as well as the big guys do.

I used three files to make dynamic user directories. First, we’ll do the server config piece. Either place the .htaccess file into your site/project root OR copy the last line of the file:

ErrorDocument 404 /handler.php

and append it to your existing .htaccess file. This line redirects all 404 (page not found) errors to a script called handler.php – think about it: the page yoursite.com/myusername doesn’t actually exist, so it should normally trigger a 404 error. But, in this case, I want to be able to see if myusername exists in the site’s database, and if it does, show the user’s home page rather than a 404 error. Doing this via .htaccess is the simplest way to make this happen, and leaves the URL intact in the browser’s address bar, so they can bookmark (and share) yoursite.com/myusername. Cool, huh?

Place handler.php in the site/project root, and it’ll need access to your config.php database config file just like index.php does above. The handler file just splits out the URL, throws away everything before the slash, and looks for either /user/username or just /username. It then looks in the database for the user, and if it finds it, it calls the user.php file. Otherwise, you still get the familiar old 404 error, but with a link to the main page.

The user.php file is just a modified version of the index.php home page, customized for a single user. It takes the global $user variable passed from handler.php and uses that username to pre-fill the form and pull all that user’s tasks from the database. Easy enough?

Cron jobs – automating daily/hourly reminders

send_reminders.php

The final step is adding the ability to set recurring reminders in the future. To do this, you again need one piece of server config. In your HostGator cPanel, go to Advanced, Cron jobs, and set a cron job to fire every day (or every hour, if you wish), and set the command to /home/username/send_reminders.php, substituting your HostGator username in the path. Put send_reminders.php in your server root, just like reminder.php in the first section above, and change its file permissions to 755 to make it executable. The first line in both these scripts tells the script where to find the php interpreter to execute the code, if you were wondering what  #!/usr/bin/php -q meant.

I’ve left the buildout of send_reminders.php as an exercise (I had to leave something to be built by you 😉 ), but it will work similarly to the index.php and user.php files, except that this script gets executed every day or every hour based on your preference, and should query the database for all recurring reminders that need to be sent for that time period, then loop through those results and send email or SMS reminders.

To accomplish the full vision, you’ll need either extra fields in your table, or preferably a new table for repeating tasks. You’ll need to modify the index.php and user.php forms to allow folks to set recurring reminders (remind me every day or every week on the following days: M/T/W/Th/F/S/Su, and maybe even remind me at specific times), and update send_reminders.php to handle the recurring reminders, generate new tasks and send the reminders.

All in all, this app (see a functional demo at http://bodyreminder.com ) has the foundations of a highly social app with some of the hallmark conveniences of Facebook, Twitter, etc. Email me at professorpayne [at] gmail.com or comment below if you put together a good concept using these source files. I’d love to hear about it!