<쿠키 객관식 문제 - testForm1.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- react -> nextjs -> typescript추가 -> ECMAScipt(번들러, 트랜스파일러) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제1</title>
<script type="text/javascript">
const test = (cb) => {
for(let i=0; i<document.f_test1.cb.length; i++){
if(cb === i)
document.f_test1.cb[i].checked = 1
else
document.f_test1.cb[i].checked = 0
}
} // end of test
// document는 이 문서(testForm1.jsp->SSR->html->다운로드->text파일)를 가리킨다
// document의 최상위 객체는 window
// document에서 같은이름이 두 개 이상이면 브라우저가 자동으로 배열로 전환해줌
// checked는 checkbox에서 선택된 상태일 때 처리하는 속성
// 1이면 선택, 0이면 비선택
// 0은 false이고 나머지는 모두 true이다
const next = () => {
let dap = 1;
for(let i=0; i<document.f_test1.cb.length; i++){
if(document.f_test1.cb[i].checked == 1){
document.f_test1.htest1.value = dap
} else {
dap = dap + 1
}
}
document.f_test1.submit();
} // end of next
</script>
</head>
<body>
<form name="f_test1" method="get" action="testForm2.jsp">
<input type="hidden" name="htest1">
문제1. 다음 중 DML구문이 아닌 것을 고르시오.<br>
<input type="checkbox" name="cb" onChange="test(0)">select<br>
<input type="checkbox" name="cb" onChange="test(1)">insert<br>
<input type="checkbox" name="cb" onChange="test(2)">create<br>
<input type="checkbox" name="cb" onChange="test(3)">delete<br>
<br>
<input type="button" value="다음문제" onClick="next()">
</form>
</body>
</html>
<쿠키 객관식 문제 - testForm2.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String dap1 = request.getParameter("htest1");
out.print("1번 문제 답안지 => " + dap1 + "<br />");
// 쿠키에는 문자열만 담을 수 있으므로 그냥 숫자를 쓰면 컴파일에러
Cookie c1 = new Cookie("testForm1", dap1);
c1.setPath("/onLineTest");
c1.setMaxAge(60*60); // 평가시간이 60분일때 시간 설정값
response.addCookie(c1);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제2</title>
<script type="text/javascript">
const test = (cb) => {
for(let i=0; i<document.f_test2.cb.length; i++){
if(cb === i)
document.f_test2.cb[i].checked = 1
else
document.f_test2.cb[i].checked = 0
}
} // end of test
const prev = () => {
// location.href 속성으로 페이지를 전환하는 건 SPA에는 맞지않음
// 리액트의 경우
// -> const navigate = useNavigate();
// -> navigate("./testForm1.jsp")
window.location.href = "testForm1.jsp";
}
const next = () => {
let dap = 1;
for(let i=0; i<document.f_test2.cb.length; i++){
if(document.f_test2.cb[i].checked == 1){
document.f_test2.htest2.value = dap
} else {
dap = dap + 1
}
}
document.f_test2.submit();
} // end of next
</script>
</head>
<body>
<form name="f_test2" method="get" action="testForm3.jsp">
<input type="hidden" name="htest2">
문제2. 다음 중 DDL구문이 아닌 것을 고르시오.<br>
<input type="checkbox" name="cb" onChange="test(0)">create<br>
<input type="checkbox" name="cb" onChange="test(1)">drop<br>
<input type="checkbox" name="cb" onChange="test(2)">alter<br>
<input type="checkbox" name="cb" onChange="test(3)">delete<br>
<br>
<input type="button" value="이전문제" onClick="prev()">
<input type="button" value="다음문제" onClick="next()">
</form>
</body>
</html>
<쿠키 객관식 문제 - testForm3.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String dap2 = request.getParameter("htest2");
out.print("2번 문제 답안지 => " + dap2 + "<br />");
Cookie c2 = new Cookie("testForm2", dap2);
c2.setPath("/onLineTest");
c2.setMaxAge(60*60);
response.addCookie(c2);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제3</title>
<script type="text/javascript">
const test = (cb) => {
for(let i=0; i<document.f_test3.cb.length; i++){
if(cb === i)
document.f_test3.cb[i].checked = 1
else
document.f_test3.cb[i].checked = 0
}
} // end of test
const prev = () => {
window.location.href = "testForm2.jsp";
}
const next = () => {
let dap = 1;
for(let i=0; i<document.f_test3.cb.length; i++){
if(document.f_test3.cb[i].checked == 1){
document.f_test3.htest3.value = dap
} else {
dap = dap + 1
}
}
document.f_test3.submit();
} // end of next
</script>
</head>
<body>
<form name="f_test3" method="get" action="testForm4.jsp">
<input type="hidden" name="htest3">
문제3. 다음 중 DCL구문으로 맞는 것을 고르시오.<br>
<input type="checkbox" name="cb" onChange="test(0)">grant<br>
<input type="checkbox" name="cb" onChange="test(1)">drop<br>
<input type="checkbox" name="cb" onChange="test(2)">alter<br>
<input type="checkbox" name="cb" onChange="test(3)">delete<br>
<br>
<input type="button" value="이전문제" onClick="prev()">
<input type="button" value="다음문제" onClick="next()">
</form>
</body>
</html>
<쿠키 객관식 문제 - testForm4.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
현재 내가 바라보는 페이지는 testForm4.jsp이지만
3번 문제에대한 답은 다음 문제 버튼이 눌렸을 때 마음에 결정이 된 것이니까
3번 문제에대한 답을 담는 hidden은 남겨야한다
그 값을 다음 문제인 testForm4.jsp에서 request.getParameter("")로 읽어서
쿠키를 생성하고 그 값을 저잘할 것
*/
String dap3 = request.getParameter("htest3");
out.print("3번 문제 답안지 => " + dap3 + "<br />");
Cookie c3 = new Cookie("testForm3", dap3);
c3.setPath("/onLineTest");
c3.setMaxAge(60*60);
response.addCookie(c3);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제4</title>
<script type="text/javascript">
const test = (cb) => {
for(let i=0; i<document.f_test4.cb.length; i++){
if(cb === i)
document.f_test4.cb[i].checked = 1
else
document.f_test4.cb[i].checked = 0
}
} // end of test
const prev = () => {
window.location.href = "testForm3.jsp";
}
const next = () => {
let dap = 1;
for(let i=0; i<document.f_test4.cb.length; i++){
if(document.f_test4.cb[i].checked == 1){
document.f_test4.htest4.value = dap
} else {
dap = dap + 1
}
}
document.f_test4.submit();
} // end of next
</script>
</head>
<body>
<form name="f_test4" method="get" action="testForm5.jsp">
<input type="hidden" name="htest4">
문제4. 다음 중 테이블에 대한 설명으로 틀린 것을 고르시오.<br>
<input type="checkbox" name="cb" onChange="test(0)">
row와 column으로 구성되어있다.<br>
<input type="checkbox" name="cb" onChange="test(1)">
테이블에는 반드시 index가 있어야 한다.<br>
<input type="checkbox" name="cb" onChange="test(2)">
컬럼에는 적당한 타입을 선택하고 담을 수 있는 크기도 설정할 수 있다.<br>
<input type="checkbox" name="cb" onChange="test(3)">
테이블에는 PK도 올 수 있고 FK도 올 수 있다.
<br>
<br>
<input type="button" value="이전문제" onClick="prev()">
<input type="button" value="다음문제" onClick="next()">
</form>
</body>
</html>
<쿠키 객관식 문제 - testForm5.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String dap4 = request.getParameter("htest4");
Cookie c4 = new Cookie("testForm4", dap4);
c4.setPath("/onLineTest");
c4.setMaxAge(60*60);
response.addCookie(c4);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제5</title>
<script type="text/javascript">
const test = (cb) => {
for(let i=0; i<document.f_test5.cb.length; i++){
if(cb === i)
document.f_test5.cb[i].checked = 1
else
document.f_test5.cb[i].checked = 0
}
} // end of test
const prev = () => {
window.location.href = "testForm4.jsp";
}
const next = () => {
let dap = 1;
for(let i=0; i<document.f_test5.cb.length; i++){
if(document.f_test5.cb[i].checked == 1){
document.f_test5.htest5.value = dap
} else {
dap = dap + 1
}
}
document.f_test5.submit();
} // end of next
</script>
</head>
<body>
<form name="f_test5" method="get" action="testForm6.jsp">
<!--
최초에는 쿼리스트링으로 넘기고있어서 처음 입력한 답안을 계속 기억하기 어려워
페이지 이동을 할 때마다 계속 달고 다녀야 했다
지금은 현재 페이지에서 이전 문제에 대한 답안 한 개만 request.getParameter로 가져오면됨
현재 문제에대한 답안을 담을 hidden도 딱 한 개만 필요하다
-->
<input type="hidden" name="htest5">
문제5. 다음 중 프로시저에 대한 설명으로 틀린 것을 고르시오.<br>
<input type="checkbox" name="cb" onChange="test(0)">
프로시저를 생성할 때 파라미터를 선언할 수 있다.<br>
<input type="checkbox" name="cb" onChange="test(1)">
파라미터에 여러 변수를 선언할 수 있다.<br>
<input type="checkbox" name="cb" onChange="test(2)">
프로시저안에서 SELECT,INSERT,UPDATE, DELETE 모두 사용 할 수 있다.<br>
<input type="checkbox" name="cb" onChange="test(3)">
프로시저 안에서 commit할 수 없다.
<br>
<br>
<input type="button" value="이전문제" onClick="prev()">
<input type="button" value="다음문제" onClick="next()">
</form>
</body>
</html>
<쿠키 객관식 문제 - testForm6.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String dap5 = request.getParameter("htest5");
Cookie c5 = new Cookie("testForm5", dap5);
c5.setPath("/onLineTest");
c5.setMaxAge(60*60);
response.addCookie(c5);
response.sendRedirect("testAccount.jsp");
// 단위테스트 - 쿠키x, 쿼리스트링 사용
// http://localhost:9000/onLineTest/testForm6.jsp?htest1=1&htest2=2&htest3=3&htest4=4&htest5=1&cb=on
// 1번부터 5번까지 작성한 답안지의 값을 쿼리스트링으로 받아야하므로 문제지는 testForm5.jsp에서 끝났다 하더라도
// 1번부터 5번까지의 답안지는 가지고있는 testForm5.jsp에서 값을 모두 읽어들인 후
// 채점을 하는 testAccount.jsp 페이지로 이동시켜야 함
// 반복되는 작업이고 문제수가 많아지면 그만큼 많은 값을 쿼리스트링으로 끝없이 넘겨야하므로 비효율적임
// 그래서 유지의 문제가 중요하고 여기서는 쿠키를 사용하여 개선해야함
// response.sendRedirect("testAccount.jsp?htest1="+test1+"&htest2="+test2+"&htest3="+test3+"&htest4="+test4+"&htest5="+test5);
%>
<!--
실습 개요
온라인 시험이지만 한 번 푼 문제도 다시 돌려볼 수 있어야 한다
그래서 form 태그로 문제를 감싼다
form 태그에 action 속성을 이용하여 다음 문제로의 이동은 가능하지만
이전 문제로 이동하기위해서는 window객체 location객체의 href속성으로 처리해야한다
이럴 경우 URL이 변경되므로 화면전환시 새로운 요청을 서버로 전송하게된다
이때 전송방식은 get으로 하였다
한 화면에 한 문제만 볼 수 있으므로 선택한 답안지 정보는 2번 문제를 풀 때 가져가야한다
가져갈 때 화면에 나타낼 필요가 없어서 input 태그의 hidden속성을 사용했다
문제는 푼 문제가 늘어날수록 hidden의 개수도 계속 늘어난다는 것이다
1번에는 한 개이지만 2번에서는 둘, 3번에서는 셋, 4번에서는 넷, 5번을 다섯개까지 써야한다
이 문제를 개선하는 방법은 쿠키를 이용하여 한 문제를 풀때마다 쿠키에 값을 저장하는 것이다
Cookie c1 = new Cookie("testForm1", 2);
// 아래 코드를 생략하면 디폴트가 현재 바라보는 물리적인 폴더명이므로
// 현재 바라보는 경로에 onLineTest가 들어있는 경우에는 생략할 수 있으나
// 직관적으로 알 수 있도록 써준다
// 만일 setPath("/")라고 할 경우 루트 도메인에서 읽고 수정 삭제가 가능하므로 주의할것
c1.setPath("/onLineTest")
c1.setMaxAge(60*60); // 평가시간이 60분일때 시간 설정값
// 위에서 작성된 답안 번호를 저장한 값을 클라이언트측에 반드시 내려보내야한다
response.addCookie(c1)
-->
<쿠키 객관식 문제 - testAccount.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String users[] = new String[5];
Cookie cs[] = request.getCookies();
int size = 0;
size = cs.length;
// 사용자 입력값을 cs[]에서 꺼내서 users[]에 담기
for(int i=0; i<size; i++){
String c_name = cs[i].getName();
if("testForm1".equals(c_name)){
users[0] = cs[i].getValue();
}
else if("testForm2".equals(c_name)){
users[1] = cs[i].getValue();
}
else if("testForm3".equals(c_name)){
users[2] = cs[i].getValue();
}
else if("testForm4".equals(c_name)){
users[3] = cs[i].getValue();
}
else if("testForm5".equals(c_name)){
users[4] = cs[i].getValue();
}
out.print(cs[i].getName() + ", " + cs[i].getValue() + "<br />");
}
// 문제당 배점
int jumsu = 20;
// 합격기준
int pass = 60;
// 맞춘 개수
int cnt = 0;
// 합격 여부
boolean isPass = false;
// 정답표
String daps[] = {"3", "4", "1", "2", "4"};
// 채점 로직
for(int i=0; i<daps.length; i++){
if(daps[i].equals(users[i])){
cnt++;
}
}
// 합격여부 로직
if(cnt*jumsu >= pass){
isPass = true;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const cookieDelete = () => {
window.location.href = "cookieDelete.jsp";
}
</script>
</head>
<body>
<h3>맞힌 개수: <%=cnt %>개 입니다.</h3>
<h3>당신의 점수: <%=cnt*jumsu %>점 입니다.</h3>
<div>당신은 <%=isPass ? "합격" : "불합격" %>입니다</div>
<!--
리액트의 경우 onClick, className으로 써야함
함수로 화면을 그린다
함수 안에서 UI를 담당하는 예약어 - return
리렌더링-useState, props(주소번지-이벤트핸들러, state hook 넘길수있음), 부모컴포넌트가 변경됐을때
-->
<button onclick="cookieDelete()">쿠키삭제</button>
</body>
</html>
<쿠키 객관식 문제 - cookieDelete.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 쿠키 정보는 사용자 컴퓨터에 저장되어있음
// 그래서 서버는 요청을 해야함 - 사용자 컴퓨터에게
// 서버는 사용자를 JSessionID로 사용자구분 -> 쿠키에 저장됨 -> 쿠키값 기준으로 알아봄
Cookie cs[] = request.getCookies();
int size = 0;
size = cs.length;
for(int i=0; i<size; i++){
String c_name = cs[i].getName();
if("testForm1".equals(c_name)){
Cookie cookie = new Cookie(c_name, "");
cookie.setMaxAge(0);
response.addCookie(cookie);
}
else if("testForm2".equals(c_name)){
Cookie cookie = new Cookie(c_name, "");
cookie.setMaxAge(0);
response.addCookie(cookie);
}
else if("testForm3".equals(c_name)){
Cookie cookie = new Cookie(c_name, "");
cookie.setMaxAge(0);
response.addCookie(cookie);
}
else if("testForm4".equals(c_name)){
Cookie cookie = new Cookie(c_name, "");
cookie.setMaxAge(0);
response.addCookie(cookie);
}
else if("testForm5".equals(c_name)){
Cookie cookie = new Cookie(c_name, "");
cookie.setMaxAge(0);
response.addCookie(cookie);
}
}
response.sendRedirect("testForm1.jsp");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 삭제하기</title>
</head>
<body>
</body>
</html>
<쿠키 로그인 - ActionSupport.java>
package com.pojo.step3;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import com.pojo.step2.Board2Controller;
public class ActionSupport extends HttpServlet {
Logger logger = Logger.getLogger(ActionSupport.class);
protected void doService(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
logger.info("doService 호출");
String uri = req.getRequestURI();
logger.info(uri); // /board3/boardList.st3가 찍힘
String context = req.getContextPath();
logger.info(context); // "/" -> server.xml에 들어있음
String command = uri.substring(context.length() + 1);
System.out.println(command); // board3/boardList.st3
int end = command.lastIndexOf(".");
System.out.println(end); // 16(board3의 경우)
command = command.substring(0, end);
System.out.println(command); // board3/boardList
String upmu[] = null; // upmu[0]=업무명(폴더명), upmu[1]=요청기능이름(메소드명)
upmu = command.split("/"); // /기준으로 문자열 잘라서 upmu 배열에 담기
logger.info(upmu[0] + ", " + upmu[1]);
// upmu req에 담기
req.setAttribute("upmu", upmu);
Object obj = ""; // null이 맞지만 String이 들어온다는 전제로 ""
try {
// 아래 코드는 DB쪽으로 가는 길
obj = HandlerMapping.getController(upmu, req, res);
} catch (Exception e) {
logger.info("Exception: " + e.toString());
}
// 페이지 이동처리 공통코드
// obj 형식 예시 -> redirect:XXX.jsp or forward:XXX.jsp
// 아래 코드는 응답으로 나가는 길
if (obj != null) {
String pageMove[] = null; // 응답페이지의 위치, 페이지이름
ModelAndView mav = null;
// obj가 String인 경우 -> webapp
if (obj instanceof String) {
// obj에 :이 포함된 경우
if (((String) obj).contains(":")) {
logger.info(": 포함되어 있음");
pageMove = obj.toString().split(":");
}
// objdp /가 포함된 경우
else if (((String) obj).contains("/")) {
logger.info("/ 포함되어 있음");
pageMove = obj.toString().split("/");
}
// obj에 :과 /이 포함되지 않은 경우
else {
// spring boot -> @RestController 사용
// spring4 -> ResponseBody 사용(@RestController 미지원)
logger.info(":과 / 포함되어 있지 않음"); // 마임타입 text/plain
pageMove = new String[1];
pageMove[0] = obj.toString();
logger.info(obj.toString());
}
}
// obj가 ModelAndView인 경우 -> WEB-INF
else if (obj instanceof ModelAndView) {
mav = (ModelAndView) obj;
pageMove = new String[2];
pageMove[0] = ""; // forward가 들어있으면 안됨 -> 있으면 webapp로 향함
pageMove[1] = mav.getViewName();
logger.info(pageMove[0] + ", " + pageMove[1]);
}
logger.info("Object가 String, ModelAndView일 경우가 끝난 지점");
// pageMove가 null이 아닐 경우 각 방식으로 페이지 이동처리
if (pageMove != null && pageMove.length == 2) {
// pageMove[0] = redirect or forward or ""
// pageMove[1] = XXX
logger.info(pageMove[0] + ", " + pageMove[1]);
new ViewResolver(req, res, pageMove);
}
// pageMove배열이 한 개인 경우는 리턴값이 String인 경우일때
// -> @RestController, 스프링부터 이전엔 ResponseBody
else if (pageMove != null && pageMove.length == 1) {
res.setContentType("text/plainl;charset=UTF-8");
PrintWriter out = res.getWriter();
out.print(pageMove[0]);
}
} // end of 페이지 이동처리 공통코드
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
logger.info("doGet호출");
doService(req, res);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
logger.info("doPost호출");
doService(req, res);
}
}
<쿠키 로그인 - HandlerMapping.java>
package com.pojo.step3;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
public class HandlerMapping {
static Logger logger = Logger.getLogger(HandlerMapping.class);
/***************************************
* @param upmu[](upmu[0]=업무명,폴더명 | upmu[1]=메소드명, 기능명, 페이지이름)
* @param request -> 1-1, 1-2와는 다르게 인터페이스를 implements하지 않는다
* @param response -> HttpServlet
* Q. 어디서 받아오는가?
* @return Object
* 테스트 -> http://localhost:9000/board3/boardList.st3
***************************************/
public static Object getController(String[] upmu, HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
logger.info(upmu[0]+", "+upmu[1]);
Controller3 controller = null;
String path = null;
Object obj = null;
ModelAndView mav = null;
// common
if("common".equals(upmu[0])) {
controller = new CommonController();
// 우편번호 조회
if("zipcodeList".equals(upmu[1])) {
obj = controller.zipcodeList(req, res);
// 리턴타입이 ModelAndView인 경우
if(obj instanceof ModelAndView) {
return (ModelAndView)obj;
}
// 리턴타입이 String인 경우
else if(obj instanceof String) {
return (String)obj;
}
} // end if zipcodeList if문
}
// 게시판 구현
else if("board3".equals(upmu[0])) {
controller = new Board3Controller();
// 게시글 전체 목록 -> html 화면 출력(text/html)
if("boardList".equals(upmu[1])) {
obj = controller.boardList(req, res);
// 리턴타입이 ModelAndView인 경우
if(obj instanceof ModelAndView) {
return (ModelAndView)obj;
}
// 리턴타입이 String인 경우
else if(obj instanceof String) {
return (String)obj;
}
}
// json 게시글 전체 목록 -> json 화면 출력(application/json)
else if("jsonBoardList".equals(upmu[1])) {
obj = controller.jsonBoardList(req, res);
// 리턴타입이 ModelAndView인 경우
if(obj instanceof ModelAndView) {
return (ModelAndView)obj;
}
// 리턴타입이 String인 경우
else if(obj instanceof String) {
return (String)obj;
}
}
// 글 입력 - 새글쓰기와 댓글쓰기
else if("boardInsert".equals(upmu[1])) {
obj = controller.boardInsert(req, res);
// 리턴타입이 String인 경우
if(obj instanceof String) {
return (String)obj;
}
}
// 이미지 업로드 - 리액트 quill editor 이미지 추가
else if("imageUpload".equals(upmu[1])) {
obj = controller.imageUpload(req, res);
logger.info("imageUpload 호출 => " + obj instanceof String);
// 리턴타입이 String인 경우
if(obj instanceof String) {
return (String)obj;
}
}
// 이미지 다운로드 - 리액트 quill editor 이미지 추가
else if("imageDownload".equals(upmu[1])) {
obj = controller.imageDownload(req, res);
logger.info("imageDownload 호출 => " + obj instanceof String);
// 리턴타입이 String인 경우
if(obj instanceof String) {
return (String)obj;
}
}
// 리액트 -
else if("imageGet".equals(upmu[1])) {
obj = controller.imageGet(req, res);
logger.info("imageGet 호출 => " + obj instanceof String);
// 리턴타입이 String인 경우
if(obj instanceof String) {
return (String)obj;
}
}
// 글 수정 - 첨부파일 수정 유무 고려하기
else if("boardUpdate".equals(upmu[1])) {
obj = controller.boardUpdate(req, res);
// 리턴타입이 String인 경우
if(obj instanceof String) {
return (String)obj;
}
}
// 글 삭제 - 첨부파일 삭제 유무 고려하기
else if("boardDelete".equals(upmu[1])) {
obj = controller.boardDelete(req, res);
// 리턴타입이 String인 경우
if(obj instanceof String) {
return (String)obj;
}
}
// 글 상세보기
else if("boardDetail".equals(upmu[1])) {
obj = controller.boardDetail(req, res);
// 리턴타입이 ModelAndView인 경우
if(obj instanceof ModelAndView) {
return (ModelAndView)obj;
}
// 리턴타입이 String인 경우
else if(obj instanceof String) {
return (String)obj;
}
}
} // end of 게시판 구현
// 인증 관리 구현
else if("auth".equals(upmu[0])) {
}
// 회원 관리 구현
else if("member".equals(upmu[0])) {
controller = new MemberController();
if("login".equals(upmu[1])) {
obj = controller.login(req, res);
// 리턴타입이 ModelAndView인 경우
if(obj instanceof ModelAndView) {
return (ModelAndView)obj;
}
// 리턴타입이 String인 경우
if(obj instanceof String) {
return (String)obj;
}
}
}
// 주문 관리 구현
else if("order".equals(upmu[0])) {
}
return obj;
}
}
<쿠키 로그인 - Controller3.java>
package com.pojo.step3;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// javascript기반의 UI API
// 리액트는 바닐라스크립트 + ES6(주요이슈-spread, module, arrow),ES7 + html 섞어쓰기
public interface Controller3 {
public Object login(HttpServletRequest req, HttpServletResponse res);
public Object zipcodeList(HttpServletRequest req, HttpServletResponse res);
public Object jsonBoardList(HttpServletRequest req, HttpServletResponse res);
public Object boardList(HttpServletRequest req, HttpServletResponse res);
public Object boardDetail(HttpServletRequest req, HttpServletResponse res);
public Object imageUpload(HttpServletRequest req, HttpServletResponse res);
public Object imageDownload(HttpServletRequest req, HttpServletResponse res);
public Object imageGet(HttpServletRequest req, HttpServletResponse res);
public Object boardInsert(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException;
public Object boardUpdate(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException;
public Object boardDelete(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException;
}
<쿠키 로그인 - MemberController.java>
package com.pojo.step3;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import com.util.HashMapBinder;
public class MemberController implements Controller3 {
Logger logger = Logger.getLogger(MemberController.class);
MemberLogic memberLogic = new MemberLogic();
@Override
public Object login(HttpServletRequest req, HttpServletResponse res) {
logger.info("login 호출");
Map<String, Object> rMap = new HashMap<>();
Map<String, Object> pMap = new HashMap<>();
HashMapBinder hmb = new HashMapBinder(req);
hmb.bind(pMap);
rMap = memberLogic.login(pMap);
logger.info(rMap);
Cookie cmem_id = new Cookie("cmem_id", rMap.get("MEM_ID").toString());
cmem_id.setPath("/");
cmem_id.setMaxAge(60*60);
res.addCookie(cmem_id);
Cookie cmem_name = new Cookie("cmem_name", rMap.get("MEM_NAME").toString());
cmem_name.setPath("/");
cmem_name.setMaxAge(60*60);
res.addCookie(cmem_name);
return "redirect:./cindex.jsp"; // => member.cindex.jsp
}
@Override
public Object zipcodeList(HttpServletRequest req, HttpServletResponse res) {
return null;
}
@Override
public Object jsonBoardList(HttpServletRequest req, HttpServletResponse res) {
return null;
}
@Override
public Object boardList(HttpServletRequest req, HttpServletResponse res) {
return null;
}
@Override
public Object boardDetail(HttpServletRequest req, HttpServletResponse res) {
return null;
}
@Override
public Object imageUpload(HttpServletRequest req, HttpServletResponse res) {
return null;
}
@Override
public Object imageDownload(HttpServletRequest req, HttpServletResponse res) {
return null;
}
@Override
public Object imageGet(HttpServletRequest req, HttpServletResponse res) {
return null;
}
@Override
public Object boardInsert(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
return null;
}
@Override
public Object boardUpdate(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
return null;
}
@Override
public Object boardDelete(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
return null;
}
}
<쿠키 로그인 - MemberLogic.java>
package com.pojo.step3;
import java.util.Map;
import org.apache.log4j.Logger;
public class MemberLogic {
Logger logger= Logger.getLogger(MemberLogic.class);
MemberDao memberDao = new MemberDao();
public Map<String, Object> login(Map<String, Object> pMap) {
Map<String, Object> rMap = null;
rMap = memberDao.login(pMap);
return rMap;
}
}
<쿠키 로그인 - MemberDao.java>
package com.pojo.step3;
import java.util.Map;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.log4j.Logger;
import com.util.MyBatisCommonFactory;
public class MemberDao {
Logger logger = Logger.getLogger(MemberDao.class);
MyBatisCommonFactory mcf = new MyBatisCommonFactory();
public Map<String, Object> login(Map<String, Object> pMap) {
Map<String, Object> rMap = null;
// MyBatisConfig.xml문서를 통해 스캔한 오라클 서버정보로 연결통로 확보
SqlSessionFactory sqlSessionFactory = null;
// 위에서 SqlSessionFactory가 생성되면 쿼리문을 요청하는 selectOne 메소드가 필요한데
// 그 메소드를 제공하는 클래스 및 commit, rollback 지원
SqlSession sqlSession = null;
try {
// 공통코드에서 연결통로 확보
sqlSessionFactory = mcf.getSqlSessionFactory();
// 연결통로 확보로 생성된 객체로 SqlSession 로딩하기
sqlSession = sqlSessionFactory.openSession();
rMap = sqlSession.selectOne("login", pMap);
logger.info(rMap);
} catch (Exception e) {
e.printStackTrace();
}
return rMap;
}
}
<쿠키 로그인 - member.xml>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mybatis.mapper.MemberMapper">
<!-- 로그인 쿼리문 -->
<select id="login" parameterType="map" resultType="map">
SELECT mem_id,
mem_name
FROM book_member
WHERE mem_id = #{mem_id}
AND mem_pw = #{mem_pw}
</select>
<!-- 회원정보 가져오는 쿼리문 -->
<select id="getMemberList" parameterType="java.util.HashMap"
resultType="map">
SELECT mem_no, mem_id, mem_pw, mem_name
FROM book_member
WHERE mem_id = #{mem_id}
OR mem_pw = #{mem_pw}
</select>
</mapper>
<쿠키 로그인 - cindex.jsp>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String cmem_id = null;
String cmem_name = null;
// 서버측에서 클라이언트(사용자) 쿠키값 보내달라는 요청
Cookie cs[] = request.getCookies();
int size = 0;
size = cs.length;
// NullPointerException 방어코드
if(cs!=null){
size = cs.length;
}
for(int i=0;i<size;i++){
// 쿠키이름을 가져온다 - 셍성자의 첫번째 파라미터 자리값
String c_name = cs[i].getName();
// 서버측에서 클라이언트로부터 넘겨받은 문자열을 비교함
if("cmem_id".equals(c_name)){
// 쿠키이름이 cmem_id인 쿠키의 값을 담기
cmem_id = cs[i].getValue();
}
// 한 번더 쿠키값을 꺼내온다 -> 사용자의 이름을 불러줌
if("cmem_name".equals(c_name)){
cmem_name = cs[i].getValue();
}
}
out.print("쿠키에서 꺼내 온 값 ===> " + cmem_id + " , " + cmem_name);
if(cmem_id == null){
%>
<script>
alert("로그인을 먼저 해주세요")
</script>
<%
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web application[쿠키인증실습 webapp]</title>
<%@ include file="../common/easyUI_common.jsp"%>
<style type="text/css">
a {
text-decoration: none;
}
</style>
<script>
const login =() =>{
/*
테스트: com.mvc.dao.MemberDao.java
xml: com.mybatis.mapper에 member.xml
SELECT mem_name FROM book_member
WHERE mem_id =:id
AND mem_pw =:pw
*/
// 사용자가 입력한 아이디 가져오기
const user_id = $("#_easyui_textbox_input1").val();
// 사용자가 입력한 비밀번호 가져오기
const user_pw = $("#_easyui_textbox_input2").val();
console.log(user_id + user_pw);
window.location.href = "./login.st3?mem_id=" + user_id + "&mem_pw=" + user_pw;
}
</script>
</head>
<body>
<h2>웹 어플리케이션 실습</h2>
<div style="margin: 20px 0;"></div>
<div class="easyui-layout" style="width: 1000px; height: 500px;">
<!-- =============== 메뉴 구성 [로그인화면과 트리메뉴] 시작 =============== -->
<div id="p" data-options="region:'west'" title="KH정보교육원"
style="width: 200px; padding: 10px">
<!-- =============== [[ 로그인 화면 ]] =============== -->
<div id="d_login" align="center">
<div style="margin: 3px 0"></div>
<!-- create table member mem_id varchar2(10) DB에서 이런형식 -->
<input id="tb_id" type="text" style="width: 170px">
<script>
$('#tb_id').textbox({
iconCls : 'icon-man',
iconAlign : 'right',
prompt : '아이디'
})
</script>
<div style="margin: 3px 0"></div>
<input id="pb_pw" type="text" style="width: 170px">
<script>
$('#pb_pw').textbox({
iconCls: 'icon-lock',
iconAlign: 'right',
prompt : '비밀번호'
});
</script>
<div style="margin: 3px 0"></div>
<a id="btn_login" href="javascript:login()">로그인</a>
<script>
$('#btn_login').linkbutton({
iconCls : 'icon-man'
});
</script>
<a id="btn_member" href="javascript:memberShip()">회원가입</a>
<script>
$('#btn_member').linkbutton({
iconCls : 'icon-add'
});
</script>
</div>
<!-- =============== [[ 로그아웃 화면 ]] =============== -->
<div id="d_logout" align="center"></div>
<!-- =============== 메뉴 구성 [로그인화면과 트리메뉴] 끝 =============== -->
<div style="margin: 3px 0"></div>
<ul id="tre_gym" class="easyui-tree">
<li data-options="state:closed"><span>회원관리</span>
<ul>
<li><a href="#">회원목록</a></li>
<li><a href="#">회원등록</a></li>
<li><a href="#">회원삭제</a></li>
</ul></li>
<li data-options="state:'closed'"><span>쪽지관리</span>
<ul>
<li><a href="#">받은쪽지함</a></li>
<li><a href="#">보낸쪽지함</a></li>
</ul></li>
<li data-options="state:'closed'"><span>기타</span>
<ul>
<li><a href="#">우편번호검색기</a></li>
<li><a href="#">게시판</a></li>
</ul></li>
</ul>
</div>
<!-- 메인화면 [게시판, 온라인시험, 쪽지관리(받은쪽지함, 보낸쪽지함), 회원관리(회원목록, 회원등록, 회원삭제), 우편번호검색기] 시작 -->
<div data-options="region:'center', iconCls:'icon-ok'"
title="TerrGYM2023">
<div style="margin: 5px 0;"></div>
Home > 회원관리 > 회원목록
<hr>
<div style="margin: 25px 0;"></div>
</div>
<!-- 메인화면 [게시판, 온라인시험, 회원관리, 우편번호검색기] 끝 -->
</div>
</body>
</html>
<!--
부트스트랩 - 리액트수업 -> Spring과 리액트 연계 수업 -> 프로젝트적용
반응형 지원, CSS라이브러리 사용
CSS - JS거의없음
jEasyUI
이벤트처리(jquery - 레거시시스템)
자바스크립트 - 표준아님 -> jquery기반이라서
자바스크립트 기반의 UI솔루션 사용하기 - 큰 도움
개발자도구 활용 - 디버깅 -> 왜냐하면 html을 래핑하기때문에
vue.js, reactjs
jEasyUI는 html으로 화면처리, html+js 섞어쓰기, js(최소한의 태그선언 필요)로 화면처리 가능
JSTL - 1.1 -> 1.2 -> 소개(사용x)
로그인 테스트 흐름도
1. intro 아래 index.jsp 실행
2. 아이디와 비밀번호를 입력받는다
3. 로그인 버튼을 누른다 -> 자바스크립트의 login() 호출
4. login.do 호출한다 -> 로그인 처리를 하는 서블릿 호출 - doGet(), doPost()
5. com.mvc.dao.MemberDao 클래스의 인스턴스화
6. 메소드 호출 - 로그인처리
7. MemberDao의 login(Map[member_id(사용자가 입력한 아이디)와 mem_pw(사용자가 입력한 비번)가 있음]) 호출
8. 리턴타입으로 Map을 받아온다(mem_id, mem_name)
9. 8번에서 돌려받은 Map에서, 오라클 서버에서 조회된 아이디와 이름을 세션에 담기
10. 페이지 이동은 sendRedirect나 forward 둘 다 모두 가능하다
단, forward로 응답을 처리한 경우, 인증 후에 다른 서비스를 forward로 처리하는것이 불가하다(주의!)
-->'국비학원 > 수업기록' 카테고리의 다른 글
| 국비 지원 개발자 과정_Day77 (0) | 2023.03.20 |
|---|---|
| 국비 지원 개발자 과정_Day76 (0) | 2023.03.17 |
| 국비 지원 개발자 과정_Day74 (1) | 2023.03.15 |
| 국비 지원 개발자 과정_Day73 (1) | 2023.03.14 |
| 국비 지원 개발자 과정_Day72 (1) | 2023.03.13 |
댓글