Rating System                        

A system that enables users to get any topics rated on a Web Application

 

SUMMARY

 

To develop a web application that can be used as a ratings platform that provides its users with multi-perspective benchmark ratings on items of various Topics.

 

TECHNOLOGIES

 

1.  GWT (Google Web Tool Kit)

2.  Eclipse 3.2 IDE for development, debugging.

3.  JBoss-4.0.4.GA as the web server.

4.  Programming Language: Java (jdk 1.5)

5.  Hibernate 3.0

6.  MySQL as the database

7.  Spring 2.0

8.  Open Flash Chart

9.  Ant for our build and remote deploy.

10. SVN version control for versioning and code delivery.

 

 

PROJECTS IMPLEMENTATION DETAILS

 

Following are the major requirements that we had to meet while developing this project:

Ø       Technical Requirements

1.      Develop the WebApps as an AJAX based application.

2.      Application should run in any J2EE complaint Application Server.

3.      Application should support any JDBC complaint database.

 

Ø       Functional Requirements

Web Application should provide the user the following functionalities.

System should enables its users to create topics for discussion and invite friends/family's to get their views/opinions on each of the items associated to the topic. When a user wants to get a topic rated, user should be able to create a topic, associate any number of items to a topic. User can also specify the different features of each item that the user may need to get rated. To accomplish this, system should provide the feature to make this each criteria as individual tags for the items. The system should provide a rating section, where users can come and rate different items. The system should provide the users two types of rating. Simple rating and detailed rating. In case of simple rating, the raters can rate all the tags of an item uniformly. In case of detailed rating, the users can rate each tag of the item individually. Once the ratings have been gathered, every user should be able to go back and see which item was rated best for each tag alone, or different tags in combination etc. Charts should be displayed to show up the ratings of each tag of the item. Search options should be provided for finding the items based on the tags contained in it or based on the topics in which those items are associated. In case of associating the items to a topic, drag and drop functionality should be provided to add the items to a topic.

 

Following are the solutions that we implemented to meet the requirements of the project

Ø       Technical Solutions

1.      We used GWT to develop AJAX Based application, since it enables to develop and debug AJAX applications in the Java language using the Java development tools.

2.      We used Spring Framework IOC and MVC Patterns.

3.                  Used GWT's RPC mechanism to communicate from client application to the web server.

4.      We developed the application using Java (jdk 1.5).

5.      Deployed the application in J2EE Application Server, JBoss. (jboss-4.0.4.GA).

6.      Hibernate 3 is used as the persistence layer so the application works with any JDBC complaint database.

7.      At the time of development we used MYSQL as the database.

 

System Architecture

 

Figure 1 shows the architecture diagram of this application. The application uses GWT to enable AJAX functionality to the presentation Layer. It uses the Spring MVC pattern for the

Controllers and also uses Spring IOC pattern for the Hibernate layer. GWT client side functionality makes use of the Remote Procedure calls to pass java objects between clients

and server applications.

 

 

 

      

Figure 1

 

 

 

 

Ø       Functionality Implementation

1.      Topic Creation

Screen shown in Figure 2 helps the user to create a topic for discussion. While creating a topic, user can give a name, description, sets the type and status and add an image icon for the topic. The user can also associate tags for a topic. The user can add the email addresses

of their contacts, while creating a topic, so that the updates for the corresponding topics

will be informed to those contacts.

Figure 2

The validation for all the input fields is done using GWT Listeners. Figure 3 shows the Ajax based Validation done to check whether the topic name already exists while creating a new topic. The Next Button in Figure 2 is shown as disabled. It gets enabled when the validation of all the input fields are passed.  Figure 2 show an auto completer which filters and list the existing tags in the system based on the letter entered by user. Users can select from these tags or type new tags. Auto completer is implemented using the keylisteners added to

the textarea. Add custom button can be used to upload custom images for the topics or the user can select the images from the customdropdown developed using GWT. Dropdown displays a set of images from which the user can select an image for the topic.

Figure 3

2. Item Creation

Image shown in Figure 4 helps the user to create an item. Users can create a name, description, type and status for each item. Users can use the Design Template to load images or videos for the item. Design Template provides different options like uploading images with description, videos like You Tube video, Google video, Personal video etc….

