Python Study
4. Django 기초 (2) : VIEW, 로그인 만들기
Louis.T.Kim
2020. 3. 3. 22:21
1. VIEW - 로그인 페이지 만들기
- template 폴더 안에 register.html 파일을 만든다.
- bootstrap에서 css, js link를 연결해준다.
- bootstrap forms에서 login form을 붙인다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-12 text-center">
<h1>회원가입</h1>
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-center">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never share your email with anyone else.</small
>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
/>
</div>
<div class="form-group form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
/>
<label class="form-check-label" for="exampleCheck1"
>Check me out</label
>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
views.py 에 request 함수를 추가한다.
Project / urls.py에 path 추가한다.
Models / urls.py 파일을 만들어 아래와 같이 작성한다.
2. form parsing
- N/M
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-12 text-center">
<h1>회원가입</h1>
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-center">
<!-- Django에서 넘겨받은 Data -->
{{ error }}
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-center">
<!-- form method 설정 -->
<form method="POST" action=".">
<!-- 암호화된 키를 숨겨준다. 이상한 곳에서 form이 호출되지 않는다. -->
<!-- 장고에서는 이것이 기본으로 설정되어있다. -->
{% csrf_token %}
<div class="form-group">
<label for="username">사용자 이름</label>
<!-- id는 label과 input을 매칭시킨다. name은 Backend로 넘길 때, key의 이름이다-->
<input
type="text"
class="form-control"
id="username"
placeholder="사용자 이름"
name="username"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
id="password"
placeholder="비밀번호"
name="password"
/>
</div>
<div class="form-group">
<label for="re-password">Password</label>
<input
type="password"
class="form-control"
id="re-password"
placeholder="비밀번호확인"
name="re-password"
/>
</div>
<div class="form-group form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
/>
<label class="form-check-label" for="exampleCheck1"
>Check me out</label
>
</div>
<button type="submit" class="btn btn-primary">등록</button>
</form>
</div>
</div>
</div>
</body>
</html>
- 모든 값 입력 예외처리
