3주차

생성일

2022/01/08 11:56

태그

Accountapp implementation

21강. CreateView를 통한 회원가입 구현

view.py에 추가

class AccountCreateView(CreateView): #CreateView import (alt+enter)
    model = User #User import
    form_class = UserCreationForm # UserCreationForm import
    success_url = reverse_lazy('accountapp:hello_world') #reverse_lazy import
		template_name = 'accountapp/create.html'
Python
복사

*class에서는 reverse_lazy 사용 / def에서는 reverse 사용

urls.py에서 경로 지정

from django.urls import path

from accountapp.views import hello_world, AccountCreateView

app_name = 'accountapp'

urlpatterns = [
    path('hello_world/', hello_world, name='hello_world')

    path('create/', AccountCreateView.as_view(), name='create')
]
Python
복사

create.html 만들기 (hello_world.html 이랑 같은 폴더에)

{% extends 'base.html' %}

{% block content %}

  <div>
    <form action="{% url 'accountapp:create' %}" method="post">
      {% csrf_token %}
      {{ form }}
      <input type="submit" class="btn btn-primary">
    </form>
  </div>

{% endblock %}
HTML
복사

git add .

git commit -m “django course 21 commit”

22강. Login / Logout 구현

urls.py에 urlpatterns에 추가.

path('login/', LoginView.as_view(template_name='accountapp/login.html'), name='login'),
path('logout/', LogoutView.as_view(), name='logout'),
# 각각 view import 해주기.
Python
복사

{% extends 'base.html' %}

{% block content %}

    <div style="text-align: center">
        <div>
            <h4>Login</h4>
        </div>
        <div>
            <form action="" method="post">
                {%csrf_token %}
                {{ form }}
                <input type="submit" class="btn btn-primary">
            </form>
        </div>
    </div>

{% endblock %}
HTML
복사

>Redirect Mechanism (원치 않는 경로로 가는 것을 방지)

next → LOGIN_REDIRECT_URL → Default

next 설정 : header.html nav4 버튼 수정.

{% if not user.is_authenticated %}
<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 %}
HTML
복사

LOGIN_REDIRECT_URL 설정 : setting.py 맨밑에 추가.

LOGIN_REDIRECT_URL = reverse_lazy('accountap:hello_world')
LOGOUT_REDIRECT_URL = reverse_lazy('accountap:login')
Python
복사

git add .

git commit -m “django course 22 commit”

23강. Bootstrap 을 이용한 Form 디자인 정리

django-bootstrap4 라이브러리를 이용하여 form 을 부트스트랩 스타일로 꾸며보고, 지금까지 만든 사이트의 디자인을 정리

