JSP - eclipse

최성현·2023년 7월 31일
Multipleactionformform-getform-postform/input 필수forwardgetParametergetParameterValuesincludemethodparamplaceholderrequired
0

JSP

목록 보기
3/13

Include 기본

헤더 푸터 등등 나뉘어져 있는 것을 하나로 합칠 때 주로 사용함

본문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- 중요 -->
<h2>다른 폴더의 파일 include하기</h2>
<h4>구구단 가져오기 (여기까지만 출력하고 include할 파일 가져옴)</h4>
<%-- <jsp:include page=""/> 이렇게 열고 닫고를 한 태그에 사용가능 --%>
<jsp:include page="./guguWrite.jsp"></jsp:include>
<hr>
<h4>퀴즈 이미지 가져오기</h4>
<jsp:include page="./quizArrimage.jsp"/>



<h3>현재 파일 종료!!!</h3>
</body>
</html>

Include 1

tag 부분

include는 헤드 푸터 등등 여러 파일을 합칠때 주로 사용
include는 값을 보내고 다시 받아온다
즉 여기서 실행해야 출력잘되고 oneInclude에서는 출력안됨
(출력된 url 주소창을 보면 확인 가능)

전달값을 보내고 받을 예정이라 닫는 태그 밑으로 내리기

<jsp:include page="oneInclude.jsp">
	<!-- param값 밖에 안들어감 -->
	<jsp:param value="오늘은 월요일!!!" name="msg"/>
	<jsp:param value="../image/01.png" name="ismgname"/>
</jsp:include>

include 부분

<%
	/* oneTag에서 보낸 파라메터 값을 가져옴 */
	String msg=request.getParameter("msg");
	String iname=request.getParameter("imgname");
%>
<h3>전달받은 메세지: <%=msg%></h3>
<h3>전달받은 이미지</h3>
<img alt="" src="<%=iname%>">

tag

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- oneInclude.jsp와 쌍으로 이어진 파일 -->

	<!-- include는 헤드 푸터 등등 여러 파일을 합칠때 주로 사용 -->
	<h3>oneInclude.jsp를 include하기</h3>
	<!-- include는 값을 보내고 다시 받아온다 / 즉 여기서 실행해야 출력잘되고 oneInclude에서는 출력안됨 -->
	<!-- 전달값을 보내고 받을 예정이라 닫는 태그 밑으로 내리기 -->
	<!-- 즉 oneTag값 출력후 oneInclude에 값을 보내고 다시 받아온 후 oneTag에서 다시 출력
		 / 출력된 url 주소창을 보면 확인 가능 -->
	<jsp:include page="oneInclude.jsp">
		<!-- param값 밖에 안들어감 -->
		<jsp:param value="오늘은 월요일!!!" name="msg"/>
		<jsp:param value="../image/01.png" name="ismgname"/>
	</jsp:include>
</body>
</html>

include

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- oneTag.jsp와 쌍으로 이어진 파일 -->
	<%
		/* oneTag에서 보낸 파라메터 값을 가져옴 */
		String msg=request.getParameter("msg");
		String iname=request.getParameter("imgname");
	%>
	
	<!-- oneTag에서 받아온 값을 다시 oneTag로 보냄 -->
	<h3>전달받은 메세지: <%=msg%></h3>
	<h3>전달받은 이미지</h3>
	<img alt="" src="<%=iname%>">
</body>
</html>

include 2

tag

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<!-- two include로 본인들 이름(name),주소(addr)를 전달 -->
	<jsp:include page="twoInclude.jsp">
		<jsp:param value="최성현" name="name"/>
		<jsp:param value="경기도 수원시" name="addr"/>
	</jsp:include>
</body>
</html>

include

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<%
		String name=request.getParameter("name");
		String addr=request.getParameter("addr");
	%>
	
	<h3>나의 이름은 <%=name %></h3>
	<h3>나의 주소는 <%=addr %></h3>
	
</body>
</html>

Forward

include와 다르게 forward는 값을 보내기만하고 받지는 않음
실행은 똑같이 tag에서 하지만 출력은 Forward에서만 가능
즉 threeForward에 있는 값만 출력됨(tag 부분쪽 출력x)

tag

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h1>이 문장이 보일까요?</h1>
	<!-- include와 다르게 forward는 값을 보내기만하고 받지는 않음 -->
	<!-- 실행은 똑같이 tag에서 하지만 출력은 Forward에서만 가능 -->
	<!-- 즉 threeForward에 있는 값만 출력됨 -->
	<jsp:forward page="threeForward.jsp"/>
