😂 Django 2주차

😭 signup / signin 기능

- templates 폴더 구조

- base.html

• 베이스가 되는 페이지를 생성하기 위해 templates 폴더 안에 생성하였다.

- signup.html / signin.html

• django의 template 문법을 사용해 작성하였다. 아래와 같은 구조를 띈다. flask에서 사용했던 Jinja와 비슷하게 생겼다.
  {% ..... %}
  • html을 이어서 작성할 수 있도록 도와주는 역할을 한다.
  • html에서 python의 문법을 쓸 수 있도록 해준다.

---

😭 요청 순서 확인

• 위의 순서를 통해 요청을 넣어주려면 우리가 아까 생성한 user와 tweet 앱에 urls.py를 만들어 줘야 한다.
• 먼저 user 앱에 urls.py를 만들어 주고, mySpartaSns의 urls.py에 가서 user 앱의 urls.py를 포함시켜준다.

##### mySpartaSns의 urls.py #####

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

# 현재 내가 있는 파일에서 views.py를 불러옴
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('test/', views.base_response, name='first_test'),
    path('first/', views.first_view, name='first_view'),
    
    # spartaSns와 user의 url이 연결되었다!!
    path('', include('user.urls')),
]

##### user 앱의 urls.py #####

from django.urls import path
from . import views

urlpatterns = [
    # sign-up/ 으로 들어가면 views.py에 있는 sign_up_view 함수가 실행된다. (해당 함수는 signup.html로 render 해준다.)
    path('sign-up/', views.sign_up_view, name='sign-up'),
    # sign-in/ 으로 들어가면 views.py에 있는 sign_in_view 함수가 실행된다. (해당 함수는 signin.html로 render 해준다.)
    path('sign-in/', views.sign_in_view, name='sign-in'),
]

• 맞는 url을 찾아줬으니 url의 값을 받아 동작을 실행하는 views.py를 user앱 안에 만들어 준다.

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')

---

😭 회원가입 기능

- signup.html

• <form> 태그 : 화면에 있는 데이터를 서버로 가져갈 때 많이 쓰는 방식

<!-- form : 화면에 있는 데이터를 서버로 가져갈 때 많이 쓰는 방식 -->
<!-- 회원가입을 진행해야 하므 post 방식을 쓴다. -->
<!-- 어디로 연결될 지에 대한 것도 써줘야 해서 /sign-up/ url을 작성해준다. (뒤에 슬래시 꼭 써줘야 함!) -->
<form class="form-area" method="post" action="/sign-up/">

• 보안을 위해 다음 코드를 추가해 주었다.

 <!-- 보안을 위해 설정 -->
 {% csrf_token %}

• 회원가입에서 고려해야 할 것은 <input>태그와 <button>이 있다.
• <button>의 경우, 만약 <form> 태그 안에 존재한다면 해당 <form> 태그를 실행시켜주는 역할을 하게 된다.
  • 현재 signup.html에서는 <form> 태그를 실행시켜주어 /signup/으로 데이터를 POST 방식으로 보낼 수 있도록 도와준다.
• <input>태그의 경우, name 속성의 값을 주의깊게 봐야 한다.

- views.py

• 프론트에서 보내준 정보를 통해 views.py를 실행한다.

# render 함수를 통해서 html을 화면에 띄워준다.
from django.shortcuts import render, redirect
# 나와 동일한 위치에 있는 모델 중에서 UserModel을 가져와 사용하겠다.
from .models import UserModel


# Create your views here.
def sign_up_view(request):
    if request.method == 'GET':
        return render(request, 'user/signup.html')
    elif request.method == 'POST':
        # request.POST를 통해 넘어온 많은 값들 중에서 나는 username을 받아 username 변수에 저장할 것이며, 
        # 만약 값이 없다면 None으로(빈칸으로) 처리하겠다.
        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:
        	# UserModel을 불러온다. (앞에서 배운 class와 비슷)
            new_user = UserModel()
            new_user.username = username
            new_user.password = password
            new_user.password2 = password2
            new_user.bio = bio
            # 위에서 받아온 정보들을 저장하는 과정을 거처야 함 꼭!
            new_user.save()

        # 위와 같이 회원정보를 성공적으로 저장하게 되면 로그인 페이지로 리다이렉트해준다.
        return redirect('/sign-in')

