TIL 4주 2일차 (DJANGO)

노우석·2022년 9월 27일
0

로그인 이후 기능 다듬기

DJANGO에서 제공하는 사용자 모델로 기존 로그인 기능을 수정하기

user앱의 views.py를 수정해야한다. 로그인 기능은 sign_in_view 함수에 구현해놓았다.

가장 먼저 새로운 기능을 추가한다.

#user/views.py

from django.contrib import auth 사용자 auth 기능

식별하는, 비교하는 기능

sign_in_view 함수를 수정

#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 = auth.authenticate(request, username=username, password=password) 사용자 불러오기

if me is not None: 저장된 사용자의 패스워드와 입력받은 패스워드 비교

        auth.login(request, me)
        return HttpResponse("로그인 성공")
    else:
        return redirect('/sign-in')  # 로그인 실패
elif request.method == 'GET':
    return render(request, 'user/signin.html')

from django.contrib import auth 를 사용하면

비밀번호까지 체크를 해 주고, 로그인 기능까지 해결가
능하다.

로그인 후 이동하는 페이지 만들기

지금은 로그인 후에는 HttpResponse 기능을 사용해서 임시 글만 띄워주고 있다. html을 만들어서 로그인 후에 이동 할 수 있도록 페이지를 먼저 만들어야 한다.

templates폴더 아래에 tweet폴더를 만들고,home.html 파일을 만든다. 아래 코드 입력

{% extends 'base.html' %}

{% block content %}

<div class="container timeline-container">
    <div class="row">
        <!-- 왼쪽 컬럼 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the card's content.</p>

                </div>
            </div>
        </div>
        <!-- 오른 쪽 컬럼-->
        <div class="col-md-7">
            <!-- 글을 작성 하는 곳 -->
            <div class="row mb-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="media">
                                <div class="media-body">
                                    <h5 class="mt-0">나의 이야기를 적어주세요</h5>
                                    <p>
                                    <form>
                                        <div class="form-group mb-2">
                                            <textarea class="form-control" style="resize: none" name='my-content' id="my-content"></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary" style="float:right;">작성하기</button>
                                    </form>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <!-- 작성 된 글이 나오는 곳 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="media">
                                <div class="media-body">
                                    <h5 class="mt-0">Media heading</h5>
                                    <p>Will you do the same for me? It's time to face the music I'm no longer your
                                        muse.
                                        Heard it's
                                        beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix
                                        inside
                                        of me.
                                        Heaven is
                                        jealous of our love, angels are crying from up above. Yeah, you take me to
                                        utopia.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-2"></div>
    </div>
</div>

{% endblock %}

이동 페이지 연결

방금 만든 home.html을 url과 view에 연결해줘야한다.

글쓰기를 작성 할 페이지 파일이기 때문에 tweet이라는 앱 안에 view.py에 작성한다.

tweet/views.py

from django.shortcuts import render, redirect

#Create your views here.

def home(request):

user = request.user.is_authenticated 사용자가 인증을 받았는지 (로그인이 되어있는지)

if user: ## 만약 로그인사용자라면

return redirect('/tweet')## 이페이지가 나오고

else:

return redirect('/sign-in') ## 아니라면 로그인 페이지로 돌아간다.

def tweet(request):
if request.method == 'GET':
return render(request, 'tweet/home.html')

!! user = request.user.is_authenticated = 사용자가 로그인 했는지 검사 해 주는 기능

url을 연결해줘야하는데 tweet 앱안에 urls.py 가 없으니 tweet앱안에 파일을 만들어준다.

만들어진 tweet앱안에 urls.py 안에 코드를 입력

#tweet/urls.py
from django.urls import path
from . import views

urlpatterns = [
path('', views.home, name='home'), # 127.0.0.1:8000 과 views.py 폴더의 home 함수 연결
path('tweet/', views.tweet, name='tweet') # 127.0.0.1:8000/tweet 과 views.py 폴더의 tweet 함수 연결
]

만들어준 urls.py는 tweet앱에서 직접 만든 파일이기 때문에 django가 이 파일에서 url 경로를 설정 해 주고 있는지 아직 몰라서 이 url경로를 django에게 알려줘야한다. 따라서 가장 처음에 만들었던 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')),

path('', include('tweet.urls'))

]

굵은 글씨가 추가해준 코드 include를 이용해서 tweet url을 연결해준다.

이제 로그인 버튼을 눌렀을때 home.html이 나와야하는데 지금 누르면 나오지 않는다 이 이유는 버튼을 눌렀을때 실행되는 user앱 안에 sign_in_view() 코드안에 있다.
#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 = auth.authenticate(request, username=username, password=password) 사용자 불러오기

if me is not None: 저장된 사용자의 패스워드와 입력받은 패스워드 비교

auth.login(request, me)

return HttpResponse("로그인 성공") <<<<<<이유

else:

return redirect('/sign-in') 로그인 실패

elif request.method == 'GET':

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

HttpRespons 코드 때문에 home.html이 나오지않고 로그인 성공이라는 글자만 화면에 출력된다. 따라서 코드를 수정해준다.
return HttpResponse("로그인 성공") 을 없애고

return redirect('/') 로 만들어준다.

다시 http://127.0.0.1:8000/sign-in 으로 가서 로그인을 해 주면

페이지가 잘 나오는것을 볼 수 있다.

로그인 이후에 화면에 기능을 조금 수정하기

로그인을 했는데도 상단 부분(내비게이션 바)에 로그인, 회원가입 페이지로 이동하는 버튼들이 보이고 로그인 된 사용자의 정보는 어디에서도 볼 수가 없다. 따라서 django의 template 문법을 이용해서 사용자를 표시 해야한다.

div class="col-md-3">

<div class="card">
    <div class="card-body">
       <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
            the card's content.</p>

    </div>
</div>

클래스 카드 타이틀과 클래스 카드 텍스트 부분을 수정해준다.

h5 class="card-title">{{ user.username }}
p class="card-text"> {{ user.bio }}


이렇게 template를 수정하면

이런식으로 나온다.

이제 위에있는 상단부분을 수정한다.

상단 네비게이션 바 부분은 templates폴더안에 base.html이다 form을 수정해서 바꿔준다.

form class="form-inline my-2 my-lg-0">

{% if not user.is_authenticated %}

<ul class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a class="nav-link" href="/sign-in"> Sign In <span class="sr-only"></span></a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="/sign-up"> Sign Up <span class="sr-only"></span></a>
    </li>
</ul>

{% else %}

{{ user.username }} 님 반갑습니다!

{% endif %}

코드 해석을 하자면 만약에 로그인이 되어있지 않을때는 sign in , sign up 부분을 출력해주고 그게 아니라면(로그인상태라면)
{{ user.username }} 님 반갑습니다!를 출력해준다.

로그인 필요기능과 로그아웃 만들기

로그인 필수 기능 생각해보기

  1. 로그인 한 사람만 페이지에 접근 가능하게 만들기
  2. 로그인 한 사람은 사용 안 해도 되는 페이지 기능 만들기
    1번은 장고 기능으로 해결 가능하다.
    2번은 tweet앱 안에 view.py에 구현된 home함수를 이용해서 작업해보자

로그인 한 사람만 페이지에 접근 가능하게 만들기

tweet 함수에 로그인 한 사용자를 판단하는 기능을 추가

#tweet/views.py
from django.shortcuts import render, redirect

def tweet(request):
if request.method == 'GET': # 요청하는 방식이 GET 방식인지 확인하기
user = request.user.is_authenticated # 사용자가 로그인이 되어 있는지 확인하기
if user: # 로그인 한 사용자라면
return render(request, 'tweet/home.html')
else: # 로그인이 되어 있지 않다면
return redirect('/sign-in')

request.user.is_authenticated 기능을 이용해서 수정

로그인 한 사람은 사용 안 해도 되는 페이지 기능 만들기

로그인 한 사용자만 접근 가능할 수 있도록 만든 위의 방식을 그대로 사용

로그인 한 사용자가 회원가입과 로그인 페이지로 들어가지 않고 기본 페이지( http://127.0.0.1:8000/)로 되돌아 갈 수 있도록 작업을 해 주기

user앱의 views.py 에 있는 로그인/회원가입 함수를 수정

#user/views.py

def sign_up_view(request):
if request.method == 'GET':
user = request.user.is_authenticated # 로그인 된 사용자가 요청하는지 검사
if user: # 로그인이 되어있다면
return redirect('/')
else: # 로그인이 되어있지 않다면
return render(request, 'user/signup.html')

똑같이 로그인 페이지도 수정한다.(sign_in_view함수부분)

#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 = auth.authenticate(request, username=username, password=password) 사용자 불러오기

if me is not None: 저장된 사용자의 패스워드와 입력받은 패스워드 비교

auth.login(request, me)

return redirect('/')

else:

return redirect('/sign-in') 로그인 실패

elif request.method == 'GET':

user = request.user.is_authenticated 사용자가 로그인 되어 있는지 검사

if user: 로그인이 되어 있다면

return redirect('/')

else: 로그인이 되어 있지 않다면

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

request.user.is_authenticated 를 추가해서 페이지를 요청하는 사용자가 로그인 된 상태인지 확인 해 주는 기능을 적용 했다.

로그인 후, http://127.0.0.1:8000/sign-in혹은 http://127.0.0.1:8000/sign-up페이지로 접속 해 보면 django는 사용자가 로그인 되어 있다고 판단하고 http://127.0.0.1:8000/tweet 페이지를 띄워 줄 것이다.

profile
중요한건 버그에게 꺾이지 않는 마음

0개의 댓글