Django3.2 | クラウドソーシングアプリの構築 | 17 | Bootoast - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

Bootoastを利用して通知がでるようにします。

「core/customer/views.py」ファイルに記述を追加します。

記述追加　【Desktop/crowdsource/core/customer/views.py】6,25行目

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.urls import reverse
from core.customer import forms

from django.contrib import messages

@login_required()
def home(request):
    return redirect(reverse('customer:profile'))

@login_required(login_url="/sign-in/?next=/customer/")
def profile_page(request):
    user_form = forms.BasicUserForm(instance=request.user)
    customer_form = forms.BasicCustomerForm(instance=request.user.customer)

    if request.method == "POST":
        user_form = forms.BasicUserForm(request.POST, instance=request.user)
        customer_form = forms.BasicCustomerForm(request.POST, request.FILES, instance=request.user.customer)

        if user_form.is_valid() and customer_form.is_valid():
                user_form.save()
                customer_form.save()

                messages.success(request, 'プロフィールが更新されました。')
                return redirect(reverse('customer:profile'))

    return render(request, 'customer/profile.html', {
        "user_form": user_form,
        "customer_form": customer_form,
    })

「core/templates/base.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/base.html】

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>クラウドソーシングアプリ</title>
        {% load bootstrap4 %}
        {% bootstrap_css %}
        {% bootstrap_javascript jquery='full' %}
        {% block head %}{% endblock %}
    </head>
    <body>
        <nav class="navbar {% if not request.user.is_authenticated %} navbar-expand-lg {% endif %} navbar-dark bg-dark">
            <a class="navbar-brand" href="/">クラウドソーシングアプリ</a>
            {% if not request.user.is_authenticated %}
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav">
                <li class="nav-item mr-2 ml-4 {% if request.GET.next != '/courier/' %} active {% endif %}">
                 <a class="nav-link btn btn-light {% if request.GET.next != '/courier/' %}bg-success{% else %}bg-dark{% endif %}" href="/sign-in/?next=/customer/">依頼人</a>
                </li>
                <li class="nav-item {% if request.GET.next == '/courier/' %} active {% endif %}">
                  <a class="nav-link btn btn-light {% if request.GET.next == '/courier/' %}bg-primary{% else %}bg-dark{% endif %}" href="/sign-in/?next=/courier/">配達人</a>
                </li>
              </ul>
            </div>
            {% else %}
            <form class="form-inline">
              <span class="mr-4 text-light">
                {{ request.user.last_name }} {{ request.user.first_name | title }}
              </span>
              <span>
                <a href="/sign-out" class="btn btn-outline-dark bg-light">ログアウト</a>
              </span>
            </form>
            {% endif %}
        </nav>
        {% block content %}{% endblock %}
          
          
        <footer class="text-center mt-5 mb-5">
            &copy; クラウドソーシング
        </footer>
        <script src="https://unpkg.com/bootoast@1.0.1/dist/bootoast.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/bootoast@1.0.1/dist/bootoast.min.css">
      
        <script>
            function toast(message, type) {
              bootoast.toast({
                position: 'leftBottom',
                message,
                type: 'success',
                animationDuration: 300,
                dismissible: true,
              });
            }
        
            {% if messages %}
        
              {% for message in messages %}
                toast('{{ message }}', '{{ message.tags }}');
              {% endfor %}
        
            {% endif %}
        </script>
    </body>
</html>