22-04-11(월) 051일차 [HTML, JavaScript] jQuery 페이지 넘어가기, RequestDispatcher

옌炎 2022. 6. 3. 10:57

728x90

수업내용

1교시 (09:30-10:20)

mem_jquery.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 폼</title>

<!-- jQuery CDN 불러오기  -------------------------------------------->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- 다음 주소록 OPEN API CDN 불러오기  ----------------------------------->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<script type="text/javascript">
	
	$(document).ready(function(){
		alert("ready >>> : ");
		
		/*====== memForm 태그 START ==========================================*/
		// memForm 태그에 바인딩 된 데이터 jsp 로 보내기 
		$("#memInsertBtn").click(function(){
			alert("mzone_btn >>> : ");
			console.log("mzone_btn >>> : ");
			
				
			//############################################# jQuery 버전 START
			
			// id 값 : 
				
			// mname				
			var mname = $('#mname');
			console.log("mname >>> : " + mname);
			// JSON : 자바스크립트에 있는 JSON을 처리하는 객체 
			// stringify() : 오브젝트를 JSON 데이터로 변경하는 함수 
			// parse() : JSON 데이터를 자바스크립트 객체로 변경하는 함수 
			console.log("JSON.stringify(mname) >>> : " + JSON.stringify(mname));
			
			var mname_val = $('#mname').val();
			console.log("mname_val >>> : " + mname_val);
			console.log("JSON.stringify(mname_val) >>> : " + JSON.stringify(mname_val));
			
			// mhp
			var mhp = $('#mhp');
			var mhp_val = $('#mhp').val();
			var mhp_length = $('#mhp').length;
			var mhp_option = $("#mhp option:selected")
			var mhp_option_val = $("#mhp option:selected").val();
			var mhp_option_text = $("#mhp option:selected").text();
			
			// mgender
			var mgender = $('#mgender');
			var mgender_val = $('#mgender').val();
			var mgender_length = $('#mgender').length;
			var mgender_checked = $("#mgender:checked")
			var mgender_checked_val = $("#mgender:checked").val();
			var mgender_id_01 = $("input:radio[id='mgedner']:input[value='01']").val();
			var mgender_id_02 = $("input:radio[id='mgedner']:input[value='02']").val();
			
			// mhobby
			
			/*
			$("#memForm")
			.attr({
					"action":"#",
				    "method":"GET",
				    "enctype":"application/x-www-form-urlencoded"
			       })
			.submit();	
			*/
		}); 
	});
	
</script>

<style type="text/css">
	/*====== div START ==========================================*/
	div {
			margin: 50px 0px 0px 100px;
		}	
	/*====== div END ==========================================*/		
</style>

</head>
<body>
<div>
<h3>회원 가입</h3>
<hr>
<form name="memForm" id="memForm">
<table border="1">
<tr>
	<td colspan="2">회원 가입</td>	
</tr>
<tr>
	<td>회원번호</td>
	<td><input type="text" class="mnum" name="mnum"  id="mnum" readonly /></td>
</tr>
<tr>
	<td>이름</td>
	<td><input type="text" class="mname" name="mname" id="mname" /></td>
</tr>
<tr>
	<td>아이디</td>
	<td>	
		<input type="text" class="mid" name="mid" id="mid" placeholder="아이디체크" />
		<input type="button" class="midCheck" name="midCheck" id="midCheck" value="아이디중복확인" />
	</td>
</tr>
<tr>
	<td>패스워드</td>
	<td>
		<input type="text" class="mpw" name="mpw" id="mpw" style="width:100px"/><br>
		<input type="text" class="mpw_r" name="mpw_r" id="mpw_r" placeholder="비밀번호확인" style="width:100px"/>
		<input type="button"  class="mpwCheck"  name="mpwCheck" id="mpwCheck" value="비밀번호확인">
	</td>
