Still not convinced? Here are some additional benefits of this architecture:

Benefits of the Architecture

1. Unlike an ASP.NET UpdatePanel we only pass what we need; we only receive what we need. We don’t pass ViewStates, in fact we don’t even have a ViewState. We also don’t pass entire HTML chunks and receive HTML chunks we don’t use. For more on this; read: Why ASP.NET AJAX UpdatePanels are dangerous.
2. By using jQuery to call the web service directly, we’ve eliminated over 100 KB of JavaScript and three extra HTTP requests that's included when you use ASP.NET Ajax.
3. Less dependencies – because all our code is simply xHTML we could switch to a PHP or a Java backend and none of our code for the UI would have to change. That's right, there are no server-controls; that means no GridViews, no Repeaters, no ListViews, nothing that uses runat server will be found on the page. Not even a ScriptManager.
4. Usability – We can create RIA interfaces AND maintain usability, giving us the best of both worlds.
5. Cross-Browser friendly – We use nothing but xHTML code and jQuery which works across browsers.
6. The entire presentation for the UI is done via CSS. Change the CSS and the entire UI can look different.
7. We maintain a 'Separation of Concerns' - this means we have 3 distinct and wholly separate code bases. A content or HTML level. A presentation or CSS level and a behavior or JavaScript level. We don't have code mixed together in a web-page jambalaya.
8. Switching architectures from Web Forms to MVC is a breeze.

Hopefully you are salivating at these benefits enough to decide to get your feet wet and follow along.

In this article will be leveraging these technologies to build a grid (or what looks like a table). Later on, in future articles, I will then show you how to implement sorting, paging and filtering on the grid. I have divided this article up into four sections: 1. Sever-side code (ASP.NET). 2. HTML 3. jQuery and lastly CSS.

ASP.NET

In this article I will be using LINQ to SQL to query the database and return a collection. LINQ to SQL allows you to model a relational database using .NET classes. You can then query the database using LINQ, as well as update, insert and delete data from it. LINQ to SQL fully supports transactions, views, and stored procedures. If you're not familiar with LINQ then I will refer you to these articles: Using LINQ to SQL (Part 1) and LINQ to SQL - 5 Minute Overview.

The goal of this article is not to teach you LINQ. But I will say that if you are not using LINQ and you are still using a DataReader or DataSet to access your data then shame on you. Simply put, I believe LINQ is the coolest technology Microsoft has come out with in recent years.

And the best news is, it's EASY to use. Let's look at the code:

The first thing we do is create a class called CourseReservations. This class contains all the properties we will need to create our grid on the client. In other words, these will become our columns. The next part is our LINQ statement. This code uses LINQ query syntax to retrieve a sequence of GolfReservations for a given course. Note how the code is querying across the GolfReservations / GolfCourse / Aspnet_User / GolfUser relationships to retrieve all the data we need from our tables, and we didn't have to write any SQL filled with JOINS to do it.

We then return a list of CourseReservations. What's important to note is that our list will get automatically serialized to JSON. How fantastic is that? Before we move on, also note the name of our method: GetGolfCourseReservations(). This is what we will call via Ajax using jQuery.

HTML

That's right, just a simple unordered list with an id of "reservationsList" and class of "stripedList". We don't use any controls, nothing with runat="server" will be found on the page. This way we don't have any ViewState taking up load time, nor do we have Microsoft inserting JavaScript into our page without our consent. Our page, at least on the front-end, is devoid of ASP.NET or any other language. Nothing but pure HTML. If we ever have to port to PHP or JSP we wouldn't have to change a single thing on the UI side.

jQuery

Let's look at the jQuery code now. Bit by bit.

Notice the SendAjax() method's signature. It takes three parameters, the first urlMethod is the path to the Web Service followed by the name of the Web Method. It should look something like "webservice.asmx/webmethod". The second parameter jsonData will be exactly that, your JSON data. More on this later. The final parameter returnFunction will be the function you wish to call after the return trip from the server.

