1. JSP, Servlet, JS 동시 사용시 작동 순서
- jsp는 화면 출력용
- servlet은 비즈니스 로직 구현용
- js는 jsp화면단에서 버튼 클릭 시 기능 구현
- 작동 순서: jsp + css가 로딩 < form >에서 servlet을 호출하게 된다. 이때, 완전히 servlet으로 가기 전에 js의 이벤트 함수가 잠시 끼어들어 실행이 됨.
2. Login Example
- login페이지에서 id, password를 입력을 했을 때 비밀번호가 10자리가 넘으면 loginSuccess페이지로 넘어가고, 10자리 미만으로 입력하면 alert를 보여준다.
- login.jsp에서 입력을 받으면, < form >에서 LoginServlet을 가지고오지만, 우선적으로 login.js에서 이벤트함수가 우선실행되어 비밀번호가 10자리 이상인지 확인한다.
- (이벤트함수 실행 후) 비밀번호가 10자리 이상이면, 이후 loginServlet.java로 넘어가서 session에 저장 후 loginSuccess.jsp 페이지로 넘어간다.
- (이벤트함수 실행 후) 비밀번호가 10자리 미만이면, login.js파일에서 alert를 보여준다.
- loginSuccess에서 로그아웃 버튼을 누르면 로그아웃이 진행된다.
[Login.jsp]
<%@ page import="example.servlet.loginServlet" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/login.js"></script>
</head>
<body>
<div class="login">
<form id="loginForm" action="/Example/login" method="post">
<h1>로그인 해주세요!</h1>
아이디: <input type="text" name="id" placeholder="아이디"></br>
비밀번호: <input type="text" id="pw" name="password" placeholder="비밀번호">
<button type="submit">로그인</button>
</form>
</div>
</body>
</html>1) 비밀번호 : < input id="", name="" >
- Servlet에서 값을 가지고오기 위해서는 name이 필요함
- js에서 비밀번호 글자 갯수가 10이 넘어야함을 비교한다. 이때, id 또는 class값이 키가 되어 가지고 올 수 있다. 쓰지 않으면, js파일에서 값을 찾아도 null이 떠서 pw.value.length를 가지고올 수 없음
[Login.js]
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector('#loginForm');
const pw = document.querySelector('#pw');
loginForm.addEventListener('submit', () => {
if (pw.value.length < 10) {
alert('비밀번호는 10자리 이상 입력해주세요.');
event.preventDefault(); // 새로시작 멈춤
return false;
}
return true;
});
});1) event.preventDefault();
- a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
- form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)
[loginServlet.java]
package example.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet(name = "loginServlet", urlPatterns = "/login")
public class loginServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
String password = req.getParameter("password");
HttpSession session = req.getSession();
session.setAttribute("id", id);
session.setAttribute("password", password);
resp.sendRedirect("/Example/loginSuccess.jsp");
}
}1) doPost();
- login.jsp에서 값을 가지고와서 세션에 저장하기 때문에 doPost()를 사용해야함
[loginSuccess.jsp]
<%@ page import="example.servlet.loginServlet" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 성공 페이지</title>
</head>
<body>
<%= session.getAttribute("id") %> 님 안녕하세요!
로그인 성공하셨습니다!
<form action="/logout"></form>
<button type="submit">로그아웃</button>
</body>
</html>1) session.getAttribute("id")
- loginServlet에서 세션에 저장한 값을 가지고옴. 이때, session만 작성해도 session에 접근 가능
[logoutServlet.jsp]
package example.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet(name = "logoutServlet", urlPatterns = "/logout")
public class logoutServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 로그인 페이지로 다시 보내주기
resp.sendRedirect("/ServletJSP_Ch3/logout.jsp");
}
}
1) doGet();
- 따로 값을 가지고오지 않고, 화면을 이동시키는 것이므로 doGet() 사용
[logout.jsp]
<%@ page import="example.servlet.logoutServlet" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그아웃 페이지</title>
</head>
<body>
<%= session.getAttribute("id") %> 님 안녕히 가세요 <!-- 여기까지는 session이 남아있음 -->
<% session.invalidate(); %> <!-- 세션 만료 -->
</body>
</html>
1) import="example.servlet.logoutServlet"
- import를 통해 logoutServlet과 연결
2) session.invalidate();
- 세션 만료
- 그 전까지는 session이 살아있다 -> 값을 가지고올 수 있음
이젠 DBA가 되어보자