</tr>
<tr>
	<td>핸드폰</td>
	<td>
		<select class="mhp" name="mhp" id="mhp" style="width:50px;">
        	<option value="010">010</option>
        	<option value="011">011</option>
        	<option value="016">016</option>
        	<option value="017">017</option>		        	
         </select>
         - <input type="text" class="mhp1" name="mhp1" id="mhp1" maxlength="4" style="width:50px;"/>
         - <input type="text" class="mhp2" name="mhp2" id="mhp2" maxlength="4" style="width:50px;"/>
	</td>
</tr>
<tr>
	<td>이메일</td>
	<td>		
		<input type="text" class="memail" name="memail"  id="memail" style="width:100px"/>
		@ <input type="text" class="memail1" name="memail1" id="memail1" style="width:100px" placeholder="직접입력" />
		<select class="memail2"  name="memail2" id="memail2">
        	 <option value="1" selected>직접입력</option>
       		 <option value="naver.com">naver.com</option>	       	   
      		 <option value="gmail.com">gmail.com</option>
      		 <option value="daum.net">daum.net</option>	       	   
         </select>
	</td>
</tr>
<tr>
	<td>성별</td>
	<td> 
		<input type="radio" class="mgender" name="mgender" value="01" checked="checked" />여자
		<input type="radio" class="mgender" name="mgender" value="02" /> 남자
	</td>
</tr>
<tr>
	<td>취미</td>
	<td> 
		<input type="checkbox" class="mhobby" name="mhobby" value="01" />독서		      
		<input type="checkbox" class="mhobby" name="mhobby" value="02" />운동
		<input type="checkbox" class="mhobby" name="mhobby" value="03" />음악감상
		<input type="checkbox" class="mhobby" name="mhobby" value="04" />여행
	</td>
</tr>
<tr>
	<td>주소</td>
 	<td>
 		<input type="text" class="mzone" name="mzone" id="mzone" placeholder="우편번호" style="width:70px" maxlength="6" >
 		<input type="button" class="mzone_btn" name="mzone_btn" id="mzone_btn" value="우편번호 찾기"><br>	 	
 		<input type="text" class="mroad" name="mroad" id="mroad" placeholder="도로명주소" style="width:250px"><br>	 	
 		<input type="text" class="mroaddetail" name="mroaddetail" id="mroaddetail" placeholder="도로명주소 상세주소" style="width:250px"><br>	 	
 		<input type="text" class="mjibun" name="mjibun" id="mjibun" placeholder="지번주소" style="width:250px">
 	</td>
</tr>
<tr>
	<td>소개글</td>
	<td>
		<textarea class="mmsg" name="mmsg" id="mmsg" rows="5" cols="50"></textarea>
	</td>
</tr>
<tr>
	<td colspan="2"> 		
		<input type="hidden" id="ISUD_TYPE" name="ISUD_TYPE" value="I">		
		<input type="button" value="jsp_보내기" id="memInsertBtn" />	
		<input type="reset" value="취소" />
	</td>				
</tr>
</table>				 		        		     
</form>	
</div>		
</body>
</html>

지난 시간 배운 내용 복습
JSP : 자바 언어를 기반으로 해서 페이지를 이동하는 기술이다.
동적인 데이터 처리

1. Context/WebContent -> New - JSP File : 확장자 test.jsp
test.jsp 파일을 요청하면
test.jsp가 서블릿으로 변경 test_jsp.java (서블릿 Servlet)
test_jsp.java가 컴파일 됨 test_jsp.claa (클래스 파일)
test_jsp.class가 실행됨
\el_web_work\.metdata\.plugins\org.eclipse.wst.server.core\temp\work
Catalina\localhost\KosMember\org\apache\jsp\kosmem

C:\Program Files\Apache Software Foundation\Tomcat 8.5\lib\jsp-api.jar
C:\Program Files\Apache Software Foundation\Tomcat 8.5\lib\servlet-api.jar
C:\Program Files\Apache Software Foundation\Tomcat 8.5\lib\jasper.jar

