[django 커뮤니티] 회원가입 (views.py, templates, register.html, bootstrap, urls.py), static 파일 적용, URL 경로 지정

티스토리 뷰

django project/커뮤니티

[django 커뮤니티] 회원가입 (views.py, templates, register.html, bootstrap, urls.py), static 파일 적용, URL 경로 지정

지휘리릭 2020. 1. 18. 19:30

1. 회원가입 views.py

- views.py 파일은 화면에서 이루어지는 로직들을 담는 파일이다. 회원가입 url에 접속하는 경우는 두 가지로 나뉜다. 그냥 아무런 액션을 취하지 않고 페이지에 있는 경우(GET), 회원가입을 위한 정보를 입력하고 '회원가입' 버튼을 누르는 경우(POST) 두 가지로 나눠서 생각해야한다.

- 이 두가지를 어떻게 구분할 수 있을까? url에 연결되었을 때, 요청정보가 request라는 변수를 통해서 들어온다. 요청된 페이지가 GET 인지 POST 인지 알 수 있다.

- 그렇다면 두 가지를 나눈 다음에는 어떻게 다르게 표시해야하는가? 'GET' 의 경우에는 그냥 회원가입에 해당하는 html 파일을 연결해주면 된다. 'POST'의 경우에는 입력된 정보를 인식하고 users (사용자) 클래스에 저장해야한다.

- 함수형 view 와 클래스형 view로 나뉘는데, 이번 프로젝트에서는 함수형 뷰를 사용한다.

- 회원가입 정보를 다 입력하고 회원가입 버튼을 누른 POST 라면, 입력한 정보를 request.POST.get 함수를 사용해서 가져온다. 그리고 에러 발생 메세지를 나타내기 위해, errorMsg 라는 딕셔너리 변수를 생성한다.

- 네 개의 정보를 모두 입력하지 않은 경우와 비밀번호와 재입력 비밀번호 값이 다른 경우에는 에러 내용을 메세지 변수에 담는다. 모두 다 제대로 입력한 경우에는 앞서 만든 models.py 의 Users 클래스를 가져온다. 변수 user에 Users 모델에 필요한 필드를 채우고 save() 메소드를 호출하여 DB에 저장된다.

- save 하여 DB에 저장되고 나면 register.html 파일과 에러메세지를 같이 전달하여 회원가입 페이지로 접속하고 에러메세지가 있다면 같이 출력될 수 있도록 한다.

- make_password 를 사용하여 비밀번호를 입력했을 때, ******* 으로 나오도록 한다.

from django.shortcuts import render
from django.contrib.auth.hashers import make_password, check_password
from .models import Users

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)
        repassword = request.POST.get('re-password', None)
        useremail = request.POST.get('useremail', None)
        errorMsg = {}

        if not (username and useremail and password and repassword):
            errorMsg['error'] = "모든 값을 입력해야 합니다."
        elif password != repassword:
            errorMsg['error'] = "비밀번호가 다릅니다."
        else:
            user = Users(
                username = username,
                password = make_password(password),
                useremail = useremail
            )
            user.save()

        return render(request, 'register.html', errorMsg)

2-1. templates 템플릿

- django에서는 html 파일을 관리할 수 있도록 templates 폴더 지정 기능을 지원해준다. html 파일을 담을 폴더를 생성하고 settings.py 에서 다음과 같이 템플릿 저장 폴더를 지정한다. 그러면 장고에서 해당 폴더에서 html 파일을 알아서 찾고 연결해준다.

TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            TEMPLATE_DIR,
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2-2. css static 파일 : bootstrap 적용

- static 이라는 폴더를 새로 생성하고, 그 안에 static 파일들을 저장할 것이라고 명시한다.

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

- 그리고 static 폴더에는 css 파일이나 js 등 여러 파일을 저장한다. 아래의 사이트에서 bootstrap.min.css 파일을 다운로드하여 static 폴더안에 저장한다.

https://bootswatch.com/

Bootswatch: Free themes for Bootstrap

Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.

bootswatch.com

2-3. bootstrap을 사용하기 위해 필요한 파일들

- Bootstrap을 사용하기 위해 bootstrap.css, jquery.js, popper.js, bootstrap.js 가 필요하다. 이 파일들은 중간 서버? 개념의 CDN에서 불러올 수도 있고, 다운로드 받아 사용할 수도 있습니다. 다운로드하는 경우에 2-2 에서 설명한 것처럼 static 파일을 지정해야한다.

3-1. extends base.html bootstrap css

