Django - Tutorial 022. Adding a bookmark system (favorites) to the site

bookmark, AJAX, favorite, Django, jQuery

The site has the ability to mark articles, comments, topics and answers on the forum as favorites. However, marking as favorites does not provide a reload of the page, because for these actions the mechanism of AJAX-requests is used.

In order to implement the bookmark system, you need:

  • Add a table that implements the Many-to-Many relationship between the user and the article or comment.
  • Add a view that will handle this request.
  • Add url to handle the request to add or exclude an object from the favorites.
  • Write the html-code, which will be responsible for displaying the counter added to the bookmark.
  • Add a javascript handler that will call the AJAX request.

On this site, the icon of the star from Bootstrap is used as a counter icon.

Many-to-Many table for bookmarks

We will be able to add bookmarks for articles and comments. To do this, let's make a general abstract mode l, from which we will be inherited for a specific type of content on the site. In the abstract model, we create a user field that will be the same for all bookmarks.

class BookmarkBase(models.Model):
    class Meta:
        abstract = True

    user = models.ForeignKey(User, verbose_name="User")

    def __str__(self):
        return self.user.username

Next we inherit from this model to create two separate data models for comments and articles.

Here we add the obj field, which will be responsible for the foreign key on the content table: Article or Comment . It is important that the field is called the same in both models. Then you can write one view for all the bookmarks tables.

class BookmarkArticle(BookmarkBase):
    class Meta:
        db_table = "bookmark_article"

    obj = models.ForeignKey(Article, verbose_name="Article")


class BookmarkComment(BookmarkBase):
    class Meta:
        db_table = "bookmark_comment"

    obj = models.ForeignKey(Comment, verbose_name="Comment")

views.py

To process a request to add to or remove from bookmarks, create a view that can work with any table of bookmarks that will satisfy the general view presented above.

# -*- coding: utf-8 -*-

import json

from django.contrib import auth
from django.http import HttpResponse
from django.views import View


class BookmarkView(View):
    # This variable will set the bookmark model to be processed
    model = None

    def post(self, request, pk):
        # We need a user
        user = auth.get_user(request)
        # Trying to get a bookmark from the table, or create a new one
        bookmark, created = self.model.objects.get_or_create(user=user, obj_id=pk)
        # If no new bookmark has been created,
        # Then we believe that the request was to delete the bookmark
        if not created:
            bookmark.delete()

        return HttpResponse(
            json.dumps({
                "result": created,
                "count": self.model.objects.filter(obj_id=pk).count()
            }),
            content_type="application/json"
        )

Note that this code uses a comparison of obj_id=pk , which means that we are trying to find an entry in the table of bookmarks for the object's id. Since in all models - this field is the same, the problems should not arise with a similar syntax.

urls.py

And now let's see how the url looks like to handle requests to add content to the bookmarks.

# -*- coding: utf-8 -*-

from django.conf.urls import url
from django.contrib.auth.decorators import login_required

from . import views
from .models import BookmarkArticle, BookmarkComment

app_name = 'ajax'
urlpatterns = [
    url(r'^article/(?P<pk>\d+)/bookmark/$',
        login_required(views.BookmarkView.as_view(model=BookmarkArticle)),
        name='article_bookmark'),
    url(r'^comment/(?P<pk>\d+)/bookmark/$',
        login_required(views.BookmarkView.as_view(model=BookmarkComment)),
        name='comment_bookmark'),
]

To execute this request, the user must be authorized, for which the decorator login_required is responsible.

The URL in this case determines which type of content is added to the bookmarks, also determines the pk, of this content, and the action to be taken. After all, in addition to adding to the bookmarks, you can add a system of likes, reposts, etc. By the same principle.

html

In my case, the html-code looks like this:

<div data-id="{{ like_obj.id }}" data-type="article" data-action="bookmark" title="Favorites">
    <span class="glyphicon glyphicon-star"></span>
    <span data-count="bookmark">{{ like_obj.get_bookmark_count }}</span>
</div>

There are several custom attributes:

  • data-id - Responsible for pk content, which can be added to the bookmarks.
  • data-type - Type of content, the same name appears in the url.
  • data-action - The action to be taken, in this case adding to the bookmarks
  • data-count - Counter that shows how many users have added content to bookmarks

As for the following code like_obj.get_bookmark_count , this is also a uniform method that is added to the content model, for example for articles it will look like this:

def get_bookmark_count(self):
    return self.bookmarkarticle_set.all().count()

javascript

AJAX requests for this function are created using the jQuery library.

When working with AJAX it is necessary to take into account several nuances:

  1. If you have a multilingual site that has a different url for the current language, it is better to make a separate api for AJAX, which will be independent of the language, otherwise you will need to consider the language in the url when creating the AJAX request. If you ignore the language, the AJAX-request will be redirected to the current url with the language taken into account, and the query will not work. That is, there should not be redirects.
  2. Django will not accept the AJAX request unless it is configured to use the CSRF token, which is used to combat fake cross-site requests. With each page request, Django mixes the CSRF token in the Cookies, from there it can be taken.

