로그인을 위한 계정 생성 기능을 위한 첫 단계로 이전 포스팅 '3.1. 계정 정보 정의'에서 계정 정보를 정의하였다. 이제 정보를 입력 받을 페이지를 만들어보자. 페이지는 실제 보여지기 때문에 뷰(view)라는 이름으로 불린다.
페이지는 HTML 형태로 만들어진다. 아래와 같이 웹 서비스를 구현하는 패키지인 appmain 패키지의 template 디렉토리 아래에 register라는 이름으로 뷰를 구현하자.
▶ appmain/templates/register.html
{% extends "layout.html" %}
{% block content %}
<div>
<form method="POST" action="">
{{ form.hidden_tag() }} {# Transferring CSRF token = secret key #}
<div>
{{ form.username.label }}
{{ form.username }}
{% if form.username.errors %}
<div>
{% for error in form.username.errors%}
<span>{{ error }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div>
{{ form.email.label }}
{{ form.email }}
{% if form.email.errors %}
<div>
{% for error in form.email.errors%}
<span>{{ error }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div>
{{ form.password.label }}
{{ form.password }}
{% if form.password.errors %}
<div>
{% for error in form.password.errors%}
<span>{{ error }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div>
{{ form.confirm_password.label }}
{{ form.confirm_password }}
{% if form.confirm_password.errors %}
<div>
{% for error in form.confirm_password.errors%}
<span>{{ error }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div>
{{ form.submit }}
</div>
</form>
</div>
{% endblock content %}
register.html 파일을 보면 '{{ form.변수이름.속성이름 }}' 패턴이 반복된다. 이 부분들이 플라스크 템플릿 엔진에 의해 user 패키지에 지정했었던 forms.py의 변수들로 치환된다. 그리고 웹 페이지에 정보를 입력하면 forms.py에 정의했었던 변수들을 통해 웹 서버는 입력된 정보를 받을 수 있다.
그 외에 POST 방식(HTTP 메시지의 body에 데이터를 포함시켜 가져오는 방법)으로 데이터 전달 방식을 지정한 것과 웹 서비스를 구성하는 정상적인 웹 페이지에서 보낸 데이터인지 확인하는 비밀 키 form.hidden_tag()를 지정한 것을 눈여겨보면 된다.
비밀 키와 CSRF 보안 위험에 관한 내용은 「파이썬 웹 프로그래밍 기본」 편의 포스팅 '5. 입력 처리 - 5.1. 비밀 토큰(secret token)'에 내용을 자세히 기술하였다.
이제 웹 페이지들이 공통적으로 사용하는 메뉴 등이 구현되어 있는 layout.html에 '계정 생성' 페이지(register.html)로 이동할 수 있는 링크를 추가하면 뷰 구성이 마무리된다.
▶ appmain/templates/layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/main.css')}}">
{%if title%}
<title>{{title}}</title>
{%else%}
<title>Flask Exercise</title>
{%endif%}
</head>
<body>
<a href="{{url_for('main.home')}}">Home</a>
<a href="{{url_for('main.about')}}">About</a>
<!-- 이 부분이 추가된 계정생성 페이지 링크다 -->
<div>
<a href="{{url_for('user.register')}}">Register</a>
</div>
<!-- -->
<div>
{%block content%}{%endblock content%}
</div>
</body>
</html>이제 남은 작업은 폼으로 부터 받은 데이터를 어떻게 처리하는지 정의하는 '로직(logic) 또는 컨트롤(control)' 구현이 남았다. 로직의 기능을 먼저 간단히 살펴보면 입력된 데이터를 데이터베이스(DB)에 저장하는 것으로 요약하여 이야기 할 수 있다.
이어지는 포스팅에서 로직을 구현하고 사용자로부터 정보를 입력받아 계정을 생성하는 기능을 가지는 웹 서비스를 완성해보자.
'파이썬 웹 서비스 만들기' 카테고리의 다른 글
| 4. 계정 인증(로그인) 기능 - 4.1. 쿠키와 세션 (0) | 2020.10.05 |
|---|---|
| 3. 사용자 등록 기능 - 3.3. 계정 생성 (0) | 2020.09.30 |
| 3. 사용자 등록 기능 - 3.1. 계정 정보 정의 (0) | 2020.09.21 |
| 2. MVC: 모델/폼 - 뷰 - 로직(컨트롤) (0) | 2020.09.14 |
| 1. 웹 서비스의 기본 틀 (0) | 2020.09.11 |
댓글