Messages

Improving User Interface

Video tutorial: justdjango ecommerce
https://youtu.be/dv9vKusSrDI
timestamp: 32:40

https://docs.djangoproject.com/en/3.1/ref/contrib/messages/

MDBootstrap
https://mdbootstrap.com/docs/standard/components/alerts/

0. Views

from django.contrib import messages

def something():
	messages.info(request, "Tutorial added to your curriculum")

1. Add template

at base.html, inside body
messages are pre installed at settings.py

{% if messages %}
    {% for message in messages %}

      <div class="alert alert-{{ message.tags }}" role="alert">
          {{ message }}
      </div>

    {% endfor %}
{% endif %}

2. Test

I clicked on Add button to check if alerts works.

inspect the code, under body section

Add margin-top to view actual alert bar

3. Add CSS

Add div around template tags (at base.html)
to give margin-top and visible under navbar

4. dismissable alert

• Problem: step 1-3 doesn't dismiss untill we move to another page.

• solution
  Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.

base.html

<div class="message-bar">
{% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags}} alert-dismissible fade show" role="alert">
        {{ message }}
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
         </button>
    </div>
    {% endfor %}
{% endif %}
</div>

now you got x button!