Editor section provides all the text editing options.

Figure 4

The validation for all the input fields is done using GWT Listeners. We used gwt-html-editor

to create the Design template and the editor sections. As shown in figure 5  Item creation also has the Tag AutoCompleter to add tags and email AutoCompleter to associate the emails of the contacts.

Figure 5

2.     Associating Items to Topics

Figure 6 shows the screen where the user associates items to topic.

User can search for items based on the tags or topics. User can search for items which contain a set of tags and those contained in the given topics. System provides drag and drop facility to select the items to be attached to the topic. The search items shown on the right side lists the items based on the search. From this list, the user can drag and drop the items to the left panel. When user clicks on the update button, those items will get associated to the topic.

 

                                                        

      Figure 6

 

Drag and Drop functionality is implemented using the Drag Drop API provided by the GWT.

 

4. Search Items

 

 Figure 7 shows the search items section. When user clicks on each tab, different search options are made available to the user. System list the items based on the search done by the user. For each item it shows the description, tags associated with it, topics which contain these items, and the name of the user who created the item. It also displays the average rating of the item. If the user adds tags in the search criteria, the average rating rating will be based on only the tags used in the search. It also displays the total benchmarks and views of each item. On mousemoveover of the username, a popup shows the current status of the user. When user clicks on the link Output Widget, it provides an iframe with the url of the current page, which the users can put in other sites.

 

Figure 7

 

The different tabs shown in the figure 7 is implemented using the GWT TabPanel.

The popup for showing the user status is displayed when mouse over event is generated by the mouselisteners attached with the label which shows the username who created this item. The user details are displayed using the GWT component Popup Panel. In order to provide search optimization, the search results are rendered using jsp, but the listeners are added using GWT.

 

5. Rating Items

                                                    Figure 8

Figure 8 shows the rater shown to the user for rating the items.  The screen displays all the tags of the item and the average rating for each tag is shown on the tag itself. The average rating of the item is displayed in the right section. There are two buttons provided Partial and composite to toggle between the partial rating and the composite rating. Composite rating is the average of the ratings of all the tags of this item. Partial rating is the average of all the ratings of the tags used for searching when the user comes to this page.

 

Users can do a simpleRating or a detailed rating using this section.

Simple Rating

If the user wanted to rate all the tags uniformly, user can use the option Simple Rating. When user selects the radio button ‘simple rating’ and moves the horizontal slider shown in the upper section, the selected value gets applied to all the tags which the user used for searching while coming to the rater section.  Rater provides a range of 0 to 10 for the rating values. User can also do a simple rating by clicking on the rating value shown in the upper right section. The rating value 5.7 is shown using an Editable Label component of GWT. So when the user clicks on it, it shows a textbox where user can enter the value.

 

Detailed Rating

 When user selects detailed rating, the users can rate each item individually. When you click on the arrow provided with each tag, a vertical slider rater gets popup for each tag.  Vertical slider provides a range of rating values from 0 to 10. In addition to rating, user has the option to add posts for each item to express their comments about the items.

 

6. Posting for Items

Figure 9 shows the section where user can post messages for items. It also lists all the messages posted by an user for each item. In each post message, it displays the post message, the details of user who posted this message, the tags of this item. Each tag displays the rating done by the corresponding user for this item. If a user wants to reply for a post message, user can click on reply button, it opens the reply box where user can enter his post message and save.

Figure 9

When user clicks on the reply button, the reply box is shown using the GWT Click Listener.

The reply box is coded as a div in jsp page. When user clicks on the reply button, system uses the GWT DOM API to make the reply box visible. When user clicks on it again, the reply box will disappear. The comment textarea is given a limit of 1000 characters. User can type only 10000 characters, System won’t allow the user to type beyond 1000 characters.

This limit is implemented using GWT keyboard Listeners.

7. Rating Charts

     We have developed charts to display the rating of items visually. For each item overall rating of the individual tag can be viewed by the user by on mouse over of the tags as shown in figure 10. The popup shows the breakup of the ratings done by different users for individual tags.

Figure 10

 Figure 9 shows the detailed rating of all the tags of each item.    

Figure 11

We used Open Flash Charts to implement the rating charts.

Advantages of using GWT