04. 2주차 실습 및 숙제 -

 

회원가입 / 로그인 화면 띄우기

 

1. templates 폴더에 html 파일 추가

 

  - signup.html

{% extends 'base.html' %}    {#base.html 파일에 추가해주겠다.#}

{% block title %}
    회원가입
{% endblock %}
{% block content %}
    <div class="container">
        <div class="wrap">
            <h2 class="title-center"> 회원가입 </h2>
            {# form : 화면에 있는 데이터를 서버로 전송할때 많이 사용 #}
            <form class="form-area" method="post" action="/sign-up/">
                {% csrf_token %}    {# 장고 보안기능 #}
                <div class="form-group mt-2 mb-2">
                    <label for="username">이름</label>
                    <input type="text" class="form-control" id="username" name="username">
                </div>
                <div class="form-group mt-2 mb-2">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" name="password">
                </div>
                <div class="form-group mt-2 mb-2">
                    <label for="password2">비밀번호 확인</label>
                    <input type="password" class="form-control" id="password2" name="password2">
                </div>
                <div class="form-group mt-2 mb-2">
                    <label for="bio">나를 한마디로</label>
                    <input type="text" class="form-control" id="bio" name="bio">
                </div>
                <hr>
                <div style="float: right">
                    {# form 안에 있는 버튼은 해당하는 form을 실행시킨다. #}
                    <button type="submit" class="btn btn-primary">회원가입</button>
                    <a href="/sign-in" class="btn btn-secondary">로그인 페이지로</a>
                </div>
            </form>

        </div>
    </div>
{% endblock %}

 

• {%  %} : 중복해서 html 계속 작성하지 않아도 되도록, html 파일을 이어서 작성할 수 있도록 도와줌, html 파일에 파이썬 기능을 추가해 줄 수 있게한다.  **django 템플릿 문법 참조 : https://docs.djangoproject.com/ko/3.1/topics/templates/

템플릿 | Django 문서 | Django

 

• form 태그 : 화면에 있는 데이터를 서버로 전송할때 많이 사용
  • form 안에 있는 <button> 은 해당하는 form을 실행시킨다.
  • <form class="form-area" method="post" action="/sign-up/">
• {% csrf_token %}  :  장고 보안기능 

 

 

** 다른 앱 동작을 위한 순서

1. 사용자가 url 요청 → 크롬/사파리 등의 인터넷 브라우저
2. mySpartaSns에 요청이 접수 → settings.py가 있는 가장 처음 작성한 앱의 urls.py
3. settings.py에서 등록된 url을 찾기 → urls.py에 연결 된 앱에 생성 한 urls.py
4. 해당 url에 등록 된 view를 찾기

 

 

2. 연결할 앱에 urls.py 를 생성하고 메인폴더의 urls.py 와 연결하기

 

- mySpartaSns의 urls.py

# mySpartaSns/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('user.urls'))
]

• include('user.urls') : user 앱의 urls.py 연결

 

 

3. 연결된 앱의 views.py 작성

 

- user앱의 view.py

from django.shortcuts import render


# Create your views here.
def sign_up_view(request):
    return render(request, 'user/signup.html')


def sign_in_view(request):
    return render(request, 'user/signin.html')

• render : html 파일 보여주기

 

 

4. views.py 파일을 urls.py에 연결하기

 

- user앱의 urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('sign-up/', views.sign_up_view, name='sign-up'),
    path('sign-in/', views.sign_in_view, name='sign-in'),
]

• path(' url 주소 ', views.py 파일의 함수이름 실행, name=' '),

 

 

 

 

회원가입 기능 만들기

 

1. 회원가입에 필요한 url과 method 정하기

• 페이지 보여주는 GET 방식에 url은 sign-up
• 입력된 가입정보 전송하는 POST 방식에 url은 sign-up

 

2. views.py 에 method 실행 구분 코드 작성

 

- user 앱의 views.py

# user/views.py
def sign_up_view(request):
    if request.method == 'GET': # GET 메서드로 요청이 들어 올 경우
        return render(request, 'user/signup.html')
    elif request.method == 'POST': # POST 메서드로 요청이 들어 올 경우
        
        return ""

• GET 요청에 signup.html 파일 render

 

 

3. signup.html 의 <form> 태그에 action 추가

 

- signup.html

<!-- 윗 부분 생략 -->
<div class="wrap">
    <h2 class="title-center"> 회원가입 </h2>
    <form class="form-area" method="post" action="/sign-up/">
        {% csrf_token %}
        <div class="form-group mt-2 mb-2">
            <label for="username">이름</label>
            <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group mt-2 mb-2">
<!-- 아랫 부분 생략 -->

• <form>태그의 가장 마지막에 있는 <button type="submit" class="btn btn-primary">회원가입</button> 버튼은, form태그의 method로 action에 데이터를 보내주는 역할을 한다.
• <input>태그들의 id,name들(username,password,password2,bio)을 사용한다.

 

 

4. html의 input에 입력된 내용을 views.py에서 처리

from django.shortcuts import render, redirect
from .models import UserModel

def sign_up_view(request):
    if request.method == 'GET':
        return render(request, 'user/signup.html')
    elif request.method == 'POST':
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)
        password2 = request.POST.get('password2', None)
        bio = request.POST.get('bio', None)

        if password != password2:
            return render(request, 'user/signup.html')
        else:
            new_user = UserModel()
            new_user.username = username
            new_user.password = password
            new_user.bio = bio
            new_user.save()
        return redirect('/sign-in')

• POST 요청일때 받은 데이터를 각각 변수에 저장
• password가 다르다면 회원가입페이지 다시 render
• 같다면,  UserModel 클래스의 속성에 저장하고 로그인페이지('/sign-in') 으로 redirect
• render 는 템플릿을 불러오고, redirect 는 URL로 이동한다. URL 로 이동한다는 건 그 URL 에 맞는 views 가 다시 실행될테고 여기서 render 를 할지 다시 redirect 할지 결정할 것 이다.

 

 

 

 

로그인 기능 만들기

 

1. views.py 에 method 실행 구분 코드 작성

 

# user/views.py
from django.http import HttpResponse

def sign_in_view(request):
    if request.method == 'POST':
        return HttpResponse("로그인 성공!")
    elif request.method == 'GET':
        return render(request, 'user/signin.html')

 

 

2. signin.html 의 form 태그 속성 넣기

 

<!-- 윗부분 생략 -->
<div class="wrap">
    <h2 class="title-center"> 로그인</h2>
    <form class="form-area" action="/sign-in/" method="post">
        {% csrf_token %}
        <div class="form-group mt-2 mb-2">
<!-- 아랫 부분 생략 -->

• form 태그 안의 버튼 눌리면 method로 action
• input 의 name 사용

 

3. html의 input에 입력된 내용을 views.py에서 처리

 

# user/views.py
def sign_in_view(request):
    if request.method == 'POST':
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)

        me = UserModel.objects.get(username=username)  # 사용자 불러오기
        if me.password == password:  # 저장된 사용자의 패스워드와 입력받은 패스워드 비교
            request.session['user'] = me.username  # 세션에 사용자 이름 저장
            return HttpResponse("로그인 성공!")
        else: # 로그인이 실패하면 다시 로그인 페이지를 보여주기
            return redirect('/sign-in')
    elif request.method == 'GET':
        return render(request, 'user/signin.html')

