How to implement a rating system?

Question

Django

I am creating a django learning app - a site with jokes. Each post has its own rating. Each user can put "+" and "-".
How can I make the joke_rating increase by one in the database when clicking on the " + "? Moreover, the user, when clicking on the link, must remain on the same page, and can vote only once.

index.html:

{% extends "blog/base.html" %}
{% block content %}
    {% if jokes_pages %}
        {% for joke in jokes_pages %}
            <div class="container">
                <div class="right-align"># {{joke.id}}</div>
                <div>{{joke.joke_text}}</div>
                <div class="right-align"><a href="pass" shape="None">&#8211</a> | {{joke.joke_rating}} | <a href={{joke.joke_rating|add:1}}>+</a></div>
            </div>
        {% endfor %}
        <ul>
            {% if jokes_pages.has_previous %}
                <li><a href = "?page={{ jokes_pages.previous_page_number }}">Предыдущая страница</a></li>
                {% else %}
                <li><a title = "Предыдущей страницы нет">Предыдущая страница</a></li>
                {% endif %}
            {% if jokes_pages.has_next %}
                <li><a href = "?page={{ jokes_pages.next_page_number }}">Следующая страница</a></li>
                {% else %}
                <li><a title = "Следующей страницы нет">Следующая страница</a></li>
                {% endif %}
        </ul>
    {% else %}
        <p>В базе данных нет анекдотов</p>
    {% endif %}
{% endblock %}

Answer 1

The simplest and without reloading the page, just send an ajax request to increase the number in the database, and manually increase the value on the page via JavaScript without waiting for ajax response (or you can wait, here as you want).

Answer 2

In addition to the fact that when choosing +, the ability to click on it again was blocked, it is also necessary that they could click on -, or even cancel the rating when you click on the button that was last clicked again.
I can suggest creating a column isGoodRatingin the database, by default it will be an empty string isGoodRating = ""in the column of the UserRecordsRating table (or whatever you call it)
What is it for?
If isGoodRating is an empty string, then the user did not select anything or canceled their rating altogether. If true, then clicked on the plus, if false, then minus
Partial implementation
On the client
, on clicking the button +, there will be a similar function

onClickPlusRating = () => {
  // если пользователь не нажимал на кнопку +
  // условие !isChoiseRating, не считается
  if (isChoiseRating !== true) {
    isChoiseRating = true;
    rating++;
  }
  // если повторно нажал на кнопку +
  else {
    isChoiseRating = "";
    rating--;
  }
  // отправляем запрос на сервер на изменение рейтинга и колонки isChoiseRating
};

With clicking on in the -same way, only instead of true it will be false. I hope you understand)
And you can also highlight the rating if it has been changed by the user by setting the condition:
isChoiseRating !== ""

Answer 3

Look here implemented user rating https://github.com/Vladislava05/TaskMaster