반응형
부트스트랩을 이용해서 회원가입 페이지 뷰를 만들어보자.
https://getbootstrap.com/docs/4.4/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
getbootstrap.com
해당 부트스트랩 사이트에서 css, js 링크를 가져온다.
1. register.html
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row mt-5">
<h1>회원가입</h1>
</div>
<div class="row mt-5">
<div class="col-12">
<form method="POST" action=".">
<div class="form-group">
<label for="username">아이디</label>
<input type="text" class="form-control" id="userid" placeholder="아이디" name="userid" />
</div>
<div class="form-group">
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username" />
</div>
<div class="form-group">
<label for="username">비밀번호</label>
<input type="password" class="form-control" id="password" placeholder="비밀번호" name="password" />
</div>
<div class="form-group">
<label for="username">비밀번호 확인</label>
<input type="password" class="form-control" id="re-password" placeholder="비밀번호 확인" name="re-password" />
</div>
<button type="submit" class="btn btn-primary">등록</button>
</form>
</div>
</div>
</div>
</body>
</html>
2. app.py
app.py에 더미코드를 추가해서 제대로 만들어졌는지 확인해보자.
...생략...
@app.route('/register') # 경로설정
def register():
return render_template('register.html')
...생략.../register 경로로 접근하면 register.html을 브라우저로 응답하는 것이다.
반응형
'PNU DSC > Solution Challenge' 카테고리의 다른 글
| Flask 09. Flask-WTF (0) | 2020.03.10 |
|---|---|
| Flask 08. 회원관리 - Controller (0) | 2020.03.09 |
| Flask 06. 회원가입 - Model (0) | 2020.03.09 |
| Flask 05. Jinja2 (0) | 2020.03.09 |
| Flask 04. FLask-SQLAlcemy (0) | 2020.03.08 |