rueki
Django 기초 04. 회원가입 본문
728x90
반응형
user 앱 폴더에 templates라는 폴더를 생성하고 그 안에 register.html을 작성하자.
회원가입 페이지는 부트스트랩 기반으로 작성을 해보자.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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"> <!--여백추가 mt-5-->
<div class= "col-12 text-center">
<h1>회원가입</h1>
</div>
</div>
<div class= "row">
<div class= "col-12">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group 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>
</body>
</html>register.html에 작성한 코드이다. 이는 https://getbootstrap.com 에서 css와 js 그리고 components의 form의 코드를 가져온 것이다.
그리고 views.py에 아래코드를 작성하자.
이는 request를 받은 것을 기반으로 register.html에 보내는 register 함수이다.
from django.shortcuts import render
# Create your views here.
def register(request):
return render(request, 'register.html')그리고 user 앱에 urls.py를 새로 만들어 프로젝트의 urls.py 코드를 기반으로
from django.urls import path
from .import views
urlpatterns = [
path('register/',views.register)
]views.py의 register 함수를 가져오자.
즉 register를 views의 register를 따라 주소 밑에 register를 호출할 수 있게 된다.
http://127.0.0.1:8000/user/register/ 이 주소를 보면 이해가 쉬울 것이다.
참고로 mypage의 urls.py에도
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('user/', include('user.urls'))
]이러한 코드를 작성해야한다. user의 url경로를 추가한 것이다.
1. mypage의 urls.py 에 작성
2. user 앱에 urls.py 생성 후 작성
3. views.py 에 register관련 함수 작성
이렇게 이해를 하면 쉬울 것이다.
이제 회원가입 form을 우리가 만든 데이터베이스 값을 바탕으로 수정해보자.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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"> <!--여백추가 mt-5-->
<div class= "col-12 text-center">
<h1>회원가입</h1>
</div>
</div>
<div class= "row">
<div class= "col-12">
<form method="POST" action=".">
{% csrf_token %} <!--크로스 도메인 막기위해 암호화된 키 숨겨놓는다.-->
<div class="form-group"><!--form의 경우 데이터를 서버에 전달-->
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="username" 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>
</div>글 최상단의 코드와 비교해보면 양식이 조금씩 변경된 것을 볼 수가 있다.
{% csrf_token %} 은 꼭 작성하자.
그리고 회원가입이 GET 과 POST 방식으로 들어오게 views의 register함수를 수정하자.
from django.shortcuts import render
from .models import User
# Create your views here.
def register(request):
if request.method == 'GET':
return render(request, 'register.html')
elif request.method =='POST':
username = request.POST['username']
password = request.POST['password']
re_password = request.POST['re-password']
user = User(
username=username,
password = password
)
user.save()
return render(request, 'register.html')이렇게 작성하면 회원가입 페이지에서 등록을 하면 회원가입이 되며, admin 페이지에서 확인할 수 있다.
이제 여기서 추가로 비밀번호 암호화를 위해서 코드 수정을 해보자.
from django.shortcuts import render
from .models import User
from django.http import HttpResponse
from django.contrib.auth.hashers import make_password
# Create your views here.
def register(request):
if request.method == 'GET':
return render(request, 'register.html')
elif request.method =='POST':
username = request.POST['username']
password = request.POST['password']
re_password = request.POST['re-password']
res_data ={}
if password != re_password:
res_data['error'] = '비밀번호가 다릅니다!'
else:
user = User(
username=username,
password = make_password(password)
)
user.save()
return render(request, 'register.html',res_data)새로운 라이브러리 및 함수 두개를 받아온 것을 볼 수 있다. 4번째 라이브러리가 암호화를 위해 사용하는 것이며,
HttpResponse는 비밀번호가 다른 것을 한 페이지 안에 동시 알림을 위해서 불러온 것이다.
추가적으로 아무것도 입력이 안되었을 때의 알림도 구현해보자.
from django.shortcuts import render
from .models import User
from django.http import HttpResponse
from django.contrib.auth.hashers import make_password
# 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',None)
password = request.POST.get('password',None)
re_password = request.POST.get('re-password',None)
res_data ={}
if not (username and password and re_password):
res_data['error'] = '모든 값을 입력해야 합니다!'
elif password != re_password:
res_data['error'] = '비밀번호가 다릅니다!'
else:
user = User(
username=username,
password = make_password(password)
)
user.save()
return render(request, 'register.html',res_data)POST 값을 get함수로 받아와서 딕셔너리 형태로 값이 유지된다. 이를 통해서 조건문을 사용해서 알림을 설정한다.
728x90
반응형
'Django' 카테고리의 다른 글
| Django 기초06. static 관리 (0) | 2019.11.21 |
|---|---|
| Django 기초 05. 이메일 필드 추가 (0) | 2019.11.20 |
| Django 기초 3. admin 활용 (0) | 2019.11.20 |
| Django 기초 2. 프로젝트 및 앱 생성, 데이터베이스 관리 (0) | 2019.11.20 |
| Django 기초 1. 장고 환경 설정 및 설치 (0) | 2019.11.19 |
'Django' Related Articles
more
Comments