</body>
</html>

forward

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h2>이곳은 threeForward입니다</h2>
	<img alt="" src="../image/02.png">
</body>
</html>

forward 2

tag

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<jsp:forward page="forFoward.jsp">
		<jsp:param value="이영자" name="irum"/>
		<jsp:param value="서울시 서초구" name="juso"/>
	</jsp:forward>
</body>
</html>

forward

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String name=request.getParameter("irum");
	String addr=request.getParameter("juso");
%>

<%=name %>님의 주소는 <%=addr %>입니다
</body>
</html>

Form

form 사용 파일은 html/jsp 상관 없음

form

metthod가 비워져있으면
보통 get 방식 url에 값이 다 보여서 보안 취약
99% post 사용 post 방식은 아무 값도 안나와서 보안 강력 

	<form action="oneAction.jsp" method="post">

placeholder

가이드라인

required

널값 체크 (빈 칸 있으면 다시 입력하라 함)

<th>이름</th>
	<td>
		<!-- placeholder : 가이드라인/required : 널값체크 (이름 안입력하면 다시 입력하라함) -->
		<input type="text" name="irum" placeholder="이름써!!"
		required="required"	class="form-control" style="width: 100px;">
	</td>

form/input 필수 구문

form문의 전송버튼(input)은 타입이 submit /이걸 사용하면 빈칸일 경우 알림
form 전송은 form에 action 필수
지금까지 따로 한건 이벤트를 하기 위해서 사용

<tr>
	<td colspan="2" align="center">
	<!-- form 전송버튼은 타입이 submit /이걸 사용하면 빈칸일 경우 알림
		 form 전송은 form에 action 필수
		 지금까지 따로 한건 이벤트를 하기 위해서 사용-->
		<input type="submit" value="서버로전송" class="btn btn-success">
		</td>
</tr>

form

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<!-- 이페이지는 html/jsp 상관 없다 -->
	<h2>여러 개의 데이터 전송</h2>
	<!-- metthod가 비워져있으면 보통 get 방식 url에 값이 다 보여서 보안 취약
		 			99%post 사용	post 방식은 아무 값도 안나와서 보안 강력 -->
	<form action="oneAction.jsp" method="post">
		<table class="table table-bordered" style="width: 300px;">
			<tr>
				<th>이름</th>
				<td>
					<!-- placeholder : 가이드라인/required : 널값체크 (이름 안입력하면 다시 입력하라함) -->
					<input type="text" name="irum" placeholder="이름써!!"
					required="required"	class="form-control" style="width: 100px;">
				</td>
			</tr>
			
			<tr>
				<th>비밀번호</th>
				<td>
					<!-- placeholder : 가이드라인/required : 널값체크 (이름 안입력하면 다시 입력하라함) -->
					<input type="password" name="pass" placeholder="비밀번호써!!"
					required="required"	class="form-control" style="width: 120px;">
				</td>
			</tr>
			
			<tr>
				<th>운전면허</th>
				<td>
					<!-- placeholder : 가이드라인/required : 널값체크 (이름 안입력하면 다시 입력하라함) -->
					<input type="checkbox" name="lic"> 운전면허
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<!-- form 전송버튼은 타입이 submit /이걸 사용하면 빈칸일 경우 알림
						 form 전송은 form에 action 필수
						 지금까지 따로 한건 이벤트를 하기 위해서 사용-->
					<input type="submit" value="서버로전송" class="btn btn-success">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

action

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<%
	
		String name=request.getParameter("irum");
		String pass=request.getParameter("pass");
		String lic=request.getParameter("lic");
	%>
	
	<h3>결과값 출력</h3>
	이름: <%=name %><br>
	비밀번호: <%=pass %><br>
	운전면허 여부: <%=lic==null?"없음":"있음" %>
</body>
</html>

Form 2

multiple

multiple 넣어서 중복 적용 가능 checkbox 중복처럼 사용가능

<tr>
	<th>차기조장후보</th>
	<td>
		<!-- multiple 넣어서 중복 적용 가능 checkbox 중복처럼 사용가능 -->
		<select name="person2" multiple="multiple" style="width: 100px;">
			<option value="성신">성신</option>
			<option value="민규">민규</option>
			<option value="현규">현규</option>
			<option value="진평">진평</option>
			<option value="성현">성현</option>
			<option value="영환">영환</option>
			<option value="성경">성경</option>
		</select>
	</td>
</tr>

getParameter

