La sub-aplicación messages

Django nos provee una aplicación (sub-aplicación de Django propia) llamada messages, por defecto viene activada en settings.py:

1
2
3
4
5

INSTALLED_APPS = [
    ...
    'django.contrib.messages', # 👈 esta app
    ...
]

messages nos permite enviar mensajes desde nuestro back-end para mostrarlos en el front-end a nuestro gusto.

Configuración

Por defecto viene configurada, pero vamos a agregarle amor con Boostrap.

En settings.py nos vamos a la última línea y agregamos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# Configuracion de mensajes

from django.contrib.messages import constants as messages

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-secondary',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}

De esta forma podemos agregar clases Bootstrap para cada categoría de mensaje.

Vista en template

Para ver los mensajes que son enviados, tenemos que controlar como se mostraran en nuestro front-end, para ello crearemos un archivo html dentro de templates/, yo lo llamo mensajes.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!-- siempre es bueno verificar que hago exista -->
{% if messages %}
<div class="container">
    <!-- por cada mensaje en messages -->
    {% for message in messages %}
    <!--                       👇 obtenemos el tag el cual contiene la clase de boostrap -->
    <div class="alert {{ message.tags }} alert-dismissible fade show shadow-sm" role="alert">
        <!-- autoescape nos permite mostrar lo que queramos, sin conversion, desde codigo JS a HTML -->
        {% autoescape off %}
        <!-- mostramos el contenido del mensaje -->
        {{ message }}
        {% endautoescape %}
        <!-- se debe cerrar como cualquier otra etiqueta -->
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
</div>
{% endif %}

Ahora, en base.html, hacemos un include de mensajes.html, yo lo pondré antes del bloque content:

1
2
3
4
5
6

...
    {% include 'mensajes.html' %}

    {% block content %}
    {% endblock %}
...

Nótese que mensajes.html fue creado en el mismo nivel de directorio que base.html.

Importación

Ahora, debemos importar la aplicación en nuestra vista:

1

from django.contrib import messages

Y ahora podemos usarlo.

Uso

En nuestra vista crear dentro de tienda/views.py, mostraremos un mensaje cuando el usuario haga el envió del formulario:

1
2
3
4
5

...
formulario.save()
messages.success(request, "Producto <em>'{}'</em> creado correctamente!".format(formulario.cleaned_data["nombre"]))
return redirect("tienda:crear")
...

Si quitamos el tag autoescape se mostrara algo parecido a Producto <em>'hoyo de tarugo'<\/em> creado correctamente! ya que Django por defecto sanetiza el front-end.

Y ahora, al subir el formulario, y al ser este validado, enviamos un mensaje al front-end.

Nótese que los mensajes entran en forma de queue, asi que, si envías un mensaje y este no se renderiza, quedara guardado hasta que Django pueda mostrarlo en el front-end.