September 30, 2008 by romuald.halasz

This time, we’ll do something a little bit different. I want to explain an idea based on a project.

The project was, in fact, a web directory for all the companies in my city. Each company had an image attached, and a link (besides the normal stuff, like name, phone number etc.). This was the basic package, meaning that a company could appear on the site for free. However, there was an option for customers which wanted to pay, in order to get their name faster to the users of the site… Because, really, this was the main idea to begin with.

So, besides the above-mentioned items, a paying company could add 3 photos more (like a small gallery), a wide description, and…oh yes, “sponsored link” treatment. What this means is that, if a user searches for something within the page, the first results would be the ones with a paid account. Pretty nifty, if I may say so myself.

And here is where the main discussion starts. How to go about implementing a sponsored links search system. As I’m sure you all are guessing there are many ways to do this, so I’ll only be talking about one.

For this, I used PHP, MySQL and a small bit of Javascript. We won’t focus so much on the first two, because it should be very easy implement a system that adds/modifies/removes items from a MySQL database using PHP for sending queries.

I will say that each item had a field to determine if it is sponsored or not, a simple, boolean (true/false) field. For the search system I used Sphider. It is a very nice search script, which crawls a site and then indexes the inner pages, based on keywords. Of course the tricky part was to modify the script in order to recognize the pages with a paid account. That means linking a search result with the MySQL database in order to determine its status.

With that out of the way, the only obstacle left was to display the sponsored links first. That was a challenge because the database didn’t make a difference between a paid and a free account (except for that certain field), and a “SELECT” query would return all the items regardless of their status.

And now, on to the final part of the story. For such a vast introduction, I know you would expect for an ending to match. But I have to say right from the start, that it’s a simple idea, but works really well in this situation. Sphider returns search results in the form of an array, which can be parsed in order to display the results. This was of great help, because each result can be manipulated individually. That means they can be styled or whatnot…but in this case they can be displayed as sponsored links, if that’s the case.

So, how do you display the sponsored links at the top of the page, even if they are at the bottom of the database? Easy:

You make a container <div> before the results and append the sponsored links to it. That way, they will be on top regardless of their previous order. Another simple but very effective concept. Unfortunately I can’t post any source code this time because I don’t have it anymore…but I have a small script which shows this concept:

<div id="div1" style="height:100px; width:300px; border:1px solid red;"></div>
<div id="div2" style="height:75px; width:250px; border:1px solid blue;"></div>

<script language="javascript">
var el1 = document.getElementById('div1');
var el2 = document.getElementById('div2');
el1.appendChild(el2)
</script>

That might not be much, but if you ever had to do something similar, I have no doubt this article was at least a little bit helpful. So, I hope you enjoyed reading this, because when I searched for some hints on this topic, I didn’t manage to find any out there.

Posted in: Javascript