1. login.jsp
1) login.jsp는 다음과 같이 구성되어 있다.
- index.jsp로 sendRedirect()하는 부분.
- form에서 Button을 눌렀을 때 id와 passwd가 넘어가는 POST 방식의 request를 처리하는 부분.
- 기본적인 html 코드를 출력하는 부분.
2) login.jsp는 다음과 같은 부분에 주목해야 한다.
- 맨 첫 부분에 session의 login 속성을 getAttribute() 메서드를 활용하여 로그인 되어 있는 상태인지 확인하고
로그인 되어 있으면 index.jsp로 response.sendRedirect()하는 부분.
- form의 button을 눌러 POST 방식의 request가 넘어 오는 경우를 request.getMethod().equals("POST")으로 확인할 수 있으며,
request에 탑재된 id와 passwd를 비교하여 맞는 경우 session 객체 login 속성에 해당 id 값을 설정하고 index.jsp를 url로 설정하고,
아닌 경우 url을 login.jsp로 설정하여 sendRedirect()하는 부분.
<%@ page contentType="text/html; charset=UTF-8" %>
<%
if(session.getAttribute("login") != null){
response.sendRedirect("index.jsp");
}
else if(request.getMethod().equals("POST")){
final String ID = "longlee";
final String PASSWD = "6789";
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
String url = "";
if(id != null && id.equals(ID) && passwd != null && passwd.equals(PASSWD)){
//login 성공
session.setAttribute("login", id);
url = "index.jsp";
} else {
//login 실패
url = "login.jsp";
}
response.sendRedirect(url);
} else {
%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<meta charset="UTF-8">
<script>
<!-- 입력 정합성 검사 -->
function submitHandler(event){
var id = document.querySelector('#id');
var passwd = document.querySelector('#passwd');
var check = id.value && passwd.value && id.value.length > 3 && passwd.value.length > 3;
if(!check){
event.preventDefault();
alert('올바른 ID, PASSWORD 정보를 입력하세요.');
id.value = '';
passwd.value = '';
id.focus();
}
}
function init(){
document.querySelector('#loginForm').
addEventListener('submit', submitHandler);
}
window.addEventListener('load', init);
</script>
</head>
<body>
<form id="loginForm" method="POST">
<fieldset>
<legend>login</legend>
<label for="id">ID</label>
<input type="text" name="id" id="id"/>
<label for="id">Password</label>
<input type="password" name="passwd" id="passwd"/>
<input type="submit" value="login"/>
</fieldset>
</form>
</body>
</html>
<%
}
%>
2. index.jsp
1) index.jsp는 다음과 같이 구성되어 있다.
- login이 null인 경우 login.jsp로 sendRedirect()하는 부분
- request의 command 파라미터의 값이 logout인 경우, 즉 logout 버튼을 누르는 경우
session을 invalidate()하고 다시 login.jsp를 sendRedirect()하는 부분
- session의 login 속성 값을 받아서 id 이름을 출력하는 부분.
- a tag에서 url에 command 파라미터와 그 값이 URL 뒤에 추가된 부분.
<%@ page contentType="text/html; charset=UTF-8" %>
<%
String command = request.getParameter("command");
if(session.getAttribute("login") == null){
response.sendRedirect("login.jsp");
}
else if(command != null && command.equals("logout")){
session.invalidate();
response.sendRedirect("login.jsp");
} else {
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>index page</h1>
<hr/>
<h3><%=session.getAttribute("login")%>님의 방문을 환영합니다.</h3>
<a href="index.jsp?command=logout">logout</a>
</body>
</html>
<%
}
%>