• POST 요청일때 입력받은 데이터 변수에 각각 저장
•  me = UserModel.objects.get(username=username) : UserModel 클래스의 username과 입력된 username이 같은 객체를 me에 저장한다.
• 비밀번호 같으면 세션에 username 저장하고 HttpResponse 띄우기
• 실패하면 다시 로그인페이지 redirect

 

 

 

 

 

숙제

 

1. 회원가입 중복 방지

 

def sign_up_view(request):
    if request.method == 'GET':
        return render(request, 'user/signup.html')
    elif request.method == 'POST':
        # html에서 name='username' 이름으로된 데이터를 가져온다. 없다면 빈칸처리
        username = request.POST.get('username',None)
        password = request.POST.get('password',None)
        password2 = request.POST.get('password2',None)
        bio = request.POST.get('bio',None)

        if password != password2:
            return render(request, 'user/signup.html')
        else:
            exist_user = UserModel.objects.filter(username=username)
            # .filter는 데이터가 없어도 에러발생을 안함

            if exist_user:
                return render(request, 'user/signup.html')
            else:
                new_user = UserModel()
                new_user.username = username
                new_user.password = password
                new_user.bio = bio
                new_user.save()

                return redirect('/sign-in')

• exist_user = UserModel.objects.filter(username=username)

 

2. 로그인 후에 사용자 아이디 띄우기

 

        if me.password == password:
            request.session['user'] = me.username   # session : 사용자정보를 저장할수있는 공간
            return HttpResponse(me.username)