[Spring][쇼핑몰 프로젝트][8] 로그인 기능 구현(페이지 데이터 처리)

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

서버로부터 전달받은 데이터를 활용하여 페이지 처리

 

 저번 포스팅에서는 로그인 서버에 로그인 메서드를 작성하였고 성공, 실패 상황에 따라서 데이터를 담아 각 상황에 맞는 페이지로 이동하게 하였습니다. 이번 포스팅에서는 전달받은 데이터를 활용하여 각 상황에 맞게 페이지가 변하도록 하는 것이 목표입니다. 각 상황에 맞는 이벤트는 로그인 성공 시 메인 페이지에 로그인, 회원가입 버튼이 사라지고 로그인한 회원의 정보가 뜨는 것이고, 로그인 실패의 경우는 로그인 페이지에 로그인에 실패했다는 문구가 뜨도록 하는 것입니다. 

 

 코드가 번잡해보이는 것을 피하기 위해서 저는 JSTL을 사용할 것입니다. JSTL에 무엇인지, 어떻게 사용하는지 모르시는 분들은 구글링을 통해 찾아보시면 됩니다. 

 

 

순서

1. login.jsp (로그인 실패)

2. main.jsp (로그인 성공)

 

 

1. login.jsp (로그인 실패)

 로그인 페이지는 서버로부터 받은 result 변수에 담긴 데이터를 활용하여 로그인에 실패하였다는 경고 문구가 뜨도록 만들 것입니다.

 

 먼저 경고문구를 포함한 div태그와 해당 태그의 css 코드를 추가합니다. 태그의 추가 위치는 클래스 속성명 'pw_wrap'인 div태그와 클래스 속성명 'login_button_wrap'인 div 태그 사이에 div태그를 추가합니다. 

 

 
<div class = "login_warn">사용자 ID 또는 비밀번호를 잘못 입력하셨습니다.</div>
 

 

그림 1

 

 

 
/* 로그인 실패시 경고글 */
.login_warn{
    margin-top: 30px;
    text-align: center;
    color : red;
}
 

 

 

 

그림 3

 

 

 JSTL을 사용하기 위해 jsp 상단에 태그라이브러리 코드를 추가해줍니다. 

 

 
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 

 

그림 4

 

 

 경고문구를 포함한 div 태그를 <c:if>태그로 감싸 줍니다. <c:if> 태그의 test 속성명의 값을 "result == 0"을 작성합니다. 해당 식이 true일 때 <c:if> 태그 안의 데이터들이 출력되게 됩니다. 따라서 로그인에 실패하여 서버에서 result변수에 0일 저장하여 페이지에 전송하게 된다면 <c:if>의 test 속성 값이 true가 되기 때문에 경고문구가 출력되게 됩니다.

 

 
            <c:if test = "${result == 0 }">
                <div class = "login_warn">사용자 ID 또는 비밀번호를 잘못 입력하셨습니다.</div>
            </c:if>
 

 

그림 5

 

 

 고의적으로 잘못된 아이디와 비밀번호를 작성하여 테스트를 진행합니다. 

 

그림 6

 

그림 7

 

 

2. main.jsp (로그인 성공)

 아직 아무런 작업을 하지 않은 상태에서 로그인을 하게 되면 메인페이지로 이동하지만 로그인, 회원가입 버튼이 계속 보입니다. 서버로부터 전달받은 member 변수에 담긴 데이터와 위에서 사용한 <c:if> 태그를 사용하여 로그인한 상황에서는 버튼들이 보이지 않고 로그인한 회원의 정보가 출력되도록 만들 것입니다. 저는 회원의 이름, 돈, 포인트를 노출되도록 할 것입니다. 

 

 먼저 JSTL을 사용하기 위해 main.jsp 상단에 태그라이브러리 코드를 추가해줍니다. 

 

 
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 

 

 

 

2-1 로그인 하지 않을 시 코드 처리

 

 기존 로그인 버튼과 회원가입 버튼을 <c:if> 태그로 감싸 줍니다. 해당 태그의 조건은 member == null입니다.  member라는 변수가 null일 때 <c:if> 안의 데이터들이 출력되게 됩니다. 이럴 경우 로그인을 하지 않은 상태에선 아직 session에 member 변수 데이터가 존재하지 않기 때문에 로그인, 회원가입 버튼이 보이게 됩니다. 

 

 
                <!-- 로그인 하지 않은 상태 -->
                <c:if test = "${member == null }">
                    <div class="login_button"><a href="/member/login">로그인</a></div>
                    <span><a href="/member/join">회원가입</a></span>                
                </c:if>    
 

 

그림 9

 

 

2-2 로그인 상태 코드 처리

 

 작성한 <c:if> 태그 바로 아래 새로운 <c:if>태그를 작성합니다. 해당 태그의 조건은 member != null을 사용합니다. 이렇게 작성하게 되면 해당 태그는 로그인에 성공을 하여 서버가 session에 member 변수에 데이터를 저장하게 되고 member 변수가 null 아니기 때문에 해당 <c:if> 태그 안의 데이터들이 출력되게 됩니다. 

 

 
                <!-- 로그인한 상태 -->
                <c:if test="${ member != null }">
            
                </c:if>
 

 

그림 10

 

 

 로그인 성공시 출력될 내용으로 아래의 html, css 코드를 작성하였습니다. 자신이 출력시키고자 하는 내용을 작성해주시면 됩니다.

 

 
                <!-- 로그인한 상태 -->
                <c:if test="${ member != null }">
                    <div class="login_success_area">
                        <span>회원 : ${member.memberName}</span>
                        <span>충전금액 : ${member.money}</span>
                        <span>포인트 : ${member.point}</span>
                    </div>
                </c:if>
 

 

그림 11

 

 

 
/* 로그인 성공 영역 */
.login_success_area{
    height: 62%;
    width: 80%;
    border: 2px solid #7474ad;
    border-radius: 15px;
    margin: 5% auto;
    padding-top: 5%;
}
.login_success_area>span{
    display : block;
    text-align: left;
    margin-left: 10%;
}
 

 

그림 12

 

 

2-3 테스트

 

 마지막으로 의도하는 대로 작동하는지 테스트를 진행합니다.

 

 

 

 

2-4 jstl 활용한 숫자 표시 형식 변경

 

 회원이 소유한 돈, 포인트가 읽기에 다소 불편합니다. 따라서 JSTL에서 형식 변환 기능을 제공하는 fmt태그를 활용하여 숫자의 형식을 천 단위마다 콤마가 출력되도록 변환하겠습니다.

 

먼저 fmt태그를 사용하기 위해 jsp 상단에 라이브러리 코드를 추가합니다. 

 

 
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>    
 

 

그림 15

 

 

 ${member.money}와 ${member.point} 대신 아래의 코드로 대체해줍니다. 회원의 돈 경우 숫자 앞에 원화 기호를 넣었습니다.

 

 
         <fmt:formatNumber value="${member.money }" pattern="\#,###.##"/>
        <fmt:formatNumber value="${member.point }" pattern="#,###" />
 

 

그림 16

 

 

 로그인을 하여 형식이 바뀌었는지 확인해봅니다.

 

그림 17

 

 

DATE

• 2020.12.16