The $.ajax() method performs an asynchronous HTTP (Ajax) request. You can read all about it here, but for now, just know it's the liaison for the client / server relationship; or the Ajax call.

We will use this light, but powerful SendAjax() method over and over again each time we wish to go to the server.

This function is simply used to stripe the rows. Every other row will be colored differently in our grid. You pass it a list, it then finds all the list items in that list and removes a class. It then adds a class to all the even list items. The reason why I removeClass() from all list items first is so that if you ever add or remove list items (dynamically) to the grid you don't get them all messed up colorwise.

If you are new to jQuery then you need to start by understanding $(document).ready(). You can read all about it here. But the bottom line is that everything inside this method will load as soon as the DOM is loaded and before the page contents are loaded. This is extremely efficient because we don't have to wait for images or content to load, just the DOM elements. Again, if you are new to jQuery start by understanding the $(document).ready() method.

We are telling it to call the method GetGolfCourseReservations() as soon as browserly possible.

The three lines in the GetGolfCourseReservations() method will become very familiar to you in this methodology. Recall that urlMethod is the path to your web service and your web method. You do remember our .asmx file contains a web method called GetGolfCourseReservations? Good. The next line with jsonData is the JSON that we are passing in. Note that if you are not passing any data, as we are in this case, you must still have the empty curly brackets. Finally, the third line is our call to SendAjax() method. Notice the third parameter: ReturnGetGolfCourseReservations. This is the method to be called on the round trip from the server. Conveniently you will find this function one line down. I always keep to this standard.

In our ReturnGetGolfCourseReservations method we loop through the returned JSON and create our rows or list items. We then drop our list items into our unordered list and lastly call our method to strip the rows.

TIP: Two tools that are indispensable for this methodology are Firebug and this JSON checker. Without Firebug you will not get far. It allows you to see all your Ajax calls, the post, the request and the returned JSON. Get it and learn it.

CSS

Lastly, let's look at the CSS involved to make our grid look pretty. Do note that we could have used a table instead of a list very easily. It's your choice.

Most of the CSS is pretty straight forward; we stylize our list-items and use spans as our cells. The classes .c1, .c2 ect. allow us to assign a width to each column.

The Take Away

What I really want you to take away from this article is all the benefits gathered from this methodology. When I build Web-based apps the thing at the front of my mind is speed. It's all about speed. Nobody likes to wait for anything these days, on the web or off. This is about as fast as you can do things. In addition, we have nice clean code that adheres to the separation-of-concerns. On the front is just good old HTML, probably the first thing you learned when creating websites. On the back-end is our Web Service that does our actionable request: get, save, update and delete. That's all it does, it knows nothing about the UI, unlike a typical ASP.NET page with its CodeBehind page that is all aware of the UI and talks to it. If we ever had to change over to an Apache server and use PHP we wouldn't have to change a thing on the front-end, simply our methods on the back-end would change.

We allow our CSS file to control the way the entire application looks. Once again, compare this to many typical ASP.NET apps that use Web Controls and want you to set presentation properties either in the .aspx page or the CodeBehind page. Yuck. Never do that.

Lastly, not only is our code fast and clean, but it's also lean. When you get good at this methodology there is usually a lot less code. Less code is always a good thing.

Before we get into this, you will need to have PHP 5 installed and MySQL 3.23 or higher. PHP 5 allows for greater implementation of OOP (Object Oriented Programming) than its predecessors.

Step 1: Analyze the Project
The first step is always the most crucial, so it should take some thought: What do we want to achieve, and how detailed do we want to get? All of these are questions that should be asked prior to any coding or any development work.

What do we want to achieve and how detailed should we get?
In this project, we want to use Paul's CSS technique to build a fully functional rating system. Ideally, one that does not require any administration. Everything is automated by pasting a segment of code written in PHP onto a page.

