Django (5. Template 만들기) feat.페스트캠퍼스

min seung moon·2021년 3월 9일
0

Django

목록 보기
5/37

회원가입 만들기

01. templates 폴더 내부에 register.html 생성

  • bootstrap으로 일단 생성
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
            <div class="row mt-5">
                <div class="col-12">
                    <form>
                        <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1"
                                aria-describedby="emailHelp">
                            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                        </div>
                        <div class="mb-3">
                            <label for="exampleInputPassword1" class="form-label">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1">
                        </div>
                        <div class="mb-3 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>
    </div>
</body>

</html>

  • views.py로 장고파일과 연결

    • url에 연결하면 요청 정보가 request 변수를 통해서 들어온다

  • admin urls.py에 추가

  • fcuser에 urls.py 생성

  • 주소/fcuser/register

02. 좀 더 구체적으로 register.html 수정

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
            <div class="row mt-5">
                <div class="col-12">
                    <!-- 현재 페이지로 데이터를 보내기 때문에 . or 생략 -->
                    <form method="POST" action=".">
                        <!-- django에서 form을 전달할 때 꼭 해줘야할 설정, form안에 꼭 작성 -->
                        <!-- form은 데이터를 서버에 전달하는데 지금 우리가 사용하는것처럼 우리사이트에서만 사용하면 문제가 없지만
                        몇몇 사람들이 악용하기 때문에 다른 웹사이트에서 전송하기 때문에 방지하기 위해서 크로스 도메인을 방지. 암호화된 키를 숨겨서 키가 없으면 잘못된 요청으로인식 -->
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="username" class="form-label">사용자 이름</label>
                            <input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username">
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">비밀번호</label>
                            <input type="password" class="form-control" id="password" placeholder="비밀번호"
                                name="password">
                        </div>
                        <div class="mb-3">
                            <label for="re-password" class="form-label">비밀번호 확인</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>
        </div>
    </div>
</body>

</html>

  • register.html의 정보를 서버에 전달하기위한 함수 만들기(views.py)
from django.shortcuts import render
from .models import Fcuser

# Create your views here.


def register(request):
    if request.method == 'GET':
        return render(request, 'register.html')
    elif request.method == 'POST':
        username = request.POST.get('username', '')
        password = request.POST.get('password', '')
        re_password = request.POST.get('re-password', '')

        fcuser = Fcuser(
            username=username,
            password=password
        )

        fcuser.save()

        return render(request, 'register.html')

# 기본적으로 template폴더를 보기에 바로 작성 가능
# 만약에 template폴더 내부에 폴더를 생성한 다음에 파일을 만든다면
# foldername/register.html
# return render(request, 'register.html')

  • 실행 후 등록!
    • 등록되었는지 정보는 주소/admin으로 접속!

03. 비밀번호 확인 구현

  • 첫번째 방법(httpResponse 전달)
from django.shortcuts import render
from .models import Fcuser
# 경고문을 보내기 위한 패키지
from django.http import HttpResponse

# Create your views here.


def register(request):
    if request.method == 'GET':
        return render(request, 'register.html')
    elif request.method == 'POST':
        username = request.POST.get('username', '')
        password = request.POST.get('password', '')
        re_password = request.POST.get('re-password', '')

        # 비밀번호와 비밀번호 확인이 다르면 경고문자 보내기!
        if password != re_password:
            return HttpResponse('비밀번호가 다릅니다!')
        else:
            fcuser = Fcuser(
                username=username,
                password=password
            )

            fcuser.save()

        return render(request, 'register.html')

# 기본적으로 template폴더를 보기에 바로 작성 가능
# 만약에 template폴더 내부에 폴더를 생성한 다음에 파일을 만든다면
# foldername/register.html
# return render(request, 'register.html')

  • 두번째 방법(render로 error 객체 전달)
from django.shortcuts import render
from .models import Fcuser
# 경고문을 보내기 위한 패키지
from django.http import HttpResponse

# Create your views here.


def register(request):
    if request.method == 'GET':
        return render(request, 'register.html')
    elif request.method == 'POST':
        username = request.POST.get('username', '')
        password = request.POST.get('password', '')
        re_password = request.POST.get('re-password', '')

        # 전송할 데이터
        res_data = {}

        # 비밀번호와 비밀번호 확인이 다르면 경고문자 보내기!
        if password != re_password:
            # 다른 페이지로 가기 때문에 불편함
            # return HttpResponse('비밀번호가 다릅니다!')
            res_data['error'] = '비밀번호가 다릅니다.'
        else:
            fcuser = Fcuser(
                username=username,
                password=password
            )

            fcuser.save()

        return render(request, 'register.html', res_data)

# 기본적으로 template폴더를 보기에 바로 작성 가능
# 만약에 template폴더 내부에 폴더를 생성한 다음에 파일을 만든다면
# foldername/register.html
# return render(request, 'register.html')


04. 비밀번호 암호화

  • make_password 사용


05. 공백 예외처리


profile
min seung moon
아직까지는 코린이!
이전 포스트

Django (4. 모델 만들기) feat.페스트캠퍼스

다음 포스트

Django (6. 회원 필드 추가하기) feat.페스트캠퍼스

0개의 댓글

관련 채용 정보