Skin Spider : Rating Videos And The First ColdFusion Custom Tag
Posted November 14, 2006 at 8:42 AM by Ben Nadel
To learn all about Skin Spider, click here.
To view the most updated application, click here.
To view the current code base, click here.
As a bell-and-whistle type thing, I wanted to provide a really easy way for users to rate the video clips. I also wanted the rating of the video clip to be known without having to go the "Edit Video" page. To kill both of these birds with one stone, I have created the applications first ColdFusion custom tag, videorating.cfm.
Before we get into that, though, let's talk about the Application Programmer Interface (API) that I have created to rate videos. I am not very experienced in AJAX-type stuff so I am not sure of the best practices for calling the server from the browser. As a first stab, I have set up the api.cfm ColdFusion template. If you take a look at this page, you will see that it checks the Action value in the REQUEST.Attributes object and then performs what ever actions are required.
In our case, we are telling the api.cfm that we want to "rate_video". The api.cfm then params the ID and RATING Attribute values (which are expected in the URL) and uses those to update the video rating via the application's Database Service. This action provides no feedback. There is not true/false flag returned. I have envisioned this page as an AJAX port to the application so at some point it will have to return data, but we will do that when it is required. For video ratings, I have decided that no feedback needs to be provided - even if an error does occur, this is NOT mission critical information and it is not the end of the world if a false-rating is displayed graphically for a single page load.
The custom tag, videorating.cfm, provides an interface for calling this API in a centralized, easily maintainable way. If you look at videorating.cfm, you will see that it merely outputs a paragraph with the video rating scale 0 - 10. For each item (an HTML anchor link) of the rating scale, clicking on it will call the Javascript method SetVideoRating(). That's all this custom tag does.
What's important to realize here is that this ColdFusion custom tag is defined in one place and used in both the search.cfm page and the favorites.cfm page. This means that if the way in which rating a video every changes, all we need to do is change the ColdFusion custom tag and those changes will be propagated to all ColdFusion templates that import and use it. We have now protected the application from this point of variation. Protection from variation is really the goal of all smart programming.
In order for the videorating.cfm ColdFusion custom tag to work, it requires the Javascript method SetVideoRating(). This is our first Javascript method. To define it, I have created a custom.js Javascript file and linked to it in the application's standard header, _header_standard.cfm. If you take a look at the code, you will see that the Javascript method just loops over the links in the rating module, turns them all off, and then turns on the one that the user clicked. This is just the visual representation. To make sure that the Database lines up with what the user is seeing, this method then pings the API (api.cfm) requesting that the video rating be set.
This was a place that I was planning to use AJAX, but I have decided that it would have been overkill. AJAX is very cool, but it does have overhead and it is a little complicated. We want to keep things as simple as possible for as long as possible. To that affect, I have decided that pinging the api.cfm using an Image.src hack is much easier and faster than dealing with an AJAX request. And, in the end, since we are not providing any feedback for this call, it accomplishes the same exact outcome.
This ColdFusion custom tag is imported for use on both the search.cfm and the favorites.cfm pages. Taking a look at the code, you can see that the custom tag is imported with a prefix at the top of the template and then used later down. Remember, when using CFImport, each template that uses that custom tag must have its own CFImport statement. This might make it seem like using CFImport over using the old school "CF_" notation makes it harder to use, but, in fact, CFImport is a smarter choice. I don't want to get into it now, but CFImport allows us to provide a path to the desired tags and makes logic grouping possible. In the long run, it's much more powerful that "CF_" or CFModule.