Secondly, we want to ensure that only one IP Address can rate each unique item. Therefore one person isn't repeatedly clicking on '5 Stars' to throw off the rating average. Now granted, ensuring a single IP Address is used in rating isn't fool proof. As those with dial-up connections will likely have a different IP address every time they reconnect, we have to remember our first goal, "does not require any administration!" No administration means no username and passwords to be assigned.

What about cookies? Glad you asked; I did think of using cookies to do the tracking, but I figured that would be much easier to overcome than basing it on IP address. It has become easier to clear the privately stored data in our modern browsers and thus cookies could easily be foiled.

Our third goal is to adequately show the new average rating when clicked without reloading the entire page. To do this requires the use of AJAX (Asynchronous JavaScript and XML). In our situation, we will be using more of AJANVP (Asynchronous JavaScript and Name/Value Pairs). XML can become very bloated and in something like this it's simply unnecessary. I also considered JSON (JavaScript Object Notation), but again, that has too many dependencies and further complicates the system requirements for this task. Remember, we are going for no administration and fully automated.

Finally, we want each user to be able to add new ratings without having to insert anything into a database table. Simply put, the HTML components built should derive the rating data for us. I'll clear this up later, but you should be excited to know that when we are done you will only need to copy and paste code and the new rating entry will be ready for use. Nothing more is required.

Step 1 Recap:
In step 1, we answered the questions "What do I want to achieve and how detailed do I want to get?" The answer can be summarized in these points.

1. Use Paul's CSS Star Matrix technique.
2. Log the Ratings by IP address to ensure no IP address can rate the same item twice.
3. Update the Rating seamlessly for the user to see the new average rating.
4. Make it easy to add new items to rate.

Step 2: Designing the Database and Table
Step 2 is designing the storage facility to keep our information. There are a few questions to ask yourself when designing a table like this. What information do you plan to hold in it? How do you plan on using the data?

What information do I plan to hold in the table?

Below is the list of the data we plan to keep track of:

• Item Name
• IP Address
• Rating
• Date Rated

There won't be much use immediately for Date Rated, however, it could be used in the future to build any reports on when each item was rated.

How do you plan on using the data?

Each item you plan to keep track of should ALWAYS have a use, whether it be immediate or in the future. For example, Item Name, IP address, and Rating will all be used immediately within this application. The Item Name will describe the item being rated, the IP address is the IP address of the person rating the item, and Rating, is course their rating for the specific item.

Date Rated is there for a future use. It has no immediate use, primarily because it is outside the scope of this project, but as I mentioned before, it could be used to generate reports in the future.

Step 2 Recap:

Here we defined what we will be tracking, how it will be used, and whether it has immediate or future use. Item Name, IP address, and Rating all have immediate use -- only Date Rated is considered future use.

Step 3: Building the Database and Table
You can opt to create a new Database or use an existing Database; the option is yours and will have no impact on this application. For those wanting to create a new Database, you can use the following MySQL query (replacing the word 'ratings' with your database name):

CREATE DATABASE 'ratings' DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

Nothing special about the Database creation, as all of the little details are found in the table. The table will hold all of the information we described in Step 2 above.


CREATE TABLE `rating` (
`item_name` VARCHAR( 20 ) NOT NULL ,
`ip_address` VARCHAR( 15 ) NOT NULL ,
`rating` TINYINT( 1 ) NOT NULL ,
`date_rated` DATE NOT NULL ,
PRIMARY KEY ( `item_name` , `ip_address` )
) ENGINE = MYISAM ;


Notice that the primary keys are "item_name" and "ip_address". This is to help ensure that no "ip_address" can be used to rate the same "item_name". Also notice the lengths of each item. Item Names are not allowed to be more than 20 characters. If you want to have Item Names that are longer than 20 characters, you will need to alter the above statement with the length you want to use (up to 255).

