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

순서

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

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

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

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

 

먼저 경고 문구를 포함한 div태그와 해당 태그의 css 코드를 추가합니다.

태그의 추가 위치는 클래스 속성명 'input-box'인 div태그와 클래스 속성명 'input-box button'인 div 태그 사이입니다.

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

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

로그인 실패 시 경고글

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

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

경고 문구를 포함한 div 태그를 <c:if> 태그로 감싸 줍니다.

<c:if> 태그의 test 속성명의 값을 "result == 0"을 작성합니다.

해당 식이 true일 때 <c:if> 태그 안의 데이터들이 출력되게 됩니다.

따라서 로그인에 실패하여 서버에서 result변수에 0일 저장하여 페이지에 전송하게 된다면, <c:if>의 test 속성 값이 true가 되기 때문에 경고 문구가 출력되게 됩니다.

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

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

아직 아무런 작업을 하지 않은 상태에서 로그인을 하게 되면 메인 페이지인 swan.jsp로 이동하지만, 조각 코드로 삽입한  header.jsp에서의 로그인 버튼이 계속 보입니다.

 

저는 서버로부터 전달받은 member 변수에 담긴 데이터와 위에서 사용한 <c:if> 태그를 사용하여 로그인한 상황에서는 로그인 버튼이 보이지 않고, 로그아웃, 장바구니, 마이페이지 버튼이 보이도록 했습니다.

 

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

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

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

기존 로그인 버튼과 회원가입 버튼을 <c:if> 태그로 감싸 줍니다.

해당 태그의 조건은 member == null입니다. 

member라는 변수가 null일 때 <c:if> 안의 데이터들이 출력되게 됩니다.

이럴 경우, 로그인을 하지 않은 상태에선 아직 session에 member 변수 데이터가 존재하지 않기 때문에 로그인 버튼이 보이게 됩니다.

<c:if test="${ member == null }">
   <li><a href="/member/login">로그인</a></li>
</c:if>

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

작성한 <c:if> 태그 바로 아래 새로운 <c:if> 태그를 작성합니다.

해당 태그의 조건은 member != null을 사용합니다.

이렇게 작성하게 되면 해당 태그는 로그인에 성공을 하여 서버가 session에 member 변수에 데이터를 저장하게 되고, member 변수가 null 아니기 때문에 해당 <c:if> 태그 안의 데이터들이 출력되게 됩니다. 

<c:if test="${ member != null }">
    <li><a href="#">로그아웃</a></li>
    <li><a href="#">마이페이지</a></li>
    <li><a href="#">
	<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-cart3" viewBox="0 0 22 22">
 	<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
 	</svg>
 	</a></li>
 	<li><a href="#">주문목록</a></li>
</c:if>

2-3. 테스트

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

로그인 전

로그인 후