Django rendering a number as a 5-stars rating - django

Question

I'm building a rating system for my website. It's currently working well but I would like to improve the esthetical aspect of the system. I would like to be able to take the rating from the database and display it as a 5-stars rating. Also, if it's not overly complicated, I would like to be able to click on stars to record the rating in the database, rather than writing a number.
I'm quite new to web development. In particular, I have no experience with javascript (I only did tutorials found on internet), which I think is required to implement the functionality I'm searching for, so please gives me a little example with your response in order to make me able to understand.
For rendering the rating as stars, I have no idea how to do it. For recording the rating as stars, I thought about two solutions :
1) Using django star-ratings but I don't think I have the capabilities required to understand how it works. I already made a post to ask for help and examples about this app but I received no help so I guess I should forget this.
2) Using a form with some appropriate widget to render an IntegerInput as a 5-stars rating.
For the second solution, I already have the code, I now need a widget to replace 'Stars' in the code below but I'm not sure how to do it. Can someone help me ?
models.py
class Avis(models.Model):
note = models.IntegerField()
forms.py
class AvisForm(forms.ModelForm):
class Meta:
model = Avis
fields = ['note']
widgets = {'note': forms.NumberInput(attrs={'class': 'Stars'})}
labels = {'note': 'Note /5'}
hmtl for recording
<form method="post" action="">
{% csrf_token %}
{% for field in form %}
<div class="fieldWrapper form-group">
{{ field.label_tag }}
{{ field }}
</div>
{% endfor %}
<input type="submit" class="btn btn-lg btn-outline-primary btn-block btn-login text-uppercase font-
weight-bold mb-2" value="Envoyer mon avis" />
</form>
hmtl for displaying
{{ avis.note }}
Thanks in advance !
EDIT (my code so far for the ratings storing) :
views.py
def avis(request, id): # view for displaying and storing the form
commande = get_object_or_404(Commande, id=id)
if request.method == "POST":
form = AvisForm(request.POST)
if form.is_valid():
avis = form.save(commit = False)
avis.commande = commande
avis.save()
commande.has_avis = True
commande.save()
if commande.plat.chef.nb_avis==0:
commande.plat.chef.rating = avis.note
else:
commande.plat.chef.rating = (commande.plat.chef.rating*commande.plat.chef.nb_avis + avis.note)/(commande.plat.chef.nb_avis + 1)
commande.plat.chef.nb_avis += 1
commande.plat.chef.save()
messages.success(request, 'Votre avis a été correctement envoyé !')
return redirect(mes_commandes)
else:
form = AvisForm()
return render(request, 'actualites/avis.html', locals())
def avis2(request, id): # view for recording the rating
avis = get_object_or_404(Avis, id=id)
rating = request.POST.get('rating')
avis.note = rating
avis.save()
messages.success(request, 'Votre avis a été correctement envoyé !')
return redirect(mes_commandes)
html
<form method="post" action="">
{% csrf_token %}
{% for field in form %}
<div class="fieldWrapper form-group">
{{ field.label_tag }}
{{ field }}
</div>
{% endfor %}
<input type="submit" class="btn btn-lg btn-outline-primary btn-block btn-login text-uppercase font-weight-bold mb-2" value="Envoyer mon avis" />
</form>
<div class="rating rating2">
★
★
★
★
★
</div>
<script>
$(".rating a").on('click', function(e){
let value = $(this).data('value');
$.ajax({
url: "{% url 'avis2' %}",
type: 'POST',
data: {'rating': value},
success: function (d){
// some processing
}
})
});
</script>
forms.py
class AvisForm(forms.ModelForm):
class Meta:
model = Avis
fields = ['commentaire']
widgets = {'commentaire': forms.Textarea(attrs={'class': 'form-control'})}

Answer 1

I will try to answer your both of the question. For getting the rating, your can render stars and add a JS click event to that.
Code (HTML, CSS) source: https://codepen.io/GeoffreyCrofte/pen/jEkBL
$(".rating a").on('click', function(e){
let value = $(this).data('value');
$.ajax({
url: "some_url",
type: 'POST',
data: {'rating': value},
success: function (d){
// some processing
}
})
});
.rating {
width: 300px;
margin: 0 auto 1em;
font-size: 45px;
overflow:hidden;
}
.rating input {
float: right;
opacity: 0;
position: absolute;
}
.rating a,
.rating label {
float:right;
color: #aaa;
text-decoration: none;
-webkit-transition: color .4s;
-moz-transition: color .4s;
-o-transition: color .4s;
transition: color .4s;
}
.rating label:hover ~ label,
.rating input:focus ~ label,
.rating label:hover,
.rating a:hover,
.rating a:hover ~ a,
.rating a:focus,
.rating a:focus ~ a {
color: orange;
cursor: pointer;
}
.rating2 {
direction: rtl;
}
.rating2 a {
float:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rating rating2">
★
★
★
★
★
</div>
For Rendering the rating, you need to calculate the value first. You need to determine the number of person who rated 5, 3, ... 1 stars. Lets say there are 100's 5 star rating, 70 * 4 star, 50 * 3 star, 30 * 2 and 20 * 1 star rating. So you can determine rating by:
sum of rating / total rating
So it will be (100 * 5 + 70 * 4 + 50 * 3 + 30 * 2 + 20 * 1) / 100 + 70 + 50 + 30 + 20
So the final rating will be: 3.74
To get the width percentage: (3.74 * 100) / 5 = 74.8
Here 5 refers to total number of stars, here I am assuming that rating will be based on the scale of 5.
For rendering you will need different HTML and CSS.
Code source: https://codepen.io/Bluetidepro/pen/GkpEa
.star-ratings-css {
unicode-bidi: bidi-override;
color: #c5c5c5;
font-size: 25px;
height: 25px;
width: 100px;
margin: 0 auto;
position: relative;
padding: 0;
text-shadow: 0px 1px 0 #a2a2a2;
}
.star-ratings-css-top {
color: #e7711b;
padding: 0;
position: absolute;
z-index: 1;
display: block;
top: 0;
left: 0;
overflow: hidden;
}
.star-ratings-css-bottom {
padding: 0;
display: block;
z-index: 0;
}
.star-ratings-sprite {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
font-size: 0;
height: 21px;
line-height: 0;
overflow: hidden;
text-indent: -999em;
width: 110px;
margin: 0 auto;
}
.star-ratings-sprite-rating {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
background-position: 0 100%;
float: left;
height: 21px;
display: block;
}
<div class="star-ratings-css">
<div class="star-ratings-css-top" style="width: 74.8%">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
</div>
You need to pass width from your view and in the HTML, you need to access it.
<div class="star-ratings-css-top" style="width: {{ width }}%">. I tried these code snippet, working for me and should work for you as well :)