Martin's Bookshelf_Part 4 : list.jsp / Login&out

[ ⅰ: book_list.jsp ]

MVC 모델의 틀은 갖추었으니 기본적인 작동이 잘 되는지 확인하기 위해 우선 메인 페이지가 될 book_list.jsp의 프론트엔드 작업을 진행한다. 전반적인 틀을 테이블 형식으로 갖추고 DB에서 데이터를 잘 받아오는 지 확인한다. 그리고 로그인 여부에 따른 버튼 출현 등의 기능도 미리 구현해 놓는다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Martin's Bookshelf</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/main.css">

</head>

<body>
	
<div id="main_box">

	<h2 id="title">:::Martin's Bookshelf:::</h2>
	
	<div id="menu">
		<!-- case: not logged in -->
		<c:if test="${ empty sessionScope.user }">
			<input class="btn btn-primary work_btn" type="button" value="Log in" onclick="#">
		</c:if>
		
		<!-- case: logged in -->
		<c:if test="${ not empty sessionScope.user }">
			Welcome back <b>${ user.m_name }</b>!
			<input class="btn btn-danger" type="button" value="Log out" onclick="#">
		</c:if>
		
		<input class="btn btn-success" type="button" value="Add New Book" onclick="#">	
	</div>	
		
		<!-- case: no data available -->
		<c:if test="${empty list}">
			<div id="empty_msg">No Book Available</div>
		</c:if>
		
		<c:forEach var="vo" items="${ list }">
		
			<table class="table table-striped">
				<tr>
					<td rowspan="3">${ vo.b_category }</td>
					<td rowspan="3"> <img style=" width: 80px " src="${pageContext.request.contextPath}/resources/upload/${ vo.b_filename }"></td>
					<td>제목 :</td> <td>${ vo.b_title }</td>
					<td>출간일 :</td> <td>${ fn:substring(vo.b_published,0,10) }</td>
					<td><button type="button" class="btn btn-default btn-sm">Detail</button></td>					
				</tr>
					
				<tr>						
					<td>부제 :</td> <td>${ vo.b_subtitle }</td>
					<td>출판사 :</td> <td>${ vo.b_publisher }</td>
					<c:if test="${ (vo.m_idx eq user.m_idx) or (user.m_grade eq 'admin')  }">
						<td><button type="button" class="btn btn-warning btn-sm">Modify</button></td>
					</c:if>
				</tr>
					
				<tr>
					<td>작가 :</td> <td>${ vo.b_author }</td>
					<td>완독일 :</td> <td>${ fn:substring(vo.b_readdate,0,10) }</td>
					<c:if test="${ (vo.m_idx eq user.m_idx) or (user.m_grade eq 'admin')  }">
						<td><button type="button" class="btn btn-danger btn-sm">Delete</button></td>
					</c:if>
				</tr>
			</table>			
				
		</c:forEach>
</div>
	
</body>
</html>

위와 같이 프론트엔드를 구현해두었다. 수정과 삭제기능을 수행하는 버튼은 로그인 여부(SessionScope에 유저가 있는지)에 따라 프론트에 노출되기 때문에 우선 로그인 기능을 추가한다.

[ ⅱ : Login ]

로그인 기능을 구현하기 위한 작업은 다음과 같은 순서로 진행했다.

로그인 버튼에 onclick href로 리퀘스트 걸어두기 + Controller에 리퀘스트 추가
member_login_form.jsp 작업
1. 로그인 정보를 입력하는 패널(Form) 작성
2. 입력정보를 확인하는 JS function 코딩
3. Controller에 login.do로 리퀘스트 걸어두기
Controller에서 login.do 리퀘스트 코딩
1. JSP로 부터 전송된 Parameter들 받기
2. DAO를 통해 사용자가 입력한 정보가 DB에 존재하는지 확인(by selectOne method)
  1. DB 작성 시 아이디는 unique 하게 설정했기 때문에 m_id를 파라미터로 SQL문 작성
  2. mapper 작성 시 parameterType 설정 필수
