Flask로 웹개발: #11 레이아웃 - 회원 가입/탈퇴

이번 포스팅에서는 회원 가입 및 탈퇴를 할 수 있는 화면을 만들어 보겠습니다. 사실 ID와 PW를 받는 간단한 화면입니다. 앞서 html을 만드신 것처럼 손쉽게 만드실 수 있으십니다. 더해서 실제 사용할 수 있는 USER를 데이터베이스에 추가까지 해보겠습니다.

1. HTML 파일 생성

우선 HTML 파일을 생성해야 합니다. 회원 가입과 탈퇴에 대한 화면은 저희가 생성하지 않았거든요. 아래와 같이 생성하시면 됩니다. 윈도우를 사용하신다면 register.html과 delete.html 파일을 templates 폴더 밑에 생성해 주세요.

touch templates/register.html templates/delete.html

2. HTML 템플릿 작성

작성하실 HTML은 회원 가입과 탈퇴 시 ID와 PW를 입력하고 제출하는 간단한 화면입니다.
추가적으로 "{% with messages = get_flashed_messages() %}"를 추가하여 동작 시 메시지를 화면에 출력하는 코드를 넣었습니다. 이 코드를 통해 지금 내가 한 동작에 대한 결과를 피드백 받을 수 있습니다.

templates/register.html 파일:

{% extends "base.html" %}

{% block content %}
<div class="register-container">
    <h1>Register</h1>
    <form method="post">
        Username: <input type="text" name="username" required><br>
        Password: <input type="password" name="password" required><br>
        <input type="submit" value="Register">
    </form>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
</div>
{% endblock %}

templates/delete.html 파일:

{% extends "base.html" %}

{% block content %}
<div class="delete-container">
    <h1>Delete Account</h1>
    <form method="post">
        Username: <input type="text" name="username" required><br>
        Password: <input type="password" name="password" required><br>
        <input type="submit" value="Delete">
    </form>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
</div>
{% endblock %}

화면

여러분은 아직 볼 수 없지만 완성된 레이아웃의 형태를 미리 보여드립니다.

회원 가입

회원 탈퇴

3. User 생성

회원 정보를 저장할 데이터베이스를 생성해 보겠습니다. 특별할 것은 없고 password를 hash 처리하는 부분만 이전과 다릅니다. 2 명의 user만 우선 추가해 보겠습니다.

a@a.a 유저는 제가 로그인하거나 회원 가입/탈퇴 기능을 손쉽게 확인하고자 만든 아이디입니다. 여러분도 여러분이 편한 방식으로 만드시면 됩니다.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash
from app import FlaskUser

# create the extension
db = SQLAlchemy()
# create the app
app = Flask(__name__)
# configure the SQLite database, relative to the app instance folder
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///products.db"
# initialize the app with the extension
db.init_app(app)

class FlaskUser(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password = db.Column(db.String(200), nullable=False)

    def __repr__(self):
        return f'<User {self.username}>'

# Example products
users = [
    FlaskUser(username="user@example.com", password=generate_password_hash("password123", method='pbkdf2:sha256')),
    FlaskUser(username="a@a.a", password=generate_password_hash("123", method='pbkdf2:sha256')),
]

with app.app_context():
    db.create_all()
    db.session.add_all(users)
    db.session.commit()

결론

회원 가입 및 탈퇴에 대한 HTML을 만들어 보았습니다. 그리고 더비 유저(Dummy user)를 생성하여 데이터베이스에 입력까지 해보았습니다. 이번 포스팅으로 로그인, 로그아웃, 회원 가입 그리고 회원 탈퇴에 대한 화면을 모두 만들었습니다. 다음 포스팅에서는 실제 화면에서 동작할 기능들을 만들고 배포하여 테스트를 해보겠습니다.

도움이 되셨다면 공감 부탁드리겠습니다. 여러분의 공감이 정말 큰 힘이 됩니다.

감사합니다!