이번에는 GET, POST 등의 메소드를 구현하는 방법에 대해 알아보겠습니다. 회원가입을 예로 들자면, 처음 화면이 뜨기 위해서는 GET, 회원가입을 위해 등록 버튼을 클릭했을 때는 POST 메소드가 실행되어야 합니다.
HTML 파일에 post 메소드 선언하기
어떤 폼에 post 동작을 넣을지 정하는 부분입니다. 명확히 이해는 안가지만, 이렇게 했을 때는 아래 그림의 버튼을 클릭했을 때 post 메소드가 실행됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>회원가입</title> <!-- Bootstrap 초기화 부분 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </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"> <form method="post" action="."> <!-- POST method --> {% csrf_token %} <div class="form-group"> <label for="username">사용자명</label> <input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="이름을 입력하세요." name="username"> </div> <div class="form-group"> <label for="password">비밀번호</label> <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력하세요." name="password"> </div> <div class="form-group"> <label for="re-password">비밀번호 확인</label> <input type="re-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> | cs |
이제 버튼 클릭 시 post가 실행되므로, 파이썬 코드가 필요합니다.
views.py에 post 메소드 넣기
아래와 같이 GET, POST로 구분해서 각각 코드를 넣을 수 있습니다. HTML에서 가져온 사용자명과 비밀번호를 모델에 저장하는 기능까지 담아봤습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | from django.shortcuts import render from .models import BookUsers # Create your views here. def signup(request): if request.method == 'GET': # 페이지를 불러올 때 return render(request, 'signup.html') elif request.method == 'POST': # 페이지 내에서 POST 발생 시 username = request.POST['username'] password = request.POST['password'] re_password = request.POST['re-password'] users = BookUsers( username = username, password = password ) users.save() return render(request, 'signup.html') | cs |
여기까지 한 뒤, 이제 서버를 실행하고 회원가입을 합니다. 그러면 어드민 페이지에 다음과 같이 유저가 등록된 것을 확인할 수 있습니다. 즉, 위 views.py 코드에 단순하게 save() 해주기만 하면 바로 모델에 저장이 됩니다.
여기까지는 단순하게 구현만 한거고, 실제로 서비스 개발에 필요한 예외처리는 하나도 되어 있지 않은 상태입니다. 예를 들어 비밀번호 확인하는 란이 있는데, 지금은 그 부분이 누락되어 있습니다.
예외처리 코드 넣기
비밀번호 확인하는 방법은 간단합니다. views.py에 password와 re-password를 담아왔기 때문에, 비교만 하면 됩니다. 비교해서 다를 경우, 다시 입력하라는 코드는 다음 순서로 진행합니다.
비밀번호 확인하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | from django.shortcuts import render from .models import BookUsers # Create your views here. def signup(request): if request.method == 'GET': # 페이지를 불러올 때 return render(request, 'signup.html') elif request.method == 'POST': # 페이지 내에서 POST 발생 시 username = request.POST['username'] password = request.POST['password'] re_password = request.POST['re-password'] response = {} if password != re_password: response['error'] = '비밀번호를 확인하세요.' else: users = BookUsers( username = username, password = password ) users.save() return render(request, 'signup.html', response) | cs |
일단 딕셔너리를 하나 선언하고, key값을 error로 만들어줍니다. 비밀번호가 다를 경우 value에 텍스트를 담는 구조입니다. 그리고 마지막 render에 보면, 딕셔너리를 같이 넘겨주는 것을 볼 수 있는데요.
이렇게 넘겨진 딕셔너리를 html에서는 key 값으로 데이터를 가져올 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <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"> {{ error }} </div> </div> <div class="row mt-5"> <div class="col-12"> <form method="post" action="."> {% csrf_token %} <div class="form-group"> <label for="username">사용자명</label> <input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="이름을 입력하세요." name="username"> </div> <div class="form-group"> <label for="password">비밀번호</label> <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력하세요." name="password"> </div> <div class="form-group"> <label for="re-password">비밀번호 확인</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> | cs |
중간에 보시면 위에서 선언한 error라는 key 값을 가지고 그 value 값을 가져올 수 있습니다.
비밀번호를 잘못 입력한 경우, 위와 같이 value 로 넘어온 텍스트를 표시할 수 있습니다.
'Developer > Django' 카테고리의 다른 글
| [Django] MTV - Template 상속하기 (0) | 2020.11.28 |
|---|---|
| [Django] Bootstrap 스타일 적용하기 (0) | 2020.11.27 |
| [Django] URL 연결하기 (0) | 2020.11.25 |
| [Django] 모델 테이블 분리해서 어드민 페이지에 보여주기 (0) | 2020.11.24 |
| [Django] 프로젝트 및 앱 생성, Admin 계정, 기본 모델 생성 (0) | 2020.11.11 |
댓글