장고 (Django) - 회원가입 기능 구현하기 (MVC)

 

*비밀번호란과 비밀번호 확인 란을 다르게 입력했을때

 

*아무것도 입력하지 않고 등록 했을때

 

*Admin에서 등록된 목록

 

 

 

 

 

이전 포스팅에서 생성했던 user라는 app에 회원가입을 위한 데이터 전송 및 삽입 클래스를 만들어줍니다.

 

1. 장고 ORM을 사용하여 DB 테이블 만들기

회원가입 양식에 사용자가 입력한 값(name, password)를 DB에 저장하기 위한 models.py 입니다.

 

*user폴더 - models.py

from django.db import models

# Create your models here.

class User(models.Model): #장고에서 제공하는 models.Model를 상속받아야한다.
    username = models.CharField(max_length=64,verbose_name = '사용자명')
    password = models.CharField(max_length=64,verbose_name = '비밀번호')
    registered_dttm = models.DateTimeField(auto_now_add=True,verbose_name='등록시간') 
    #저장되는 시점의 시간을 자동으로 삽입해준다.


    class Meta: #메타 클래스를 이용하여 테이블명 지정
        db_table = 'test_user'

클래스를 생성하고, models.Model을 상속받아야 합니다. (장고 ORM을 사용하기 위함입니다.)

ORM : SQL쿼리문을 사용하지 않고, 장고 모델을 통해 데이터베이스를 관리하는 기능

models.CharField : 문자를 넣을 필드를 생성합니다. max_length 옵션으로 길이를 제한합니다. (제한길이 없이 긴 문자열 ex)게시글 같은 경우는 models.TextField 를 사용합니다.)  

models.DateTimeField - auto_now_add : 현재시간 삽입 옵션 (USE라는 표준시간이 삽입됩니다. 한국시간을 삽입하려면 Time_zone을 바꾸면 됩니다 )

verbose_name : 나중에 admin(관리자)페이지에서 보여지는 이름입니다. (알아보기 쉬운 설명을 쓰면 됩니다.)

Meta (class): 생성한 모델클래스에 메타데이터를 설정하는 클래스입니다. 위 코드에서는 테이블 이름을 추가했습니다.

Meta (class) - db_table  : 테이블 이름을 설정합니다. 만약 설정하지 않는다면 자동으로 클래스명 + app이름 과 같은 형식으로 이름이 설정됩니다.

 

 

 

Time_zone 셋팅 (Asia/seoul 시간)

*setting.py

TIME_ZONE =  'Asia/Seoul'   # timezone1서울
USE_I18N = True
USE_L10N = True
USE_TZ = False

 

 

 

 

---

 

 

2. 마이그레이션 파일 생성 (make migrations)

터미널에 입력
python manage.py makemigrations 

터미널창에 python manage.py makemigrations 을 입력해줍니다. 입력하게 되면, user폴더 하위에 migrations 라는 폴더가 생성되며, 0001_initial.py라는 파일이 생성됩니다. 데이터베이스를 변경하기 전 ,초안과 같습니다.

(이때 0001의 숫자는 순번이며, 추후 파일수정후 다시 모델을 재생성하면 0002로 생성됩니다. )

정상적으로 입력했다면 다음 메시지창이 뜹니다.

 

 

3.마이그레이션 DB에 반영하기 (migrate)

터미널에 입력
python manage.py migrate

아까 만들었던 클래스의 여러가지 옵션들을 적용해줍니다. (데이터베이스에 테이블을 생성합니다.) 

프로젝트의 setting.py를 보시면 DATABASE는 sqlite3으로 설정되어있습니다.(초기설정)

따라서 위의 migrate를 실행하게되면 sqlite3으로 파일이 생성됩니다.

 

즉, DB관련하여 수정사항이 있으면 마이그레이션을 다시 해주어야됩니다.

---

 

4. admin 에 모델 Class 등록하기

모델도 생성했고, migrate도 끝냈습니다. admin.py를 열어주고 등록(regist)시켜주면 됩니다.

admin은 장고에서 제공하는 관리자 페이지입니다. 이곳에서 삭제, 추가 등의 작업을 할 수 있습니다.

따라서 방금 생성한 model클래스를 등록하여 admin에서 사용하기 위함입니다.

from django.contrib import admin
from .models import User   #같은 경로의 models.py에서 User라는 클래스를 임포트한다.

# Register your models here.

class UserAdmin(admin.ModelAdmin) :
    list_display = ('username', 'password')


admin.site.register(User, UserAdmin) #site에 등록

admin.ModelAdmin :을 상속받게 되면, admin페이지에서 어떠한 Column을 관리할지 등에 대한 설정이 가능합니다.

list_display : 관리자 페이지에서 볼 Column을 넣어주면 됩니다. 

 

 

관리자 페이지를 사용하기 위해서는 슈퍼계정이 필요합니다. 

슈퍼계정 생성

터미널 입력
python manage.py createsuperuser

위 명령어를 통해 슈퍼계정을 생성할 수 있습니다. 서버 실행후 admin페이지를 확인할때 필요하니 만들어줍니다.

 

 

---

 

5. 서버 실행해보기

터미널입력
python manage.py runserver

위 명령어로 서버를 실행시킨 뒤 http://127.0.0.1:8000/admin 페이지로 들어갑니다. 

