Ruby on Rails

Recently I needed to implement star rating system for one of my project I am working on.

If you are not familiar with a star rating system, its simply a method of voting using (usually) 5 stars in a row, which will change colour as you hover over them indicating the level at which to rate something. You may think a simple rollover would accomplish this but difficulty arises because as you rollover each star it should stay highlighted while you light up the next one and so on until the end of the row of stars.

If this doesnt make much sense to you then take a look at what we are going to achieve in this article. (I will leave the server-side coding to someone more knowledgeable and we will just concentrate on the visual aspects of making this effect happen. )

As you can see from the demo the stars stay hovered as you rollover each one. However, as mentioned earlier, the complicated part is that as each star is hovered it should stay alight while the next one is hovered so that if you start at the left side then 1,2,3,4 and 5 stars will be alight as you traverse the row. Usually a rollover will only be active on the anchor that the pointer is currently over making previous anchors lose their focus and thus their hover effect disappear.

 

Install the acts_as_rateable plugin.

Run the following from the root of your Rails app to install the plugin.

script/plugin install http://juixe.com/svn/acts_as_rateable
or
http://rubyforge.org/projects/rateableplugin/

Create the table(migration) to store rating into database

class CreateRatings< ActiveRecord::Migration</p> <p> def self.up<br /> create_table :ratings, :force => true do |t|<br /> t.column :rating, :integer, :default => 0<br /> t.column :created_at, :datetime, :null => false<br /> t.column :rateable_type, :string, :limit => 15,<br /> :default => “”, :null => false<br /> t.column :rateable_id, :integer, :default => 0, :null => false<br /> t.column :user_id, :integer, :default => 0, :null => false<br /> end</p> <p> add_index :ratings, [”user_id”], :name => “fk_ratings_user”<br /> end</p> <p> def self.down<br /> drop_table :ratings<br /> end</p> <p>end

Model

models rateable

I was trying to add a rating system for the model Picture. Yours can obviously be whatever you like but from here on out I’ll be using Picture. So add acts_as_rateable to your model.

class Picture < ActiveRecord::Base<br /> acts_as_rateable<br /> ...<br /> end

Controller to handle the rating

class RatingController < ApplicationController</p> <p> def rate<br /> @picture = Picture.find(params[:id])<br /> Rating.delete_all(["rateable_type = 'Picture' AND rateable_id = ? AND user_id = ?",<br /> @picture.id, current_user.id])<br /> @picture.add_rating Rating.new(:rating => params[:rating],<br /> :user_id => current_user.id)<br /> end</p> <p>end

Views

Create the partial /views/rating/_rating.rhtml

<%= number_with_precision(picture.rating, 1) %>/5 Stars</p> <ul class='star-rating'> <li class='current-rating' style='width:<%= (picture.rating * 30).to_i -%>px;’><br /> Currently <%= number_with_precision(picture.rating, 1) %>/5 Stars. </li> <li> <%= link_to_remote( "1", {:url => { :controller => “rating”,<br /> :action => “rate”, :id => picture.id, :rating => 1}},<br /> :class => ‘one-star’, :name => ‘1 star out of 5′) %> </li> <li> <%= link_to_remote( "2", {:url => { :controller => “rating”,<br /> :action => “rate”, :id => picture.id, :rating => 2}},<br /> :class => ‘two-stars’, :name => ‘2 stars out of 5′) %> </li> <li> <%= link_to_remote( "3", {:url => { :controller => “rating”,<br /> :action => “rate”, :id => picture.id, :rating => 3}},<br /> :class => ‘three-stars’, :name => ‘3 stars out of 5′) %> </li> <li> <%= link_to_remote( "4", {:url => { :controller => “rating”,<br /> :action => “rate”, :id => picture.id, :rating => 4}},<br /> :class => ‘four-stars’, :name => ‘4 stars out of 5′) %> </li> <li> <%= link_to_remote( "5", {:url => { :controller => “rating”,<br /> :action => “rate”, :id => picture.id, :rating => 5}},<br /> :class => ‘five-stars’, :name => ‘5 stars out of 5′) %> </li> </ul> <p>

A little RJS

Create the file /views/rating/rate.rjs

page.replace_html “star-ratings-block”, :partial => ‘rating/rating’, :locals => { :picture=> @picture }

This will replace the star ratings with the partial we created previously in order to reflect any rating changes made by the submission.

Render the partial in one of your views.

<div id="star-ratings-block"> <%= render :partial => “rating/rating”, :locals => { :picture => @picture } %> </div> <p>

This needs @picture(or whatver you’re going to be using) in order to function.

Remember to add the css and image

/* styles for the star rater */<br /> .star-rating{<br /> list-style:none;<br /> margin: 0;<br /> padding:0;<br /> width: 150px;<br /> height: 30px;<br /> position: relative;<br /> background: url(/images/star_rating.gif) top left repeat-x;<br /> }<br /> .star-rating li{<br /> padding:0;<br /> margin:0;<br /> float: left;<br /> }<br /> .star-rating li a{<br /> display:block;<br /> width:30px;<br /> height: 30px;<br /> text-decoration: none;<br /> text-indent: -9000px;<br /> z-index: 20;<br /> position: absolute;<br /> padding: 0px;<br /> }<br /> .star-rating li a:hover{<br /> background: url(/images/star_rating.gif) left center;<br /> z-index: 2;<br /> left: 0px;<br /> border:none;<br /> }<br /> .star-rating a.one-star{<br /> left: 0px;<br /> }<br /> .star-rating a.one-star:hover{<br /> width:30px;<br /> }<br /> .star-rating a.two-stars{<br /> left:30px;<br /> }<br /> .star-rating a.two-stars:hover{<br /> width: 60px;<br /> }<br /> .star-rating a.three-stars{<br /> left: 60px;<br /> }<br /> .star-rating a.three-stars:hover{<br /> width: 90px;<br /> }<br /> .star-rating a.four-stars{<br /> left: 90px;<br /> }<br /> .star-rating a.four-stars:hover{<br /> width: 120px;<br /> }<br /> .star-rating a.five-stars{<br /> left: 120px;<br /> }<br /> .star-rating a.five-stars:hover{<br /> width: 150px;<br /> }<br /> .star-rating li.current-rating{<br /> background: url(/images/star_rating.gif) left bottom;<br /> position: absolute;<br /> height: 30px;<br /> display: block;<br /> text-indent: -9000px;<br /> z-index: 1;<br /> }

Image for your CSS