Configuring AJAX to use the CSRF token

The following code can be included in the script on every page of the site where you want to use AJAX. It will automatically configure AJAX to use the Token CSRF.

// Getting a cookie by name
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Setup AJAX
$(function () {
    $.ajaxSetup({
        headers: { "X-CSRFToken": getCookie("csrftoken") }
    });
});

Bookmark handlers and implementing of them

In the following code, an AJAX request is made to call adding or removing content from the bookmarks. In this case, the code will be universal for both articles and comments.

In the request url, you can see the following line "/api/" + type + "/" + pk + "/" + action + "/" , which means that the module for AJAX requests hangs on the prefix /api/ , that is to this Url it is connected in the main urls.py file of the project, then there is the content type, its primary key and the action to be performed. Since all this data is taken from the data attributes, the resulting url will look like this:

  • /api/article/112/bookmark/ - for articles
  • /api/comment/14/bookmark/ - for comments

In the handler of the successful result, you can add highlighting of the bookmark star for the current user, etc.

function to_bookmarks()
{
    var current = $(this);
    var type = current.data('type');
    var pk = current.data('id');
    var action = current.data('action');

    $.ajax({
        url : "/api/" + type + "/" + pk + "/" + action + "/",
        type : 'POST',
        data : { 'obj' : pk },

        success : function (json) {
            current.find("[data-count='" + action + "']").text(json.count);
        }
    });

    return false;
}

$(function() {
    $('[data-action="bookmark"]').click(to_bookmarks);
});

For Django I recommend VDS-server of Timeweb hoster .

Virtual hosting with 10 percent discount
Virtual hosting with 10 percent discount
EVILEG offers reliable hosting with a 10% discount for virtual hosting and 5% for VPS
Support the author Donate
ИМ

Доброго времени суток Евгений. Не подскажете как сделать иконки (лайк-дизлайк) кликабельными?

ИМ

Доброго времени суток Евгений. Не ясен метод:

def get_bookmark_count(self):
    return self.bookmarkarticle_set().all().count()

Не могли бы вы растолковать откуда моя модель статьи знает о этой функции?:

self.bookmarkarticle_set()

Когда применяю данный метод то выскакивает ошибка:

__call__() missing 1 required keyword-only argument: 'manager'

И второй вопрос каким образом можно подсвечивать закладку (допустим менять ее цвет когда она добавлена пользователем, ну как у вас на сайте)?

Добрый день, Игорь!

Вообще это стандартное поведение в моделях, если на данную модель какая-то иная модель имеет внешний ключ (ForeignKey)

В данном конкретном случае есть модель Article и BookmarkArticle , поскольку BookmarkArticle имеет внешний ключ на Article, то модель Article автоматически получает метод bookmarkarticle_set, который возвращает query set  всех закладок, которые имеют внешний ключ на конкретный объект статьи.

Здесь я по ходу допустил ошибку, напишите так

self.bookmarkarticle_set.all().count()

Для подсветки я использую фильтр в шаблоне, которые ищет пользователя в наборе

@register.filter
def user_in(objects, user):
    if user.is_authenticated:
        return objects.filter(user=user).exists()
    return False

а вот его применение

<span data-icon="favorite" class="mdi mdi-star mr-1 {% if obj.bookmarks.all|user_in:user %}text-success{% endif %}"></span>

ИМ

self.bookmarkarticle_set.all().count()

Да, так все работает! Спасибо вам огромное.

Еще один вопрос:

Я подключил фильтр:

@register.filter
def user_in(objects, user):
    if user.is_authenticated:
        return objects.filter(user=user).exists()
    return False

в templatetags/movie_extras.py

в шаблоне:

{% load movie_extras %}
<span style="cursor: pointer" class="fa fa-bookmark-o fa-4x{% if movie.bookmarks.all|user_in:user %}fa-2x{% endif %}"></span>

При этом ошибка:

 File "/home/chunk/public/web-dev/testproj/movie/templatetags/movie_extras.py", line 8, in user_in
    return objects.filter(user=user).exists()
AttributeError: 'NoneType' object has no attribute 'filter'

что я делаю не так Евгений?







мне кажется, вы неправильно записали это

movie.bookmarks.all

Как у вас называется модель закладок для фильмов? BookmarkArticle? BookmarkMovie?

Я вам дал код из сайта, а здесь уже на десять раз всё переписано и выглядит иначе. У вас скорее всего как-то так должно быть.

movie.bookmarkmovie_set.all

Или что-то типо того

ИМ

Все верно.

