[Web] Day 3 - JSP

sue·2024년 1월 5일

📒국비학원 [Web]

목록 보기

5/21

하나의 페이지[HTML] -> 다른 페이지[HTML]로 넘기는 4가지방법

1.

Test1.

💻 입력

화면1 : 수1/수2
화면2 : 두개의 데이터가 넘어가서 10+20=30 출력

: submit은 어디에 있던간에 해당 페이지 안에서 무조건 action을 찾아감
form action="hap_ok.jsp"
hap_ok 넘어가는 파일은 action에 적음 / (hap_ok.jsp)파일은 따로 만들어줘야함
[method = "get"] 방식
http://192.168.16.16:8080/study/jsp2/hap_ok.jsp?su1=10&su2=20

이렇게 데이터 넘기는게 get방식
[노출되므로 - 검색 사용자한테 값을 받을 땐 잘 안씀]

[method = "post"] 방식

이렇게 데이터 넘기는게 method방식
[노출 x - 값을 숨김 ]

자동으로 name변수 안에 들어있는 name변수들을 전부 들고 hap_ok페이지로 넘어감
(이 때,넘어오는 데이터는 무조건 string!!)

request & response

① html -> request 데이터 담아서 -> 다른 html 페이지로 넘겨줌 [서버에 한번 다녀옴]
(이때, request : 프로토콜 http안에 있음 그래서 브라우저에서 처리해줌 )

② 이미 리퀘스트엔 값을 담아놨기때문에 get 으로 불러옴

③ dynamic Resource(servlet / jsp) -> response -> javascript

텍스트 하이퍼링크 : 이렇게도 값을 부를 수 있음
<a href="hap_ok.jsp?su1=100&su2=200&name=인나">Get방식</a>
: 만약, hap과 hap_ok가 서로 다른 폴더에 있으면 그 경로도 써줘야함

⭐
get방식 \ post방식
eng ㅇ o

kor ㅇ x

post방식의 한글버전은 깨짐

get방식의 한글버전은 안깨짐

GET방식으로 한글보낼때 안깨지는 이유?
카타리나 -> URIEncoding = "UTF-8" 했기때문에
POST방식으로 한글보낼때 안깨지게 하는 법?
request에 담겨있는 모든 데이터 값을
utf-8로 변경해줘야함
String name (hap_ok)에서 꺼내기전에
1번째 방법

form양식(변수 데이터 가지고)으로 보낸건 받은 HTML에서 getParameter로 받는다

스크립트에 myForm 쓸거면 그걸 찾아가야하니까
form에 name =myForm그때 써주면됨

if(!f.su1.value){
		alert("수1을 입력하세요");
		f.sul.focus();
	}

입력하지않았을땐 f.sul.focus(); 거기에 커서 올ㄹ려두기

위에 저거 함수 쓰려면 submit -> button 으로 변경

근데 이러면 action을 다시 찾아가야하는데
f.submit();을 함수에 써주면 됨

hap.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String cp = request.getContextPath();

/*
MIME [Multipurpose Internet Mail Extensions]의 종류
메세지의 내용이 어떤 형식인지 알려주기위해 정의한 인터넷 표준

text/plain : 일반 텍스트문서
text/html : HTML 문서 
text/css  :CSS 문서
text/xml : XML 문서
image/jpeg,image/png : JPEG파일, PNG파일 
video/mpeg,audio/mp3 : MPEG 비디오파일, MP3 음악파일
application/zip : zip 압축파일
*/

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	function sendIt(){
		
		var f = document.myForm;
		
		if(!f.su1.value){
			alert("수1을 입력하세요");
			f.su1.focus();
			return;
		}
		
		if(!f.su2.value){
			alert("수2을 입력하세요");
			f.su2.focus();
			return;
		}
		
		if(!f.name.value){
			alert("이름을 입력하세요");
			f.name.focus();
			return;
		}
		f.action = "<%=cp%>/jsp1/hap_ok.jsp"
		f.submit();
	}

</script>

</head>
<body>

<form action="" method="post" name = "myForm">
수1: <input type="text" name="su1"/><br/>
수2: <input type="text" name="su2"/><br/>
이름: <input type="text" name="name"/><br/>
<input type="button" value="결과" onclick="sendIt();"/><br/>
</form>

<br/>
<br/>

<a href="hap_ok.jsp?su1=100&su2=200&name=인나">Get방식</a>

</body>
</html>

hap_ok.jsp

  <%@ page contentType="text/html; charset=UTF-8"%>

<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();

	String s1 = request.getParameter("su1");
	String s2 = request.getParameter("su2");
	String name = request.getParameter("name");

	int su1 = Integer.parseInt(s1);
	int su2 = Integer.parseInt(s2);
	
	int sum = su1 + su2;
	
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<%=cp %><br/>

