FREE! Building A File Upload and Rating Application Support

Following on from his free tutorial on building a Content Management System with Server Behaviours and the Advanced HTML Editor, Matt shows how build a site that allows users to upload their own files, and rate those files. There's also a password-protected moderator's area so that you can be sure that all files can be checked before being made "live".

This free tutorial is suitable for beginners and uses only built-in Dreamweaver server behaviors and the DMXzone Pure ASP/  ASP.NET Upload Extensions! The uploading element is also PHP compatible, but the "rating" system doesn't work with PHP since it has no Command behavior to do the rating with.

Paging Through All the Records

Highlight the table row you have created and, now it's time to make sure that all the songs are displayed: in the Server behaviours panel, create a new Repeat Region to show ten items at a time from the songs recordset.

With these behaviors added, your page should look something like this:

Underneath the table of songs, add some text "previous" and "next"

Highlight the "previous" text and in the server behaviours panel click + > Recordset Paging > Move to Previous. A dialog will appear like the one below:

This lets us know that the link text will be "previous" and the Recordset it pages through is the songs recordset. With the server behavior you just added highlighted in the server behavior panel, click + > Show Region > Show if Not First Record. This means the previous link won't appear if we have no previous page to go to.

Repeat this procedure with the "next" text. This time use a Move to Next behavior and a Show if Not Last Record behavior. Save and close the finished page. It's done!

Building uploaderrating.asp

Open up the uploaderrating.asp page. Build a basic layout like the one below:

The link is simply a basic link back to the uploaderview.asp page.

Go to the application panel and add a server behavior of type Command. A command is a piece of SQL that will be executed in our database when it the page loads (unlike server behaviours, which only go off when we submit a form). We'll use our Command to update the rating with the input from our user.

In the Command dialog choose the Jazz connection and the command type Update. Name your Command something suitable like updaterating. Some basic SQL will be generated, which you'll need to amend to the following:

    UPDATE dbo.cms_uploads
    SET rating=(rating+varNewrating)/2
    WHERE id=varTargetid

This will update our uploads table, setting the current rating equal to an average of the current rating and our user input, where the id is the same as the one provided by the user. We've used the variables varNewrating and varTargetid in place of the actual user input, which we need to grab from the url the user clicked on in the uploaderview.asp page.

This is the hardest part of the whole site to understand, so take a deep breath … here goes!

We get this by adding variables to the list below the query box:

Hit + and in the name area type varNewrating and in the Run-Time Value column put Request("newrating"). This will get the newrating part of the url and turn it into the variable we need for the SQL. Do the same with varTargetid and Request("id").

Click Ok and close the dialog.

The Command will run when the page is loaded, but we need to provide some feedback to the user to confirm the update has taken place. To do this we need to create some new bindings. First we need a recordset containing the updated rating and item title:

For this we create a simple recordset that grabs the title and rating for the item we're rating (as specified by the id value) from our table. Call this recordset item. We'll also need an additional binding of a Request variable with the name newrating, so that we can add the rating the user gave onto the page.

Using these new bindings, and the Insert button on the bindings panel, alter the text of the page so that the defaults are replaced by our recordset and url variable information. The page should look something like this:

Save and close the page. We've finished the part of the application that our users see.