3. Controller에 로그인 수행에 필요한 프로세스 코딩
  1. 로그인 거절 - id가 없는 경우 & 비밀번호가 틀린 경우
  2. 로그인 성공 - 로그인 정보 Session binding

Step 1: onclick href로 리퀘스트 걸어두기 + Controller에 리퀘스트 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style type="text/css">

#box{
	margin:auto;
	margin-top: 200px;
	width: 400px;	
}

</style>

<script type="text/javascript">

	$(document).ready(function(){
		
		// show_msg function will activate after 0.1 sec
		setTimeout(show_msg,100);
		
	});

	function show_msg(){
		// case 1: login_form.do?reason=fail_id
		if ("${ param.reason eq 'fail_id' }"=="true"){
			alert("Wrong ID, try again.");
			return;
		}
				
		// case 2: login_form.do?reason=fail_pwd
		if ("${ param.reason eq 'fail_pwd' }"=="true"){
			alert("Wrong Password, try again.");
			return;
		}
		
		
		
	}
	
</script>


<script type="text/javascript">

	function send(f){
		
		var m_id  = f.m_id.value.trim();
		var m_pwd = f.m_pwd.value.trim();
		
		if (m_id==""){
			alert("Fill the ID Section");
			f.m_id.value="";
			f.m_id.focus();
			return;
		}
		
		if (m_pwd==""){
			alert("Fill the Password Section");
			f.m_pwd.value="";
			f.m_pwd.focus();
			return;
		}
		
		f.action = "login.do";
		f.submit();
		
	}

</script>

</head>
<body>

<form>
	<div id="box">
		<div class="panel panel-primary">
		    <div class="panel-heading">Log-in</div>
		    <div class="panel-body">
		    	<table class="table">
		    		<tr>
		    			<th>ID</th>
		    			<td><input name="m_id"></td>
		    		</tr>
		    		
		    		<tr>
		    			<th>Password</th>
		    			<td><input type="password" name="m_pwd"></td>
		    		</tr>
		    		    	
		    		<tr>
		    			<td colspan="2" align="center">
		    				<input class="btn btn-info" type="button" value="Log-in"	 onclick="send(this.form);">
		    				<input class="btn btn-danger" type="button" value="Cancel"   onclick="location.href='../book/list.do'">
		    			</td>
		    		</tr>
		    		
		    	</table>
		    </div>
	    </div>
	</div>
</form>


</body>
</html>

Step 3-1: DAO를 통해 사용자가 입력한 정보가 DB에 존재하는지 확인

Step 3-2: Controller에 로그인 수행에 필요한 프로세스 코딩_로그인 거절 시

Step 3-2: Controller에 로그인 수행에 필요한 프로세스 코딩_Session Binding

[ ⅲ : LogOut ]

로그아웃 기능은 SesseionScope에 있는 user 변수만 삭제한 다음 book_list 페이지를 Redirect하면 되기 때문에 작업이 비교적 간단하다

저작자표시 비영리 변경금지

'데이터 분석 > Spring' 카테고리의 다른 글

Martin's Bookshelf_Part 7 : BOOK CRUD(Update) (0)	2021.01.10
Martin's Bookshelf_Part 6 : BOOK CRUD(Delete) (0)	2021.01.10
Martin's Bookshelf_Part 5 : BOOK CRUD(Create) (0)	2021.01.10
Martin's Bookshelf_Part 3 : MVC Framework Setting up (0)	2021.01.09
Martin's Bookshelf_Part 2 : ERD & Database (0)	2021.01.09
Martin's Bookshelf_Part 1 : Project Preset (0)	2021.01.09

CheeseChaser

Martin's Bookshelf_Part 4 : list.jsp / Login&out

[ ⅰ: book_list.jsp ]

[ ⅱ : Login ]

[ ⅲ : LogOut ]

'데이터 분석 > Spring' 카테고리의 다른 글

티스토리툴바

Martin's Bookshelf_Part 4 : list.jsp / Login&out

[ ⅰ: book_list.jsp ]

[ ⅱ : Login ]

[ ⅲ : LogOut ]

'데이터 분석 > Spring' 카테고리의 다른 글

'데이터 분석/Spring' Related Articles

티스토리툴바