결과: <%=su1 %>+<%=su2 %>=<%=sum %><br/>
이름: <%=name %>

</body>
</html>

📌 출력

Function - 입력안했으면 alert(경고)메세지 띄우기

파일이 다른 곳에 있을 땐 경로 입력해주기

방법 (1)

방법 (2)

공부할 때만 쓰는 방법 :
<script> String cp = request.getContextPath(); = 내가 만든 study까지의 경로와 같음
그래서 <body> 부분에 <%=cp %>로 출력해주기

[환경설정] - [JSP Files] - [Templates] : 아예 저 (메서드(GET)을 위한) UTP-8 + 경로를 추가해놓기

계속 쓰이는 명령어나 주소가 있다면 템플릿에 저장해놓기!

2. 구구단 만들기

Test2.

💻 입력

화면1 : 구구단
화면2 : 구구단_ok

gugudan.jsp

 <%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

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

단: <input type="text" name="dan"/><br/>
<input type="submit" value="결과"><br/>

</form>


</body>
</html>

gugudan_ok.jsp

<%@page import="org.w3c.dom.Document"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//이렇게 한번에 써도됨 (구구단 만들기)
	int dan = Integer.parseInt(request.getParameter("dan"));
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
	for(int i = 1; i<=9 ; i++){
		
		String str = String.format("%d*%d=%d<br/>",dan,i,dan*i);
		out.print(str);
		//out.println(dan + "*" + i + " = " + (dan * i) + "<br>");
	}

%>


</body>
</html>

📌 출력

3.

Test3.

💻 입력

화면1 : 회원가입
화면2 : 회원가입_ok

test1.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<script type="text/javascript">

//회원가입 만들기
	function sendIt() {
		
		var f = document.myForm;
		
		if(!f.id.value){
			alert("아이디를 입력하세요");
			f.id.focus();
			return;
		}
		
		if(!f.pwd.value){
			alert("패스워드를 입력하세요");
			f.pwd.focus();
			return;
		}
		
		if(!f.chk.checked){
			alert("약관에 동의해주세요");
			return;
		}
		alert("회원가입 성공!");
		f.submit();
	}
	
	
	function onlyNum() { //숫자 -> tel2 / tel3
		
		if(event.keyCode < 48 || event.keyCode > 57){
			event.returnValue = false; //아무반응 보이지말아라
		}
	}
	
	
	function onlyHangul() { //한글 -> 이름
		
		if(event.keyCode < 12592 || event.keyCode > 12687){
			event.returnValue = false; //아무반응 보이지말아라
		}
	}
	


</script>

</head>
<body>

<form action="test1_ok.jsp" method="post" name="myForm">

아이디: <input type="text" name="id"/><br/>
패스워드: <input type="password" name="pwd"/><br/>
이름: <input type="text" name="name" onkeypress="onlyHangul();"/><br/>
성별: <input type="radio" name="gender" 
checked="checked" value="남자"/>남자
<input type="radio" name="gender" value="여자"/>여자<br/>
전화번호: <select name="tel1"> 
	<option value="010">010</option>
	<option value="011">011</option>
	<option value="012">012</option>
</select>
<input type="text" name="tel2" onkeypress="onlyNum();"/>-
<input type="text" name="tel3" onkeypress="onlyNum();"><br/>

취미:<br/>
<select name="hobby" size="4" multiple="multiple">
	<option value="게임">게임</option>
	<option value="운동">운동</option>
	<option value="영화">영화</option>
	<option value="음악">음악</option>
</select><br/>

좋아하는 연예인<br/>
<input type="checkbox" name="enter" value="배수지">배수지<br/>
<input type="checkbox" name="enter" value="유인나">유인나<br/>
<input type="checkbox" name="enter" value="이이담">이이담<br/>
<input type="checkbox" name="enter" value="박신혜">박신혜<br/>
<input type="checkbox" name="enter" value="아이유">아이유<br/>


동의 하십니까? <input type="checkbox" name="chk" value="Y"/><br/>
메모: <br/>
<textarea rows="5" cols="20" name="memo"
style="resize: none;"></textarea><br/>

<input type="button" value="회원가입" onclick="sendIt();"/>
<input type="reset" value="다시입력"
	onclick="document.myForm.id.focus();"/>
<input type="button" value="취소"
	onclick="javascript:location.href='<%=cp%>';">

</form>

</body>
</html>

test1_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String id = request.getParameter("id");
	String pwd = request.getParameter("pwd");
	String name = request.getParameter("name");
	String gender = request.getParameter("gender");
	String tel1 = request.getParameter("tel1");
	String tel2 = request.getParameter("tel2");
	String tel3 = request.getParameter("tel3"); //일반 변수 : static영역에 저장되지만
	String[] hobby = request.getParameterValues("hobby"); //배열:객체생성되어야하므로 - 해시코드로 받아줌
	String[] enter = request.getParameterValues("enter");
	String chk = request.getParameter("chk");
	String memo = request.getParameter("memo");
	
	memo = memo.replaceAll("\r\n","<br/>"); // 엔터를 web엔터로 바꿔주기
	
	String str1 ="";
	if(hobby!=null){
		for(String temp: hobby){
			str1 += temp +" ";
		}
	}

	String str2 ="";
	if(enter!=null){
		for(String temp: enter){
			str2 += temp +" ";
		}
	}	
	
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