들어가면 로그인을 하라고 나올텐데, 방금만든 슈퍼계정을 입력하면 됩니다.

 

두번째 줄의 USER (App)라는 앱이 생성되었고, Users라는 모델이 생성됨을 확인할 수 있습니다. 이때 자동으로 복수형이 적용되어 Users가 되는데요, 이 부분은 models.py에서 수정 가능합니다.

(verbose_name_plural = "Users 대신 사용할 이름")

 

 

그럼 Users를 한번 클릭해 봅니다.

클릭하면 user object라는게 나옵니다. 가독성을 위해 username이 출력되도록 바꿉니다.

 

Admin 페이지

*user폴더 - models.py

from django.db import models

# Create your models here.

class User(models.Model): #장고에서 제공하는 models.Model를 상속받아야한다.
    username = models.CharField(max_length=64,verbose_name = '사용자명')
    password = models.CharField(max_length=64,verbose_name = '비밀번호')
    registered_dttm = models.DateTimeField(auto_now_add=True,verbose_name='등록시간')
    
    def __str__(self): # 이 함수 추가
        return self.username  # User object 대신 나타낼 문자 




    class Meta:
        db_table = 'test_user'

 

User클래스로부터 출력되는 기본 문자열을 사용자의 임의로 설정해줍니다. __Str__함수를 호출하여 리턴값을 만들어 줍니다.

return 뒤에 출력되기 원하는것을 입력하면 됩니다.

 

---

 

 

6. 회원가입 페이지 설정 (view)

 

회원등록 함수 생성

*user폴더 - views.py

from django.shortcuts import render

# Create your views here.
def register(request):   #회원가입 페이지를 보여주기 위한 함수
    return render(request, 'register.html') #register를 요청받으면 register.html 로 응답.

django.shortcuts - render : register 함수를 실행하면, register.html을 render하여 반환합니다.    

 

 

 URL 설정하기

*프로젝트 폴더 - urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('user/', include('user.urls'))
    #127.0.0.1:8000/user/ 이하의 url들은 user폴더의 urls파일에서 관리한다. 라는 설정
]

회원가입을 만들고 나서의 페이지를 어떤 url에서 나타내 줄지 설정합니다.

include기능을 통해 user폴더의 urls 파일로 연결해줍니다.

 

 

*user폴더 - urls.py

앱을 생성후 초기에는 urls.py가 없으므로, 새로운 파일을 하나 만들어서 입력해줍니다.

from django.urls import path
from . import views   
urlpatterns = [
   path('register/',views.register),  
   #즉, 최종적인 url은 127~~~~:8000/user/register가 된다.
] 

 

 

 

---

 

7. 회원가입 페이지 화면 만들기 (HTML 작성)

 

*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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    </head>
    <body>
        <div class= "container">
            <div class = "row mt-5">
                <div class = "col-12 text-center">
                    <h1>회원가입</h1>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    
        
        <!--            폼 안에다가 입력해줘야한다. (안써주면 에러발생)
             csrf_token 폼의 경우에는 , 데이터를 서버에 전달하는 기능.이때 암호화된 키를 숨겨놓아 크로스도메인을 막기 위함. -->
    <!-- bootstrap -component - forms -->
              <div class= "container">
                <div class = "row mt-5">
                    {{error}}
                    <div class = "col-12 ">
            <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" 
      placeholder="사용자 이름"
      name="username">   
      <!-- 이 name 값으로 정보가 전달된다 -->
    </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>    


</body>
</html>

 

 

사용자 이름, 비밀번호, 비밀번호 확인에 입력된 데이터를 register클래스로 받아 올 수 있도록 태그내부의 id, name 값을 바꾸어줍니다.

{% csrf_token %} :  페이지의 폼을 암호화하는 작업입니다. 다른 사이트에서 수정, 삭제등의 공격을 막기 위한 장고에서 제공하는 토큰입니다.

 

 

user폴더 - view.py

from django.shortcuts import render
from django.http import HttpResponse
from django.contrib.auth.hashers import make_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]   #딕셔너리형태
        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'] = "모든 값을 입력해야 합니다."
        if password != re_password :
            # return HttpResponse('비밀번호가 다릅니다.')
            res_data['error'] = '비밀번호가 다릅니다.'
        else :
            user = User(username=username, password=make_password(password))
            user.save()
        return render(request, 'register.html', res_data) #register를 요청받으면 register.html 로 응답.

request.POST.get['username',None] : POST로 받아온 데이터의 'username'이라는 key값을 이용하여 value를 받습니다. 만약, value가 없다면 None을 반환합니다.

make_password() : 괄호 안에 들어간 문자열을 암호화합니다.

res_data : 위 html 파일에서 {{error}}와 맵핑되어 처리됩니다. 즉, if문에서 걸리면 뒤의 문자열이 출력됩니다.

 

 

 

*static 폴더 설정하기

프로젝트 폴더의 setting.py에서 static폴더만 설정해주면 됩니다.

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),  # base_dir은 프로젝트 폴더
]

 

그리고 프로젝트폴더 바로 하위에 static 이란 폴더를 만들고, js css파일등을 넣고, 사용하면됩니다.

 

 

 

 

 

 

 

 

---