[Solved]-Best Practices: How to best implement Rating-Stars in Django Templates

5šŸ‘

āœ…

If received some interesting answers on the django-users mailing list:

by Mike:

Well you can create a widget, I like a seperate rating model myself. That
collects the value and then adds that to a total and creates a score or
average. The model stores the total votes and the total score, which I divide
and get my average, (I do the math in the view). Adding it to other models
with a foreign key relation. Enforcing that users vote only once is rarely
enforced outside of the current session or cookie lifetime. If you want it
persistance, Iā€™m notfgv6gw33TT sure off the top of my head what is best for
this, but would require only registered users vote.
Now, you just display the rating form, I would do it as a template inclusion
tag and put the tag in my templates. This tag has the basic submit form, the
form itā€™s self is two fields, with a select box (I went simple this way) and a
hidden field labeled next that points back to this page, that I can redirect
to. When the user submits, in my views to handle the forms action, I just
increment the votes and total score and redirect back to the page the vote was
taken on. This is using the traditional submit button, posting the form to a
url, returning a full view.
If you do something with javascript that illuminates the number of stars for
the rating and click on the stars to submit, here you might want to post it as
json object using xhr request, update the view and return a json object with
the updated rating values, if itā€™s a 200, update the page with the new values
after voting (returned with the 200). If itā€™s a 500, deal with the error,
letting the user know, there was a problem voting and reset the stars.
This is what I do, or would do in your position, if anyone has a better idea,
please speak up.
Hope this helps.
Mike

by Ethan:

I actually just did 5-star ratings for a project Iā€™m working on, and have
been trying to figure out if I have anything reusable worth releasing as a
package (and trying to find the time to figure that out..) Iā€™ll outline
what I did and what I used to do it.
I used django-ratings[1,2] for the backend and hooked up its RatingField to
my rateable models.
I like jQuery, so for the frontend I used the jquery-star-rating plugin[3,4]
as a base. It turns a collection of radio buttons into a star widget. I
havenā€™t looked closely at the implementation but I think itā€™s basically
using the same CSS technique described in your link. To get started you
just need to include its JS and CSS and add class=ā€starā€ to the radio
buttons in your form.
I then just wrote some view code that sends the request data from the radio
buttons to django-ratings. Super simple stuff, just used the django-ratings
RatingManager API and handled the exceptions it throws ā€” Iā€™ve pasted the
snippet from my code at [5]. (Iā€™m using a somewhat old version of
django-ratings b/c I havenā€™t had the time to upgrade; it might look a little
different now, Iā€™m not sure.)
Finally, I wanted two more things:
1) If a user has already rated an item and views the ā€œrate this itemā€ form
again, the ā€œstar widgetā€ should be preset with the userā€™s previous rating,
instead of just showing five blank stars. I realized the easiest way to do
this was from the client side: an onload event that simulates the user
clicking on the star he already clicked on. My view and template code for
that is at [6]; I just figured out the HTML formats that jquery-star-rating
sets and expects, and clicked on the appropriate star for the userā€™s
existing rating.
2) When viewing the item, usersā€™ ratings should show up as non-interactive
stars, instead of as numbers. I wrote a dumb-as-nails template filter
designed to take a number (the rating) and return a bunch of star images.
Again, I just used the HTML formatting and CSS classes from
jquery-star-rating. My code for this is at [7].
I was thinking itā€™d be neat to put some of this in a django-form Field that
renders the radio buttons and triggers jquery-star-rating all in one go, and
handles the submission to the django-ratings backend. But I havenā€™t had a
chance to figure that out yet.
Anyway, hope this helps,
Ethan
1 http://github.com/dcramer/django-ratings
[2] http://pypi.python.org/pypi/django-ratings
[3] http://www.fyneworks.com/jquery/star-rating/
[4] http://code.google.com/p/jquery-star-rating-plugin/
[5] http://pastebin.ca/1650596
[6] http://pastebin.ca/1650609
[7] http://pastebin.ca/1650616

šŸ‘¤daefu

2šŸ‘

There is a django-ratings app on PyPi. It can give you the rating as a percent ā€˜myinstance.rating.get_percent()ā€™ to use in your template for the inner div width in the CSS trick you mentioned.

šŸ‘¤Mark Lavin

Leave a comment