아이디: <%=id %><br/>
패스워드: <%=pwd %><br/>
이름: <%=name %><br/>
성별: <%=gender %><br/>
전화: <%=tel1 %>-<%=tel2 %>-<%=tel3 %><br/>
취미: <%=str1 %><br/>
좋아하는 연예인: <%=str2 %><br/>
동의여부: <%=chk %><br/>
메모: <%=memo %><br/>


</body>
</html>

📌 출력

<결과>

4. 메모리에 넣고 빼기 (add & remove)

Test4.

💻 입력

화면1 : add & remove
화면2 : add & remove_ok

listTest.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css"> 

body {
	font-size: 10pt;
}

.itemList{

	font-size: 9pt;
	width: 100pt;
}

.itemBtn{
	font-size: 9pt;
	color: rgb(0,0,0);
	background-color: rgb(150,150,150);
	width: 30pt;
}

.Btn{
	font-size: 9pt;
	color: rgb(0,0,0);
	background-color: rgb(250,250,250);
}

</style>

<script type="text/javascript">

	function itemAdd() {
		var f = document.myForm;
		var leftItem = f.leftItem;
		
		leftItem[0] = new Option("배수지","배수지"); // 입력한text : value값
		leftItem[1] = new Option("유인나","유인나"); 
		leftItem[2] = new Option("이이담","이이담"); 
		leftItem[3] = new Option("박신혜","박신혜"); 
		leftItem[4] = new Option("아이유","아이유"); 
		leftItem[5] = new Option("한예슬","한예슬"); 
		leftItem[6] = new Option("전지현","전지현"); 
		
	}

	function itemMove(val) { //방향
		var f = document.myForm;
		var source,target;
		
		if(val=="left"){
			source = f.rightItem;
			target = f.leftItem;
		}else{
			source = f.leftItem;
			target = f.rightItem;
		}
		
		var n, i;
		n = target.length;
		//alert(n); 값이 뭔지 암
		//alert(source.length);
		
		for(i=source.length-1;i>=0;i--){
			if(source.options[i].selected){
				target[n++] = new Option(source.options[i].text,
						source.options[i].value);
				source[i] = null;
			}
		}
	}
	
	function sendIt() {
		
		var f = document.myForm;
		
		if(f.rightItem.length==0){
			alert("쪽지를 보낼 사람을 선택하세요");
			f.rightItem.focus();
			return;
		}
		
		if(!f.msg.value){
			alert("메세지를 입력하세요");
			f.msg.focus();
			return;
		}
		
		//받는사람 자동 선택
		for(var i=0;i<f.rightItem.length;i++){
			f.rightItem[i].selected = true;
			//f.rightItem.options[i].selected = true; selected속성을 true로 변경
		}
		
		f.submit();
	}
	
	
</script>


</head>
<body onload="itemAdd();">

<form action="listTest_ok.jsp" method="post" name="myForm" >

<table border="0" style="font-size: 10pt;" align="center">
<tr align="center">	
	<td width="150">전체리스트</td>
	<td width="70">&nbsp;</td>
	<td width="150">받는사람</td>
</tr>

<tr align="center">
	<td>
		<select name="leftItem" multiple="multiple" size="7"
		class="itemList">
		</select>
	</td>
	<td width="70">
		<input type="button" value="&gt;" class="itemBtn" onclick="itemMove('right')"/><br/> 
		<input type="button" value="&lt;" class="itemBtn" onclick="itemMove('left')"/><br/>
	</td>
		<td width="150">
		<select name="rightItem" multiple="multiple" size="7"
		class="itemList">
		</select>
	</td>
</tr>

<tr>
	<td colspan="3">
		<br/>메세지<br/>
		<textarea rows="5" cols="52" name="msg"></textarea>
	</td>
</tr>
<tr>
	<td colspan="3" align="center">
	<input type="button" value="쪽지보내기" class="Btn" onclick="sendIt()"/><br/>



</table>


</form>

</body>
</html>

listTest_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String msg = request.getParameter("msg");
	String[] rightItem = request.getParameterValues("rightItem");
	
	msg = msg.replaceAll("\n", "<br/>");
	
	String str="";
	if(rightItem!=null){
		for(String temp: rightItem){
			str += temp +" ";
		}
	}
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

받는사람:<%=str %><br/>
메세지:<%=msg %><br/>

</body>
</html>