장고 메시지

Pywiki
Sam (토론 | 기여)님의 2022년 5월 11일 (수) 22:34 판 (새 문서: == 개요 == 웹사이트에서 살짝 나타났다가 사라지는 메시지. 1회성 알림 메시지 기능이 이미 장고 안에 포함되어 있다. = 기초 사용 = {| class...)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
둘러보기로 가기 검색하러 가기

1 개요

웹사이트에서 살짝 나타났다가 사라지는 메시지. 1회성 알림 메시지 기능이 이미 장고 안에 포함되어 있다.

2 기초 사용

과정 설명 코드
settings.py 수정 메시지를 쿠키에서 사용할 것이냐, 세션에서 사용할 것이냐를 지정해준다.

우측 코드 중 하나를 적절한 위치에 추가하면 된다.

  • MESSAGE_STORAGE = 'django.contrib.messages.storage.cookie.CookieStorage'
  • MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'
뷰 수정 실제로 사용할 뷰를 수정해준다.

render 이전에 지정해주면 된다.

request와 메시지를 인수로 넣어주면 된다.


메시지의 종류는 다음과 같다.

메시지종류
messages.DEBUG
messages.INFO
messages.SUCCESS
messages.WARNING
messages.ERROR
from django.contrib import messages  # 메시지 모듈을 불러오고,

def view...(request):
    ...
    messages.info(request, "비밀번호는 단방향 암호화 되어 보관됩니다.(관리자도 해독을 못한다는 사실!)")
    return render(request, 'custom_account/signup.html', {'form': form})
탬플릿 수정 메세지는 {{ messages }} 안에 담기는데,

메시지는 대부분 모든 페이지에서 쓰이므로 base.html에 작성하는 편이 좋다.

{% if messages %}
    {% for message in messages %}
    {% if message.tags %}<li >{{ message }}</li>{% endif %}
{% endfor %}

3 더 나아가기

3.1 부트스트랩

https://devlog.jwgo.kr/2020/10/17/fancy-messaging-system-in-django/를 참고하였다.

과정 설명 코드
탬플릿 수정 클래스 안에 메시지 태그를 답는다.
{% for message in messages %}
    <div class="alert {{ message.tags }} alert-auto-dismissible alert-dismissible notification-container text-center" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        {{ message }}
    </div>
{% endfor %}
settings.py 수정 메시지 태그가 부트스트랩과 일치하리라 기대하긴 어렵고.. settings에서 지정해준다.
from django.contrib import messages  # 메시지를 임포트하는 것도 필요.
MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}
추가 위까지 진행하면 x를 눌러야 사라지는 메시지가 나타나지만, 직접 클릭하지 않고 지워져야 세련된 메시지라 할 수 있을 것이다.

우측 자바스크립트 코드를 탬플릿에 추가하자.

<script>
window.setTimeout(function() {
    $(".alert-auto-dismissible").fadeTo(500, 0).slideUp(500, function(){
    $(this).remove();
    });
}, 4000);  // 초는 여기!
</script>