Knowing this, we undertook to create a software solution with certain goals in mind. For one, we wanted to help out smaller dealerships, who may not have the money or know-how of ranking their sites on major search engines. Secondly, we wanted to create a new standard of web site optimization across the car industry. We found a market that was in need of a solution. A market that has been overlooked.

So, I personally took on task of creating a system that could scale as big as our dream. A system that would ensure dealerships exposure on the web, with a management system that would only require little or no training. About 2 weeks ago, I finished the project, and we launched our first website in a target city in Florida. The site lists all the dealers with Used Cars in Lakeland Florida. The site itself provides a really simple experience for the car buyer. They can easily view the dealers in that area, view inventory and specials, and easily get in contact with the various dealerships. We now also have used cars in orlando florida. used cars in California, and used cars in Utah.

Our hope is that we can start partnering with others to bring these websites to other cities across the nation. We are open for discussion with dealerships and individuals who may be interested in pursuing this opportunity with us.

A word on WordPress Themes:
One very important file when creating a WordPress theme, is the “functions.php” file. This works like the plugin section in WordPress. Basically, when your template is loaded, so are these functions. It’s a great way to create specific functions you can use in your template files, without having to create a plugin for each one. And sense the “functions.php” file is only connected to that specific template, you can choose a different template, and those functions will no longer be loaded.

Ok, so how did you do it?
The first step was to show the post title as a link, the author, and then a small except WITHOUT an image. If the author put an image at the top of their post, I didn’t want this to show up. So, in my index.php file, which acts as the home page, I put in this code:


<?php
//get the latest 3 posts for surfing
query_posts('category_name=Surfing&showposts=3');
while (have_posts()) :
the_post();
//execute the output function
show_post($post);
endwhile;
?>

WordPress has a lot of functions built in. So I used their “query_posts” function to get the latest 3 posts in the category “Surfing” (I repeated this later on for Skating and Snow). Then, in the famous WordPress “while loop”, I execute the function “show_post($post)”. The “$post” variable comes again from wordpress, which is actually a post object, containing all the post info (ie content, author, date, permalink, etc…). So, then in my “functions.php” file, I have my “show_post()” function:


//show the post
function show_post($post) {
echo "<div class=\"post\">\n";
echo "<div class=\"img\">\n";
//checks for image
getImage($post->post_content);
echo "</div>\n";
echo "<div class=\"body\">\n";
echo "\t<h3><a href=\"".$post->guid."\">".$post->post_title."</a> - <small>By ".author($post->post_author)."</small></h3>\n";
echo "\t<p>".summary($post->post_content)."<a href=\"".$post->guid."\">Read Full</a></p>";
echo "</div>\n";
echo "<div class=\"date\">".dateFormat($post->post_date)."<br /><br />";
echo "<br /><a href=\"".$post->guid."#respond\">(".$post->comment_count.") Comments</a></div>\n";
echo "</div>\n";
}


For the most part, I didn’t have to do anything new here. I basically used WordPress’s $post object to access specific information I wanted, and put then put it exactly where I wanted it in my XHTML. There are only 4 functions being called that I had to create.

The being called is “getImage()”. This is the function I use to display the small thumbnail next to the post. Here is the function:


//checks to see if there is an image in the post
// if yes, it displays the image in a box
function getImage ($hay) {
$path = explode("<img",$hay);
if(sizeof($path) > 1) {
$src = explode("alt",$path[1]);
$file = explode("src=",$src[0]);
$url = str_replace('"','',$file[1]);
$url = str_replace("'",' ',$url);
$link = explode("/uploads/",$url);
echo "<img src=\"http://5ones.com/dev/wp-content/themes/5ones-v2/gen_thumb.php?x=62&y=39&src=".$link[1]."\" />\n";
}
}

