미리보는 프로젝트 완성코드 -->https://github.com/leeceo97/python_community
이번 유저 회원가입 로그인 기능을 만들기전 알아야 할것은 세션과 쿠키의 개념입니다.
아래의 사이트에 자세히 설명이 나와있으니 반드시! 이해하고 구현을 해주셨으면 합니다.
쿠키(Cookie) 그리고 세션(Session)
nesoy.github.io
1. 템플릿 구성
장고는 서버언어로써 눈에 보이는 프론트엔드 영역이 아닌 백엔드 영역입니다. 그래서 눈에 보이는 영역인 프론트엔드부분은 templates폴더를 따로 만들어 관리합니다. MVC패턴중 V를 담당한다고 알아주시면 될것 같습니다.
accounts폴더안에 templates폴더를 만드신 후 안에 register.html, login.html, base.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="/static/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container">
{% block contents %}
{% endblock %}
</div>
</body>
</html>register.html
{% extends "base.html" %}
{% block contents %}
<div class="row mt-5">
<div class="col-12 text-center">
<h1>회원가입</h1>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
{{ error }}
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<form method="POST" action=".">
{% 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="useremail" class="form-label">사용자 이메일</label>
<input type="text" class="form-control" id="useremail" placeholder="사용자 이메일" name="useremail">
</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>
{% endblock %}login.html
{% extends "base.html" %}
{% block contents %}
<div class="row mt-5">
<div class="col-12 text-center">
<h1>로그인</h1>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
{{ error }}
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<form method="POST" action=".">
{% csrf_token %}
<div class="mb-3">
<label for="useremail" class="form-label">사용자 이메일</label>
<input type="text" class="form-control" id="useremail" placeholder="사용자 이메일" name="useremail">
</div>
<div class="mb-3">
<label for="password" class="form-label">비밀번호</label>
<input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
</div>
<button type="submit" class="btn btn-primary">로그인</button>
</form>
</div>
</div>
{% endblock %}위에서 의문점이 base.html이 무엇이냐?라는 생각이 들수 있을겁니다.
웹페이지를 제작하다보면 헤더 부분과 푸터 부분의 디자인은 똑같은 경우가 많습니다. 그리고 지금처럼 부트스트랩을 연결 코드를 파일하나하나 쓰기에는 귀찮기도 하고 이때 중복되는 코드들은 base.html에 적어주신뒤 바뀌는 내용 즉 body부분은 {% block contents %} ~ {% endblock %}로 처리한뒤 다른 html 파일에서 {% extends "base.html" %}로 임포트 해주시고 {% block contents %} ~ {% endblock %}안에 넣어주시면 되는 구조입니다.
그리고 부트스트랩 코드를 이용하기 위해서는 2가지 방법이 있습니다. html head부분에 부트스트랩 주소를 임포트 하거나 부트스트랩 파일을 다운받아 static폴더에 저장하여 사용하는 방법이 있는데 이번 프로젝트는 후자의 방법을 사용하겠습니다. 아래의 사이트에 접속해 마음에 드는 스타일을 선택한뒤 다운 받아 주시길 바랍니다.
Bootswatch: Free themes for Bootstrap
Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.
bootswatch.com
루트 위치에 static 폴더를 생성후 안에 다운받은 css파일을 넣어주세요.
base.html 파일의 head부분 소스를 보시면
<link rel="stylesheet" href="/static/bootstrap.min.css">이부분이 있는데 static 파일의 css파일을 임포트 한걸 알수 있습니다.
이후, community/setting.py로 이동하셔서
import os
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]css파일 즉, 스타일 소스들을 모아둔 파일을 바라볼수 있는 위치를 static으로 연결하겠다는 의미입니다. 위의 소스를 추가해 주시면 프론트 엔드부분의 준비는 끝이 났습니다.
2. url연결
일단 accounts/views.py에 아래의 코드를 추가해주세요.
from django.shortcuts import render
from django.http import HttpResponse
def home(request):
return HttpResponse("Hello!")
def register(request):
return render(request, 'register.html')
def login(request):
return render(request, 'login.html')
def logout(request):
pass간단한게 url에 템플릿을 연결시키는 코드를 테스트로 작성한거니 설명은 넘어가겠습니다.
community/urls.py
from django.contrib import admin
from django.urls import path, include
from accounts.views import home
urlpatterns = [
path('', home),
path('admin/', admin.site.urls),
path('accounts/', include('accounts.urls')),
]여기서 include는 accounts.urls에 연결된 url은 앞에 accounts를 포함한 url이라는 뜻입니다. 쉽게 말해 accounts.urls에 연결된 url이 test1, test2가 있다면 각각의 url에 접속하기 위해서는 accounts/test1, accounts/test2로 접속을 해야한다는 의미입니다.
마지막으로, accounts폴더에 urls.py를 생성한후 아래의 코드를 추가해주세요.
from django.urls import path
from .views import register, login, logout
urlpatterns = [
path('register/', register, name='register'),
path('login/', login, name='login'),
path('logout/', logout, name='logout'),
]
임포트한 views.py에서 생성했던 register, login, logout 함수를 임포트해준뒤 각각을 연결해준것입니다. name은 나중에 템플릿이나 view에서 유용하게 사용 될것입니다.
3. 마무리 멘트
글이 생각보다 길어져서 로그인 파트는 총 3파트로 나누어 포스팅 하겠습니다. 처음 하시는 분이라면 욕심내서 하루에 다하려고 하시기 보다는 1~2개의 글을 하루에 마스터 한다는 생각으로 따라치기만 하기보단 코드를 몸으로 익히는 연습을 해보시는게 좋을것 같습니다! 처음에도 말했지만 중간에 포기하지말고 오류가 뜨더라도 해결하기 위해서 구글링 하는 습관 들여보시는게 좋을겁니다! 화이팅입니다!! 감사합니다:)
'기술 > Django' 카테고리의 다른 글
| django 커뮤니티 만들기-(5)게시판 구현(templates, url) (0) | 2021.06.01 |
|---|---|
| django 커뮤니티 만들기-(4)회원가입, 로그인 구현(form) (0) | 2021.05.26 |
| django 커뮤니티 만들기-(3)회원가입, 로그인 구현(views.py) (0) | 2021.05.26 |
| django 커뮤니티 만들기-(1)프로젝트, 앱 생성 및 모델 적용 (0) | 2021.05.25 |
| django 커뮤니티 만들기-(0)프로젝트 소개 및 초기 환경세팅 (0) | 2021.05.24 |
