반원 블로그

django 회원가입 페이지 id 속성 변경. 프론트에서 백으로 데이터 전송 본문

2018~/Django 개인 공부 정리

django 회원가입 페이지 id 속성 변경. 프론트에서 백으로 데이터 전송

반원_SemiCircle 2019. 9. 4. 11:27

1. 현재 bootstrap 속성을 바로 가져왔으니, 우리가 사용하기 편하게 id속성등을 변경해보자.

변경해볼 것은

label 의 for 속성, input의 id 속성

Ctrl Shift L 단축키를 같은 값을 한번에 변경할 수 있다.

또한 필요없는 속성이나 요소들은 삭제한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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>
                    <div class="form-group">
                        <label for="username">사용자 이름 입력</label>
                        <input type="text" class="form-control" id="username"  placeholder="사용자이름">
                    </div>
                    <div class="form-group">
                        <label for="password">비밀번호 입력</label>
                        <input type="password" class="form-control" id="password" placeholder="비밀번호">
                    </div>
                    <div class="form-group">
                        <label for="re-password">비밀번호 확인</label>
                        <input type="password" class="form-control" id="re-password" placeholder="비밀번호 확인">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>

    </div>
</body>
</html>

2. 이 페이지에서 쓰여진 값이 파이썬에 전달되게 만들자. form에 method와 action 추가

method는 post, action은 현재 페이지에 해줄 것이기 때문에(돌아올 것이기때문에) . 만 쓰겨나 안써도 된다.

추가로 django에서는 form안에 {% csrf_token %} 을 넣어줘야한다. (크로스 도메인 방지. 다른 사이트에서 해당 페이지를 사용하는 것을 방지)

장고에서는 이게 기본값이라 안써주면 에러가 난다.

        <div class="row mt-5">
            <div class="col-12">
                <form method="POST" action=".">
                    {% csrf_token %}

 

3. django에서 데이터를 확인하려면 웹 페이지에 name 속성이 존재해야한다. 이를 추가해주자.(id와 동일하게 하자)

                <form method="POST" action=".">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username">사용자 이름 입력</label>
                        <input type="text" class="form-control" id="username" name="username"  placeholder="사용자이름">
                    </div>
                    <div class="form-group">
                        <label for="password">비밀번호 입력</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="비밀번호">
                    </div>
                    <div class="form-group">
                        <label for="re-password">비밀번호 확인</label>
                        <input type="password" class="form-control" id="re-password" name="re-password" placeholder="비밀번호 확인">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

원래 비밀번호 일치 여부는 프론트에서도 할 수 있지만, 테스트겸으로 백엔드에서 하자.

4. 앱 폴더의 views.py를 수정

현재 register.html 에 들어가는 경로가 두가지다.

하나는 url을 이용한 방법이고, 하나는 해당 페이지에서 submit버튼을 누르는 경로(action="." 로 주었기 때문에..)

전자는 get방식이고, 후자는 post방식접근이므로 이를 이용하여 views.py에서 구분해보자.

request의 method 속성으로 쉽게 할 수 있다.

from django.shortcuts import render

# Create your views here.

def register(request):
    if request.method == "GET":
        return render(request, 'register.html')
    elif request.method == "POST":
        #여기에 회원가입 처리 코드 예정
        return render(request, 'register.html')

 

5. 회원가입 처리 코드 작성은 다음 글에서..

 

저작자표시 비영리 변경금지

'2018~ > Django 개인 공부 정리' 카테고리의 다른 글

django - 로그인 처리 (세션 이용)  (0) 2019.09.06
django - static 폴더 관리 + js와 css 위치  (0) 2019.09.06
django - 이메일 필드 추가  (0) 2019.09.06
django 회원 가입 - DataBase에 저장, 패스워드 부호화, 미입력 처리  (0) 2019.09.04
django 템플릿(T)와 뷰(V) 생성하고 연결하기  (0) 2019.09.04
django 생성한 앱의 모델을 admin에 등록하기  (0) 2019.09.04
django 어드민(admin) 페이지 처음 확인하기  (0) 2019.09.04
django 모델(Model)과 데이터베이스 만들기  (0) 2019.09.03
'2018~/Django 개인 공부 정리' Related Articles more
Comments