[Django]회원가입폼 전송하기

이지수·2021년 8월 24일

django로 회원가입창을 만들어 회원정보를 전송해 값을 보여주는 화면까지 만들어 보았다.
방법은 다음과 같다.

1. 프로젝트이름과 똑같은 앱폴더 안의 url.py에 들어가서 경로를 확인한다.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('jisu/', include('product.urls'))
    path('member/' include('member.urls'))
]

member앱의 urls로 가라고 알려줌

2. 해당 앱폴더(member)로 가서 url.py에 (없으면 만들기)

from django.urls import path
from. import views

urlpatterns =[
        path('joinus', views.join),
        path('welcome', views.resu)
 ]

회원가입창(회원가입 폼값을 보낼 것임)과 결과창(회원가입 폼 값을 받을 것임)을 views에 있는 함수로 가라고 알려줌

3. 해당 앱폴더 안에 views.py에다가 함수를 만들어준다.

from django.shortcuts import render

def join(req):
  return render(req, 'joinin.html')

def resu(req):
  return render(req, 'hello.html')

join 과 result함수를 통해 joinin.html과 hello.html을 각각 연다.

4. 해당 앱폴더 안에 templates폴더 안에 html파일을 만들어준다.(join.html, hello.html)(폴더 없으면 폴더를 만들어서)

5. form태그를 이용해 만든 회원가입페이지 joinin.html파일

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>회 원 가 입</title>
</head>
<body>
  <div>
    <div>
      <form action = "http://로컬ip:포트번호/members/welcome" method="POST">
        {% csrf_token %}
        <fieldset>
          <legend>회원 가입 양식</legend>
          <table class ="table">
            <tr>
              <td>아이디 : </td>
              <td><input type ="text" name ="id" placeholder="아이디를 입력하세요"></td>
            </tr>
            <tr>
              <td>비밀번호 : </td>
              <td><input type="password" name ="pw" placeholder="비밀번호를 입력하세요"></td>
            </tr>
            <tr>
              <td>이름 : </td>
              <td><input type="text" name ="name" placeholder="이름을 입력하세요"></td>
            </tr>
            <tr>
              <td>주소 : </td>
              <td><input type="text" name ="address" placeholder="주소를 입력하세요"></td>
            </tr>
            <tr>
              <td>번호 : </td>
              <td>
                <select name = "phone_1">
                  <option value = "010">010</option>
                  <option value = "02">02</option>
                </select>
                -
                <input type = "text" name = "phone_2">
                -
                <input type ="text" name = "phone_3"></td>
            </tr>
            <tr>
              <td>동의 여부 : </td>
              <td>가입에 동의 합니다.<input type ="checkbox" name ="agree">
            </tr>
            <tr>
              <td></td>
              <td><button type = "submit">가입하기</button></td>
            </tr>
          </table>
        </fieldset>
      </form>
    </div>
  </div>
</body>
</html>

🤓 여기서 주의해야할 점❗
다른건 html태그 활용하여 작성하면 되는데

폼태그의 action속성에 폼의 value값을 넘겨줄 곳을 지정해준다.

{% csrf_token %}을 폼태그 바로 아래에다 써준다.
이유는 , django는 보안규칙이 있어서 폼안에 토큰을 넘겨주어 권한을 확인한다(?)

🚩 참고 !!
장고 탬플릿언어
{% 여기에 코딩가능 %}
{{ 변수 }}

6. 위의 값 중 결과창에 띄우고 싶은 값들을 해당 앱의 views.py에 함수에 추가로 코드를 작성해주어야한다.

아래의 분홍색으로 하이라이트된 부분이 추가된 부분이다.

from django.shortcuts import render

def join(req):
  return render(req, 'join.html')

def result(req):
  return render(req, 'hello.html',{'info1':req.POST.get('name'), 'info2':req.POST.get('id')})

info1이라는 변수명을 통해서 req에서(?)POST방식으로 받은 name이 name이라는 value값을 받아오고
info2라는 변수명을 통해서 req에서(?)POST방식으로 받은 name이 id라는 value값을 받아온다.

POST방식은 위의 join.html파일이 POST방식이며,
(폼태그가 get방식으로 전송한다면 req.GET.get이라고 쓰기)

name도 마찬가지로 위의 joinin.htm에서 해당하는 값을 가져올 수 있는 것이다.

7. 폼이 전송한 value값을 받을 hello.html 파일

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>회 원 가 입 완 료</title>
</head>
<body>
  <div>
    <div>회원 가입 완료</div>
    <div>안녕하세요 {{ info1 }}님.<br>
      회원가입이 완료 되었습니다.<br>
			{{ info1 }}님의 아이디는 {{ info2 }}입니다.
    </div>
  </div>
</body>
</html>