Blog project - Register page

 Blog Project

Register page

 만든지는 오래 되었지만 이제서야 정리하는 글을 씁니다. 코딩을 하고 그 내용을 매일 정리하고자 마음 먹었지만 코딩을 한는 것 보다 글을 쓰는 것이 더 어렵습니다.  이전 글에서 로그인 페이지 까지는 정리 했습니다. 레지스트 페이지는 훨씬 간단합니다. 

 프론트 엔드의 HTML 코드는 다음과 같습니다.

 

{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% block content %}
{% include "header.html" %}

<!-- Page Header -->
<header class="masthead" style="background-image: url('https://images.unsplash.com/photo-1531592937781-344ad608fabf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>Register</h1>
<span class="subheading">Start Contributing to the Blog!</span>
</div>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{{ wtf.quick_form(form, novalidate=True, button_map={"submit": "primary"}) }}
</div>
</div>
</div>

{% include "footer.html" %}
{% endblock %}

 

 코드가 짧은 만큼 구조도 간단합니다. 미리 만들어둔 header 과 footer 인 jinja 의 문법에 맞추어 위아래로 붙여 줍니다.  Wtform을 사용하기 위해 import 해주고 bootstrap 의 base 도 불러 줍니다. 위에서 부터 차례로 크기를 설정해 주고 정의된 wtform도 적당한 위치에 붙여 넣습니다.

 

@app.route('/register', methods=["GET", "POST"])
def register():
form = RegisterForm()
if form.validate_on_submit():
hash_and_salted_password = generate_password_hash(
form.password.data,
method='pbkdf2:sha256',
salt_length=8
)
new_user = User(
email=form.email.data,
name=form.name.data,
password=hash_and_salted_password,
)
db.session.add(new_user)
db.session.commit()
login_user(new_user)
return redirect(url_for("get_all_posts"))

return render_template("register.html", form=form, current_user=current_user)

 백엔드의 코드는 위와 같습니다. 라우터를 설정해 주고 GET, POST 를 꼭 정의해 주어야 합니다. 언제나 그렇듯이 대충 빼먹으면 에러가 발생합니다. 대충 빼먹었기 때문에 왜 에러가 나는지 보이지도 않습니다. Form 이 post  되면 이를 if 문으로 확인한 뒤에 그 form과 함께 오는 데이터를 읽어 들여서 데이터 베이스에 저장합니다. 

 암호화 하기 위해 hash  테이블을 활용했습니다. Hash 테이블에 사용할 메소드와 솔트 길이는 코드에 기재되어 있으니 확인 하시면 됩니다. 추후에 해시 와 솔트에 대한 개념도 정리해 보겠습니다. 

 

 

 대충 완성한 블로그는 아래에 링크를 걸어 두었습니다. 간단한 블로그를 만드는데 며칠이나 걸렸습니다. 정말 쉽게 되는건 없는 것 같습니다.

 

다음 프로젝트도 현재 작업중입니다. 완료 되면 정리해서 블로그에 정리하도록 하겠습니다.

 

jisung-blog.herokuapp.com/

Jisung's Blog

2021.03.31 - [Project/Python] - Blog project - Login

Blog project - Login

2021.02.04 - [Project/Python] - Blog project - Bootstrap

Blog project - Bootstrap