- 모든 html 파일에 bootstrap을 적용한다. 그러면 모든 html 파일의 head 부분 코드가 중복되게 된다. 코드의 중복을 막기 위해 {% extends 'base.html' %}을 사용한다. 중복되는 head 부분을 base.html에 저장하고 html 마다 base.html 을 불러오도록 한다.

- {% block contents %} code {% endblock %} 이 둘 사이에 있는 code 부분에 다른 html 파일의 코드 내용이 들어가서 적용된다.

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel = "stylesheet" href = "/static/minty_bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></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>
    </head>
    <body>
        <div class = "container">
            {% block contents %}
            {% endblock %}
        </div>
    </body>
</html>

3-2. 회원가입 register.html

- 회원가입 페이지를 위한 register.html

- {% csrf_token %} : 다른 사이트에서 우리 서버로 전달하는 것을 막는다. 크로스 도메인 방지. 암호화된 정보 (토큰)을 저장한다.

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

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

<div class = "row mt-5">
    <div class = "col-12">
        {{ error }}
    </div>
</div>    

<div class = "row mt-5">
        <div class = "col-12">
            <form method = "POST" action=".">
                {% csrf_token %}
                <div class="form-group">
                    <label for="username">사용자 이름</label>
                    <input type="text" class="form-control" id="username" placeholder ="사용자 이름" name = "username">
                </div>
                <div class="form-group">
                        <label for="useremail">사용자 이메일</label>
                        <input type="email" class="form-control" id="useremail" placeholder = "사용자 이메일" name = "useremail">
                </div>
                <div class="form-group">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder = "비밀번호" name = "password">
                </div>               
                <div class="form-group">
                        <label for="re-password">비밀번호 확인</label>
                        <input type="password" class="form-control" id="re-password" placeholder = "비밀번호 확인" name = "re-password">
                </div>
                <button type="submit" class="btn btn-primary">등록</button>
            </form>
        </div>
</div>
{% endblock %}

4. 경로 지정

- http://127.. 어쩌고 페이지에 처음 들어가면 아래와 같은 화면만 나온다. 그것은 아직 아무런 경로를 지정하지 않았기 때문이다. 처음 배울 때에는 url 경로 이동에 대해서 이해할 수 없었다. 어떻게 타고 타고 들어가는지...

- http://127.0.0.1:8000/users/register/ 을 접속하려는 경우에 일단 djangoCommunity > urls.py 으로 접속해서 'users/' 가 정의된 경로로 이동한다. path('users/', include('users.urls')) users 폴더의 urls 파일에 포함되어있다고 명시되어 있으니 users > urls.py로 이동한다. ( ※ 생성된 app 폴더에는 urls 파일이 없기 때문에 개별적으로 urls.py 파일을 생성해줘야한다.)

from django.contrib import admin
from django.urls import path, include

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

- users > urls.py 파일로 들어오면 'register/' 에 해당하는 경로로 이동하게 된다. 이 때, 연결된 경로는 views.py 파일의 register라는 함수가 된다. 다른 파일에 있는 함수와 연결하는 것이기 때문에 from . import views 를 명시해줘야한다.

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

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

- url 경로 지정의 흐름을 알고나니, 그냥 users > urls.py 파일을 따로 지정하고 그 안에서 또 경로를 지정하고 그렇게 하느니 차라리 메인 폴더의 urls.py 파일에서 모든 것을 다 지정하는게 더 낫지 않나 싶었다. 그런데 계속해서 배우고 강의를 듣고, 직접 프로젝트를 만들어보니 저런 식으로 연관된 페이지를 묶어서 경로를 지정하는 것이 url 페이지 관리하기가 용이하다는 생각도 들었다.

'django project > 커뮤니티' 카테고리의 다른 글

[django 커뮤니티] 게시판 글쓰기 ( models.py, admin.py, views.py, forms.py, templates, html, urls.py) (0)	2020.01.18
[django 커뮤니티] 로그인, 로그아웃(views.py, login.html, forms.py), 홈화면 index.html, Cookies, Session, sessionId (0)	2020.01.18
[django 커뮤니티] users models.py, 모델링, admin.py, 사용자 정보 기입, createsuperuser (0)	2020.01.18
[django 커뮤니티] 프로젝트 생성, app 생성, settings.py 수정, superuser 생성 (0)	2020.01.18
[django 커뮤니티] 장고를 이용한 게시판 페이지 만들기 (0)	2020.01.18

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

호로록

티스토리 뷰

[django 커뮤니티] 회원가입 (views.py, templates, register.html, bootstrap, urls.py), static 파일 적용, URL 경로 지정

'django project > 커뮤니티' 카테고리의 다른 글

티스토리툴바