Intro
항해 99 사전 프로젝트로 출근 정보 도우미 웹사이트를 제작하기 시작했다. 필자는 팀원 들 간의 상의 하에 회원 가입 파트를 맡기로 했고 이에 즉시 개발에 착수하였다.
1) IDE
- Vscode
2) 라이브러리
- Flask
- requests
3) version
- python 3.8
4) 데이터베이스
- MongoDB
1) 회원가입 페이지 html 템플릿 코드
https://7942yongdae.tistory.com/86
HTML - 부트스트랩으로 회원가입 양식(Form) 화면 만들기
이번에는 간단한 회원가입 양식(Form) 화면을 만들어 보려고 합니다. 단순히 HTML만 사용하지 않고, UI 라이브러리인 Bootstrap도 이용해서 조금 더 유려하고, 유효성 검사까지 포함한 회원가입 폼을
7942yongdae.tistory.com
회원가입에 필요한 폼을 찾던 중 html Form 태그를 이용하여 만든 적당한 폼을 발견했다. 부트스트랩을 이용하여 간결하면서도 직관적인 ui를 구성한 템플릿을 찾아 이를 이용하여 백그라운드 이미지에 출근 정보 도우미 웹사이트에 어울리는 백그라운드 이미지를 입히고 채도를 조절했다. 폼에는 PK값으로 사용할 email, 비밀번호 값과 그 외 정보들을 입력하도록 하였다.
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>출근길을 도와줘 회원가입 페이지</title>
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
* {
font-family: "Gowun Dodum", sans-serif;
}
body {
min-height: 100vh;
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(https://previews.123rf.com/images/sudowoodo/sudowoodo1509/sudowoodo150900073/45653619-diverses-personnes-sur-le-m%C3%A9tro-trajet-en-regardant-les-smartphones-vector-illustration-dans-le-styl.jpg);
background-position: center;
background-size: cover;
}
.input-form {
max-width: 680px;
margin-top: 80px;
padding: 32px;
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
}
.mb-10 {
font-weight: 900;
display: flex; /*중요!! 아래 4줄 같이 따라다님 */
flex-direction: row;
justify-content: center;
align-items: center;
}
.mb-11 {
display: flex; /*중요!! 아래 4줄 같이 따라다님 */
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="input-form-backgroud row">
<div class="input-form col-md-12 mx-auto">
<h4 class="mb-10">출근길을 도와줘</h4>
<h5 class="mb-11">-회원가입-</h5>
<form class="validation-form" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="name">이름</label>
<input
type="text"
class="form-control"
id="name"
placeholder=""
value=""
required
/>
<div class="invalid-feedback">이름을 입력해주세요.</div>
</div>
<div class="col-md-6 mb-3">
<label for="password">비밀번호</label>
<input
type="password"
class="form-control"
id="password"
placeholder="10자 ~ 20자의 알파벳, 숫자 조합"
value=""
required
/>
<div class="invalid-feedback">비밀번호를 입력해주세요.</div>
</div>
</div>
<div class="mb-3">
<label for="email">이메일</label>
<input
type="email"
class="form-control"
id="email"
placeholder="you@example.com"
required
/>
<div class="invalid-feedback">이메일을 입력해주세요.</div>
</div>
<div class="mb-3">
<label for="address">주소</label>
<input
type="text"
class="form-control"
id="address"
placeholder="서울특별시 강남구"
required
/>
<div class="invalid-feedback">주소를 입력해주세요.</div>
</div>
<div class="mb-3">
<label for="address2"
>상세주소<span class="text-muted"
> (필수 아님)</span
></label
>
<input
type="text"
class="form-control"
id="address2"
placeholder="상세주소를 입력해주세요."
/>
</div>
<hr class="mb-4" />
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input"
id="aggrement"
required
/>
<label class="custom-control-label" for="aggrement"
>개인정보 수집 및 이용에 동의합니다.</label
>
</div>
<div class="mb-4"></div>
<button
class="btn btn-primary btn-lg btn-block"
id="signup"
type="submit"
>
가입 완료
</button>
</form>
</div>
</div>
<footer class="my-3 text-center text-small">
<p class="mb-1">© 2022 YD 출근길을 도와줘</p>
</footer>
</div>
</body>
<!--출처: https://7942yongdae.tistory.com/86-->
</html>
2) 회원가입 페이지 자바스크립트 템플릿 코드
위에서 정리한 템플릿 코드들이 정상적으로 post 형식을 거쳐 백엔드에 이동하도록 자바스크립트 코드가 필요했다.
- 필자는 ajax를 이용하여 백엔드에 정보를 보내주기 위해 jquery의 ajax 문법을 사용했다. ajax의 post 타입을 이용하여 폼에 입력된 정보들을 변수에 담아 백엔드 서버로 정보를 보내준다.
- 폼에서 submit 태그를 prop으로 가지고 있는 button을 누르면 ajax로 작성된 백엔드 서버 포스트 코드가 실행되고 정규식을 통해 검사하여 회원가입 정보들이 올바르게 작성되지 않았다면 alert문을 통해 매세지를 띄우는 코드를 작성하였다. window.eventListener 함수 내에 form.addEventListener를 추가하고 각 정보들을 id 태그를 통해 value()함수를 이용하여 값을 가져온다. 이를 변수에 담아 정규식을 담은 if문을 통해 검증하였다.
<script>
function Sign_Up() {
let name = $("#name").val();
let address = $("#address").val();
let password = $("#password").val();
$.ajax({
// 서버로 보낼게요
type: "POST",
url: "/register",
// 데이터를 실어 보낼게요
data: {
name_give: name,
address_give: address,
password_give: password,
},
// 리스폰스는 반응이라 상관 ㄴ
success: function (response) {
alert(response["msg"]);
//새로고침
window.location.reload();
},
});
}
window.addEventListener(
"load",
() => {
const forms = document.getElementsByClassName("validation-form");
Array.prototype.filter.call(forms, (form) => {
form.addEventListener(
"submit",
function (event) {
let password = document.getElementById("password").value;
let email = document.getElementById("email").value;
console.log(email);
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
if (
form.checkValidity() === true &&
!password.match("^(?=.*[a-zA-Z])(?=.*[0-9]).{10,20}$")
) {
alert(
"비밀번호는 10자 이상, 20자 이하에 알파벳, 숫자를 최소 한개 이상씩 포함해주어야 합니다."
);
event.preventDefault();
}
if (!email.match("\\w+@\\w+\\.\\w+(\\.\\w+)?")) {
alert("올바른 이메일 형식을 입력해주세요.");
event.preventDefault();
}
form.classList.add("was-validated");
},
false
);
});
},
false
);
</script>2) 회원가입 페이지 파이썬 백엔드 코드
- 필자는 프론트엔드에서 받은 회원가입 정보를 데이터베이스로 보내는 작업을 파이썬을 통해 진행하였다. 사용한 데이터베이스는 몽고디비로 리퀘스트 라이브러리를 통해 이름, 이메일, 비밀번호, 주소를 각각 키 값으로 받아 변수에 저장해주었다.
- 여기서 먼저 데이터베이스에서 이메일이 같은 계정이 존재하는지 서치하고 만일 존재한다면 jsonify 함수를 통해 회원가입이 불가하다고 전송해준다. 데이터베이스에 같은 계정이 존재하지 않다면 딕셔너리 형태의 변수에 각각의 정보를 담아 데이터베이스에 전송해주고 성공적으로 실행이 되었음을 알려준다.
- 이후 로그인 화면으로 리다이렉트가 되어 로그인 화면을 실행 시킨다.
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.kxum4.mongodb.net/Cluster0?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.dbsparta
@app.route('/')
def home():
return render_template('SignUp.html')
@app.route("/register", methods=["POST"])
def movie_post():
name_receive = request.form['name_give']
email_receive = request.form['email_give']
password_receive = request.form['password_give']
address_receive = request.form['address_give']
user = db.users.find_one({'email': email_receive})
if (bool(user) == False):
doc = {
'name':name_receive,
'email':email_receive,
'password':password_receive,
'address':address_receive
}
db.Page_Users.insert_one(doc)
return jsonify({'msg':'저장완료!'})
else:
return jsonify({'msg':'중복 계정이 존재합니다.'})
# 여기에 코딩을 해서 meta tag를 먼저 가져와보겠습니다.
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)'항해99 7기 활동' 카테고리의 다른 글
| 항해99 4주차 WIL (0) | 2022.06.05 |
|---|---|
| 항해99 3주차 WIL (0) | 2022.05.29 |
| 항해99 2주차 WIL (0) | 2022.05.22 |
| 항해99 3주차 스프링 입문 S.A (0) | 2022.05.20 |
| 항해99 1주차 WIL (2) | 2022.05.15 |
