2. 화면 구성 - (7) 로그인 화면

[1] 개요

  1. URL

    - HOST/login

  2. 구성

    - 아이디 입력창

    - 비밀번호 입력창

    - 로그인 버튼

    - 현재 아이디찾기, 비밀번호찾기 기능은 구현X

    - 아이디 또는 비밀번호가 잘못된 경우, 입력한 ID는 입력창에 그대로 뜨게 하고, 하단에 메시지 출력

로그인 화면

아이디 또는 비밀번호가 일치하지 않는 경우

 

[2] CODE

  1. HTML

    - id와 pwd를 form으로 받아서 POST 방식으로 /loginimpl 요청

    - input 속성에 required 부여하여, 아이디와 비밀번호 모두 입력 받도록 구현

    - 로그인을 시도하지 않은 상태에서는 context에 id가 없어서 "아이디 또는 비밀번호가 일치하지 않습니다."

      메시지를 띄우지 않고, 잘못된 아이디 또는 비밀번호로 시도한 경우 화면을 다시 띄울 때, context['id']에 입력했던

      아이디를 저장하게 되어 if문 조건이 참이되므로 메시지를 띄우게 된다.

/templates/login.html

    <section class="p-5">
        <div class="m-5" style="position:absolute; left:50%; transform:translateX(-50%); width:50%;">
            <header class="container" style="text-align:center; width:100%;">
                <h3 style="white-space:nowrap;">로그인</h3>
            </header>
            <form action="loginimpl" method="POST" style="text-align:center;">
                {% csrf_token %}
                <div class="input-box">
                    <input id="custid" type="text" name="custid" placeholder="아이디" autocomplete="off" value="{{id}}" required>
                    <label for="custid">아이디</label>
                    <div class="p-1" style="text-align:right">
                        <button class="forgot" id="forgotid" style="text-align:right; width:85px;" type="button">아이디찾기</button>
                    </div>
                </div>
                <div class="input-box">
                    <input id="custpw" type="password" name="custpw" placeholder="비밀번호" autocomplete="off" required>
                    <label for="custpw">비밀번호</label>
                    <div class="p-1" style="text-align:right">
                        <button class="forgot" id="forgotpw" style="text-align:right; width:85px;" type="button">비밀번호찾기</button>
                    </div>
                </div>
                {% if id != '' %}
                <div class="input-box">
                    <span style="color: red;">아이디 또는 비밀번호가 일치하지 않습니다.</span>
                </div>
                {% endif %}
                <div class="p-2" style="position:absolute; left:50%; transform:translateX(-50%); width:100%;">
                    <input type="submit" value="로그인" style="width:80%">
                </div>
            {% if center != None %}
                {% include center %}
            {% else %}
                <section></section>
            {% endif %}
            </form>
        </div>
    </section>

 

  2. CSS

    - 기본템플릿 CSS 적용

    - 입력창에 라벨을 추가하여, 입력창 focused 되었을 때 라벨 글자가 작아지면서 좌상단으로 이동하도록 구현

/static/css/styles.css

input:placeholder-shown + label {
    color: #aaa;
    font-size: 14pt;
    top: 16px;
}

input:focus + label, label {
    color: #8aa1a1;
    font-size: 8pt;
    pointer-events: none;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

 

  3. JavaScript

    - 적용 사항 없음

 

  4. Application

    1) login( )

      - 로그인 화면 출력

      - 첫 로그인 시도인 경우 request.GET에 아무것도 존재하지 않으므로, context['id'] 에 빈 문자열('')을 넣어서 전송

    2) loginimpl( )

      - 로그인 화면에서 로그인 버튼 클릭 시 실행

      - form에 있는 입력값인 id와 pwd를 POST 방식으로 받아서, DB의 cust 테이블 정보와 비교

      ① id, pwd 모두 일치할 경우 request.session에 해당 고객 정보 저장하고 홈화면으로 이동

      ② id가 없을 경우, id는 있지만 pwd가 일치하지 않을 경우 예외 발생

        -> 해당 id를 로그인화면 요청 URL에 querystring으로 포함시켜서 전송 - redirect('/login?id='+id)

        -> login( ) 에서 request.GET 에 'id' 있는 것을 확인하고, context에 해당 id를 넣어서 로그인 화면과 함께 전송

/web/views.py -> class MyView(View)

    @request_mapping("/login", method="get")
    def login(self, request):
        //print(request.GET)
        if 'id' in request.GET:
            context = {
                'id': request.GET['id']
            }
        else:
            context = {
                'id': ''
            }
        return render(request, 'login.html', context);
        
	@request_mapping("/loginimpl", method="post")
    def loginimpl(self, request):
        # id, pwd 를 프로그램을 확인 한다.
        id = request.POST['custid'];
        pwd = request.POST['custpw'];
        try:
            cust = Cust.objects.get(id=id);
            if cust.pwd == pwd:
                request.session['sessionid'] = cust.id;
                request.session['sessionname'] = cust.name;
                request.session['sessionimg'] = cust.custimg;
            else:
                raise Exception;
        except:
            return redirect('/login?id='+id);
        return redirect('/');

- 끝 -