JSP Request & Response

Let's Just Go·2022년 5월 18일
0

JSP

목록 보기
2/12

JSP

Request

getParameter

  • getParameter

    • HTTP 요청의 파라미터 값을 가져오기 위해 사용

    • 사용자의 입력 데이터를 서버로 전송하기 위해서는 HTML form 태그를 사용

    • form 태그의 action 속성에 데이터를 전달 받을 페이지의 URL 주소를 작성

    • input 태그의 name 속성으로 요청 파라미터의 이름을 지정할 수 있음

    • getParameter는 1개의 값만 가져옴

    • getParameterValues는 2개 이상의 값을 가져올 수 있음

      <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Userform</title>
</head>
<body>

	<h1>회원 가입 양식 </h1>
	<hr>
	
	<%-- 
		사용자의 입력값을 서버로 전달하는 방법 
		1. 사용자의 입력 데이터를 서버로 전송하려면 HTML의 form 태그를 사용
		2. form 태그의 action 속성에 데이터를 전달받을 페이지의 URL 주소를 작성
		3. input 태그의 name 속성으로 요청 파라미터의 이름을 지정할 수 있음
			이름을 지정하실 때는 입력값과 관련있는 이름으로 지정해 주는 것이 좋음 --%>
	<form action="req_user_info.jsp"> 
	<!-- action에 데이터를 전달받을 페이지 작성 -->
		아이디: <input type="text" name="id" value=""> <br>
		비밀번호: <input type="password" name="pw" required> <br> #
		성별 <br> <input type="radio" name="gender" value="male"> 남
		<input type="radio" name="gender" value="female"> 여 <br>
		
		# 취미 <br> <input type="checkbox" name="hobby" value="read">
		독서 <input type="checkbox" name="hobby" value="sleep"> 수면 <input
			type="checkbox" name="hobby" value="soccer"> 축구 <input
			type="checkbox" name="hobby" value="game"> 게임 <br> 
			<!-- checkbox와 radio의 경우에는 value를 적어줘야 함 아니면 on으로 나옴 -->
			
		# 지역 : <br>
		<select name = "region">
			<option value ="seoul">서울</option> <!-- 사용자에게는 서울이 보이지만 실제 값을 가지고 올 때에는 seoul을 가지고 옴 -->
			<option value = "incheon">인천</option>
			<option value = "ulsan">울산</option>
			<option value = "pusan">부산</option>
		</select>
		
		# 자기소개 <br>
		<textarea name="introduce" cols="30" rows="10"></textarea>
		<br> <input type="email" name="mail" placeholder="이메일을 입력하세요.">
		<br>
		
		<input type="submit" value = "회원가입">
		</form>
</body>
</html>

    • Getparameter를 통해서 클라이언트가 요청한 값을 가져옴

    • 받은 값을 http tag를 활용하여 화면에 출력

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

		<%
			String id = request.getParameter("id");
			String pw = request.getParameter("pw");
			String gender = request.getParameter("gender");
			String[] hobby = request.getParameterValues("hobby");
			String region = request.getParameter("region");
			String intro = request.getParameter("introduce");
			String email = request.getParameter("mail");
		%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<p>
		# ID : <%= id %><br>
		# PW : <%= pw %><br>
		# 성별 : <%= gender %><br>
		# 취미 : <%= Arrays.toString(hobby) %><br>
		# 지역 : <%= region %><br>
		# 자기소개 : <%= intro %><br>
		# 이메일 : <%= email %><br>
	</p>
</body>
</html>

form

  • form

    • form tag와 input tag를 사용하여 사용자가 값을 입력할 수 있도록 만들 수 있음

    • form tag의 action을 통해서 데이터를 전달 받을 페이지 작성

      • EX) action : req_bmi.jsp

    • input tag를 이용하여 원하는 값을 입력

      • name으로 값을 식별 할 수 있으므로(요청 파라미터) 중요

    • 데이터를 전달 받은 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>
	<form action="req_bmi.jsp"> 
	<!-- action에 데이터를 전달받을 페이지 작성 -->
		키: <input type="text" name="cm" value=""> <br>
		몸무게: <input type="password" name="kg" required> <br> #
		성별 <br> <input type="radio" name="gender" value="male"> 남
		<input type="radio" name="gender" value="female"> 여 <br>

		
		<input type="submit" value = "제출">
		</form>
</body>
</html>

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

