[Django #7] Messages

이번장에서는 messeages, 그리고 로그인 되어있었을때의 navbar 상태, 그리고 template에서 including하는법에 대해서 다뤄보겠다.

일단 messege는 사용자들에게 정보를 전달하는 측면에서 유용한 기능이 될것이다.

materialize.css에서 지원하는 toasts라는 javascript를 이용해서 쉽게 메세지를 우리의 웹에서 띄울수있따.

이 예제에서는 우리는 user에게 error를 메세지를 통해 전달해 보겠다.

일단 mysite/main/views.py에 아래 import 추가:

from django.contrib import messages

그리곤 새로 추가됬다는 내용

messages.success(request, f"New account created: {username}")

그리고 에러에 대한 내용

            for msg in form.error_messages:
                messages.error(request, f"{msg}: {form.error_messages[msg]}")

Full register function:

def register(request):
    if request.method == "POST":
        form = UserCreationForm(request.POST)
        if form.is_valid():
            user = form.save()
            username = form.cleaned_data.get('username')
            messages.success(request, f"New account created: {username}")
            login(request, user)
            return redirect("main:homepage")

        else:
            for msg in form.error_messages:
                messages.error(request, f"{msg}: {form.error_messages[msg]}")

            return render(request = request,
                          template_name = "main/register.html",
                          context={"form":form})

    form = UserCreationForm
    return render(request = request,
                  template_name = "main/register.html",
                  context={"form":form})

이제 메세지를 띄우는 기능을 해보자

아래와 같이 코딩하면 java script를 이용해 header html에 메세지기능을 상황에 맞게 띄우자

    {% if messages %}
        {% for message in messages %}
            {% if message.tags == 'success'%}
                <script>M.toast({html: "{{message}}", classes: 'green rounded', displayLength:2000});</script>
            {% elif message.tags == 'info'%}
                <script>M.toast({html: "{{message}}", classes: 'blue rounded', displayLength:2000});</script>
            {% elif message.tags == 'warning'%}
                <script>M.toast({html: "{{message}}", classes: 'orange rounded', displayLength:10000});</script>
            {% elif message.tags == 'error'%}
                <script>M.toast({html: "{{message}}", classes: 'red rounded', displayLength:10000});</script>
            {% endif %}
        {% endfor %}
    {% endif %}

그다음으론 로그인 되고나면 또 로그인되어야 하는 기능은 없애야 함으로

navbar을 아래와 같이 고치자

      <ul id="nav-mobile" class="right hide-on-med-and-down">

        <li><a href="/">Home</a></li>
        <li><a href="https://discord.gg/sentdex">Community</a></li>
        <li><a href="/login">Login</a></li>
        <li><a href="/register">Register</a></li>

      </ul>

아래와 같이하면 로그인 인증될때와 아닐때에 대한 화면표현이 달라질거다

        <li><a href="/">Home</a></li>
        <li><a href="https://discord.gg/sentdex">Community</a></li>
        {% if user.is_authenticated %}
             <li><a href="/account">{{user.username|title}}</a></li>
             <li><a href="/logout">Logout</a></li>
        {% else %}
            <li><a href="/login">Login</a></li>
            <li><a href="/register">Register</a></li>
        {% endif %}

이쯤되면 header가 지저분해져 보인다.

이떄 기능별로 별도에 파일에 만들고 이를 import 시키면 깔끔해진다.

mysite/main/templates/main/includes/navbaritems.html

        <li><a href="/">Home</a></li>
        <li><a href="https://discord.gg/sentdex">Community</a></li>
        {% if user.is_authenticated %}
             <li><a href="/account">{{user.username|title}}</a></li>
             <li><a href="/logout">Logout</a></li>
        {% else %}
            <li><a href="/login">Login</a></li>
            <li><a href="/register">Register</a></li>
        {% endif %}

이부분을 따로 파일로 만들고 header에서 아래와 같이 html에 추가하면 내용이 치환된다

{% include 'main/includes/navbaritems.html' %}

메세지 부분도 messaging.html 파일로 따로 분리하자

    {% if messages %}
        {% for message in messages %}
            {% if message.tags == 'success'%}
                <script>M.toast({html: "{{message}}", classes: 'green rounded', displayLength:2000});</script>
            {% elif message.tags == 'info'%}
                <script>M.toast({html: "{{message}}", classes: 'blue rounded', displayLength:2000});</script>
            {% elif message.tags == 'warning'%}
                <script>M.toast({html: "{{message}}", classes: 'orange rounded', displayLength:10000});</script>
            {% elif message.tags == 'error'%}
                <script>M.toast({html: "{{message}}", classes: 'red rounded', displayLength:10000});</script>
            {% endif %}
        {% endfor %}
    {% endif %}

아래와 같이 또 추가해주면 된다.

  {% include 'main/includes/messaging.html' %}

최종 header.html :

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="{% static "main/css/materialize.css" %}">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>


<body>

  <nav>
    <div class="nav-wrapper"
      <a href="/" class="brand-logo">Tutorials</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        {% include 'main/includes/navbaritems.html' %}
      </ul>
    </div>
  </nav>

  {% include 'main/includes/messaging.html' %}

  <div class="container">
    {% block content %}
    {% endblock %}
  </div>
</body>

<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>