JavaRush /Курси /Модуль 3: Django /Робота з тимчасовими повідомленнями

Робота з тимчасовими повідомленнями

Модуль 3: Django
Рівень 14 , Лекція 8
Відкрита

Тимчасові повідомлення — це сповіщення, які з'являються для користувача лише один раз (наприклад, після редиректу). Після відображення вони автоматично видаляються, щоб не заважати подальшій взаємодії. Це зручно, тому що користувачам не потрібно бачити накопичені старі сповіщення щоразу, коли вони заходять на сторінку.

Уяви, що ти натиснув кнопку "Відправити" у формі, і на наступній сторінці тобі показується повідомлення "Дані успішно відправлені!". Після перезавантаження сторінки воно зникає, щоб не вводити тебе в оману. Це і є приклад тимчасових повідомлень.

Архітектура тимчасових повідомлень у Django

Django Message Framework використовує концепцію "сховищ повідомлень" (Message Storage), щоб керувати життєвим циклом сповіщень. За замовчуванням Django використовує CookieStorage або SessionStorage. Давайте розберемо ці підходи.

  1. CookieStorage

Повідомлення зберігаються у cookies користувача. Це підходить для більшості випадків, але має обмеження на розмір повідомлень (зазвичай не більше 4 КБ). Якщо ви передаєте багато даних у сповіщеннях, цей тип може викликати проблеми.

  1. SessionStorage

Повідомлення зберігаються у серверній сесії. Цей підхід зручний, якщо ви вже використовуєте сесії для інших задач. Він не має обмежень на розмір даних, але вимагає додаткової взаємодії з серверною стороною.

За замовчуванням використовується SessionStorage, оскільки це більш безпечний та гнучкий варіант.

Налаштування тимчасових повідомлень

Тимчасові повідомлення вже вбудовані в Django Message Framework і не потребують додаткового налаштування. Однак, якщо ви хочете змінити тип сховища, це можна зробити в налаштуваннях проєкту.

Налаштування класу сховища

Файл settings.py:

# Використовувати SessionStorage для тимчасових повідомлень
MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'

# Альтернативний варіант з CookieStorage
# MESSAGE_STORAGE = 'django.contrib.messages.storage.cookie.CookieStorage'

Іноді варто обрати CookieStorage, щоб знизити навантаження на сервер при великій кількості користувачів.

Як працюють тимчасові повідомлення?

Коли ви додаєте повідомлення через messages.add_message() або використовуєте скорочені методи (messages.success(), messages.error() і т.д.), Django поміщає це повідомлення в сховище, визначене в MESSAGE_STORAGE. Після того, як повідомлення відобразилось у шаблоні, воно автоматично видаляється зі сховища. Таким чином, користувачі бачать повідомлення лише один раз.

Практичний приклад: тимчасові повідомлення в дії

Давайте створимо представлення, де після додавання даних у базу ми повідомимо користувача про успішну операцію, а потім перенаправимо його на іншу сторінку. Повідомлення має відображатися лише один раз.

  1. Представлення з тимчасовими повідомленнями
    from django.contrib import messages
    from django.shortcuts import redirect, render
    from .models import Item
    
    def add_item(request):
        if request.method == 'POST':
            item_name = request.POST.get('name')
            if item_name:
                # Додаємо новий елемент у базу даних
                Item.objects.create(name=item_name)
    
                # Додаємо тимчасове повідомлення
                messages.success(request, f'Елемент "{item_name}" успішно додано!')
    
                # Перенаправляємо на головну сторінку
                return redirect('home')
            else:
                # Додаємо повідомлення про помилку
                messages.error(request, 'Помилка: імʼя елемента не може бути порожнім.')
    
        return render(request, 'add_item.html')
  1. Шаблон для відображення повідомлень
    <!-- base.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Django Messages Example</title>
    </head>
    <body>
        <!-- Блок для відображення повідомлень -->
        {% if messages %}
            <div class="messages">
                {% for message in messages %}
                    <div class="message {{ message.tags }}">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}
    
        <!-- Контент сторінки -->
        {% block content %}{% endblock %}
    </body>
    </html>
  1. Шаблон для додавання елемента
    <!-- add_item.html -->
    {% extends 'base.html' %}
    
    {% block content %}
        <h1>Додати новий елемент</h1>
        <form method="POST">
            {% csrf_token %}
            <label for="name">Назва:</label>
            <input type="text" id="name" name="name" required>
            <button type="submit">Додати</button>
        </form>
    {% endblock %}

Тепер, коли ви додаєте новий елемент, користувач побачить сповіщення на головній сторінці. При наступному відвідуванні воно зникне.

Особливості та підводні камені

  1. Повідомлення не відображаються. Якщо повідомлення не відображаються, переконайтеся, що ви додали блок messages у шаблон. Крім того, перевірте, що налаштування MESSAGE_STORAGE відповідають вашим очікуванням.

  2. Перевантаження повідомлень. Якщо ви зберігаєте занадто багато даних у CookieStorage, вони можуть не вміститись у cookies користувача. У такому випадку можна переключитися на SessionStorage.

  3. Кешування сторінок. Якщо ви використовуєте кешування, повідомлення можуть випадково повторно відображатись або зовсім не показуватись. Щоб цього уникнути, переконайтеся, що кешування налаштовано коректно.

Практичне завдання

  1. Додайте тимчасові повідомлення у свій проєкт:

    • Створіть представлення, де користувач зможе додавати дані в базу, і повідомляйте його про успішну операцію тимчасовим повідомленням.
    • Реалізуйте редирект на іншу сторінку, щоб перевірити, що повідомлення відображається один раз.
  2. Кастомізуйте відображення повідомлень:

    • Додайте стилі та класи до повідомлень, щоб зробити їх більш помітними. Наприклад, використовуйте Bootstrap для стилізації.
  3. Спробуйте переключитися на CookieStorage:

    • Змініть налаштування та перевірте, чи працює ваш механізм тимчасових повідомлень з cookies.
<!-- Приклад кастомізації з Bootstrap -->
<div class="alert alert-{{ message.tags }}">
    {{ message }}
</div>

Висновки

У реальних проєктах тимчасові повідомлення мають величезне значення для UX (User Experience). Вони дозволяють користувачам миттєво отримувати зворотний зв'язок, наприклад, про збереження даних, помилки чи інші дії. Важливо, щоб такі сповіщення були ненав'язливими та чіткими, а тимчасові повідомлення ідеально підходять для цих завдань.

Тепер ваш проєкт не лише функціональний, але й дружній до користувача.

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