(라이브러리 링크 : https://django-bootstrap4.readthedocs.io/en/latest/index.html)

pip install django-bootstrap4 로 설치.

settings.py에 INSTALLED_APPS에 'bootstrap4', 추가.

{% load bootstrap4 %} <!-- 추가 -->

{% bootstrap_form form %} <!-- {{ form }} 수정. -->

<!-- 스타일 수정 -->
	<!-- 맨위 div -->
	<div style="text-align: center; max-width: 500px; margin: 4rem auto">

	<input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
HTML
복사

create.html 도 똑같이 수정. 아래 코드 정도만 추가.

<div class="mb-4">
  <h4>SignUp</h4>
</div>
HTML
복사

https://hangeul.naver.com/2021/fonts/nanum에서

나눔스퀘어 글꼴 다운로드 후 다음과 같이 만들어준다.

head.html 아래 스타일 추가.

<style>
        @font-face {
            font-family: 'NanumSquareR';
            src: local('NanumSquareR'),
            url("{% static 'fonts/NanumSquareR.ttf' %}") format("opentype");
        }
        @font-face {
            font-family: 'NanumSquareEB';
            src: local('NanumSquareEB'),
            url("{% static 'fonts/NanumSquareEB.otf' %}") format("opentype");
        }
        @font-face {
            font-family: 'NanumSquareB';
            src: local('NanumSquareB'),
            url("{% static 'fonts/NanumSquareB.otf' %}") format("opentype");
        }
        @font-face {
            font-family: 'NanumSquareR';
            src: local('NanumSquareR'),
            url("{% static 'fonts/NanumSquareR.otf' %}") format("opentype");
        }
    </style>
HTML
복사

base.html 수정 (기본 base 글짜를 위에 코드로 가져온다)

<body style="font-family: 'NanumSquareR';">
HTML
복사

base.css에서 footer 글씨가 작은거 같아 수정.

.pragmatic_footer_button {
    font-size: .9rem;
 }
CSS
복사

git add .

git commit -m “django course 23 commit”

24강. DetailView를 이용한 개인 페이지 구현

view.py에 추가.

class AccountDetailView(DetailView):
    model = User
    context_object_name = 'target_user'
    template_name = 'accoutapp/detail.html'
Python
복사

detail.html 만들기.

{% extends 'base.html' %}

{% 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 %}
HTML
복사

urls.py에 추가.

path('detail/<int:pk>', AccountDetailView.as_view(), name='detail'),
Python
복사

git add .

git commit -m “django course 24 commit”

25강. UpdateView를 이용한 비밀번호 변경 구현

view.py에 추가

class AccountUpdateView(UpdateView):
    model = User
    form_class = UserCreationForm
    success_url = reverse_lazy('accountapp:hello_world')
    template_name = 'accountapp/update.html'
Python
복사

update.html 만들기

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

  <div style="text-align:center; max-width: 500px; margin: 4rem auto">
    <div class="mb-4">
      <h4>Change Info</h4>
    </div>
    <form action="{% url 'accountapp:update' pk=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 %}
HTML
복사

urls.py에 추가

path('update/<int:pk>', AccountUpdateView.as_view(), name='update'),
Python
복사

detail.html에 추가

						{% if target_user == user %}
            <a href="{% url 'accountapp:update' pk=user.pk %}">
                <p>
                    Change Info
                </p>
            </a>
            {% endif %}
HTML
복사

forms.py 만들기

from django.contrib.auth.forms import UserCreationForm

class AccountUpdateForm(UserCreationForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.fields['username'].disabled = True
Python
복사

git add .

git commit -m “django course 25 commit”

26강. DeleteView기반 회원탈퇴 구현

views.py에 추가

class AccountDeleteView(DeleteView):
    model = User
    success_url = reverse_lazy('accountapp:login')
    template_name = 'accountapp/update.html'
Python
복사

urls.py에 추가

path('delete/<int:pk>', AccountDeleteView.as_view(), name='delete'),
Python
복사

delete.html 만들기

{% extends 'base.html' %}

{% block content %}

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

{% endblock %}
HTML
복사

detail.html에 추가.

						<a href="{% url 'accountapp:delete' pk=user.pk %}">
                <p>
                    Quit
                </p>
            </a>
HTML
복사

header.html 회원가입란 추가

						<a href="{% url 'accountapp:create' %}">
                <span>SignUp</span>
            </a>
HTML
복사

git add .

git commit -m “django course 26 commit”

Authentication

27강. Authentication 인증시스템 구축

views.py 에서 def hello_world 부분 수정.

def hello_world(request):

    if request.user.is_authenticated:
        if request.method == "POST":

            temp = request.POST.get('hello_world_input')

            new_hello_world = HelloWorld()
            new_hello_world.text = temp
            new_hello_world.save()

            return HttpResponseRedirect(reverse('accountapp:hello_world'))
        else:
            hello_world_list = HelloWorld.objects.all()
            return render(request, 'accountapp/hello_world.html', context={'hello_world_list': hello_world_list})
    else:
        return HttpResponseRedirect(reverse('accountapp:login'))
Python
복사

context_object_name = 'target_user' 를 다른 클래스에도 다 넣어줌.

(AccountCreateView 제외)

delete, update html에 pk=target_user 로 수정.

git add .

git commit -m “django course 27 commit”

영상 참고. (어차피 회수할 코드를 직접 작성하진 않음)

28강. Decorator를 이용한 코드 간소화

Decorator

ex)

...

def decorator(func):
	def decorated():
		print(datetime.now())
		func()
		print(datetime.now())

	return decorated

...
Python
복사

→ @decorator를 함수 앞에 붙여주는 방식.

decorators.py 만들기

from django.contrib.auth.models import User
from django.http import HttpResponseForbidden


def account_ownership_required(func):
    def decorated(request, *args, **kwargs):
        user = User.objects.get(pk=kwargs['pk'])
        if not user == request.user:
            return HttpResponseForbidden()
        return func(request, *args, **kwargs)
    return decorated
Python
복사

view.py 수정.

has_ownership = [account_ownership_required, login_required]

@login_required
def hello_world(request):

    if request.user.is_authenticated:
        if request.method == "POST":

            temp = request.POST.get('hello_world_input')

            new_hello_world = HelloWorld()
            new_hello_world.text = temp
            new_hello_world.save()

            return HttpResponseRedirect(reverse('accountapp:hello_world'))
        else:
            hello_world_list = HelloWorld.objects.all()
            return render(request, 'accountapp/hello_world.html', context={'hello_world_list': hello_world_list})


class AccountCreateView(CreateView):
    model = User
    form_class = UserCreationForm
    success_url = reverse_lazy('accountapp:hello_world')
    template_name = 'accountapp/create.html'

class AccountDetailView(DetailView):
    model = User
    context_object_name = 'target_user'
    template_name = 'accoutapp/detail.html'

@method_decorator(has_ownership, 'get')
@method_decorator(has_ownership, 'post')
class AccountUpdateView(UpdateView):
    model = User
    context_object_name = 'target_user'
    form_class = AccountUpdateForm
    success_url = reverse_lazy('accountapp:hello_world')
    template_name = 'accountapp/update.html'

@method_decorator(has_ownership, 'get')
@method_decorator(has_ownership, 'post')
class AccountDeleteView(DeleteView):
    model = User
    context_object_name = 'target_user'
    success_url = reverse_lazy('accountapp:login')
    template_name = 'accountapp/delete.html'
Python
복사

git add .

git commit -m “django course 28 commit”

29강. superuser, media 관련 설정

>superuser 계정 생성 (터미널)

python manage.py createsuperuser

계정 이름과 이메일, 비밀번호를 입력.

http://127.0.0.1:8000/admin

>media 관련 설정

settings.py 맨밑에 코드 추가.

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Python
복사

pip install pillow

git add .

git commit -m “django course 29 commit”

Profileapp Implementation

30강. Profileapp 시작 그리고 ModelForm

account : Profile = 1 : 1 로 구성하자.

No delete View, detail View

python manage.py startapp profileapp

한 후 settings.py 에서 INSTALLED_APPS에 'profileapp',추가

urls.py에서 path('profiles/', include('profileapp.urls')),추가

profileapp에 urls.py 파일을 새로 만든다.

app_name = 'profileapp'

urlpatterns = [

]
Python
복사

profileapp/models.py 수정

from django.contrib.auth.models import User
from django.db import models

# Create your models here.


class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='profile')

    image = models.ImageField(upload_to='profile/', null=True)
    nickname = models.CharField(max_length=20, unique=True, null=True)
    message = models.CharField(max_length=100, null=True)
Python
복사

forms.py 파일을 만들어 준다.

from django.forms import ModelForm

from profileapp.models import Profile


class ProfileCreationForm(ModelForm):
    class Meta:
        model = Profile
        fields = ['image', 'nickname', 'message']
Python
복사

git add .

git commit -m “django course 30 commit”