😭 로그인 기능

• 서버와 클라이언트가 서로 요청과 응답을 하게 되는데, 이 과정에서 같은 사람이 요청을 보내는지에 대해 알 수 있도록 도움을 주는 것을 session이라 한다. 즉, session은 사용자의 정보를 저장할 수 있는 것이다.

- views.py

• 먼저, user/views.py에 로그인에 대한 method에 따른 응답을 작성해 주었다.

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

- signin.html

• signup.html과 마찬가지로, <form> 태그를 수정해 주었다. 요청 방식와 해당 요청방식이 일어나면 이동할 url 정보를 가지고 있는 action을 추가했다.
• <button>이 현재 <form> 태그 안에 존재하므로, 해당 버튼을 누르게 되면 <form> 태그가 실행되게 된다.

<form class="form-area" method="post" action="/sign-in/">
  <!-- django가 알아서 보안을 잘 할 수 있도록 설정 -->
  {% 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>
   <hr>
   <div style="float: right">
       <button type="submit" class="btn btn-primary">로그인</button>
       <a href="/sign-up" class="btn btn-secondary">회원가입 페이지로</a>
   </div>
</form>

- views.py

def sign_in_view(request):
    if request.method == 'POST':
        # 뒤에 있는 username과 password는 html의 input 태그 안에 있는 name 속성의 값들과 동일해야 한다.
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)

        # 주황색 username은 UserKModel 안에 있는 username이다. 뒤에 하얀색이 우리가 넣어준 username이다.
        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')

---

😭 2주차 숙제

- 회원가입 기능 수정

• 현재는 동일한 사람이 있어도 회원가입이 가능하다. 따라서 이를 수정해주어 동일한 사람은 다시 회원가입을 하지 못하도록 막도록 하겠다.
• user/views.py 수정
  • 이미 있는 사람인지 db에 있는 값과 대조해 보면 되겠다고 생각하였다.
  • filter 기능은 생각하지 못했다. 이전에 했던 것과 같이 get을 하려 했었다.

# Create your views here.
def sign_up_view(request):
    if request.method == 'GET':
        return render(request, 'user/signup.html')
    elif request.method == 'POST':
        # request.POST를 통해 넘어온 많은 값들 중에서 나는 username을 받아 username 변수에 저장할 것이며, 만약 값이 없다면 None으로(빈칸으로) 처리하겠다.
        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:
            # 이미 정보를 입력한 user가 존재한다면?
            # filter 기능을 통해서 같은 이름이 있는지 걸러준다.
            not_new_user = UserModel.objects.filter(username=username)

            if not_new_user:
                return render(request, 'user/signup.html')
            else:
                new_user = UserModel()
                new_user.username = username
                new_user.password = password
                new_user.password2 = password2
                new_user.bio = bio
                # 위에서 받아온 정보들을 저장하는 과정을 거처야 함 꼭!
                new_user.save()

                # 위와 같이 회원정보를 성공적으로 저장하게 되면 로그인 페이지로 리다이렉트해준다.
                return redirect('/sign-in')

- 로그인 성공 시 사용자 이름 출력

• HttpResponse 기능을 그대로 사용하면 되며, 그냥 이름만 출력하면 되기 때문에 굉장히 간단하다.
  • 심지어 me를 통해 UserModel에서 사용자의 이름이 같은 객체의 정보를 이미 불러왔기 때문에, 그냥 거기서 꺼내 쓰면 된다.
    HttpResponse(me.username)

def sign_in_view(request):
    if request.method == 'POST':
        # 뒤에 있는 username과 password는 html의 input 태그 안에 있는 name 속성의 값들과 동일해야 한다.
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)

        # 주황색 username은 UserKModel 안에 있는 username이다. 뒤에 하얀색이 우리가 넣어준 username이다.
        me = UserModel.objects.get(username=username)
        if me.password == password:
            request.session['user'] = me.username
            return HttpResponse(me.username)
        else:
            return redirect('/sign-in')
    elif request.method == 'GET':
        return render(request, 'user/signin.html')