<!DOCTYPE html>
<%--
       bmi지수 계산 공식: 체중(kg) / 신장(m) * 신장(m)
       - bmi지수가 25를 초과한다면 "당신은 과체중입니다." 를 출력
       - 18.5미만이라면 "당신은 저체중입니다." 를 출력
       - 나머지는 "당신은 정상체중입니다." 를 출력하세요.
       
       주의!) 
       request.getParameter()의 리턴 타입은 String입니다.
       숫자가 전달되어도 타입이 문자열입니다.
       그렇기 때문에 bmi 지수를 계산하려면 실수나 정수로 변환 후 계산해야 합니다.
       Integer.parseInt(문자열), Double.parseDouble(문자열)
       신장 -> cm, 체중 -> kg 두 값 모두 소수점 포함 값으로 받도록 하겠습니다.
     --%>
     <%
     String s_m = request.getParameter("cm");
     String k = request.getParameter("kg");
     %>
     
     <%
	double i_m = (Double.parseDouble(s_m)/100);
	double i_k = Double.parseDouble(k);
	
	double bmi = i_k / (i_m *i_m);
	String c = String.format("%.2f", bmi);
	double bmi1 = i_k / (i_m * i_m);
	bmi1 = Math.round(bmi1*100) / 100.0;
	
	%>
<html>
<head>
<meta charset="UTF-8">
<title>bmi</title>
</head>
<body>

<h2>체질량 지수(BMI) 계산</h2>
<hr>

<p>- 신장 : <%= s_m %> cm</p> 
<p>- 체중 : <%= k %> kg</p>
<p> BMI지수 : <strong><%= c %></strong></p> <br>
<p> MATH함수를 사용한 BMI지수 : <strong><%= bmi1 %></strong> </p><br>

	<%
	if (bmi > 25) {
		out.print("당신은 과체중입니다.");
	}
	else if (bmi < 18.5){
		out.print("당신은 저체중입니다.");
	}
	else {
		out.print("당신은 정상체중입니다.");
	}
	
	%>

</body>
</html>

GET

  • GET
    • 서버에 데이터를 전송하는 용도
    • 전송하는 데이터가 URL에 묻어서 감
    • 전송했던 데이터는 브라우저의 히스토리에 접속했던 주소와 함께 남아 있어 보안성에 취약
    • 전송할 수 있는 최대 크기는 브라우저 별로 URL 크기가 정해져 있음
    • 글 조회나 검색 같이 서버의 정보를 가져올 필요성이 있을 때 사용

  • POST

    • 서버에 데이터를 전송하는 용도

    • 전송되는 데이터가 URL에 묻어서 나가지 않고 전송 객체의 바디를 통해 전달

    • 브라우저에 전달되는 데이터가 남지 않기 때문에 보안성에 강함

    • 비밀번호나 주민번호 등 개인정보가 포함된 데이터를 서버에 전송해야 할 때 사용

    • 반드시 HTML form 태그가 필요

    • 데이터의 양이 제한이 없으므로 대량의 데이터를 전송할 수 있음

    • post방식으로 한글을 전송하면 글자가 깨지므로 method를 통해 진행
      - request.setCharacterEncoding("utf-8");

      <%@ 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>

	<%--
		전송방식을 post로 사용하기 위해서는 form 태그가 반드시 필요 
		form태그의 method라는 속성을 "post"로 설정하면 요청 방식이 post 방식으로 전송(default : GET)
	 --%>
	 
	 <form action="req_post_take.jsp" method = "post">
	 	- 아이디 : <input type = "text" name = "id" size="10"><br>
	 	- 비밀번호 : <input type="password" name="pw" size = "10"><br>
	 	- 이름 : <input type ="text" name="name" size = "10"><br>
	 	<input type="submit" value="확인">
	 
	 </form>
</body>
</html>

    • post방식으로 값을 받아와서 화면에 출력

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

	<%
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		request.setCharacterEncoding("utf-8");
		String name = request.getParameter("name");
		// post방식을 통해 전달된 데이터의 한글 처리는 메서드를 사용하여 처리해야함(한글은 깨짐)
		
	%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<p>
		# 아이디 : <%= id %> <br>
		# 비밀번호 : <%= pw %> <br>
		# 이름 : <%= name %> <br>
	</p>
</body>
</html>

Response

  • Response
    • Response
      - JSP 페이지의 실행 결과를 웹 브라우저로 되돌려 줄 때 사용하는 객체
      - 서버에서 클라이언트에 대한 응답을 response 객체를 통해 처리

    • Method
      • sendRedirect(URL) : 웹 서버가 웹 브라우저에게 지정한 URL로 이동하도록 함
      • Controller를 만들어 특정 조건에 맞으면 특정 jsp파일로 이동하게 만들 수 있음
      • sendRedirect(URL)은 Http특성인 응답을 하면 관계를 종료하기 때문에 요청을 했을 때 생성된 request와 response 객체가 사라짐으로 sendRedirect(URL)로 이동했을 때 getParameter()를 하게 되면 NULL이 나옴

