본문 바로가기
학원수업/3월

3/16 국비학원 개발자과정 75회차 수업-Cookie 로그인, cbt프로그램

by 코딩마스터^^ 2023. 3. 16.

<!-- 
실습 개요
온라인 시험이지만 한번 푼 문제도 다시 돌려볼 수있어야 한다.
그래서 form태그로 문제를 감싼다.
form태그에 action속성을 이용하여 다음 문제로의 이동은 가능하지만
이전문제ㄷ로 이동하기 위해서는 window객체 location객체의 href속성으로 처리해야한다.
이럴경우 URL이 변경되므로 화면전환시 새로운 요청을 서버로 전송하게 한다.
이때 전송방식은 get으로 한다.
한 화면에 한 문제만 볼 수 있으므로 선택한 답안지정보는 2번 문제를 풀 때 까지 가져가야 한다.
가져갈 때 화면에 나타낼 필요가 없어서 input태그의 hidden속성을 사용한다.
문제는 푼 문제가 늘어날 수록 hidden의 갯수도 계속 늘어난다는 것이다.
1번에 한개
2번에 두개
3번에 3
...
문제 너무많으면 화난다...

이문제를 개선하는 방법은 쿠키를 이용하여 한문제를 풀 때 마다 쿠키에 값을 저장하는것
Cookie c1= new Cookie("testForm1",2);
//아래 코드를 생략하면 디폴트가 현재 바라보는 물리적인 폴더명이므로
//현재 바라보는 경로에 onLineTest가 들어있는 경우에는 생략할 수 있으나
//직관적으로 알 수 있도록 써준다.
//만일 setPath("/")라고 한 경우 루트도메인에서 읽고 수정 삭제가 가능하므로 주의할것
c1.setPath("onLineTest");
c1.setMaxAge(60*60);//평가시간이 60분일때 시간 설정값이다.
//위에 작성된 답안 번호를 저장한 값을 클라이언트측에 반드시 내려보내야 한다.
response.addCookie(c1)


 -->

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<!--  react->nextjs->typescript추가 ->ECMAScript-->
<!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는 이 문서(testForm.jsp->SSR->html->다운로드->text파일 덩어리)를 가리킨다.
	//document의 최상위 객체는 window객체
	//브라우저안에서 인스턴스화 없이 사용가능
	//document.f_test1.cb 네임이 같은게 두개 이상일때는 브라우저가 배열로 자동변환
	//checked는 checkbox에서 선택된 상태일때 처리하는 속성임
	//1이면 선택0이면 비선택 //JS에서 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;//밑에 value=3
			}else{
				temp=temp+1
			}
		}
		document.f_test1.submit();
	}
	
</script>
</head>
<body>
	<!-- 쿠키를 이용해서 문제의 답을 유지해보자~! -->
	<form name="f_test1" method="get" action="testForm2.jsp">
		<!-- 눈에 보이지않게 변수 정의하기 위해서 hidden 사용 ~ 화면에는 드러나지 않아도 내부적으로 정보 전달시 사용 -->
		<input type="hidden" name="htest1" value=3>
		문제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>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String dap1=request.getParameter("htest1");
	out.print("1 문제 답안지"+dap1);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제 2</title>
<script>
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
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;//밑에 value=3
		}else{
			temp=temp+1
		}
	}
	document.f_test1.submit();
}
const prev=()=>{
	//location.href속성으로 페이지를 전환하는건 SPA는 맞지않음
	//리액트-> const navigate=useNavigate();
	//navigate("./testForm1.jsp")
	window.location.href="testForm1.jsp";
}
</script>
</head>
<body>
<form name="f_test1" method="get" action="testForm3.jsp">
<input type="hidden" name="htest1">
<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()">
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String dap1=request.getParameter("htest1");
	out.print("1 문제 답안지"+dap1);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제 2</title>
<script>
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
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;//밑에 value=3
		}else{
			temp=temp+1
		}
	}
	document.f_test1.submit();
}
const prev=()=>{
	//location.href속성으로 페이지를 전환하는건 SPA는 맞지않음
	//리액트-> const navigate=useNavigate();
	//navigate("./testForm1.jsp")
	window.location.href="testForm1.jsp";
}
</script>
</head>
<body>
<form name="f_test1" method="get" action="testForm3.jsp">
<input type="hidden" name="htest1">
<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()">
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String test1 = request.getParameter("htest1");
	String test2 = request.getParameter("htest2");
	String test3 = request.getParameter("htest3");
	String test4 = request.getParameter("htest4");
	String test5 = request.getParameter("htest5");
	//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번에 3
...
문제 너무많으면 화난다...