getParameter("name")는 value값을 가져온다 Values가 붙으면 복수

getParameterValues("name")복수선택으로 여러개 와야하기 때문에 배열/checkbox 처럼 사용

<%
	/* getParameter("name")는 value값을 가져온다 Values가 붙으면 복수 */
	String per1=request.getParameter("person");
	/* 복수선택으로 여러개 와야하기 때문에 배열/checkbox 처럼 사용 */
	String per2[]=request.getParameterValues("person2");
%>

form

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<form action="twoAction.jsp" method="post">
		<table class="table table-bordered" style="width: 350px;">
			<tr>
				<th>조장1순위</th>
				<td>
					<select size="1" name="person">
						<option value="성신">성신</option>
						<option value="민규">민규</option>
						<option value="현규">현규</option>
						<option value="진평">진평</option>
						<option value="성현">성현</option>
						<option value="영환">영환</option>
						<option value="성경">성경</option>
					</select>
				</td>
			</tr>
			
			<tr>
				<th>차기조장후보</th>
				<td>
					<!-- multiple 넣어서 중복 적용 가능 checkbox 중복처럼 사용가능 -->
					<select name="person2" multiple="multiple" style="width: 100px;">
						<option value="성신">성신</option>
						<option value="민규">민규</option>
						<option value="현규">현규</option>
						<option value="진평">진평</option>
						<option value="성현">성현</option>
						<option value="영환">영환</option>
						<option value="성경">성경</option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="전송" class="btn btn-danger" style="width: 200px;">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

action

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<%
		/* getParameter("name")는 value값을 가져온다 Values가 붙으면 복수 */
		String per1=request.getParameter("person");
		/* 복수선택으로 여러개 와야하기 때문에 배열/checkbox 처럼 사용 */
		String per2[]=request.getParameterValues("person2");
	%>
	
	조장1순위: <%=per1 %><br><br>
	
	예비조장: 
	
	<%
		if(per2==null)
		{%>
			<b style="color: red;">예비조장 없음</b>	
		<%}
		else
		{
			for(int i=0;i<per2.length;i++)
			{%>
				
				[<%=per2[i] %>]&nbsp;
			<%}%>
			<b>총 <%=per2.length %>명의 예비조장 있음</b>	
		<%}
	%>
</body>
</html>

0731 과제

form

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<form action="quizAction.jsp" method="post">
	<table class="table table-bordered" style="width: 700px;">
		<tr>
			<td colspan="2" align="center" style="font-size: 30px;">
				<b>나이키 조던</b>					
			</td>
		</tr>
		<tr>
			<th>사이즈</th>
			<td>
			<input type="radio" name="size" value="250">250
			<input type="radio" name="size" value="255">255
			<input type="radio" name="size" value="260">260
			<input type="radio" name="size" value="265">265
			<input type="radio" name="size" value="270">270
			</td>
		</tr>
		<tr>
			<th>색상</th>
			<td>
			<input type="checkbox" name="color" value="red">RED
			<input type="checkbox" name="color" value="black">BLACK
			<input type="checkbox" name="color" value="cadetblue">CADETBLUE
			<input type="checkbox" name="color" value="cyan">CYAN
			<input type="checkbox" name="color" value="orange">ORANGE
			</td>
		</tr>
		
		<tr>
			<th>추가상품</th>
			<td>
			<select multiple="multiple" name="addSang">
				<option>아디다스</option>
				<option>삼선슬리퍼</option>
				<option>구찌</option>
				<option>톰브라운</option>
				<option>디올</option>
			</select>
			</td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<input type="submit" class="btn btn-danger" value="서버로 전송" style="width: 200px;">
			</td>
		</tr>
	</table>
</form>
</body>
</html>

action

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String size=request.getParameter("size");
	String color[]=request.getParameterValues("color");
	String addSang[]=request.getParameterValues("addSang");
%>

	상품명: 나이키 조던<br>
	사이즈: <%=size %>mm<br>
	색상:
	<%
		for(int i=0;i<color.length;i++)
		{%>
			<div style="background-color: <%=color[i]%>; width:100px; height:100px;"></div>	
		<%}
	%>
	
	
	추가상품:
	
	<%
		if(addSang==null)
		{%>
			<b>추가상품 없음</b>
		<%}
		else
		{
			for(int i=0;i<addSang.length;i++)
			{%>
				[<%=addSang[i] %>]&nbsp;
			<%}
		}
	
	%>
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

JSP - eclipse

다음 포스트

JSP - eclipse

0개의 댓글