Practice

  • POST Request

    • 라디오 버튼을 활용해서 관련 영상을 새로운 페이지에서 실행

      <%@ 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>
<style>
table, td, th {
	border: 5px solid black;
	border-collapse: collapse;
}

table {
	width: 800px;
	height: 500px;
}

th, td {
	text-align: center;
}
</style>
</head>
<body>

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

		<table border="1">
			<thead>
				<tr>
					<th></th>
					<th>얼굴</th>
					<th>이름</th>
					<th>제목</th>
					<th>생년월일</th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<td><input type="radio" name="title1" value="1"></td>
					<td><img alt="s" src="kim.PNG" width="350px" height="200px">

					</td>
					<td>김용명</td>
					<td>루피</td>
					<td>1978. 10. 2</td>
				</tr>

				<tr>
					<td><input type="radio" name="title1" value="2"></td>
					<td><img alt="s" src="kim2.PNG" width="350px" height="200px">
					</td>
					<td>김용명</td>
					<td>선글라스</td>
					<td>1978. 10. 2</td>
				</tr>
			</tbody>

			<tfoot>
				<tr>
					<td colspan="5"><input type="submit" value="확인"></td>
				</tr>
			</tfoot>

		</table>

	</form>

</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%
	String title1 = request.getParameter("title1");
String name = request.getParameter("name");
String concept = request.getParameter("concept");
String birth = request.getParameter("birth");
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h2>선택하신 앨범 정보</h2>
	<hr>
	<h3>당신이 선택하신 사람은 김용명이며 생일은 1978. 10. 2 입니다.</h3>
	<hr>
	<%
		if (title1.equals("1")) {
	%>
	<iframe width="560" height="315"
		src="https://www.youtube.com/embed/m3moJifwVLQ?autoplay=1"
		title="YouTube video player" frameborder="0"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
		allowfullscreen></iframe>
	<%
		} else if (title1.equals("2")) {
	%>

	<iframe width="560" height="315"
		src="https://www.youtube.com/embed/AuRs80djfto?autoplay=1"
		title="YouTube video player" frameborder="0"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
		allowfullscreen></iframe>
	<%
		}
	%>
</body>
</html>

    • form 지우고 a태그를 활용하여 직접 ?를 활용하여 값을 보냄

      <%@ 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>

<style>
table {
	width: 800px;
}

tr {
	text-align: center;
}
</style>
</head>
<body>
	<!-- form과 radio button 삭제하고 제목을 클릭하여 연동하도록 구성 -->
	<div align="center">
		<table border="1">
			<tr>
				<th>앨범커버</th>
				<th>가수</th>
				<th>앨범제목</th>
				<th>발매일</th>
			</tr>

			<tr>
				<td><img alt="pic1" src="psy.PNG" width="100px" height="100px"></td>
				<td>싸이(PSY)</td>
				<td><a href="req_album_result_answer.jsp?title=sel1"> 
				<strong>THAT THAT</strong> </a> <!-- 제목을 클릭하면 해당  jsp파일로 이동하고 값을 부여하여 구분할 수 있게 해줌--></td>
				<td>2022.04.29</td>

			</tr>

			<tr>
				<td><img alt="pic2" src="big.PNG" width="100px" height="100px"></td>
				<td>Bigbang</td>
				<td><a href="req_album_result_answer.jsp?title=sel2">
						<strong>봄여름가을겨울(Still Life)</strong> </a></td>
				<td>2022.04.05</td>
			</tr>

		</table>

	</div>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%
	String title = request.getParameter("title");
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<%
		if (title.equals("sel1")) {
	%>
	<div align="center">
		<h2>선택하신 앨범 정보</h2>
		<hr>
		<p>
			당신이 선택하신 앨범은 싸이의 <strong>THAT THAT</strong>입니다.
		</p>
		<hr>

		<h3>타이틀 곡 뮤직 비디오</h3>
		<iframe width="560" height="315"
			src="https://www.youtube.com/embed/8dJyRm2jJ-U?autoplay=1"
			title="YouTube video player" frameborder="0"
			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
			allowfullscreen></iframe>
	</div>
	<%
		} else if (title.equals("sel2")) {
	%>

	<div align="center">
		<h2>선택하신 앨범 정보</h2>
		<hr>
		<p>
			당신이 선택하신 앨범은 빅뱅의 <strong>봄여름가을겨울 (Still life)</strong>입니다.
		</p>
		<hr>

		<h3>타이틀 곡 뮤직 비디오</h3>
		<iframe width="560" height="315"
			src="https://www.youtube.com/embed/eN5mG_yMDiM?autoplay=1"
			title="YouTube video player" frameborder="0"
			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
			allowfullscreen></iframe>
	</div>
	<%
		}
	%>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%
	String title = request.getParameter("title");
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<%
		if (title.equals("sel1")) {
	%>
	<div align="center">
		<h2>선택하신 앨범 정보</h2>
		<hr>
		<p>
			당신이 선택하신 앨범은 싸이의 <strong>THAT THAT</strong>입니다.
		</p>
		<hr>

		<h3>타이틀 곡 뮤직 비디오</h3>
		<iframe width="560" height="315"
			src="https://www.youtube.com/embed/8dJyRm2jJ-U?autoplay=1"
			title="YouTube video player" frameborder="0"
			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
			allowfullscreen></iframe>
	</div>
	<%
		} else if (title.equals("sel2")) {
	%>

	<div align="center">
		<h2>선택하신 앨범 정보</h2>
		<hr>
		<p>
			당신이 선택하신 앨범은 빅뱅의 <strong>봄여름가을겨울 (Still life)</strong>입니다.
		</p>
		<hr>

		<h3>타이틀 곡 뮤직 비디오</h3>
		<iframe width="560" height="315"
			src="https://www.youtube.com/embed/eN5mG_yMDiM?autoplay=1"
			title="YouTube video player" frameborder="0"
			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
			allowfullscreen></iframe>
	</div>
	<%
		}
	%>