Я вам дал код из сайта, а здесь уже на десять раз всё переписано и выглядит иначе. У вас скорее всего как-то так должно быть.
self.bookmarkarticle_set.all().count()

Так все работает. Только у меня:

self.bookmarkmovie_set.all().count()

Фильтр к сожалению не работает.












так перепишите его так

{% if movie.bookmarkmovie_set.all|user_in:user %}fa-2x{% endif %}
ИМ

Все работет Евгений. Спасибо вам.

ИМ

Доброго времени суток Евгений. Можно поинтересоваться каким образом выводите закладки в профиле пользователя?

Добрый день, Игорь.

Во вьшке находите в базе данных пользователя, а потом забираете все закладки аналогично, как сделали для фильмов. К пользователю также добавляются неявно методы соответствующих моделей данных, которые имеют внешний ключ на пользователя.

user.bookmarkmovie_set.all()



ИМ

Спасибо Евгений, буду пробовать.

ИМ

Ну с выводом кол-ва закладок пользователя разобрался успешно,  а вот с выводом содержимого закладок почему то не могу сообразить. Прошу помощи Евгений.

Покажите шаблон, где выводите закладки, но без контента

ИМ
{% extends 'base/base.html' %}
{% block content %}
<div class="userprofile">
<div class="row">
    <div class="col-md-3">
		{% if user.avatar %}
			<img src="{{ user.avatar.url }}">
		{% else %}
			<img src="/static/img/noavatar.png">
		{% endif %}
	</div>
    <div class="col-md-9">
		{{ profile.username }}
		<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Закладки {{ user.bookmarkmovie_set.all.count }}</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
		<p></p>
	</div>
</div>
</div>
{% endblock %}

хм.. для вывода тогда должно быть как-то так

{% for bookmark in user.bookmarkmovie_set.all %}
    {{ bookmark .movie.title }}
{% endfor %}

Думаю, что догадаетесь как вывести нужную информацию о фильме

bookmark.movie - означает, что вы берёте поле внешнего ключа на фильм, которое должно быть в закладке. полагаю, что онго должно называться movie

ИМ

Ага цикл. Спасибо за разъяснение Евгений.

Comments

Only authorized users can post comments.
Please, Log in or Sign up
m
May 19, 2019, 1:49 a.m.
mahhaki

Qt - Test 001. Signals and slots

  • Result:78points,
  • Rating points2
S
May 17, 2019, 1:14 p.m.
SunBro

Qt - Test 001. Signals and slots

  • Result:42points,
  • Rating points-8
b
May 17, 2019, 4:18 a.m.
banana

C++ - Тест 003. Условия и циклы

  • Result:57points,
  • Rating points-2
Last comments
May 21, 2019, 8:10 p.m.
Дмитрий

Приветствую! Я думаю дойдёт и до этого, но пока изучать его у меня нет желания.
May 20, 2019, 7:20 p.m.
Евгений Легоцкой

Добрый день! Вы не думали разместить репозиторий проекта на GitHub?
P.
May 18, 2019, 2:03 p.m.
PELMYACH .

Спасибо большое! Вскоре буду разбираться!
May 18, 2019, 9:13 a.m.
Евгений Легоцкой

Добрый день! Отнимать значение общего счётчика можно в деструкторе класса кнопки QDynamicButton::~QDynamicButton(){ ResID--;} При этом я бы ещё переустанавливал значения вс...
P.
May 14, 2019, 10:33 p.m.
PELMYACH .

Здравствуйте!А не подскажите, как можно при удалении какой либо кнопки, у щётчика отнять значение?Дабы например четвёртой кнопке соответствовал ID 4, а не 5 скажем
Now discuss on the forum
May 24, 2019, 6:48 a.m.
Евгений Легоцкой

Если там будут только перечисления внутри namespace, то жа, достаточно будет заголовочного файла
May 24, 2019, 6:28 a.m.
Андрей Янкович

работает любой http сервер, и можно использовать обсалютно любой портпример <RemoteRepositories> <Repository> <Url>http://178.124.160.6:3030/A/B&l...;
May 23, 2019, 2:40 p.m.
Михаиллл

Попробовал сделать этот запрос по http и получил json файл. request.setUrl(QUrl("https://jsonplaceholder.typicode.com/todos/1")); Как Вы думаете, почему https не работает и как это и...
May 23, 2019, 10:42 a.m.
Михаиллл

Спасибо, помогло.
May 23, 2019, 6:31 a.m.
Евгений Легоцкой

Для задач и граф-то не нужен. Достаточно будет таблицы в локальной базе данных SQLite, в которой указывается задача, время и т.д. В этом разделе есть примеры по работа с базой д...

For registered users on the site there is a minimum amount of advertising

EVILEG
About
Services
Join us
© EVILEG 2015-2019
Recommend hosting TIMEWEB