자스퍼 : jasper.kar
jsp 소스코드를 Servlet 클래스로 변경할 떄 사용하는 라이브러리이다.

2. 태그
<% %>
<%= %>
<%-- --%> : jsp 주석 : 클라이언트로 전송되지 않는다.
<%@ page
<%@ page import="" %>
<%@ include : 페이지를 이동시키는 태그
<%@ taglib : jsp에서 만들어준 태그를 사용하는 것

<jsp:forward : 페이지를 이동시키는 액션태그
<jsp:include : 페이지를 이동시키는 액션태그
<jsp:param : 페이지 이동 시 데이터를 전송하는 액션태그

3. 내장객체
pageContext
request
session
application

response
out

4. UI 요소 (화면구현 요소)
-----------------------------------------
HTML
CSS
JavaScript, jQuery
Ajax
JSON, XML

2교시 (10:30-11:20)

param.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파라미터 테스트</title>
</head>
<body>
	<h3>파라미터 테스트</h3>
	<hr>
	<form name="paramForm" id="paramForm">
		<input type="text" class="mid" name="mid" id="mid" />
		<input type="text" class="mpw" name="mpw" id="mpw" />
		<input type="button" id="mid_btn" value="보내기" />
	</form>
</body>
</html>

pram.html

3교시 (11:30-12:20)

정리
param.html -> param_a.jsp
form
input name="mid" request.getParameter("mid");

C:\Program Files\Java\jdk1.9.0_202\jre\lib\ext

4교시 (12:30-13:20)

param_A.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>param_A.jsp</title>
	<!-- 
	jQuery CDN 을 사용해서 
	/kos_jsp/param_B.jsp 파일 을 만들어서
 	jQuery click 함수를 이용해서 /kos_jsp/param_A.jsp 의
 	form 태그에 있는 데이터 전송하기
 	click 이벤트는 버튼에 하기  
 -->
 <!-- 1. jQuery CDN -->
 <!-- jQuery CDN 불러오기  -------------------------------------------->
 	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 	
 	<!-- 2. 스크립트 블록 -->
 	<script type="text/javascript">
 		alert("스크립트 블록");
 		
 		// 3. jQUery ready() 함수 블록 만들기 : html 문서가 로딩된 이후에 jQuery가 동작을 해야 한다.
 		$(document).ready(function(){
 			alert("jQuery ready() 함수 블록");
 			
 			// 4. 버튼 이벤트
 			$("#mid_btn").click(function(){
 				alert("mid_btn 함수 블록");
 				
 				// 5. form 태그 세팅
 				// http://localhost:8088/kosMember/kos_jsp/param_B.jsp
 				$("#paramForm_A").attr({
 					"action":"/KosMember/kos_jsp/param_B.jsp",
 					"method":"GET"
 				}).submit();
 			});
 		});
 	</script>
</head>

<body>
	<h3>param_A.jsp</h3>
	<hr>
<% 
// 스크립틀릿 : 자바 코드를 기술한다.
	// <input type="text" class="mid" name="mid" id="mid" />
	// request : 내장형 오브젝트
	String mid = request.getParameter("mid");
	//<input type="text" class="mpw" name="mpw" id="mpw" />
	String mpw = request.getParameter("mpw");
	
	System.out.println("mid >>> : " + mid);
	System.out.println("mpw >>> : " + mpw);
%>
	<!-- &lt;%= mid %&gt; 표현식 : 자바코드를 웹브라우저에 출력하는 것  -->
	<%-- <%= mid %> 표현식 : 자바코드를 웹브라우저에 출력하는 것   --%>
	&lt;%= mid =&gt; -> <%= mid %><br>
	&lt;%= mpw =&gt; -> <%= mpw %><br>
	
	<h3>el: Expression language</h3>
	\${ param.mid } -> ${ param.mid }<br>
	\${ param.mpw } -> ${ param.mpw }<br>
	
	<h3>param_A.jsp 에서 form 태그로 전송하기</h3> 
	<hr>
	<form name="paramForm_A" id="paramForm_A">
		<input type="text" class="mid" name="mid" id="mid" value="<%= mid %>"/>
		<input type="text" class="mpw" name="mpw" id="mpw" value="<%= mpw %>"/>
		<input type="button" id="mid_btn" value="보내기" />
	</form>
