Not to be deterred, I dug into their code, copied the portion I was interested in, removed all of the useless cruft, gave the CSS classes slightly more useful names, and came up with a working version that looked like this:

That should look rather familiar to you.

Seeing as I couldn’t find anything on the Intertubes for this (and I’m probably not the only one) I thought it might be helpful to share the HTML and CSS code for this — there’s also one image which is used as a gradient background for the search button (entirely optional; it just makes it look nice). If you find this useful leave a comment and let me know.

Right click and Save as:

• HTML with embedded CSS
• Image file (background image for button)

In the middle of March I was doing some research for a blog post and I came across a contest that Zappos was running. I had recently decided that I was spending too much time building web apps for $0/hour, so I almost didn’t enter, but I had an idea that I thought I could pull off without investing too much time. My intent was to build something that was fairly simple but very polished.

I spent a couple weeks (about 40 hours total) throwing together an app in my spare time. I thought my app was good, but I’ve entered contests like this before where the entrants pour lots of time into it and produce something really stellar. So it was much to my surprise that I ended up winning the top prize in the contest (a cool $500 cash plus a $500 gift certificate to Zappos). That alone was enough to make building the app worth my while, but what happened next was even better.

Shortly after I won I posted a quick tweet about it. I have some folks from the Silicon Prairie News as followers and my tweet led to me getting an interview request. I wrote up some answers (reviewed by my wife, thanks!) and they posted an article about it the following day. That article was then mentioned in the weekly PrairieCast postcast (starting at 21:00). I was also contacted by several people who read the article about projects that they wanted my help on.

When I decided to enter the contest in never crossed my mind that it would lead to me being featured on SPN and being offered work. That goes to show though, it is definitely possible to attract luck. You don’t know how that luck will manifest itself, but it will. Do cool stuff, be social, and luck will find you.

Regarding “Attracting Luck”: it sounds like a value-free bromide, but it really does work. I’m not a social butterfly by nature, but I force myself to go out and network. It blows my mind how effective that is, because there exists someone with the ability to give you what you want just by saying “Yeah, sure” and that is 1000000000x more likely to happen after you have asked him for it in person versus happening spontaneously. (Ditto hearing, e.g., “You do SEO consulting? What a coincidence, we need that. Send us a proposal.”, “You made what? That’s interesting. I have someone you should get a coffee with.”, etc)
-Patrick McKenzie

It took me a long time to find an answer on Google, but here it is:

Don’t use the “distance” and “delay” options for draggables; they are currently incompatible with IE. As soon as I removed them the draggable functionality worked perfectly. I’m hopeful that the jQuery team will fix this in future versions, but for now, just don’t use those options.

This was with jQuery 1.5.1, jQuery UI 1.8.11 and IE8. Hopefully I’ve loaded this post with enough search terms that others will find it quickly before beating their heads against the wall :)

1. You need to run the command prompt as administrator.
2. You need to have the full path to the exe when you run the install command, e.g.:
   c:\mongodb-1.4.0\bin\mongod.exe –install

Runs like a champ after that.

Simple, right? I sure wasn’t going to go reinvent the wheel by writing my own CSS for them though. Thankfully after searching for a bit I came across SimpleBits’ Mini Tabs. I didn’t want mini-tabs, but the HTML and CSS was remarkably clean. Only 4 CSS declarations on a simple HTML list with a class=”active” for the current tab. With some modification to the CSS I was able to come up with tabs that looked like the above (even looks good in IE7, amazingly).

So, if you want some decent looking/functioning tabs go yank the HTML/CSS from the above link.

Let’s get an example registration app set up:

rails registration
ruby script/plugin install http://svn.techno-weenie.net/projects/plugins/restful_authentication
ruby script/generate authenticated user sessions

Cool, now you have your registration app set up with a Users model, controller, and view. If you start up your server and head to http://localhost:3000/users/new/ you should see a very basic registration form. Let’s add our Address model. For the sake of brevity, I’m just going to create a field that references the User model and one field for a zip code, but you get the idea.

ruby script/generate model Address user:references zipcode:string
rake db:migrate

With our Address model in place, we need to let the User model know that it is linked to the Address model. Here’s what the User model looks like (\app\models\user.rb):

require 'digest/sha1'
class User < ActiveRecord::Base
  # Virtual attribute for the unencrypted password
  attr_accessor :password

  validates_presence_of     :login, :email
  # lots more stuff that we're not going to worry about...

We’re going to add three things:

require 'digest/sha1'
class User < ActiveRecord::Base
  has_one :address
  accepts_nested_attributes_for :address
  attr_accessible :address_attributes

  # Virtual attribute for the unencrypted password
  attr_accessor :password

  validates_presence_of     :login, :email
  # lots more stuff that we're not going to worry about...

We’ve told the User model that (1) it has one Address model, (2) that it should save data for Address automagically, and (3) that the address_attributes fields are permitted fields to receive data for (if you read through the code a bit further you’ll see another attr_accessible line, you could add address_attributes there too).

We need to make one change to the User controller (\controllers\users_controller.rb) to prevent an “Called id for nil” error later on. At line 6 you should have an empty new method. We’re going to create an instance variable for User:

  # render new.rhtml
  def new
    @user = User.new
  end

Let’s now take a look at the one User view that restful_auth created (\app\views\users\new.html.erb):

<%= error_messages_for :user %>
<% form_for :user, :url => users_path do |f| -%>
<p><label for="login">Login</label><br/>
<%= f.text_field :login %></p>

<p><label for="email">Email</label><br/>
<%= f.text_field :email %></p>

<p><label for="password">Password</label><br/>
<%= f.password_field :password %></p>

<p><label for="password_confirmation">Confirm Password</label><br/>
<%= f.password_field :password_confirmation %></p>

<p><%= submit_tag 'Sign up' %></p>
<% end -%>

First of all, we need to change the form_for :user to be form_for @user. Second, we get to add in our zipcode field:

<%= error_messages_for :user %>
<% form_for @user, :url => users_path do |f| -%>
<p><label for="login">Login</label><br/>
<%= f.text_field :login %></p>

<p><label for="email">Email</label><br/>
<%= f.text_field :email %></p>

<p><label for="password">Password</label><br/>
<%= f.password_field :password %></p>

<p><label for="password_confirmation">Confirm Password</label><br/>
<%= f.password_field :password_confirmation %></p>

<% @user.build_address unless @user.address %>
<% f.fields_for :address do |a| %>
  <p>
    <%= a.label :zipcode %>
    <%= a.text_field :zipcode %>
  </p>
<% end %>

<p><%= submit_tag 'Sign up' %></p>
<% end -%>

Here’s where I ran into the two gotcha’s. If you don’t switch form_for :user to form_for @user when you submit the form you’ll get a very unpleasant error that looks like this:

ActiveRecord::AssociationTypeMismatch in UsersController#create
Address(#46729050) expected, got HashWithIndifferentAccess(#23561230)

Second, if you don’t add in line 15, @user.build_address unless @user.address, you’ll get the following error when you try to view the form:

You have a nil object when you didn't expect it!

More info on why that error occurs here.

Anyway, with the above steps you should now have a registration form that creates records for both User and Address. If you found this helpful, leave a comment and let me know!

After searching around for a bit I came across this nice bit of code which creates a MySQL query using PHP variables to calculate the distance. By combining the two methods I was able to create a very workable solution for sorting by distance. Here’s what I did:

First, download the zipcode SQL from Micah’s page and run each SQL file. That should give you a new shiny table called zip_code filled to the brim with (what else?) zip codes.

Second, you’ll need the get_zip_point function from Micah’s code:

/**
 * This function pulls just the latitude and longitude from the
 * database for a given zip code.
 */
function get_zip_point($zip)
{
	$sql = "SELECT lat, lon from zip_code WHERE zip_code='$zip'";
	$r = mysql_query($sql);
	if (!$r)
	{
		$this->last_error = mysql_error();
		return FALSE;
	}
	else
	{
		$row = mysql_fetch_array($r);
		mysql_free_result($r);
		return $row;
	}
}

Third, you’ll want a function to generate the SQL you’ll use in your query:

/**
 * Returns the SQL to calculate distance based on latitude and longitude
 */
function get_distance_SQL($lat, $lon)
{
	$sql = "
	3957 * 2 *
	atan2(
		sqrt(
			pow((sin(0.0174*(lat-$lat)/2)),2) +
			cos(0.0174*$lat) * cos(0.0174*lat) *
			pow((sin(0.0174*(lon-$lon)/2)),2)
		)
		,
		sqrt(1-
			(
				pow((sin(0.0174*(lat-$lat)/2)),2) +
				cos(0.0174*$lat) * cos(0.0174*lat) *
				pow((sin(0.0174*(lon-$lon)/2)),2)
			)
		)
	)
	as distance";

	return $sql;
}

Fourth, you wrap it all together with a few lines of PHP. I’m using CodeIgniter to handle the SQL call, so your mileage may vary a bit on the exact implementation details.

list($lat, $lon) = $this->get_zip_point($user_zip_code);

$this->db->select("users.username, zip_code.city, zip_code.state_prefix," . $this->get_distance_SQL($lat, $lon), FALSE)
		->from('users')
		->join('zip_code',"users.zip_code = zip_code.zip_code")
		->order_by('distance', 'asc');

$search_results = $this->db->get();

And shazam, you now have a way to sort a set of SQL results by distance.

On the (perhaps) not so good side, the majority of that time has been spent implementing pagination on the search results page. You would think this would be incredibly easy considering that CodeIgniter has a Pagination class. It shouldn’t take me approximately 8 hours, right? Well, apparently it does when you’re trying to use AJAX to handle your pagination. I was even perfectly willing to accept a complete hack for a solution, but alas, anything I tried to do to cobble together a fix for one issue only introduced another issue somewhere else.

Eventually jQuery came to my rescue. In the configuration for Pagination I set the base_url to ” (an empty string) so that the href on the pagination links would contain only the number for the search results. Then I set up jQuery to find all of the anchor links in my paging div, stop the normal link function, and call my function to load in the search results. The jQuery code came out like this:

$(document).ready(function(){
  $("div.paging > a").click(function(e){
    // stop normal link click
    e.preventDefault();

    $('div#search_results').load("/search/get_results/"+$(this).attr("href"));
  });
});

This is still something of a hack as I’m basically creating fake href values for the anchor tags, but whatever, it works! I can come back later and fix it. At this point hacks are okay. Speed is much more valuable than perfectly elegant code as I want to find out if my idea is solid before investing oodles of time in it.

$this->form_validation->set_rules( 'username', 'Username',
  'trim|required|callback_username_check' );

And then create a matching function like this:

function username_check( $username )
{
  // some code
}
?>

However, as this is currently implemented someone could access your function as a page at a URL like example.com/index.php/login/username_check/ if they guessed the function name. While that may not have any ill side-effects, it’s probably just as well if no one can access the function besides you.

In come private functions for controllers, which allow you to create a function like this:

function _utility()
{
  // some code
}

And if you try to access the function via a URL, like example.com/index.php/login/_utility/, you’ll get a 404 (page not found).

You probably see where I’m going with this. If you create your callbacks as private functions, no one will be able to access the callbacks as pages. It’s quite simple to do. You add an underscore before your callback function name:

function _username_check( $username )
{
  $valid_username = TRUE; // You would perform some kind of check on the field here

  if ($valid_username == FALSE)
  {
    $this->form_validation->set_message('_username_check', 'The username you have provided is not valid.');
    return FALSE;
  }
  else
  {
    return TRUE;
  }
}

And then add an underscore in your callback rule (note the two underscores after callback):

$this->form_validation->set_rules( 'username', 'Username',
  'trim|required|callback__username_check' );

Done!

At first I looked for ways that I might be able to at least run checks on pages to see if a user is logged in or not. It turns out that’s not terribly difficult (once you figure out how to do it). You need to create your own authentication controller for use with pages where you want to check if the user is logged in. Cool, that works. I could throw the log in/log out functionality in easily enough, but resetting passwords and validating email addresses would be a whole different matter.

That’s when I decided that I should start looking for a user-contributed authentication library. The CodeIgniter Wiki has a nice list of them. As I started looking through them and all their various features I realized I should come up with a list of the features that I needed to have. Here’s what I was looking for in a library:

• Good coding practices
• Good documentation
• Small number of files
• Database implementation that’s not complex
• Login using username or email address
• Emails for lost passwords
• Automatic login
• Hashing of passwords
• Maximum number of failed login attempts
• Emails for activation (nice to have)
• reCAPTCHA support (nice to have)

Not too harsh, right? Unfortunately most of the libraries ended up being too large, too simple, or completely lacking in documentation. It was hard to find a library that fit somewhere in the middle. I did find one library that might meet all of my requirements, and if not, it’s awfully close: Redux 2 (beta). It has all of the functionality I want, it doesn’t contain a crazy number of files, the database is simple and well thought out, there’s a complete sample application that makes use of the library, and more. I’m going to give it a try and comment in my next post on how well it works.

I should also mention in the course of my search I came across an excellent post on Stack Overflow regarding authentication libraries for CodeIgniter. There’s a lot of great discussion on that page and Redux was also listed there as being one of the better solutions available.