구현 화면
-
로그인
-
회원가입
기능
로그인
아이디, 비밀번호 미입력 시 입력 안내문 생성
아이디, 비밀번호 입력 후 Sign in 버튼 클릭 시 home 페이지로 이동
회원가입 클릭 시 회원가입 창 이동
* 로그인 정보 저장 기능 및 DB 미구현
회원가입
모든 정보 미입력 시 입력 안내문 생성
비밀번호 & 비밀번호 확인 미일치 시 미일치 안내문 생성
모든 정보 입력 완료 후 가입하기 버튼 클릭 시 로그인 창 이동
코드
- login.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class="container">
<form action="{{ url_for('login_post') }}" method="post">
<table>
<tr>
<td><h2>로그인</h2></td>
</tr>
<tr>
<td><input type="text" name="user_id" placeholder="ID"></td>
</tr>
<tr>
<td><input type="password" name="password" placeholder="Password"></td>
</tr>
<tr>
<td><input type="checkbox"> 로그인 정보 저장</td>
</tr>
<tr>
<td><input type="submit" value="Sign in" class="btn"></td>
</tr>
<tr>
<td class="join"><a href="{{ url_for('join') }}">회원가입</a></td>
</tr>
</table>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li style="color:red;">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</form>
</div>
</body>
</html>- login.css
table {
width: 280px;
height: 250px;
margin: auto;
font-size: 15px;
}
.container {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid lightgrey;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="text"], input[type="password"] {
width: 250px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(233,233,233);
}
.btn {
width: 263px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(164, 199, 255);
}
.btn:active {
width: 263px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(61, 135, 255);
}
a {
font-size: 12px;
color: darkgray;
text-decoration-line: none;
}
.join {
text-align: center
}- join.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join</title>
<link rel="stylesheet" href="{{ url_for('static', filename='join.css') }}">
</head>
<body>
<div class="container">
<form action="{{ url_for('join_post') }}" method="post">
<table>
<tr>
<td><h2>회원가입</h2></td>
</tr>
<tr><td>아이디</td></tr>
<tr><td><input type="text" name="user_id" class="text"></td></tr>
<tr><td>비밀번호</td></tr>
<tr><td><input type="password" name="password" class="text"></td></tr>
<tr><td>비밀번호 확인</td></tr>
<tr><td><input type="password" name="password_confirm" class="text"></td></tr>
<tr><td>이름</td></tr>
<tr><td><input type="text" name="name" class="text"></td></tr>
<tr><td>생년월일</td></tr>
<tr><td><input type="date" name="birthdate" class="text"></td></tr>
<tr><td>이메일</td></tr>
<tr>
<td><input type="text" name="email" class="email"> @
<select>
<option>naver.com</option>
<option>gmail.com</option>
<option>daum.net</option>
<option>nate.com</option>
</select>
</td>
</tr>
<tr><td><input type="submit" value="가입하기" class="btn"></td></tr>
</table>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li style="color:red;">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</form>
</div>
</body>
</html>- join.css
table {
width: 280px;
height: 550px;
margin: auto;
}
.container {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid lightgrey;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.email {
width: 127px;
height: 32px;
font-size: 15px;
border: 0;
border-color: lightgray;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(233,233,233);
}
.text {
width: 250px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(233,233,233);
}
select {
width: 100px;
height: 32px;
font-size: 15px;
border: 1;
border-color: lightgray;
border-radius: 15px;
outline: none;
padding-left: 10px;
}
.btn {
width: 262px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(164, 199, 255);
}
.btn:active {
width: 262px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(61, 135, 255);
}
- app.py
from flask import Flask, render_template, request, redirect, url_for, flash
app = Flask(__name__)
app.secret_key = 'scrky'
@app.route('/')
def login():
return render_template('login.html')
@app.route('/login', methods=['POST'])
def login_post():
user_id = request.form.get('user_id')
password = request.form.get('password')
if not user_id:
flash("아이디를 입력하세요.")
return redirect(url_for('login'))
elif not password:
flash("비밀번호를 입력하세요.")
return redirect(url_for('login'))
flash("로그인 성공!")
return redirect(url_for('home'))
@app.route('/join')
def join():
return render_template('join.html')
@app.route('/join', methods=['POST'])
def join_post():
user_id = request.form.get('user_id')
password = request.form.get('password')
password_confirm = request.form.get('password_confirm')
name = request.form.get('name')
birthdate = request.form.get('birthdate')
email = request.form.get('email')
if not all([user_id, password, password_confirm, name, birthdate, email]):
flash("모든 정보를 입력해주세요.")
return redirect(url_for('join'))
if password != password_confirm:
flash("비밀번호가 일치하지 않습니다.")
return redirect(url_for('join'))
flash("가입 성공!")
return redirect(url_for('login'))
@app.route('/home')
def home():
return render_template('home.html')
if __name__ == '__main__':
app.run(debug=True)
Someone has been here