</body>
</html>

param_B.jsp

<%@ 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>
</head>
<body>
 	<h3>param_B.jsp</h3>
 	<hr>
 	<%
 		// 스크립틀릿
 		// <input type="text" class="mid" name="mid" id="mid" />
 		// request : 내장형 오브젝트
 		String mid = request.getParameter("mid");
 		// <input type="text" class="mid" name="mid" id="mid" />
 		String mpw = request.getParameter("mpw");
 		
 		System.out.println("mid >>> : " + mid);
 		System.out.println("mpw >>> : " + mpw);
 	%>
 	
 	<!-- &lt;%= mid %&gt; 표현식 : 자바코드를 웹브라우저에 출력하는 것  -->
	<%-- <%= mid %> 표현식 : 자바코드를 웹브라우저에 출력하는 것   --%>
	&lt;%= mid %&gt; -> <%= mid %><br>
	&lt;%= mpw %&gt; -> <%= mpw %><br>
</body>
</html>

5교시 (14:30-15:20)

request_A.jsp (미완성)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!--  log4j 객체 import -->
<%@ page import="org.apache.log4j.LogManager"%>
<%@ page import="org.apache.log4j.Logger"%>

<!-- JDBC 연결 객체 import -->
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>

<!-- Connection 공통 클래스 import kosConnectivity-->
<%@ page import="a.b.c.common.KosConnectivity" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>REQUEST SCOPE</title>
</head>

<body>
	<h3>REQUEST SCOPE</h3>
	<hr>
<%
	Logger logger = LogManager.getLogger(this.getClass());
	logger.info("request_A.jsp >>> : ");
	
	// 데이터베이스 연결
	Connection conn = KosConnectivity.getConnection();
	logger.info("conn >>> : " + conn);
%>
</body>
</html>

6교시 (15:30-16:20)

request_A.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!--  log4j 객체 import -->
<%@ page import="org.apache.log4j.LogManager"%>
<%@ page import="org.apache.log4j.Logger"%>

<!-- JDBC 연결 객체 import -->
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>

<!-- Connection 공통 클래스 import kosConnectivity-->
<%@ page import="a.b.c.common.KosConnectivity" %>

<%@ page import="java.util.HashMap" %>  
<%@ page import="java.util.ArrayList" %>  

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>REQUEST SCOPE</title>
</head>

<body>
	<h3>REQUEST SCOPE</h3>
	<hr>
<%
	Logger logger = LogManager.getLogger(this.getClass());
	logger.info("request_A.jsp >>> : ");
	
	// 데이터베이스 연결
	Connection conn = KosConnectivity.getConnection();
	logger.info("conn >>> : " + conn);
	String sqls = "SELECT A.* FROM EMP A WHERE ROWNUM <= 3";
	PreparedStatement pstmt = conn.prepareStatement(sqls);
	ResultSet rsRs = pstmt.executeQuery();
	
	ArrayList<HashMap<String, String>> aList = null;
	
	if (rsRs != null) {
		
		aList = new ArrayList<HashMap<String, String>>();
		
		while (rsRs.next()){
			HashMap<String, String> hp = new HashMap<String, String>();
			hp.put("empno", rsRs.getString(1));
			hp.put("ename", rsRs.getString(2));
			hp.put("job", rsRs.getString(3));
			hp.put("mgr", rsRs.getString(4));
			hp.put("hiredate", rsRs.getString(5));
			hp.put("sal", rsRs.getString(6));
			hp.put("comm", rsRs.getString(7));
			hp.put("deptno", rsRs.getString(8));
			aList.add(hp);
		}
	}
	
	// ArrayList 객체를 다른 jsp에 넘기기
	// http://localhost:8088/KosMember/kos_jsp/request_B.jsp
	// setAttribute(key, value)
	request.setAttribute("aList", aList);
	
	// request.getRequestDispatcher() 함수는 Context 내부에서 사용하는 함수로
	// 자원의 url을 사용할 때는 Context 패스는 생략한다.
	// /KosMember/kos_jsp/request_B.jsp --> /Kos_jsp/request_B.jsp
	RequestDispatcher rd = request.getRequestDispatcher("/kos_jsp/request_B.jsp");
	rd.forward(request, response);
