Bootstrap UI에 회원가입시 에러메시지 처리 기능 대신에 jQuery Ajax 처리를 통해서 회원가입 방법을 테스트하고 적어둔다.
기존 views.py
|
from django.core.mail.backends import console
from django.http import HttpResponse, JsonResponse
from django.shortcuts import render, redirect
from django.contrib.auth.hashers import make_password, check_password
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.get('username',None)
useremail = request.POST.get('useremail',None)
password = request.POST.get('password',None)
repasswd = request.POST.get('repasswd',None)
res_data ={}
if not (username and useremail and password and repasswd):
res_data['error'] = '모든 값을 입력해야 합니다.'
elif password != repasswd:
res_data['error'] ='비밀번호가 다릅니다.'
else:
user = User(
username = username,
useremail = useremail,
password = make_password(password)
)
user.save()
return render(request,'register.html',res_data)
|
회원 가입 UI 처리를 위해서 base.html 파일과 register.html 파일로 분리했다.
base.html
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
{% block contents %}
{% endblock %}
</div>
</body>
</html>
|
register.html
장고 테이블에 회원정보를 저장하기 위해서는 name="username" 이라고 적어야 하지만, jQuery 로 처리하려고 id="usernmae" 으로 변경했다.
하단 <script></script> 사이에 Javascript 코드를 구현해야 한다. js 코드만 별도로 분리하는 것은 static 폴더에 넣으면 된다.
|
{% extends "base.html" %}
{% block contents %}
<div class="signup-form pt-5">
<form method="post" id="post-form" action=".">
{% csrf_token %}
<h2>회원가입</h2>
<div class="form-group">
<div class="row">
<div class="col">
<input type="text" class="form-control" id="username" placeholder="사용자 이름" required="required" />
</div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" id="useremail" placeholder="Email" required="required"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="비밀번호" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="repasswd" placeholder="비밀번호 확인"
required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">회원 등록</button>
</div>
</form>
<div class="text-center"><a href="#">로그인</a></div>
</div>
<script>
$(document).on('submit', '#post-form', function (e) {
e.preventDefault();
if ($("#username").val() == '') {
alert('이름을 입력하세요');
$("#username").focus();
return false;
}
if ($('#useremail').val() == '') {
alert('email을 입력하세요');
$('#useremail').focus();
return false;
}
var pwd = $("#password");
var repwd = $("#repasswd");
if (PasswordChk(pwd, repwd) == false) return false;
$.ajax({
type: 'POST',
url: '{% url "accounts:ajax_register" %}',
data: {
username: $('#username').val(),
useremail: $('#useremail').val(),
password: $('#password').val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
action: 'post'
},
success: function (json) {
if (json.status == 1) {
document.getElementById("post-form").reset();
window.location.href = 'http://127.0.0.1:8000/';
alert('등록되었습니다.');
} else if (json.status == 0) {
alert('이미 등록된 회원입니다.');
}
},
error: function (xhr, errmsg, err) {
alert('에러가 발생했네요.' + errmsg);
console.log(xhr.status + ": " + xhr.responseText);
}
});
});
function PasswordChk(pwd, repwd) {
if (pwd.val() == '') {
alert('비밀번호를 입력하세요');
pwd.focus();
return false;
}
if (pwd.val().indexOf(' ') > -1) {
alert("공백은 입력할 수 없습니다.");
return false;
}
var check1 = /^(?=.*[a-zA-Z])(?=.*[0-9]).{10,15}$/.test(pwd.val()); //영문,숫자
var check2 = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[^a-zA-Z0-9]).{8,15}$/.test(pwd.val()); //영문,숫자,특수문자
var check3 = /^(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{10,15}$/.test(pwd.val()); //영문,특수문자
var check4 = /^(?=.*[^a-zA-Z0-9])(?=.*[0-9]).{10,15}$/.test(pwd.val()); //특수문자, 숫자
if (!(check1 || check2)) {
alert("영문/숫자 혼용시에는 10~15자리를 사용해야 합니다.\n영문/숫자/특수문자 혼용시에는 8~15자리를 사용해야 합니다.");
return false;
}
// 동일한 문자/숫자 4자 이상
if (/(\w)\1\1\1/.test(pwd.val())) { // /(\w)\1\1/.test(pwd)
alert("같은 문자를 4번 이상 사용할 수 없습니다.");
pwd.focus();
return false;
}
if (isContinuedValue(pwd.val())) {
alert("비밀번호에 4자 이상의 연속 문자 또는 숫자를 사용하실 수 없습니다.");
pwd.focus();
return false;
}
if (repwd.val() == '') {
alert('비밀번호를 다시 한번 더 입력하세요');
repwd.focus();
return false;
}
if (pwd.val() !== repwd.val()) {
alert('비밀번호를 둘다 동일하게 입력하세요');
return false;
}
return true;
}
function isContinuedValue(value) {
console.log("value = " + value);
var intCnt1 = 0;
var intCnt2 = 0;
var temp0 = "";
var temp1 = "";
var temp2 = "";
var temp3 = "";
for (var i = 0; i < value.length - 3; i++) {
temp0 = value.charAt(i);
temp1 = value.charAt(i + 1);
temp2 = value.charAt(i + 2);
temp3 = value.charAt(i + 3);
if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == 1
&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == 1
&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == 1) {
intCnt1 = intCnt1 + 1;
}
if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == -1
&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == -1
&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == -1) {
intCnt2 = intCnt2 + 1;
}
}
return (intCnt1 > 0 || intCnt2 > 0);
}
</script>
{% endblock %}
|
models.py
models.py 파일은 데이터베이스 테이블을 만들고 그 안의 필드들을 생성 및 수정할 수 있는 역할을 한다.
혹시라도 칼럼을 추가할 경우에는 DB 를 삭제하고 다시 하는 것이 속 편하다. 그러므로 처음부터 칼럼 설계를 잘하자.
|
# models.py
from django.db import models
# Create your models here.
class User(models.Model):
username = models.CharField(max_length=32, verbose_name='사용자명',default='')
useremail = models.EmailField(max_length=128, verbose_name='emailID',default='')
password = models.CharField(max_length=128,verbose_name='비밀번호')
created_at = models.DateTimeField(auto_now_add=True, verbose_name='등록시간')
updated_at = models.DateTimeField(auto_now=True)
def __str__(self):
return self.email
class Meta:
db_table = 'accounts'
verbose_name = '사용자'
verbose_name_plural = '사용자'
|
수정 views.py
|
from django.core.mail.backends import console
from django.http import HttpResponse, JsonResponse
from django.shortcuts import render, redirect
from django.contrib.auth.hashers import make_password, check_password
from .models import User
# Create your views here.
def home(reqest):
user_id = reqest.session.get('user')
if user_id:
user = User.objects.get(pk=user_id)
return HttpResponse(user.useremail)
return HttpResponse('Home')
def register(request):
if request.method == 'GET':
return render(request, 'register.html')
elif request.method == 'POST':
username = request.POST.get('username',None)
useremail = request.POST.get('useremail',None)
password = request.POST.get('password',None)
res_data ={}
try:
user = User.objects.get(useremail=useremail)
if user:
res_data['status'] = '0' # 기존 가입된 회원
return JsonResponse(res_data)
except User.DoesNotExist:
# 대문자 User 임에 주의
user = User(
username = username,
useremail = useremail,
password = make_password(password)
)
user.save()
# session 생성
user = User.objects.get(useremail=useremail)
request.session['user'] = user.id
res_data['status'] = '1' # 회원 가입 완료
return JsonResponse(res_data)
return render(request,'register.html',res_data)
def logout(request):
if request.session.get('user'):
del(request.session['user'])
return redirect('/user/login')
|
app urls.py
|
# app urls.py
from django.urls import path
from . import views
app_name = 'accounts'
urlpatterns = [
path('register/', views.register, name='ajax_register'), # name = that we will use in ajax url
path('login/', views.login, name='ajax_login'),
path('logout/',views.logout),
]
|
project urls.py
|
# project urls.py
from django.contrib import admin
from django.urls import path,include
from accounts.views import home
urlpatterns = [
path('admin/', admin.site.urls),
# path('', views.HomeView.as_view(), name='home'),
path('user/', include('accounts.urls')),
path('', home)
]
|
admin.py
|
# admin.py
from django.contrib import admin
from .models import User
# Register your models here.
class UserAdmin(admin.ModelAdmin):
list_display = ('username','useremail','password','created_at','updated_at')
admin.site.register(User,UserAdmin)
|
728x90
'파이썬 > Django' 카테고리의 다른 글
| Django, squash migrations (0) | 2022.01.26 |
|---|---|
| Django 회원가입 및 로그인 with jQuery and class-based view (0) | 2022.01.24 |
| Python Django Login with jQuery(ajax) (0) | 2022.01.17 |
| Django Login 예제 (0) | 2022.01.16 |
| PyCharm Django Project 생성 예제 (0) | 2022.01.09 |
Link2Me