What are Django messages?

Django messages are Django's way of providing our users with notifications after an event or an action.

Step 1:

First of all, we need to import Django messages in our views.py file, as follows:

# views.py
 
from django.contrib import messages

Step 2:

We need to then decide when our Django message must be initiated... In this case our message will be initiated after a user has been registered:

# views.py

def register(request):

    form = CreateUserForm()

    if request.method == 'POST':

        form = CreateUserForm(request.POST)

        if form.is_valid():

            form.save()
            
            
            # - Django messages 
            
            messages.success(request, "User registration was successful!")

            
            
            return redirect("my-login")


    context = {'form':form}

    return render(request, 'register.html', context=context)

Step 3:

Since we are re-directing our user to our login page after they have registered, our Django message will be available for use, on our redirect page, in this case: "my-login".

We need to add the below code to our html template:

Here, we are rendering our message, in this case - "User registration was successful!". We are also checking if our Django message was set to success as we defined in our views.py:

   {% for message in messages %}


         {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}

            <p> {{message}} </p>

          {% endif %}


     {% endfor %}

HTML template: "my-login.hml":

<!-- my-login.html -->

{% load static %}

{% load crispy_forms_tags %}

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width-device-width, initial-scale=1, maximum-scale=1"/>

        <link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/solar/bootstrap.min.css">

        <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">


        <title> Taskly | My Login </title>

    </head>


    {% include 'pre-base.html' %}

    <br>

    <div class="container bg-white shadow-md p-5 form-layout">

        <h3> Login </h3>

        <hr>

        <form method="POST" autocomplete="off">

            {% csrf_token %}


            {{form.username|as_crispy_field}}

            <br>

            {{form.password|as_crispy_field}}

            <br> 

            <input class="btn btn-primary navbar-btn" type="submit" value="Login"/>

            <br> <br>


            {% for message in messages %}


                {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}

                    <p> {{message}} </p>

                {% endif %}


            {% endfor %}


            <br> 

            <p> Don't have an account? <a href="{% url 'register' %}"> <br> Register </a> </p>


        </form>

    </div>

    <br>


    <script src="{% static 'js/app.js' %}"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"  crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"

    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"

    crossorigin="anonymous">

    </script>



</html>

Step 4 (optional):

Well done, you are now able to utilize Django messages!

You may want to utilize some CSS or bootstrap to style your notification message, along with JavaScript to set a timer as to how long your message should be visible to users.

DONE!