[DJANGO 기초] 4. 회원가입 페이지 만들기 (MTV 구조

[DJANGO 기초] 4. 회원가입 페이지 만들기 (MTV 구조 - T, V 작성)

silversu 2021. 6. 16. 17:03

2021. 6. 16. 17:03

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/13

[DJANGO 기초] 3. Django admin, 개발 서버 활용

본 프로젝트는 패캠 강의를 참고 합니다. <이전 글> https://silvercoding.tistory.com/12 https://silvercoding.tistory.com/11 [DJANGO 기초] 가상환경 설정 및 앱 생성 프레임 워크 - 자주 사용되는 코드를..

silvercoding.tistory.com

Tamplate은 Bootstrap 을 이용하여 작성해준다.

작업을 할 때 저장하는 습관을 꼭 들여야 할 것 같다. 저장 안하고 페이지 실행해서 에러뜬것만 오천만번이다.

Bootstrap 이용을 위해 다음 링크에서 코드를 가져오면 된다.

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

회원가입 창 만들기

1. Template 작성하기

user 폴더 ---> templates 폴더 ---> register.html

Getting started -- CSS 부분과 Javascript 부분을 head태그 안에 넣어준다. starter template 에서 meta태그도 가져와 준다.

<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">    

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    </head>

    <body>
    </body> 

</html>

그럼 우선 이런 모양을 띈다.

Forms --- Overview 코드를 가져온다!

<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="container">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
        </div>
        <div class="row">
            <form>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </body>

</html>

회원가입 글씨 넣어주고 그 밑에 회원가입 form을 넣어주었다.

폴더에 저장된 register.html 을 열어보면 다음과 같이 실행이 된다.

디자인이 마음에 안드니 바꾸어 준다.

- 한글로 바꾸기, container 적용, placeholder 작성해주기

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div class="row-mt5">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
        </div>
        <div class="row mt-5">
            <form>
                <div class="form-group mb-3">
                    <label for="username" class="form-label">사용자 이름</label>
                    <input type="text" class="form-control" id="username" placeholder="사용자 이름">
                </div>
                <div class="form-group mb-3">
                    <label for="password" class="form-label">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호">
                </div>
                <div class="form-group mb-3">
                    <label for="re-password" class="form-label">비밀번호 확인</label>
                    <input type="password" class="form-control" id="re-password" placeholder="비밀번호 확인">
                </div>
                <button type="submit" class="btn btn-primary">등록</button>
            </form>
        </div>
    </div>

</body>

</html>

원하는 대로 작성이 완료 되었다.

2. View 작성하기

- community ---> user ---> views.py

from django.shortcuts import render

def register(request):
    return render(request, "register.html")

- community --> urls.py

urlpatterns = [
    ...
    path('user/', include('user.urls'))

]

urlpatterns 안에 user 경로를 지정해준다.

- community ---> user ---> urls.py

user 폴더 안에 urls.py를 생성한다.

from django.urls import path
from . import views


urlpatterns = [
    path('register/', views.register)
]

views.py의 register 함수를 import 하여 전달해준다. 이렇게 작성을 해놓으면 .../user/register 경로를 치면 register.html이 렌더링 될 것이다.

- 개발자 서버 들어가보기

터미널

python manage.py runserver

이제 서버로 들어가서 확인을 해보자.

터미널에 뜨는 주소 뒤에 /user/register 작성을 해준다.

그러면 이렇게 잘 연결이 된 것을 볼 수 있다.

데이터를 파이썬 쪽으로 전달

주소를 쳐서 회원가입 창으로 들어갈 수 있게 되었으니, 이제는 POST요청을 하여 데이터를 서버로 전달해주는 작업을 해야한다.

1. Template 작성하기

community ---> user ---> register.html

  ...
  		 <form method="POST" , action=".">
                    {% csrf_token %}
                    <div class="form-group mb-3">
                        <label for="username" class="form-label">사용자 이름</label>
                        <input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username">
                    </div>
                    <div class="form group mb-3">
                        <label for="password" class="form-label">비밀번호</label>
                        <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
                    </div>
                    <div class="form group mb-3">
                        <label for="re-password" class="form-label">비밀번호 확인</label>
                        <input type="password" class="form-control" id="re-password" placeholder="비밀번호 확인" name="re-password">
                    </div>
                    <button type="submit" class="btn btn-primary">등록</button>
                </form>
  ...

데이터를 파이썬 쪽으로 전달해주는 코드이다. POST method로 전달하고, action="."은 현재 주소로 전달하겠다는 뜻이다.

form 안에 {% csrf_token %} 이것을 꼭 넣어주어야 한다.

form 은 data 를 서버에 전달하는 것인데, 안좋게 사용하는 사람들이 다른 웹사이트에서 데이터 전달을 하는 경우가 있기 때문에 이를 방지하기 위한 코드라고 한다. 크로스 도메인을 막기 위해 암호화된 키를 숨겨놓는다. 그래서 키가 없으면 잘못된 요청으로 받아들여 요청을 거절하게 된다. 필수적인 코드이기 때문에 안써주면 에러가 난다!

그리고 input 태그에 name 속성도 추가해준다. 이 name 값으로 정보가 전달이 될 것이다.

2. View 작성하기

community ---> user ---> view.py

from django.shortcuts import render
from .models import User

def register(request):
    if request.method == 'GET':
        return render(request, "register.html")
    elif request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']

    user = User(
                Username = username,
                password = password
            )

    user.save()

    return render(request, "register.html")

요청 방법이 GET일 때와 POST 일 때를 다르게 작성해 주어야 한다.

여기까지 해서 silver 123456 으로 회원가입을 하고 admin에 들어가 보니 user 생성이 잘 되어있다.

3. 비밀번호 확인하기

community ---> user ---> view.py .py

from django.shortcuts import render
from .models import User

def register(request):
    if request.method == 'GET':
        return render(request, "register.html")
    elif request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']

        res_data = {}

        if password != re_password:
            res_data['error'] = "비밀번호가 다릅니다."
        else:
            user = User(
                Username = username,
                password = password
            )

            user.save()
            
        return render(request, "register.html", res_data)

res_data라는 dictionary를 생성해주고 password와 re_password의 값이 다르면 res_data의 키값을 error, value값을 문자열로 저장해준다. 그다음 render 함수에 res_data를 전달해 준다.

community ---> user ---> register.html

...
	<div class="row-mt5">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-12">
                {{error}}
            </div>
        </div>
...

그다음 회원가입 밑에 에러 문자열을 그려줄 부분을 하나 만든다. {{}} 안에 res_data의 키 값을 넣어주면 된다.

register.html 을 랜더링을 할때 res_data라는 값을 넘기면 res_data의 키와 {{error}}가 매핑이 된다.

--- 확인해보기

비밀번호를 다르게 치면 위와같이 나오는 것을 확인 해 보았다.

4. 모든 값이 입력되지 않았을 때 처리 & 비밀번호 암호화

위에까지 작업을 마쳤을 때 문제점이 있다.

사용자 이름, 비밀번호, 비밀번호 확인을 작성하지 않아도 에러 메시지가 뜨지 않으며,

사진과 같이 비밀번호가 공개되므로 문제가 될 수 있다. 따라서 비밀번호 암호화까지 작성을 해준다.

community ---> user ---> view.py .py

from django.shortcuts import render
from .models import User
from django.contrib.auth.hashers import make_password

def register(request):
    if request.method == 'GET':
        return render(request, "register.html")
    elif request.method == 'POST':
        username = request.POST.get('username', None) ## 기본 값 설정
        password = request.POST.get('password', None)
        re_password = request.POST.get('re-password', None)

        res_data = {}


        if not (username and password and re_password):
            res_data['error'] = "모든 값을 입력해주세요."
        elif password != re_password:
            res_data['error'] = "비밀번호가 다릅니다."
        else:
            user = User(
                Username = username,
                password = make_password(password)
            )

            user.save()
            
        return render(request, "register.html", res_data)

최종적으로 이렇게 작성 완료. makepassword를 import하여 password를 넣어주면 비밀번호 암호화가 된다. 그리고 request.POST에 get함수를 이용하여 기본 값을 None으로 설정해준다. 그다음 username, password, re_password를 and로 연결해주어 하나라도 작성이 되지 않으면 error 메시지가 뜨게 작성해준다.

결과 확인

모든 값을 입력하지 않았더니 에러 메시지가 뜬다.

silver2로 가입을 다시 해주었더니 암호화된 비밀번호로 뜨는 것을 알 수 있다.

--- 여기서 model의 field(ex, 사용자 이메일) 를 추가하기 위한 절차 (포스팅은 생략)

model field 작성 ---> migration ---> register.html 작성 ---> view.py 작성

사용자 이메일 field를 추가한 결과이다.

정말 긴 여정이었다. 다음에는 static 파일 관리와 CDN 에 대하여 알아볼 예정이다.

'웹 > Django' 카테고리의 다른 글

[DJANGO 기초] 6. 세션, 로그인 페이지 구현 (0)	2021.06.19
[DJANGO 기초] 5. Static 파일 관리, 부트스트랩 CSS 테마 적용 (0)	2021.06.19
[DJANGO 기초] 3. Django admin, 개발 서버 활용 (0)	2021.06.14
[DJANGO 기초] 2. MTV의 Model 생성, sqlite db 기본적인 관리 (0)	2021.06.14
[DJANGO 기초] 1. 가상환경 설정 및 앱 생성 (0)	2021.06.13

🤍

[DJANGO 기초] 4. 회원가입 페이지 만들기 (MTV 구조 - T, V 작성)

'웹 > Django' 카테고리의 다른 글

+ Recent posts

티스토리툴바