[Django Study 07] Login / Logout 구현 및 Bootstrap을 통한 디자인

[Login / Logout 구현]

• login / logout도 django에서 제공하는 template으로 할 수 있다.
• login / logout은 지정할 것들이 별로 없어, 바로 urls.py에서 할 수 있다

#accountapp/urls.py
#로그인은 로그인을 하는 창이 필요하기 때문에 template_name을 설정해준다.
path('login/', LoginView.as_view(template_name='accountapp/login.html'), name='login'),
path('logout/', LogoutView.as_view(), name='logout'),

<!-- login.html -->
{% extends 'base.html' %}
{% block content %}
    <div style = "text-align : center">
            <div>
                <h4>Login</h4>
            </div>
            <div>
<!--        action에 아무것도 없으면, 지금 페이지 주소 그대로 다시 요청을 보낸다는 뜻
            {% url 'accountapp:login' %} 이렇게 썼어도 정상적으로 작동한다.-->
                    <form action = "" method = "post">
                        {% csrf_token %}
                        {{ fotm }}
                        <input type = "submit" class = "btn btn-primary">
                    </form>
            </div>
    </div>
{% endblock %}

<!-- header.html : 로그인/로그아웃 버튼 만들기 -->
<div style = "text-align:center; margin: 2rem 0; ;" >
    <div>
        <h1 style = "font-family: 'BIZ UDGothic', sans-serif;">Pragmatic</h1>
    </div>
    <div>
        <span>nav1</span>
        <span>nav2</span>
        <span>nav3</span>

        {% if not user.is_authenticated %}
<!--     login하고 나서 그다음에 연결되어야 하는 경로를 next로 적어준다. -->
        <a href = "{% url 'accountapp : login' %}?next ={{ request.path }}" >
            <span>login</span>    
        </a>
        {% else %}
        <a href = "{% url 'accountapp : logout' %}?next ={{ request.path }}">
            <span>logout</span>    
        </a>
        {% endif %}
    </div>
</div>

next={{request.path}}가 없으면 accounts/profile이라는 페이지로 넘어간다.

next 값을 사용할때 {{ request.path }} 를 사용하는 건, 홈페이지 상단의 login 버튼을 눌렀을 때,
그 버튼을 누를때 보고 있던 페이지의 정보를 넘겨주기 위함이다.

해당 페이지의 정보를 넘겨줌으로써, 로그인 이후 로그인 버튼을 누른 페이지로 다시 되돌아갈 수 있도록 연결해주는 역할을 한다.

• url을 쳐서 들어가는 직접 접속에서도 redirect가 되게 하기 위해 settings.py 파일을 수정.

#pragmatic/settings.py
#로그인을 하면 hello_world 페이지로 간다. / 로그아웃을 하면 login 페이지로 간다.
LOGIN_REDIRECT_URL = reverse_lazy('accountapp:hello_world')
LOGOUT_REDIRECT_URL = reverse_lazy('accountapp:login')

• 적용 순위 : next → LOGIN_REDIRECT_URL → DEFAULT (next가 가장 우선된다.)

---

---

[Bootstrap을 이용한 Form 디자인 정리]

• form의 디자인을 bootstrap으로 예쁘게 꾸미고자 한다.

1. 터미널에서 pip install django-bootstrap4를 입력하여 다운받는다.
2. settings.py에 bootstrap4를 사용할 것임을 적어준다. (Installed_app에 적는다)
3. html 수정하기

<!--login.html -->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}

    <div style="text-align: center; max-width:500px;margin:4rem auto;">
        <div>
            <h4>Login</h4>
        </div>

        <div>
            <form action="" method="post">
                {% csrf_token %}
                <!--{{ form }}-->
<!--        form의 형태를 더 예쁘게 하기 위해 bootstrap이 적용된 form을 사용한다.-->
                {% bootstrap_form form %}
<!--            버튼을 알약 형태로 만든다
                                col은 너비(12가 100%-부모의 너비를 모두 가져가는 것) mt는 margin-top-->
                <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
            </form>
        </div>
    </div>

{% endblock %}

<!--create.html -->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}

    <div style="text-align: center; max-width:500px;margin:4rem auto;">
        <div class = "mb-4"></div>
        <h4>SignUp</h4>
        <form action="{% url 'accountapp:create' %}" method = "post">
            {% csrf_token %}
            {% bootstrap_form form %}
            <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
        </form>
    </div>

{% endblock %}

---

---

[출처] 작정하고 장고! Django Pinterest 따라만들기 : 바닥부터 배포까지

섹션 2. Accountapp implementation (22강 ~ 23강)

https://www.inflearn.com/course/%EC%9E%A5%EA%B3%A0-%ED%95%80%ED%84%B0%EB%A0%88%EC%8A%A4%ED%8A%B8/dashboard