티스토리 뷰

django project/쇼핑몰

[django 쇼핑몰] 회원가입 (views.py, class-based-view, register.html, templates, urls.py), 홈화면

지휘리릭 2020. 1. 23. 16:22

● 홈화면

- 일단 홈화면을 구성한다. 왜냐면 로그인, 로그아웃, 회원가입 등 성공했을 경우 홈화면으로 이동할 수 있도록 하려고..

 

base.html

- bootstrap을 사용하기 위한 파일들 bootstrap.css, jquery.js, popper.js, bootstrap.js을 CDN에서 불러온다.

<html>
    <head>
        <meta charset="utf-8">
        <meta name = "viewport" content = "width = device-width, initial - scale = 1"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        {% block header %}
        {% endblock %}
    </head>
    <body>
        <div class="container">
            {% block contents%}
            {% endblock %}
        </div>
    </body>
</html>

 

 

home.html

- views.py/home  함수에서 전달받은 user 변수를 출력한다. 두 개의 괄호 안에 넣어주는 이유는 html은 코딩적인 기능?이 없다. 그래서 변수를 출력하는 것조차도 html에서는 괄호안에 넣어서 출력해야한다. {%%} 퍼센트 표시가 들어간 것은 좀 더 코딩적인 부분이랄까.... if for else 등 기능적인 부분을 사용할 때에는 {%%}을 사용한다.

{% extends 'base.html' %}
{% block contents %}

{{user}}

{% endblock %}

 

 

users/views.py

- 간단하게 홈화면에는 로그인되어있는 사용자 이메일을 나타내도록 한다. 아무것도 없으면 어나니머스 유저

- 세션에서 가져온 정보는 html에서 users라는 변수로 사용할 수 있도록 한다.

from django.shortcuts import render

def home(request):
    return render(request, 'home.html', {'user' : request.session.get('user')})

 

django_Shoppingmall/urls.py

- 아무런 경로를 추가입력하지 않았을 때, 홈화면으로 이동하도록 한다. 위에서 만든 home 함수를 import 한다.

from django.contrib import admin
from django.urls import path
from users.views import home

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home),
]

 

 

- 현재는 아무런 사용자 정보가 없으므로 AnonymousUser 로 뜬다.

 

● 회원가입 

users/forms.py

- 회원가입 폼을 통해서 회원가입에 필요한 필드를 구성한다. 

- clean 함수에서는 유효성을 검사한다. email, password, re_password 세 개의 필드 값이 제대로 입력되었는지 확인한다. 그리고 비밀번호와 비밀번호 재입력이 일치하는지 확인한다. 

from django import forms
from .models import Users
from django.contrib.auth.hashers import check_password

class RegisterForm(forms.Form):
    email = forms.EmailField(
        error_messages={'required':"이메일을 입력하세요."},
        max_length=64, label = "이메일"
    )
    password = forms.CharField(
        error_messages={'required' : "비밀번호를 입력하세요"},
        widget = forms.PasswordInput, label = "비밀번호"
    )
    re_password = forms.CharField(
        error_messages={'required' : "비밀번호를 입력하세요"},
        widget = forms.PasswordInput, label = "비밀번호 재입력"
    )
    
    def clean(self):
        cleaned_data = super().clean()
        email = cleaned_data.get('email')
        password = cleaned_data.get('password')
        re_password = cleaned_data.get('re_password')

        if password and re_password:
            if password != re_password:
                self.add_error('password', '비밀번호가 서로 다릅니다.')

 

- 비밀번호와 재입력이 일치하지 않다면, 아래와 같이 메세지를 출력한다.

 

 

users/register.html

- form field 에 따라 각각 출력될 수 있도록 한다.

{% extends 'base.html' %}
{% block contents %}

<div class = "row mt-5">
    <div class = "cl-12 text-center">
        <h1>회원가입</h1>
    </div>
</div>

<div class = "row mt-5">
    <div class = "col-12">
        <form method = "POST" action = ".">
            {% csrf_token %}
            {% for field in form %}
            <div class = "form-group">
                <label for = "{{fied.id_for_label}}">{{field.label}}</label>
                <input type = "{{field.field.widget.input_type}}" class = "form-control" id = "{{field.id_for_label}}"
                placeholder = "{{field.label}}" name = "{{field.name}}">
            </div>
            {% if field.errors %}
            <span style = "color:red">{{field.errors}}</span>
            {% endif %}
            {% endfor %}
            <button type = "submit" class = "btn btn-primary">회원가입</button>
        </form>
    </div>
</div>

{% endblock %}

 

 

users/views.py

-  FBV 보다는 훨씬 간단하다. template_name 으로 해당하는 템플릿에 자동 렌더링 될 수 있도록 한다. 이것이 함수형 뷰에서의 render(request, 'register.html') 와 비슷한 역할을 한다. RegisterView가 사용할 폼을 form_class 값으로 설정한다. success_url 에서는 특정 기능이 끝나면 해당하는 페이지로 이동할 수 있도록 한다.

 

- 폼을 통해서 이메일, 비밀번호 값을 받아온다. 그리고 앞서 설정한 사용자 등급 필드는 'user'로 설정하여 회원가입하는 모든 사용자들이 'user' 등급을 갖게된다.

class RegisterView(FormView):
    template_name = 'register.html'
    form_class = RegisterForm
    success_url = '/'
    
    def form_valid(self, form):
        user = Users(
            email = form.data.get('email'),
            password = make_password(form.data.get('password')),
            level = 'user'
        )
        user.save()

        return super().form_valid(form)

 

 

'django project > 쇼핑몰' 카테고리의 다른 글

[django 쇼핑몰] Product List 상품 목록 (views.py, decorator, ListView, templates, product_list.html, {%load humanize%})  (0) 2020.01.24
[django 쇼핑몰] Product 상품 등록(models.py, admin.py, views.py, forms.py, templates, @method_decorator)  (0) 2020.01.24
[django 쇼핑몰] 로그인 로그아웃 (views.py, forms.py, login.html, templates)  (0) 2020.01.23
[django 쇼핑몰] startapp, migrate, 사용자 모델 정의( models.py, admin.py, makemigrations, migrate, 사용자 등급 필드)  (0) 2020.01.23
[django 쇼핑몰] 장고를 이용하여 쇼핑몰 만들기  (0) 2020.01.23
댓글