%>
</body>
</html>

request_B.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!--  log4j 객체 import -->
<%@ page import="org.apache.log4j.LogManager"%>
<%@ page import="org.apache.log4j.Logger"%>

<%@ page import="java.util.HashMap" %>  
<%@ page import="java.util.ArrayList" %>  

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>request_B.jsp</title>
</head>

<body>
	<h3>request_B.jsp</h3>
	<hr>
<%
	Logger logger = LogManager.getLogger(this.getClass());
	logger.info("request_B.jsp 페이지 >>> : ");
	
	Object obj = request.getAttribute("aList");
	logger.info("obj >>> : " + obj);
	
	ArrayList<HashMap<String, String>> aList = (ArrayList<HashMap<String, String>>)obj;
	
	if (aList != null && aList.size() > 0) {
%>
	<tr>
		<td>EMPNO</td>
		<td>ENAME</td>
		<td>JOB</td>
		<td>MGR</td>
		<td>HIREDATE</td>
		<td>SAL</td>
		<td>COMM</td>
		<td>DEPTNO</td><br>
	</tr>
<%
		for (int i=0; i < aList.size(); i++) {
			HashMap<String, String> hs = aList.get(i);
			logger.info(hs.get("empno"));
			logger.info(hs.get("ename"));
			logger.info(hs.get("job"));
%>
	<tr>
		<td><%= hs.get("empno") %></td>
		<td><%= hs.get("ename") %></td>
		<td><%= hs.get("job") %></td>
		<td><%= hs.get("mgr") %></td>
		<td><%= hs.get("hiredate") %></td>
		<td><%= hs.get("sal") %></td>
		<td><%= hs.get("comm") %></td>
		<td><%= hs.get("deptno") %></td><br>
	</tr>
<%
			}
		}
%>
</body>
</html>

request_A.jsp를 돌리면 나오는 화면

7교시 (16:30-17:20)

request_C.jsp

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

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

<body>
	<h3>RequestDispatcher.forward :: request_C.jsp</h3>
	<hr>
<%
	ArrayList aList = new ArrayList();
	aList.add("abc");
	
	// 페이지를 이동하면서 넘겨야할 데이터를 세팅하기
	request.setAttribute("aaa", aList);
	
	// 이동할 페이지를 세팅하기
	RequestDispatcher rd = request.getRequestDispatcher("/kos_jsp/request_D.jsp");
	rd.forward(request, response);
	
%>
</body>
</html>

request_D.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ page import="java.util.ArrayList" %>  
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RequestDispatcher</title>
</head>
<body>
<h3>RequestDispatcher.forward :: request_D.jsp</h3>
<hr>
<%
	/*
	ArrayList aList = new ArrayList(); 
	aList.add("abc");
	
	request.setAttribute("aaa", aList);
	
	RequestDispatcher rd = request.getRequestDispatcher("/kos_jsp/request_D.jsp");
	rd.forward(request, response);
	*/
	// reqeust.setAttribute("aaa", aList); 
	
	Object obj = request.getAttribute("aaa");
	ArrayList aList = (ArrayList)obj;
	String str = (String)aList.get(0);
%>
<%= str %>

</body>
</html>

request_C.jsp를 돌리면 나오는 화면

8교시 (17:30-18:30)

자습
- jQuery를 이용한 mem_jquery.html

Notes

728x90

저작자표시 (새창열림)