</body>
</html>

  • Response

    • id가 “abc1234”, pw가 “aaa1111” 이면 로그인이 가능하도록 response를 통해 만들기

    • res_login_form

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
   #login-btn {
      width: 60px;
      height: 50px;
      padding: 2px;   
   }
</style>
</head>
<body>
<div align="center" style="border: 2px dotted red; padding:30px; width: 700px">
      
      <h3>sendRedirect 연습!</h3>
      
      <form action="res_login_con.jsp" method="post">
         <table border="1">
            <tr>
               <td>
                  <input type="text" name="id" size="10" placeholder="ID를 입력">
               </td>
               <td rowspan="2">
                  <input id="login-btn" type="submit" value="로그인">
               </td>
            </tr>
            <tr>
               <td>
                  <input type="password" name="pw" size="10" placeholder="PW를 입력">
               </td>
            </tr>
         </table>
      </form>
      
   </div>
</body>
</html>

    • res_login_con

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

<%--
       - 이 페이지는 form에서 넘어온 아이디와 비밀번호값을
        받아서 처리하는 페이지입니다.
        
       - 아이디가 'abc1234', 비밀번호는 'aaa1111'이라고 가정합니다.
       
       - 아이디가 일치하지 않는 경우 "res_id_fail.jsp"로 리다이렉팅해서
       "존재하지 않는 회원입니다." 를 브라우저에 출력하시고 다시 로그인 폼으로 돌아갈 수 있는
       링크를 제공하세요.
       
       - 아이디가 일치할 경우, 비밀번호도 확인해서 비밀번호가 틀렸을 경우
       "res_pw_fail.jsp"로 리다이렉팅해서, "비밀번호가 틀렸습니다." 를 출력 후
        폼 링크를 제공하세요.
        
       - 아이디, 비밀번호가 모두 일치하는 경우 "res_welcome.jsp"로 리다이렉팅해서
        "회원님 반갑습니다!" 를 출력하세요.
     --%>

<%
	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	// id와 pw를 form에서 post형식으로 받아옴 
	
	if (id.equals("abc1234") & pw.equals("aaa1111")) {
		response.sendRedirect("res_welcome.jsp");
	}
	else if(id.equals("abc1234"))  {
		response.sendRedirect("res_pw_fail.jsp");
	}
	else {
		response.sendRedirect("res_id_fail.jsp");
	}
	// 받아온 값과 비교하여 조건에 맞는 내용을 출력
%>

    • res_welcome

      <%@ 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>
<h2>회원님 반갑습니다!</h2>
</body>
</html>

    • res_pw_fail

      <%@ 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>
<h2> 비밀번호가 틀렸습니다. </h2>
<a href="res_login_form.jsp">돌아가기</a>

</body>
</html>

    • res_id_fail

      <%@ 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>
<h2> 존재하지 않는 회원입니다.</h2>
<a href="res_login_form.jsp">돌아가기</a>
</body>
</html>
profile
Let's Just Go
안녕하세요! 공부한 내용을 기록하는 공간입니다.
이전 포스트

JSP Basic

다음 포스트

Cookie

0개의 댓글