부트스트랩에서 가져다온 정보를 일부 수정하고 label for, input type, id, placeholder 내용을 수정하였고 이메일과 비밀번호 확인 란을 새로 추가했다.
그리고 가져온 코드에서는 input 에 name 속성이 없었다.
name 값이 있어야 서버로 들어왔을 때 하나의 키, 변수가 될 수 있으므로 모두 만들도록 한다.
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
class="form-control"
id="username"
placeholder="username"
name="username"
/>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
class="form-control"
id="email"
placeholder="email"
name="email"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
id="password"
placeholder="password"
name="password"
/>
</div>
<div class="form-group">
<label for="re_password">Re-Password</label>
<input
type="password"
class="form-control"
id="re_password"
placeholder="re_password"
name="re_password"
/>
</div>
이제 이 화면에서 데이터를 서버로 전송해 주는 파이썬 코드를 만들어 본다.
GET
이름 그대로 어떠한 데이타를 서버로 부터 받아(GET)올때 주로 사용하는 Method.
데이터 생성/수정/삭제 없이 받아오기만 할때 사용된다.
가장 간단하고 많이 사용되는 HTTP Method
언급한대로 주로 데이터를 받아올때 사용되기 때문에 request에 body를 안 보내는 경우가 많다.
POST
데이터를 생성/수정/삭제 할때 주로 사용되는 Method.
데이터를 생성 및 수정 할때 많이 사용하기 때문에 대부분의 경우 requst body가 포함되서 보내진다.
<form method="POST" action=".">
{% csrf_token %}
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
class="form-control"
id="username"
placeholder="username"
name="username"
/>
</div>
이하 중략...
회원가입을 하는 사용자의 데이터를 전달하는데 POST 방식을 사용하므로 form method 에 표시해주고 현재 주소에 action 을 할 거라는 의미로 . 을 표기한다.
생략해도 현재 page 에 post 요청을 한다.
그리고 바로 아래에 {% csrf_token %} 를 작성한다.
장고 튜토리얼에도 있지만 폼이 데이터를 서버에 전달 하는데 보안 위험 요소가 있어서 위 코드를 작성해 넣어줘야 한다. 이렇게 하면 자동으로 암호화된 키를 숨겨 놓는다.
장고가 알아서 검증해 주도록 하는 장치 라고 생각하면 된다. 안 쓰면 에러가 난다.
이제 member/views.py 로 가서 코드를 작성해 보자.
이 register 로 들어오는 요청은 2가지 이다. 아래 두 가지를 구분해서 코드를 작성해야 한다.
주소를 입력해서 들어오는 경우 (GET method)
: 127.0.0.1:8000/member/register 즉, 로그인 페이지를 보여 달라는 GET 요청!
등록버튼을 눌러서 이 페이지에 접근하는 경우 (POST method)
: 정보(id, password) 를 입력해서 회원가입을 시켜 달라는 요청
def register(request):
if request.method == GET:
return render(request, 'register.html')
elif request.method == POST:
return render(request, 'register.html')
이제 elif 와 return 사이에 회원 가입을 하는 코드를 작성해야 한다.