I am not saying this is the easiest, nor best way to do this part. However, it works great for my purposes. Anyways, here is what is going on. I use the variable $hay to hold the actual post content (which I passed in my show_post() function. I then used the explode function to separate any possible image tags in a post. Then, I am able to check the size of the array created, and if it’s large than zero, I know an image exists and continue on with the function. All I am trying to do, is get the path for the image in the post. So, I do a series of explodes and string replaces to isolate the path. Then, I pass the image path I finally get to my image resizing script (maybe I will share later), that crops the image and outputs it. Beauty.

The next function I use is “summary()” which takes the content, strips out html tags and image tags, truncates the length, and then returns the result. It looks like this:


//returns a summary of the content and strips html tags
function summary($copy) {
$new = strip_tags($copy);
ereg_replace("<img[^>]*>", "", $new);
$new = substr($new,0,200);
$new .= "...";
return $new;
}


The last function I use returns the name of the author. Since the post only gives the id of the author, I do a simple DB query to get the authors’ name:

//returns the name of the author based on id
function author($id) {
$sql = "SELECT display_name FROM wp_users
WHERE ID = '$id'";
$q = mysql_query($sql);
$r = mysql_fetch_array($q);
return $r["display_name"];
}

These are the functions I use to create the home page you see on 5ones. Hopefully these functions can be beneficial to someone trying to create the same thing.

Fade via Javascript:
Calling a spry effect is very simple. You first need to create a variable which sets up the fade parameters, and then call that variable again and start the fade. It goes a little something like this:


var error_fade = new Spry.Effect.Highlight('errorBox', {duration: '1500', from:'#ffffff', to:'#ff3300', toggle: true});
error_fade.start();


What’s going on here? In english it would read like this. Create the variable “error_fade” and attach a spry effect to it. Make the effect effect the div on my page with the id “errorBox”. Fade the effect for 1500 milliseconds, starting with the color white and fading to a reddish color. The great thing about setting it up in the variable “error_fade” is that I can call it at anytime. I could set up another variable called “success_fade” and give it a different set of parameters. Actually, I end up doing this with php.

Fade via php function:
Obviously the php isn’t going to do the fade. All it will do is call the fade via a function. The great thing about this, is you could put this function in a class and use it to display any type of message, error or not throughout your application. On an app I am currently working on, this function is in my main file of functions used throughout the site. When I want to show a fade, for example on a successful form submission, I will call it. To see an example, submit the form in my example. You can put anything for your email, I am not validating it’s structure. Here is the function that is being used:


function success($message,$time,$from, $to) {
echo '<div class="success" id="suc">'."\n";
echo "<p>$message</p>";
echo '</div>'."\n".'
<script type="text/javascript">
var sts_fade = new Spry.Effect.Highlight("suc", {duration: "'.$time.'", from:"'.$from.'", to:"'.$to.'"});
sts_fade.start();
</script>';
}


Then you can call the function like this, and set all the parameters you want. For the success box on my example:


$message = "<h2>Your message was sent!</h2><p>A representative will contact you as soon as possible!</p>";
success($message,'1500','#f5fa73','#cfebf7');


Using this function is very easy. I can call it at anytime, reusing the code for you recyclers out there, and being able to set the parameters however I would like. One function to handle all of my needs. Well, I hope you enjoy. If you have any problems adding it to your site, let me know. Let’s all make error messages friendlier, and better looking.

The Problem:
Too often checkout pages are too many steps and too long. Without me getting into it personally, I will give you a tip that will make your online stores more successful: Limit the checkout process to one page. Recently I had a client I built a custom shopping cart for. She didn’t need a robust system like Os Commerce or Zen Cart, so I built one in from scratch. When I came to building the checkout page, I kept asking myself “how can I make this easier for the front-end user”. After fitting everything into one page, and realizing I could use Spry to get shipping rates RIGHT after they put in their zip, I knew I was on my way to land a home run.

The Solution:
I guess there are two parts to this one. The first is how the freak do I use the UPS API of which they supply close to 70 pages of documentation? Well, first off read this article and download his code. I am not going to take credit in creating the function I use. He also takes you through what you need to do on the UPS website, how to configure his script, and how to use his function.

Mark’s script however, simply returns one rate. I wanted to create a way to display several rate options to my customer. You can see what I did on the example page, below the form. So basically, I create an array with all of the shipping options I want to display. Then I run a foreach statement, to read the array one by one and complete Mark’s function. Each one returns a result that I can then display back to the user. However, I added in a radio button for each one, as well as the name of the shipping method next to it with the returned price from the API.

The next step was to integrate it using Spry’s updateContent utility. Like I showed yesterday this is fairly simple. I use the “onblur” handler again for their zip code, and place the zip code as the second input box to give it some time to load. Here is the “checkShipping” function that is called:

var checkShipping = function () {
//get their zip from the ship_zip box
var zip = document.shipping.ship_zip.value;
document.getElementById("Rates").innerHTML="Loading shipping options for Zip: " + zip + " ...";
//only check the zip if it's more than 4 characters
if(zip.length > 4) {
window.Spry.Utils.updateContent('Rates', 'getUps.php?zip=' + zip);
}
}

It’s pretty simple. Basically I get the value of their zip, and then display some temporary data into my loading div, to alert the user that something is coming. Then I check that their zip is more than 4 characters, and then I use my getUps.php script to retrieve the info. I pass that same zip variable that is being used to show the customer I am retrieving info for that zip, into the php script and then into the function to be used in calculating shipments.

As always, I am sure you are already thinking of ways to extend this further. Better validation maybe? Using sessions to remember their selection and display it if they have to come back and edit the page again? Maybe putting an awesome animated gif of a flying eagle above the form? Hopefully this will help you on your journey, and you won’t be forced to use OS Commerce or Zen Cart just because they have a plugin that does this same thing.

Stay tuned tomorrow as I discuss how Spry can be used to display very nice alert messages. I might even wrap it up into a PHP class.

This week is Spry.
You can follow the link to learn more about it, but basically it’s another javascript library created by Adobe. Some things I like about it, is 1. It’s completely free (no donations requested from a large company like Adobe); 2. It’s easy to impliment and use; 3. Their examples are really good and cover a wide variety of topics.

Recently, with a large project I have been working on, Spry has been very important in helping me use AJAX to enhance functionality and user-interaction. Recently, I created the registration pages for this same project. I wanted to make it as simple as possible. So for today, I am going to cover how to use Spry’s updateContent utility, to help me out with user login id’s.

The problem:
Like many sites where a login id is required, it can be frustrating once thousands of users are populating the database, to find a unique login id that hasn’t been taken. I am sure you can share my frustration with trying to create a unique account in Xbox live or yahoo chat. On many websites, the user types in their desire username, selects and confirms their password, and then clicks submit. The form then passes the information to a server-side script which checks the database to see if it’s unique, and then either sends back the form with a very disappointing error, or sends a very gratifying page that says “sexyMomma2007″ is available. When the user id is not unique, it can be frustrating. However, when a user has to continually try new ones and resubmit the form, then wait for a response from the server, that only builds on the frustration… until finally the user snaps and chooses a login that makes no sense and forever will be dissapointing.

The solution:
With this in mind, I thought to myself “Is there anything that can be done. Is there any hope”. Then I remembered the new buzzword “Ajax”, and realized, yes… There is a solution. Why don’t you take a look (I hate it when tutorials only put the finished link at the bottom… if you know enough about how it works just by looking at the code, then copy and paste the freaking code and use it in your own site. If you need more love, keep reading).

The instructions are there, but basically put in a username in the “Create login” box, and then click on the password box. You will then see a response of whether it’s ok or not. Also, you will notice if the username is taken, the “register” button becomes disabled, as another reminder they should try another name to continue. You will be happy to know that only 3 usernames are taken on this example: admin (me), modernblue (me), ferris-bueller (me, I wish). So, get some gratification by typing in your favorite user names and obtaining the best response you’ve had in weeks.

Where does spry come in?
First off, I include the spry script (spryData.js) between the <head> tags. Then, I call sprys “updateContent” function using only one line of code. Let’s look at my full function — read the comments:


var checkLogin = function () {
//get the value of their login name
var login = document.user.login.value;
//check the db to see if its available
window.Spry.Utils.updateContent('response', 'checkLogin.php?login=' + login);
}


The “checkLogin” function is the function I call with the “onblur” handler on my input text field. “onblur” is triggered when your cursor first enters the field, and then is clicked somewhere else (focus->blur). So simply, I get their awesome login name, then via spry, I load my “checkLogin.php” script (which you can see below the example) to see if a username is taken. I then pass the variable into my php script, in this case check an array of usernames (I know many of you are rolling your eyes bc I am using an array, rather than a MySQL “SELECT” statement), and then display the response based on it’s availability. I then call the valid login function, which then checks to see whether the response was available, or taken. Let’s take a look at this function:


//check to see if the username is unique
var validLogin = function () {
//get the class of the response span
var answer = document.getElementById('response').className;
if(answer != "success") {
//change the background of the text box to red
document.getElementById('login').className = 'sorryBg';
//disable the register button
document.user.register.disabled=true;
} else {
//change the background of the text box to green
document.getElementById('login').className = 'successBg';
//enable the register button
document.user.register.disabled=false;
}
}

Simply, this login checks the class name of the returned span I sent from my “checkLogin.php” script. If the class is not “success”, I assign the input box the class of “sorryBg”, which makes the background color of the input box red (international error color), and I also disable the register button for people who don’t notice the obvious red box and red error letters. If the class is “success”, then I assign the input box the class of “successBg”, which makes the background green, as well as enable the register button.

Any other ideas?
Of course with this example I am only touching the surface of using spry within forms. I would suggest using a javascript function to make sure the username is the required length, and has the required characters of for your application. Also, don’t forget everything you do user-side, should be re-validated server-side. I am sure some are rolling their eyes, but when you are doing a site for a client whose users are un-trusting (won’t have javascript enabled) you need to accommodate to them. For that same reason you should also accommodate to users who would always have javascript enabled, and especially want to have a quick and easy process. I would recommend looking at this page as well, to learn about Sprys very cool form validation methods.

What’s up for tomorrow?
I am going to share another example of using Spry.Utils.updateContent to show your users shipping rates based on their zip. I am guessing some of you are already starting to think of how this could be handled. I am also going to include a really simple function for connecting to the UPS api, to get immediate quotes.

If any of you need a little more help explanation, let me know via comments. I will try and help the best I can. And please, remember I left out a lot of things for brevity sake, so please keep comments about validation, compliance, security and politics to yourself.