코딩공부/COVID-19-REPORT

COVID-19-REPORT . 02 - 로그인, 회원가입

integerJI 2020. 8. 11. 21:21

COVID-19-REPORT (위치 기록 반응형 웹)

 

결과물

 

페이지 뷰

 

프로젝트 구조

  • templates/singin.html - 로그인 페이지
  • templates/signup.html - 회원가입 페이지

 

회원가입 페이지

 

signup.html

{% extends 'signBase.html' %}
{% load static %}
{% block signcontent %}
<body class="text-center">
    <form class="form-signin" method="POST" action="{% url 'signup'%}">
        {%csrf_token%}
        {% if messages %}
        <div class="alert alert-light alert-dismissible fade show" role="alert">
            {% for message in messages %}
            <strong>{{ message.message }}</strong>
            {% endfor %}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        {% endif %}
        <svg width="72" height="72" viewBox="0 0 16 16" class="bi bi-arrow-down-square" fill="currentColor"
            xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
            <path fill-rule="evenodd"
                d="M4.646 7.646a.5.5 0 0 1 .708 0L8 10.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" />
            <path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5z" />
        </svg>
        <br>
        <br>
        <img class="mb-4" src="#" alt="" width="72" height="72">
        <h1 class="h3 mb-3 font-weight-normal">COVID-19-REPORT</h1>
        <br>
        <div class="form-group">
            <label for="text" class="sr-only">Id</label>
            <input type="text" id="inputEmail" name="username" class="form-control" placeholder="Id" required autofocus>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" name="password1" class="form-control" placeholder="Password"
                required>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="sr-only">Confirm Password</label>
            <input type="password" id="inputPassword" name="password2" class="form-control"
                placeholder="Confirm Password" required>
        </div>
        <br>
        <button class="btn btn-lg btn-secondary btn-block" id="btn-click" type="submit">Sign up</button>
        <hr>
        <a class="btn btn-lg btn-secondary btn-block" href="{% url 'signin' %}">Back</a>
        <p class="mt-5 mb-3 text-muted font-weight-lighter">&copy; 2020. <a
                href="https://www.instagram.com/integer_ji/">IntegerJi</a> all rights reserved.</p>
    </form>
</body>
{% endblock %}
  • 1 ~ 3 : static 정의, signBase.html 상속
  • 5 : form 작성, sumbit시 singup 함수 호출
  • 7 ~ 16 : messages가 있을 경우 alert 출력
  • 48 ~ 49 : footer

 

views.py/signup

 

def signup(request):
    if request.method == 'POST':
        username = request.POST['username']
        password1 = request.POST['password1']
        password2 = request.POST['password2']

        if password1 == password2:
            if User.objects.filter(username=username).exists():
                messages.info(request, '이미 존재하는 회원입니다.')
                return render(request, 'signup.html')
            else:
                user = User.objects.create_user(username, password=password1)
                auth.login(request, user)
                return redirect('index')
        else:
            messages.info(request, '비밀번호가 일치하지 않습니다.')
            return render(request, 'signup.html')
        
    return render(request, 'signup.html')
  • request.POST['']로 html에서의 input 값의 name을 각각의 변수로 지정
  • password1 == password2 : 패스워드 값과 패스워드 확인 값을 비교
  • User.objects.filter(username=username).exists() : filter과 exists를 사용하여 DB에 입력받은 username가 있는지 아이디 중복체크
  • 이미 존재하는 회원일 경우 messages.info를 이용해 안내 문구 변수 반환
  • 아닐경우 회원가입 진행 후 index로 redirect

쉽고 간편한 가입을 위해 Django에서 제공하는 UserFrom을 사용하지 않았습니다.

 

최소한의 입력값만 받아 쉽고 빠르게 회원가입 진행이 목적

 

로그인 페이지

 

signin.html

{% extends 'signBase.html' %}
{% load static %}
{% block signcontent %}
<body class="text-center">
    <form class="form-signin" method="POST" action="{% url 'signin'%}">
        {%csrf_token%}
        {% if messages %}
        <div class="alert alert-light alert-dismissible fade show" role="alert">
            {% for message in messages %}
            <strong>{{ message.message }}</strong>
            {% endfor %}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        {% endif %}
        <svg width="72" height="72" viewBox="0 0 16 16" class="bi bi-arrow-down-square" fill="currentColor"
            xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
            <path fill-rule="evenodd"
                d="M4.646 7.646a.5.5 0 0 1 .708 0L8 10.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" />
            <path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5z" />
        </svg>
        <br>
        <br>
        <h1 class="h3 mb-3 font-weight-normal">COVID-19-REPORT</h1>
        <br>
        <div class="form-group">
            <label for="text" class="sr-only">Id</label>
            <input type="text" id="inputEmail" name="username" class="form-control" placeholder="Id" required autofocus>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password"
                required>
        </div>
        <br>
        <button class="btn btn-lg btn-secondary btn-block" id="btn-click" type="submit">Sign in</button>
        <hr>
        <a class="btn btn-lg btn-secondary btn-block" href="{% url 'signup' %}">Sing up</a>
        <p class="mt-5 mb-3 text-muted font-weight-lighter">&copy; 2020. <a
                href="https://www.instagram.com/integer_ji/">IntegerJi</a> all rights reserved.</p>
    </form>
</body>
{% endblock %}
  • 회원가입과 동일

 

views.py/signin

def signin(request):
    if request.method == "POST":
        username = request.POST['username']
        password = request.POST['password']

        user = authenticate(username = username, password = password)

        if User.objects.filter(username=username).exists():
            if user is not None:
                login(request, user)
                return redirect('index')
            else:
                messages.info(request, '비밀번호를 다시 입력해주세요.')
                return render(request, 'signin.html')
        else:
            messages.info(request, '존재하지 않는 회원입니다.')
            return render(request, 'signin.html')
    else:
        return render(request, 'signin.html')
  • request가 POST일 경우 진행
  • request값을 각각 변수로 지정
  • authenticate를 통해 DB의 username과 password를 요청한 값과 비교
  • User.objects.filter(username=username).exists() : 를 통하여 DB에 해당하는 유저가 존재하면 다음 if문 실행
  • 아닐 경우 안내문구 반환
  • uesr is not None : user에 호출받은 username과 password가 같을 경우 login 후 index redirect
  • 아닐 경우 안내문구 반환

 

 

 

 

 

 

 

저작자표시

'코딩공부 > COVID-19-REPORT' 카테고리의 다른 글

covid-19-report 현재까지 사용하며 수정해야할 점  (0) 2020.08.28
COVID-19-REPORT . 04 - 리스트 가져오기  (0) 2020.08.14
COVID-19-REPORT . 03 - 지도 API 호출, 위치 저장하기  (0) 2020.08.13
COVID-19-REPORT . 01 - 기본 설정  (0) 2020.08.09
COVID-19-REPORT . 00 - 프로젝트 소개  (0) 2020.08.09

'코딩공부/COVID-19-REPORT'의 다른글

  • 현재글COVID-19-REPORT . 02 - 로그인, 회원가입

관련글

댓글

티스토리툴바