컴굥일지

[Django Study 08] DetailView, UpdateView, DeleteView 를 통한 accoutapp 구현 본문

프로그래밍 강의/Django

[Django Study 08] DetailView, UpdateView, DeleteView 를 통한 accoutapp 구현

gyong 2022. 4. 20. 00:05
반응형

[DetailView를 이용한 개인 페이지 구현]

#accountapp/views.py
# CreateView는 뭔가 만들어야 하니까 form이나 성공했을때 경로 등 정해줘야 하지만, 
# DetailView(reading)는 훨씬 더 간단하다
class AccountDetailView(DetailView):
    model = User  # 어떤 모델을 사용할 것인지
    template_name = 'accountapp/detail.html'  # 어떻게 시각화할 것인지
<!-- detail.html -->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
    <div>
        <div style="text-align: center; max-width:500px;margin:4rem auto;">
          <p>
            {{ user.date_joined }}
          </p>
          <h2>
            {{ user.username }}
          </h2>
        </div>
    </div>
{% endblock %}
#accountapp.urls.py
#특정 유저의 정보를 봐야하기 때문에 <int:pk>로 유저의 고유키를 받아야 한다.
path('detail/<int:pk>', AccountDetailView.as_view(), name='detail'),
<!-- header.html -->
{% if not user.is_authenticated %}
        <a href="{% url 'accountapp:login' %}?next={{ request.path }}">
            <span>login</span>
        </a>
{% else %}
<!--    pk에 지금 접속(로그인)해있는 user의 pk를 넣어준다. -->
        <a href ="{% url 'accountapp:detail' pk=user.pk %}">
            <span>MyPage</span>
        </a>
        <a href="{% url 'accountapp:logout' %}?next={{ request.path }}">
            <span>logout</span>
        </a>
{% endif %}
  • 그런데 주소창으로 접근을 해서 다른 사람의 정보를 볼 때가 있다.
  • 이때는 나의 정보가 뜨면 안 된다.
#accountapp/views.py
# CreateView는 뭔가 만들어야 하니까 form이나 성공했을때 경로 등 정해줘야 하지만, 
# DetailView(reading)는 훨씬 더 간단하다
class AccountDetailView(DetailView):
    model = User  # 어떤 모델을 사용할 것인지
    context_object_name = "target_user"
    template_name = 'accountapp/detail.html'  # 어떻게 시각화할 것인지

#여기서 context_object_name은 접속하는 사람이 아니라,
#로그인 한 사람을 대상으로 pk 값을 얻어야 해서 따로 설정하는 것이다.
#이거 설정 안하면 나중에 detail 창 들어가면 접속한 사람 info가 뜬다.

#특정 pk유저 정보를 확인하면 그 유저를 보여줘야 한다.
#연예인 인스타 들어갔는데 내 정보가 뜨는게 아니라 그 연예인 정보가 떠야함
<!-- detail.html -->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
    <div>
        <div style="text-align: center; max-width:500px;margin:4rem auto;">
          <p>
            {{ target_user.date_joined }}
          </p>
          <h2 style="font-family: 'NanumSquareB'">
            {{ target_user.username }}
          </h2>
        </div>
    </div>
{% endblock %}
  • 이렇게 코드를 짜면, 본인의 페이지에 들어가면 당연히 자신의 정보가 보이고, 타인의 페이지에 들어가면 그 사람의 정보를 볼 수 있게 된다.


[UpdateView를 이용한 비밀번호 변경 구현]

  • UpdateView는 CreateView에 들어가는 내용이랑 거의 비슷하다
#accountapp/views.py
class AccountUpdateView(UpdateView):
    model = User
        context_object_name = "target_user"
    form_class = UserCreationForm
    success_url = reverse_lazy('accountapp:hello_world')
    template_name='accountapp/update.html'
#accountapp/urls.py
path('update/<int: pk>', AccountUpdateView.as_view(), name = 'update'),
<!-- update.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>Change Info</h4>
<!-- pk 정보도 같이 넣어주어야 한다. -->
        <form action="{% url 'accountapp:update' pk=target_user.pk %}" method = "post">
            {% csrf_token %}
            {% bootstrap_form form %}
            <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
        </form>
    </div>
{% endblock %}
<!-- detail.html : 개인정보 수정 버튼 구현-->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
    <div>
        <div style="text-align: center; max-width:500px;margin:4rem auto;">
          <p>
            {{ target_user.date_joined }}
          </p>
          <h2>
            {{ target_user.username }}
          </h2>
<!-- target_user가 지금 접속한 user와 같을 때만 수정할 수 있어야 한다.-->
            {% if target_user == user %}
            <a href = "{% url 'accountapp:update' pk=user.pk %}">
                <p>
                    change info
                </p>
            </a>
            {% endif %}

        </div>
    </div>
{% endblock %}
  • target_user는 접속한 페이지의 주인이고, user는 현재 접속한 사람이다.

  • 다만, 현재 상태에서는 user 정보를 바꿀 때 아이디도 바꿔버릴 수 있다.

    ⇒ user 이름 칸을 비활성화 시켜줘야 한다.

  1. 새로운 form을 만들어준다. (forms.py 새로 생성)
#accountapp/forms.py
from django.contrib.auth.forms import UserCreationForm

class AccountUpdateForm(UserCreationForm): #기존의 UserCreationForm을 상속 받는다.
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['username'].disabled = True #초기화 이후에 id칸을 비활성화
  1. views.py의 AccountUpdateView 클래스에서 form을 바꾸어 준다.
form_class = AccountUpdateForm


[DeleteView기반 회원 탈퇴 구현]

#accountapp/views.py
class AccountDeleteView(DeleteView):
    model = User
        context_object_name = "target_user"
    success_url = reverse_lazy('accountapp:login')
    template_name = 'accountapp/delete.html'
#accountapp/urls.py
path('delete/<int:pk>', AccountDeleteView.as_view(), name='delete'),
<!-- delete.html -->
{% extends 'base.html' %}
{% block content %}
    <div style="text-align: center; max-width:500px;margin:4rem auto;">
        <div class = "mb-4"></div>
        <h4>Quit</h4>
        <form action="{% url 'accountapp:delete' pk=target_user.pk %}" method = "post">
            {% csrf_token %}
            <input type="submit" class="btn btn-danger rounded-pill col-6 mt-3">
        </form>
    </div>
{% endblock %}
<!-- detail.html : 탈퇴 버튼 구현-->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}

    <div>
        <div style="text-align: center; max-width:500px;margin:4rem auto;">
          <p>
            {{ target_user.date_joined }}
          </p>
          <h2>
            {{ target_user.username }}
          </h2>

            {% if target_user == user %}
            <a href = "{% url 'accountapp:update' pk=user.pk %}">
                <p>
                    change info
                </p>
            </a>
            <a href = "{% url 'accountapp:delete' pk=user.pk %}">
                <p>
                    Quit
                </p>
            </a>
            {% endif %}

        </div>
    </div>

{% endblock %}


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

섹션 2. Accountapp implementation (24강 ~ 26강)

반응형
Comments