본문 바로가기

웹 개발/JSP

[Web_JSP] 05

실습(action Tag(include))

1. footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<h4>푸터 페이지 영역!</h4>
</body>
</html>

 

 

 

2. header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<h4>헤더 페이지 영역!</h4>
</body>
</html>

 

 

 

3. includeTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>액션 태그 include</title>
</head>
<body>
	<jsp:include page="header.jsp"/>
	<h4>--------------------------------------현재 페이지 영역--------------------------------------</h4>
	<jsp:include page="footer.jsp"/>
</body>
</html>

 

결과

 

 

 

 

실습(action Tag(params))

1. paramResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>응답 페이지</title>
</head>
<body>
	<p>아이디 : <%=request.getParameter("id")%></p>
	<p>이름 : <%=request.getParameter("name")%></p>
</body>
</html>

 

 

 

2. paramTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8");%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>param 액션 태그</title>
</head>
<body>
	<h3>param 액션 태그</h3>
	<jsp:forward page="paramResult.jsp">
		<jsp:param value="admin" name="id"/>
		<jsp:param value="관리자" name="name"/>
	</jsp:forward>
</body>
</html>

 

결과

 

 

 

 

실습(action Tag(object))

- 문제

<!--
	이름과 생일이 모두 입력되었을 때 전송한다.
	objectOk.jsp에서는 전달받은 이름과 생일을 출력한다.
-->

 

 

1. object.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장 객체 request</title>
</head>
<body>
    <form action="objectOk.jsp" name="join" method="post">
        <fieldset>
            <legend>개인 정보</legend>
            <input type="text" name="name">
            <input type="date" name="birthday">
            <input type="button" value="확인">
        </fieldset>
    </form>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	const $name = $("input[name='name']");
	const $birthday = $("input[name='birthday']");
	
	$name.on("click", function(){
		$(this).removeAttr("style");
		$(this).removeAttr("placeholder");
	})
	
	$birthday.click(function(){
		$(this).removeAttr("style");
	});
	
	$("input[type='button']").on("click", function(){
		if(!$name.val()){
			$name.css('border-color', 'red');
			$name.attr('placeholder', '성함을 입력하세요');
			return;
		}
		
		if(!$birthday.val()){
			$birthday.css('border-color', 'red');
			return;
		}
		
		join.submit();
		
	});
	
</script>
</html>

 

 

 

2. objectOk.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보</title>
</head>
<body>
	<table>
		<tr>
			<th>이름</th>
			<th>생일</th>
		</tr>
		<tr>
			<td><%=request.getParameter("name")%></td>
			<td><%=request.getParameter("birthday")%></td>
		</tr>
	</table>
</body>
</html>

 

결과(실행 시)
 
결과(이름을 입력하지 않은 상태에서 버튼 클릭)
 
결과(생일을 입력하지 않은 상태에서 버튼 클릭)

 

결과

 

 

 

 

'웹 개발 > JSP' 카테고리의 다른 글

[Web_JSP] 07  (0) 2022.05.26
[Web_JSP] 06  (0) 2022.05.24
[Web_JSP] 04  (0) 2022.05.22
[Web_JSP] 03  (0) 2022.05.18
[Web_JSP] 02  (0) 2022.05.17