Step 3 Recap:
We defined our Database and table so the rating information can be stored. We set the "item_name" and the "ip_address" columns as our Primary Keys to ensure only one IP address can rate each Item Name. We also defined the max name length for Item Name as 20.

Step 4: Writing our Rating Class
Strong OOP skills are something to never overlook, as they provide you with clever ways of extending your work in the future, plus they focus entirely on being reusable. With that said, you may remember my previous articles "OOP in PHP from a .NET OOP Perspective: The Error Class" and "OOP in PHP from a .NET OOP Perspective: The Database Class." These two articles are going to be used in this project as well. The Error Class will handle any Database errors we might have, and the Database class will handle the Database connection, Query Execution, etc.

To go any further, you will need to download the following file: RatingSystem.zip

After it has downloaded, extract the contents to your computer. You should see a 'RatingSystem' folder. This folder is our example application, go ahead and browse to the RatingSystem > classes folder.

Open the rating.class.php file in any editor. This is the class that will be used to output the rating information to the page and record a rating by a user.

Now I won't get into all of the code here (you'll have to read those other articles), but I will point out a few things.

1. The first thing you should notice is the OutputRating method. This method is what loads the CSS technique written by Paul. If you look at lines 31 and 44, you will see his technique used. I also made a few modifications to it (of which I hope he does not mind, but I will describe those later).
2. Next find the RateItem method (approximately line number 66). This method writes the user's rating to the table. So if you changed the table name, you will want to update the table name in this method as well.
3. On line number 111 is the CalculateAverageRating, this method calculates the average rating of an item within the MySQL statement. Again, if you choose a different table name than described in this article, you will want to update this statement to reflect that change.
4. Finally, I want to point out line number 170, the CheckRatingsByIp method. This is the last place you may have to update the table name if you did not use 'rating'.

Step 4 Recap:
I provided you with the files to run this rating system and gave key pointers on where the table names may need updated if you opted to use a different name.

Step 5: Setting the Database Connection

To set the database connection open the "include.all.php" file in the "classes" folder. Notice the line:

Replace "ratings" with your database name, username with your database username, and password with your database password.

Once finished, save the file.

Step 6: How to output the Rating information to your page
To display the rating information on your page, you will need to do four things.

1. Place the following snippet at the top of your file (for an example, look at 'rating-example.php' in the RatingSystem folder).
   PLAIN TEXT
   PHP:

   1. require_once("classes/include.all.php");

2. Next you need to have the following in your <head> tags:
   
<link type="text/css" href="styles/rating.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/rating.js"></script>


   This code is what sets the stylesheets, AJAX calls, etc. within your page.

3. Next, find the location you want to output your Rating Stars and paste this code:
   PLAIN TEXT
   PHP:

   1. $ratingData = Rating::OutputRating('demo');
   2.  
   3.   if (Error::HasErrors())
   4.   {
   5.     echo Error::ShowErrorMessages();
   6.     Error::ClearErrors();
   7.   }
   8.   else
   9.   {
   10.     echo $ratingData;
   11.   }

4. Finally, end the page with the following code:
   PLAIN TEXT
   PHP:

   1. Database::DeInitialize();

Replace the word 'demo' with the name of your Item. If no errors occur, you should see the 5 stars not lit up when you run the page, otherwise, you will see the error messages that occurred.

Step 5 and 6 Recap:
In Step 5 and 6 we entered the Database connection information, and we pasted our code to show the Rating System for a specific item.

That's it! There isn't anything else needed to get this working. All you have to do is copy the same snippet of code wherever you want it to appear on your page. You can have one item to rate on a page, or you can have 10. Just give them all unique IDs and they can all be on the same page.

Even though you now have a working Rating System, allow me to give you one last walk through of this system.

Crash Course Walk-Through
This walk-through will be based on the "rating-example.php" file from the top-down, not necessarily in processing order.

