본문 바로가기
Personal Project

django로 diary 만들기 [accounts(회원) 세션 구현] -3

by applepick 2020. 8. 7.
반응형

이번시간에는 디자인?을 다루어볼려고합니다. 제가 디자인은 잘못해서 bootstrap을 통해서 구현하려고합니다.

일단 회원가입 폼을 볼까요?

{% extends 'menu_bar.html' %}

{% block contents %}
<style type="text/css">
label{
    align:center;
}
</style>
<br><br><br>
<form method="POST" action="{%url 'signup'%}">
    {%csrf_token%}
    <div class="card text-white bg-dark mb-3" style="max-width: 35rem; float: none; margin: 0 auto;">
    <div class="form-group" align="center"><br>
    <h1>Create your account</h1>
    <br><label>ID:</label>
    <input type="text" style="width:300px" class="form-control" name="username" value=""><br>
    </div>
    <div class="form-group" align="center">
    <label>PASSWORD:</label>
    <input style="width:300px" class="form-control" name="password1" type="password" value=""><br>
    <label>confirm PASSWORD:</label>
    <input style="width:300px" class="form-control" name="password2" type="password" value=""><br>
    </div>
    <div class="form-group" align="center">
    <input class="btn btn-dark" type="submit" value="회원가입">
    </div>
</form>
</div>
{% endblock %}

이렇게 구현했습니다. form의 method는 POST방식으로 가져왔습니다. 그리고 저번시간에 적용했던 회원가입 함수 signup을 연동해주었습니다. 여기서 제일 중요한 keypoint는 바로 {%csrf_token%}입니다. 사용자가 주어진값을 난수로 변환한 뒤에 값을 넘겨줍니다. 이렇게 하지않으면 보안에 위험이 있어 적용했습니다. 그리고 각 위치에 맞는 함수값을 넣어주어 값을 받게 합니다.

{% extends 'menu_bar.html' %}는 위에 상단바와 배경을 공통적으로 만들어 extends했습니다. 이렇게하면 하나하나 적용하지않아도 두줄만으로도 메뉴바와 배경을 적용시킬 수 있습니다.

그리고 {% endblock %}으로 닫아주었습니다.

다음으로 중요한 로그인 폼을 보겠습니다.

{% extends 'menu_bar.html' %}
{% block contents %}

<!--로그인 되어있는경우-->
    {% if user.is_active %}
    <br><br><div class="card text-white bg-dark mb-3" style="max-width: 40rem; float: none; margin: 0 auto;">
    <div class="form-group" align="center">
    <br><h3 align="center"><a style="color:#ff9f43;">{{user.username}}</a>님은 이미 로그인되어있습니다.</h3>
    <br>
    <a href="{% url 'logout' %}"><input class="btn btn-dark" type="submit" value="로그아웃하기"></a>
    <a href="{% url 'home' %}"><input class="btn btn-dark" type="submit" value="홈으로 돌아가기"></a>
    </div>
    </div>
{% else %}
{% if form.errors  %}
    <!-- 에러발생시-->
<p>ID나 PASSWORD가 일치하지 않습니다.</p>
{% endif %}
<br><br><br>
<body>
<div class="loginimg" style="max-width: 30rem; float: none; margin: 0 auto;">
    <br><br><br><br>
    </div>
<form method="POST" action="{%url 'login'%}" align="center">
<div class="card text-white bg-dark mb-3" style="max-width: 25rem; float: none; margin: 0 auto;">
  <div class="form-group" align="center">
        {%csrf_token%}
        <br><label>ID:</label>
        <input type="text" style="width:300px" class="form-control" name="username">
        <small class="form-text text-muted">아이디를입력해주세요</small>
        </div>
         <div class="form-group" align="center">
         <label>PASSWORD:</label>
         <input type="password" style="width:300px" class="form-control" name="password">
        <small class="form-text text-muted">페스워드를입력해주세요</small>
        </div>
        <div class="form-group" align="center">
        <input class="btn btn-dark" type="submit" value="로그인">
        <input class="btn btn-dark" type="submit" value="비밀번호찾기">
        </div>
    </form>
        <a href="{% url 'signup' %}"><input class="btn btn-dark" type="submit" value="회원가입하기"></a><br>
    </div>
{% endif %}
{% endblock %}
</body>

여기서 keypoint는 바로 로그인 되었을때 보여주는 페이지와 비로그인일때 보여주는 페이지가 달라야합니다.

로그인되어있을때는 로그아웃하시겠습니까라는 페이지가 보여줍니다. 그리고 비로그인일때는 로그인 폼을 사용자에게 제공합니다. 궁금한 점은 댓글에 달아주세요!

 

여기서 메뉴바도 보여드리겠습니다.

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>

<body style="background: #bdc3c7; background: -webkit-linear-gradient(to right, #bdc3c7, #2c3e50); background: linear-gradient(to right, #bdc3c7, #2c3e50);">
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'home' %}">헤진이를 위한 일기</a>
      {% if user.is_active %}
      <!--로그인했을때-->
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded justify-content-end">
  <ul class="nav nav-pills">
  <li>
    <a class="btn btn-dark" href="{% url 'write_diary' %}">글쓰기</a>
    <a class="btn btn-dark" href="{% url 'view_diary' %}">일기보기</a>
    <a class="btn btn-dark" href="{% url 'signup' %}">회원가입</a>
    <a class="btn btn-dark" href="{% url 'login' %}">로그인</a>
    <a class="btn btn-dark" href="{% url 'logout' %}">로그아웃</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">{{ user.username}}님 접속중</a>
  </li>
</ul>
</nav>
</nav>
      {% else %}
      <!--로그인 안했을떄-->
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded justify-content-end">
  <ul class="nav nav-pills">
  <li>
    <a class="btn btn-dark" href="{% url 'signup' %}">회원가입</a>
    <a class="btn btn-dark" href="{% url 'login' %}">로그인</a>
  </li>
</ul>
</nav>
</nav>
<!--로그인 안했을떄 바 밑에-->
    {% endif %}
{% block contents %}
    
{% endblock %}
</body>

메뉴바도 동일하게 만약 로그인되어있다면 글쓰기, 일기장보기, 로그인,로그아웃, 회원가입 기능이 다 제공해야겠죠?

반대로 비로그인이라면 회원가입과 로그인만 제공할수있도록 구현했습니다. 여기서 키포인트는

{% if user.is_active %}가 로그인 되어있는지 안되어있는지 알수있는 django 내부모델입니다. 아주간편합니다.

반응형

'Personal Project' 카테고리의 다른 글

django로 diary 만들기 [mydiary(글쓰기) 세션 구현] -3  (0) 2020.08.08
django로 diary 만들기 [mydiary(글쓰기) 세션 구현] -2  (0) 2020.08.07
django로 diary 만들기 [mydiary(글쓰기) 세션 구현] -1  (0) 2020.08.07
django로 diary 만들기 [accounts(회원) 세션 구현] -2  (0) 2020.08.07
django로 diary 만들기 [accounts(회원) 세션 구현] -1  (2) 2020.08.07

관련글

댓글

티스토리툴바