이문제를 개선하는 방법은 쿠키를 이용하여 한문제를 풀 때 마다 쿠키에 값을 저장하는것
cookie c1= new Cookie("testForm1",2);
//아래 코드를 생략하면 디폴트가 현재 바라보는 물리적인 폴더명이므로
//현재 바라보는 경로에 onLineTest가 들어있는 경우에는 생략할 수 있으나
//직관적으로 알 수 있도록 써준다.
//만일 setPath("/")라고 한 경우 루트도메인에서 읽고 수정 삭제가 가능하므로 주의할것
c1.setPath("onLineTest");
c1.setMaxAge(60*60);//평가시간이 60분일때 시간 설정값이다.
//위에 작성된 답안 번호를 저장한 값을 클라이언트측에 반드시 내려보내야 한다.
response.addCookie(c1)


 -->

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
//채점하는 로직을 구현하시오.

//문제당 배점
int jumsu=20;
//합격기준점수는
int pass=60;
//맞춘갯수
int cnt=0;
//합격여부
boolean isPass=false;
//정답표
String daps[]={"3","4","1","2","4"};
String test1=request.getParameter("htest1");
String test2=request.getParameter("htest2");
String test3=request.getParameter("htest3");
String test4=request.getParameter("htest4");
String test5=request.getParameter("htest5");
String users[]=new String[5];
users[0]=test1;
users[1]=test2;
users[2]=test3;
users[3]=test4;
users[4]=test5;

//채점하는 로직을 작성해보자


%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>맞힌갯수 : <%=cnt %>개 입니다.</h3>
<h3>점수는 : <%=cnt*jumsu %>점 입니다.</h3>
<div>
<%
	if((jumsu*cnt)>pass){
		out.print("그러니까 당신 합격입니다.");
	}else{
		out.print("그러니까 당신 불합격입니다.");
	}
%>
</div>
</body>
</html>

 

 

히든 속성 

화면에 안보이면서 몰래 값을 전달할 때 사용한다.

<%= %>익스프레션

서버측에서 변수에 할당 된 값이 html에 출력된다. 처리 주체가 서버이다. 서버사이드에서 결정이되어서 마임타입으로 저장이된다. 이미 다운이 되면 결정이 된것이므로 정적이다. 값이 안바뀐다. 실시간이 아니다. 조심해야한다... 버그가 될 수 있다.

<%= %>를 사용하면 서버 측에서 동적으로 HTML 코드를 생성할 수 있으며, 이는 서버 사이드 렌더링 등의 기술에서 유용하게 활용될 수 있습니다.

ejs는 HTML 코드 내에서 JavaScript 코드를 사용할 수 있게 해주는 서버 사이드 템플릿 엔진으로, <%= %>를 사용하여 JavaScript 코드를 HTML 코드 내에 삽입할 수 있습니다.

답갯수와 유저 갯수만큼 cnt맞은갯수를 1씩 더해준다.

 

 

서버사이드가 먼저 실행되고 그 다음이 클라이언트 사이드가 실행 된다.

 

ResultMap

https://yeonyeon.tistory.com/131

 

[Mybatis] ResultMap 이용하기

📔 개요 현재 진행중인 프로젝트에서는 mssql, Oracle 등 다양한 종류의 database를 사용하고 있다. mssql에서 데이터 타입이 'ntext'인 컬럼을 조회하는 SQL문을 실행했는데 HashMap에 매핑되지 않는 현상

yeonyeon.tistory.com

아래와 같은 ResultMap을 적용해본 코드를 보자.

<resultMap id="testMap" type="User객체경로.User">
  <result column="user_id" property="id" jdbcType="NVARCHAR" javaType="String"/>
  <result column="user_name" property="username" jdbcType="NVARCHAR" javaType="String"/>
  <result column="hashed_password" property="hashedPassword" jdbcType="NVARCHAR" javaType="String"/>
</resultMap>

<select id="selectUsers" resultMap="testMap">
  select user_id, user_name, hashed_password
  from some_table
  where id = #{id}
</select>

user_id는 resultMap을 통해 User 객체의 id에 매칭된다.

jdbcType이나 javaType도 지정이 가능하다.

 

로그인 기능 구현하기

select 
            result
    from(
                select case when mem_id=:id then
                            case when mem_pw=:pw then 1
                            else 0
                           end
                            else -1
                            end as result
                          from book_member
                          order by result desc
            )
where rownum =1;

 

아이디와 비밀번호가 맞는 데이터를 불러올때의 쿼리문이다.

 

//pageMove배열이 한개인 경우는 리턴값이 String인 경우일때-@RestController,ResponseBody 리액트에서는 필수!!

'학원수업 > 3월' 카테고리의 다른 글

03/21 국비학원 개발자과정- Spring, React, Reducx  (0) 2023.03.21
03/17 국비 개발자 과정-76회차 쿠키(회원관리), Spring, React  (0) 2023.03.17
03/15 국비학원 개발자 과정 74회차- Spring Boot, JQuery, React  (0) 2023.03.15
03/14 국비학원 개발자 과정 73회차 - Spring, React, Quill  (1) 2023.03.14
03/13 국비학원 백앤드 개발자과정 72회차-pojo를 spring으로  (0) 2023.03.13

관련글

댓글

티스토리툴바