When your page is loaded, the "classes/include.all.php" file is loaded which establishes your Database connection, initializes the Error class, and allows the Rating class to be used.

Following this, the StyleSheets and JavaScript files are loaded to ensure the Rating System outputs properly and the AJAX capability is setup.

Next the Rating::OutputRating is called to show the rating details of 'demo'. If an error occurred our error messages are shown, otherwise, it will display the stars lighting up the current rating.

Once the processing is finished, the user will see the page generated.

When the user hovers over a rating that they have not rated before, the stars light up appropriately.

Finally, when the user clicks a star, it is recorded and the average rating is shown to the user with green stars. Note that even if the user hovers over the stars, they will not light up because they have already cast their vote and rated that item.

Now this is where I altered Paul's code. I created a new class called 'rated' (found in the "styles/rating.css") that does not contain the hover effect. This way if the user already rated an item, they do not the see the hover effect for the item they rated.

When the user clicks on a star, an AJAX event is sent, the rating is calculated, and then the information is returned in a Name/Value pair. For example, it might return: "item=demo&classes=rated threestar". Simply put, it means the user clicked on the 'demo' item, and the new classes to use on that item are 'rated' and 'threestar'. The class "rated" defines the user has rated that item, and no longer provides the hover effect, and the class "threestar" is the average rating for the item, so it is to light up three green stars.

Conclusion:
That ends the task of providing a functional Rating System using Paul's CSS Star Matrix Pre-Loaded technique. I want to thank Paul for the excellent CSS work, and hopefully I have done it a bit more justice by adding the back-end functionality.

Feel free to leave any comments, remarks, questions, etc. as I will be happy to answer them.

It's with great pleasure that I introduce Vinnie to the Search-This team. Sure, I had to put a gun to his head, but that's the Italian way of doing things.

You may work hard, but no one works harder than Vinnie Garcia. The man is approaching the 20,000 post mark over at the SitePoint forums! And it shows, there's not too many areas in the web world that Vinnie hasn't at least dabbled in. So when Vinnie speaks, you're gonna wanna listen.

Enjoy Vinnie's bio below:

User Name: vinnie

• childhood ambition: becoming a cartoonist
• fondest memory: not sure
• favorite music: anything with a good beat; mostly rock, electronic, and hip-hop
• retreat: the beach or my headphones
• proudest moment: getting married
• biggest challenge: being married
• alarm clock: don't use one, I tend to wake up early anyway
• perfect day: sitting by the pool doing nothing at all
• first job: warehouse assistant for a medical supply company
• indulgence: kickball
• favorite movie: lots of them, most recently: Borat
• inspiration: art, nature, architecture, and most importantly loved ones

Matt's passion has always been as a coder. Now that Matt has graduated college and become a full time software engineer there's not many languages he hasn't worked with.

Look for Matt's, or rather cpradio's first article this Monday titled: "OOP in PHP from a .NET OOP Perspective" - should be a good read.

I can't really welcome cpradio as a new member to the team, because he has always been part of the team. So just enjoy his bio below.

User Name: cpradio

• childhood ambition: to be a software developer, seriously, it was...
• fondest memory: looking at my old code and just realizing what an idiot I was back then
• favorite music: anything but elevator music, seriously, how do you not fall asleep to elevator music?
• retreat: hiking in the smokies
• proudest moment: three weeks of hammering an application, countless thankful users
• biggest challenge: writing quote engines for an insurance company and making it easy to maintain
• alarm clock: 6:30 AM on a good day, 4:30 AM on implementation day (project going to production)
• perfect day: my wife told me it was her wedding day, err... our wedding day.
• first job: PetsMart stocker/fork-lift driver
• indulgence: hard drives, I have 10 (in one PC) equaling 1.8 TB but that is not enough
• favorite movie: geez, I can't just pick one, that would be unfair to the rest of them
• inspiration: knowing knowledge has no limits other than a person's refusal to continue learning