Article
About the Author
Kai Koenig
Kai is a New Zealand-based Solutions Architect. Originally from Germany, he is the co-founder of Ventego
Creative, a web consultancy specializing in Adobe technologies. Kai posts regularly to his blog, Blog In Black.
Five Stars! Add a Rating Widget to your ColdFusion App
ColdFusion 9—The latest version—has just recently been released as a beta preview on Adobe Labs. ColdFusion is Adobe’s server-side platform for web application development and we’re jumping on this opportunity to use it in combination with the brand-new ColdFusion Builder. We’ll develop a rating widget, so that you can provide your users with the option to rate content on your web site. The source code for this article is also available for download.
Once you’ve read the article, why don’t you test your knowledge with our quiz? If you’re one of the first 200 to complete the quiz, Adobe will send you a printed copy of the Adobe ColdFusion Evangelism Kit.
Before we start let me say that this tutorial assumes that you’ve installed a stand-alone ColdFusion 9 server on your local development machine in a non-J2EE deployment and that this server is running on port 8500. If you have set up your server in a way to use a locally installed HTTP server like Apache or IIS, you might need to place the files I’m mentioning in a different location on your hard drive, as well as change all port references to port 80.
Setting Up The Database
All right, let’s start! Our task is to add a rating widget to a ColdFusion application or page. Therefore, we need to have a ColdFusion application first, and the easiest way to achieve that is by creating a few database tables to store content and ratings. If you’ve followed Kay Smoljak’s tutorial on building a URL shortener application, the easiest way is to just add a rating table to the existing Derby database. You can do so by executing the sql/db.cfm file of the download package for this tutorial.
For those users of SQL Server, we aim to keep this tutorial as straightforward as possible. So rather than dive into the depths of database schemas, here’s a screenshot of the schema diagram and how the two tables are related.
Database schema for content and rating table (View larger image in a new window.)
SQL scripts that create the two tables on SQL Server 2005 or 2008 are part of the download package (you’d have to create the Content table first, as both scripts assume there’s a database named "sitepoint" already existing on your SQL Server). Keep in mind that this is just an example; the column definitions of the Content table are arbitrarily chosen and the only requirement is really to have a unique content identifier that can be tied into the rating table to associate both entities.
Importing the Project into ColdFusion Builder
In Kay Smoljak’s and my article “What’s new in ColdFusion 9”, we’ve discussed a variety of the new features in CF9. Among those is the aforementioned ColdFusion Builder. The code samples for this tutorial come as an exported CF Builder project and can be imported into your own project using the import wizard in the File menu of CF Builder. The image below shows the project’s file and folder structure.
CF Builder project structure
Displaying the Content
The first file we’re going to look at is index.cfm. Let’s pretend this is the main application file that’s supposed to query and show the content:
...
<cfscript>
oContent = CreateObject("component","nz.co.ventego.sitepoint.Content");
data = oContent.getAllContent();
</cfscript>
<body>
<cfoutput query="data">
<h3>http://#cgi.server_name#:#cgi.server_port#/URLS/?#data.shortlink# (id: #data.id#)</h3>
<p>(#data.link#)</p>
<p>
<strong>Do you like this content? Why not rate it...</strong><br/>
</p>
<br/><br/>
<hr/>
</cfoutput>
</body>
...
The top <cfscript> block instantiates a CFC (ColdFusion Component) and calls the method getAllContent. The method executes an SQL query against our database and retrieves a list of all Content entries, together with the amount and the average value of ratings (we’re allowing users to pick a score between one and five stars):
SELECT C.id, C.label, C.text, C.link, C.shortlink, AVG(R.rating) as average_rating, COUNT(R.id) as number_of_ratings
FROM Content C
LEFT JOIN Rating R ON C.id = R.contentId
GROUP BY C.id, C.label, C.text, C.link, C.shortlink
The resultset of this query is stored in the variable data on the page and can now be used there. The <cfoutput> tag’s query attribute loops over the query resultset and for each row of the query, the HTML content from <h3> to <hr> is created, as shown below.
Database output (View larger image in a new window.)
