본문 바로가기
programming/Gukbi

국비 교육 57일차 - request&response

csohb 2021. 3. 19. 18:19
728x90
반응형

오전에 배운 개념은 jsp에서 request와 response의 개념을 제대로 이해하고 이를 적용하는 프로그램을 만드는 것이었다. 사실 servlet하면서 이미 혼자 더듬더듬 이해했었는데..

 

수업 방식이 조금 신기한게 처음엔 모르는 내용을 휘몰아치듯 진도를 나가서 정말 속으로 울면서 코드를 따라치는 수준인데... 그래서 혼자 복습을 하면서 나중에 이해하는.. 그런 방식인데

 

결국은 나중에 수업시간에 제대로 배우게 된다.

이번 request&response가 그렇다. 

제대로 된 설명을 못듣고 그냥 쓰기 바빴는데 이제서야 개념을 제대로 배웠다.. 그러다보니 이해가 빠르게 되긴한다. 이미 내가 써본 기능이기 때문에.. 

 

여튼 오늘 배운 내용을 복습해보겠다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%--
 	request : 내장객체(기본객체) : JSP에서 미리 생성된 객체
 	========
 		클래스명 : HttpServletRequest
 			=> URL주소
 			http://localhost(IP자리)/JSPBasicProject2/jsp/request.jsp
 			======================  ================================
 				서버 정보				사용자가 요청한 내용 (URI)
 									===============
 									 ContextPath
 									 
 				(대신 도메인이 들어올수도 있음)
 				1) IP => getRemoteAddress()
 				2) PORT
 				3) Protocol
 				4) Method : 데이터 전송방식 (GET,POST)
 		역할(기능)
 		=======
 		1. 클라이언트의 정보, 서버 정보
 		2. 클라이언트 요청 정보 (클래스에 서버로 요청한 값)
 		   String getParameter() => text, radio, select, textarea (단일값)
 		   String[] getParameterValues() => checkbox (다중값)
 		   Spring (MVC)
 		   M : 자바(DAO,VO,Manager,Service)
 		   V : JSP
 		   C : Servlet
 		======================================
 		3. 세션, 쿠기를 읽을 수 있는 기능 
 		   => request.getSession()
 		   => request.getCookies()
 		4. 속성 추가 : MVC
 		   => setAttribute() => getAttribute()
  --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   width:450px;
   margin: 0px auto;
}
h1 {
  text-align: center;
}
</style>
<%-- 
	JSP (GET/POST) => if
	= 데이터 출력 => doGet()
	= 데이터 입력 => doPost()
 --%>
</head>
<body>
	<div class="container">
	 <h1>개인정보</h1>
	  <div class="row">
	  <form method=get action="output.jsp">
	   <table class="table table-striped">
	   	<tr>
	   	 <td width=20% class="text-right">이름</td>
	   	 <td width=80%>
	   	 <input type=text name=name size=15>
	   	 </td>
	   	</tr>
	   	<tr>
	   	 <td width=20% class="text-right">비밀번호</td>
	   	 <td width=80%>
	   	 <input type=password name=pwd size=15></td>
	   	</tr>
	   	<tr>
	   	 <td width=20% class="text-right">성별</td>
	   	 <td width=80%>
	   	 <input type=radio name=sex value="여자" checked>여자
	   	 <input type=radio name=sex value="남자">남자
	   	 </td>
	   	</tr>
	   	<tr>
	   	 <td width=20% class="text-right">지역</td>
	   	 <td width=80%>
	   	  <select name=loc>
	   	   <option>서울</option>
	   	   <option>경기</option>
	   	   <option>인천</option>
	   	   <option>일산</option>
	   	   <option>베를린</option>
	   	  </select>
	   	 </td>
	   	</tr>
	   	<tr>
	   	 <td width=20% class="text-right">소개</td>
	   	 <td width=80%>
	   	  <textarea rows="5" cols="40" name="content"></textarea>
	   	 </td>
	   	</tr>
	   	<tr>
	   	 <td width=20% class="text-right">취미</td>
	   	 <td width=80%>
	   	  <input type="checkbox" name=hobby value="boxing">boxing
	   	  <input type="checkbox" name=hobby value="swimming">swimming
	   	  <input type="checkbox" name=hobby value="game">game
	   	 </td>
	   	</tr>
	   	<tr>
	   	 <td colspan="2" class="text-center">
	   	  <button class="btn btn-sm btn-danger">send</button>
	   	</tr>
	   </table>
	   </form>
	  </div>
	</div>
</body>
</html>

 request를 통해 어떻게 사용자가 보내준 값을 받아오는지 보기 위해 만든 예제이다. 

html form태그를 사용해서 값을 보내줬는데, get/post 방식 둘다 실행해봤다. 

input 태그의 name에 해당하는 내용들이 넘어가게 된다. action="output.jsp"로 전송을 해준다. 

 

그래서 받아온 ouptput파일은 아래와 같다. 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%--
    		= 사용자가 보내준 데이터 받아서 처리하는 JSP
    		1. 한글여부 확인
    			인코딩 ==> 디코딩
    		2. 데이터 => name 
    		
    		getParameter()
    		getParameterValues()
    		
    		=> <input type=text name="name[0]">
    		   <input type=text name="name[1]">
    		   <input type=text name="name[2]"> => ArrayList 
    		   ==> 파일 업로드할때 쓰는 방식
     --%>
<%
	// 1. 자바 처리
		try {
			// 한글 변환 // page 83
			// request.setCharacterEncoding("UTF-8"); //디코딩은 (post일때만 사용)
		}catch(Exception ex){}
		String name=request.getParameter("name");
		// name=(name) => name=홍길동
		String password=request.getParameter("pwd");
		String sex=request.getParameter("sex");
		String loc=request.getParameter("loc");
		String content=request.getParameter("content");
		String[] hobby=request.getParameterValues("hobby"); // 여러개깂을 받을때 (주로 checkbox)
	// 2. HTML을 이용해서 출력
%>
<%-- 
	get 방식
	http://localhost/JSPBasicProject2/jsp/output.jsp?name=%EA%B6%8C%EC%9C%A0%EC%A7%84&pwd=1234&sex=%EC%97%AC%EC%9E%90&loc=%EC%84%9C%EC%9A%B8&content=I%27M+NCTzen&hobby=boxing&hobby=swimming&hobby=game
	
 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>server & client info(로그파일 저장용)</h3>
	사용자 IP:<%=request.getRemoteAddr() %><br>
	사용자 요청경로:<%=request.getRequestURI() %><br>
	전체 경로(서버정보 포함):<%=request.getRequestURL() %><br>
	서버 주소:<%= request.getServerName() %><br>
	서버 Port:<%= request.getServerPort() %><br>
	서버 Protocol:<%= request.getProtocol() %><br>
	데이터 전송방식:<%= request.getMethod() %> <br>
	<hr>

	<h3>user sent data</h3>
	name:<%= name %><br>
	password:<%= password %><br>
	sex:<%= sex %><br>
	loc:<%= loc %><br>
	content:<%= content %><br>
	hobby:
	<%
		try
		{
			
		
	%>
	<ul>
	 <%
	 	for(String h:hobby)
	 	{
	 %>
	 	<li><%= h%></li>
	 <% 		
	 	}
	 %>
	</ul>
	<%
		}catch(Exception ex){
			
	%>
			<font color=red>취미를 선택하세요</font>
	<% 
		}
	
	%>
</body>
</html>

실행하면 이런창이 뜬다. 

 

다음은 response

response는 사용자가 요청해서 was에서 처리해준 값을 가지고 있는 객체이다. 예제는 아래와 같다.

 

지금보니 이건 response 예제가 아니다. ...

<%-- 

	response
	오류 종류
	1. 404 : 파일이 존재하지 않는 경우 (a tag check)
	2. 500 : 자바 변경 => 컴파일, 인터프리터 - 오류가 있는 경우 
	3. 403 : 접속거부 (보안상 이유)
	4. 405 : 데이터를 잘못 보냈을때 ==> 스프링
	
	response : 내장객체 (기본 객체) = 미리 만들어 놓은 객체 
	화면이 변경 (request.jsp === output.jsp) => request, response는 초기화
	=> 한 화면을 건너가면 request, response는 사라짐 ****
	 	=> 지역변수라서 
	JSP : 메소드
		_jspService(HttpSetvletRequest request, HttpSetvletResponse response) => 사용자가 요청시마다 화면을 출력 
		{
			영역에 들어가는 화면단을 만들어 준다 
		}
		
	요청 => 화면으로 이동 
	================
	1. header 처리 ==> 데이터를 보내기전에 먼저 실행할 내용
					  다운로드 (파일명, 파일크기)
					  *****setHeader()
	2. 화면 이동 ===> *****response.sendRedirect("") : request가 초기화
						
							 request에 있는 값을 받아서 => 오라클로 전송 
		insert.jsp ========> insert_ok.jsp ======> list.jsp
				request(추가한 내용)		   request
		public void dispk
 --%>
<%@ 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>
	<a href="temp.jsp?id=admin&pwd=1234">클릭</a>
</body>
</html>

temp로 id와 pwd값을 넘겨준다. 

 

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//response.sendRedirect("result.jsp");
	pageContext.forward("result.jsp"); //mvc에서 나오는 기법
	/* RequestDispatcher rd=request.getRequestDispatcher("result.jsp");
	rd.forward(request, response); */
	
	/*
		한단계 거쳐서 이동 
		request 
		 필요 : forward, session
		 불필요 : sendRedirect()
		 ** 쿠키는 문자열만 사용가능 
		 
		 a.jsp
		 _jspService(req,res)
		 {
			
		 }
	
		 b.jsp
		 _jspService(req,res)
		 {
			 c.jsp => _jspService(req,res)
		 }
		 
		 c.jsp
		 _jspService(req,res)
		 {
			 
		 }
	*/
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 temp는 값을 받아오기만 하는 임시페이지이다. 원래 아무것도 안떠야 하지만 forward를 사용해서 result에 있는 값을 그대로 받아왔다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	String id=request.getParameter("id");
	String pwd=request.getParameter("pwd");
	
%>
    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	id:<%= id %><br>
	pwd:<%= pwd %>
</body>
</html>

 

 

 

 result에서는 받아온 id와 pwd를 이렇게 출력해주고 있다. 

url을 보면 temp 파일이다. result로 넘어가지 않고 forward를 통해서 값을 받아오고 있다. 

 

 

사실 이건 엄청 간단한 예제이고, request를 통해서 해당하는 영화목록을 출력해주는 프로그램을 만들어봤다. 

 

DAO는 수도 없이 올렸으니 그냥 JSP만 올리면서 복습을 하겠다. 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*, com.sist.dao.*"%>
<%
	MusicDAO dao=new MusicDAO();
	ArrayList<MusicVO> list=dao.musicListData();
	
	 for(MusicVO vo:list)
	{
		String s=vo.getTitle();
		if(s.length()>15)
		{
			s=s.substring(0, 15)+"...";
		}
		vo.setTitle(s);
	} 
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style type="text/css">
  .row{
  	width:100%;
  	margin: 0px auto;
  }
  
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
  <script type="text/javascript">
  $(function(){
	  $('.img').css("cursor", "pointer");
	  $('.img').click(function(){
		  let no=$(this).attr("data");
		  // detail.jsp?mno=1
		  $.ajax({
			  type:'POST',
			  url:'detail.jsp',
			  data:{"no":no},
			  success:function(result) // result= detail.html의 내용
			  {
				  $('.col-sm-4').html(result);
			  }
			  // mno="mno", 1=mno
		  })
	  })
  });
  </script>
  <!-- 
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  

 <div class="panel panel-success">
      <div class="panel-heading">Panel with panel-success class</div>
      <div class="panel-body">Panel Content</div>
    </div>
   -->
</head>
<body>
	<div style="height:30px"></div>
	<div class="container-fluid">
	 <div class="row">
	  <div class="col-sm-8">
	   <%
		   for(MusicVO vo:list)
		   {
	   %>	   
			   <div class="col-md-3">
			    <div class="panel panel-success">
			      <div class="panel-heading"><%= vo.getTitle() %></div>
			      <div class="panel-body">
			       <img src="<%=vo.getPoster() %>" width=100% class="img-rounded img" 
			       data="<%= vo.getNo() %>">
			      </div>
			    </div>
			   
    			</div>
			   
	   <% 
		   }
	   
	   
	   %>
	  </div>
	  <div class="col-sm-4">
	  
	  </div>
	 </div>
	</div>
</body>
</html>

 영화 리스트를 오라클에서 받아오는데, 제목이 너무 길면 화면 ui가 깨지기 때문에 제목이 15글자 이상 넘어가는 것들은 뒤에 ".."을 붙여서 생략처리를 해줬다. 

 

<%
	MusicDAO dao=new MusicDAO();
	ArrayList<MusicVO> list=dao.musicListData();
	
	 for(MusicVO vo:list)
	{
		String s=vo.getTitle();
		if(s.length()>15)
		{
			s=s.substring(0, 15)+"...";
		}
		vo.setTitle(s);
	} 
%>

아래는 화면 출력부분

<body>
	<div style="height:30px"></div>
	<div class="container-fluid">
	 <div class="row">
	  <div class="col-sm-8">
	   <%
		   for(MusicVO vo:list)
		   {
	   %>	   
			   <div class="col-md-3">
			    <div class="panel panel-success">
			      <div class="panel-heading"><%= vo.getTitle() %></div>
			      <div class="panel-body">
			       <img src="<%=vo.getPoster() %>" width=100% class="img-rounded img" 
			       data="<%= vo.getNo() %>">
			      </div>
			    </div>
			   
    			</div>
			   
	   <% 
		   }
	   
	   
	   %>
	  </div>
	  <div class="col-sm-4">
	  
	  </div>
	 </div>
	</div>
</body>

 col-sm-8을 써서 구역을 나눠줬는데, 8부분에는 list를, 4부분에는 상세정보를 출력해줬다. 

리스트 출력까지야 그렇게 어렵지 않았는데, detail 내용 가져오는걸 생각하는게 조금 복잡했다.

페이지를 넘어가서 출력하는게 아니라 ajax를 이용해서 같은 화면에 출력해줘야 했기 때문. 

 

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
  <script type="text/javascript">
  $(function(){
	  $('.img').css("cursor", "pointer");
	  $('.img').click(function(){
		  let no=$(this).attr("data");
		  // detail.jsp?mno=1
		  $.ajax({
			  type:'POST',
			  url:'detail.jsp',
			  data:{"no":no},
			  success:function(result) // result= detail.jsp의 내용
			  {
				  $('.col-sm-4').html(result);
			  }
			  // mno="mno", 1=mno
		  })
	  })
  });
  </script>

지금 보니까 그렇게 안복잡한거 같기도하다...

라고 쓰면서 나혼자 안보고 치라고 하면 못치겠지 ㅋ....

 

그냥 data속성을 만들어주고, 이거를 detail.jsp에 넘겨주기만 하면 된다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="com.sist.dao.*"%>
<%
	String no=request.getParameter("no");
    MusicDAO dao=new MusicDAO();
	MusicVO vo=dao.musicDetailData(Integer.parseInt(no));
	
	
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
let i=0;
$(function(){
	$('.go').css("cursor", "pointer");
	$('.go').click(function(){
		if(i==0)
			{
				$('.go').text("닫기");
				$('#story').show();
				i=1;
			}
		else
			{
				$('.go').text("더보기");
				$('#story').hide();
				i=0;
			}
	});
});
</script>
</head>
<body>
 
 <table class="table">
    <tr>
      <td width=30% class="text-center" rowspan="4">
       <img src="<%=vo.getPoster() %>" width=350 height=350>
      </td>
      <td colspan="2">
        <span style="color:orange;font-size: 11pt"><%=vo.getTitle() %></span>
      </td>
    </tr>
    
    <tr>
      <td width=20% class="text-right">가수</td>
      <td width=50%><%=vo.getSinger() %></td>
    </tr>
    <tr>
      <td width=20% class="text-right">앨범</td>
      <td width=50%><%=vo.getAlbum() %></td>
    </tr>
    <tr>
      <td width=20% class="text-right">순위</td>
      <td width=50%><%= vo.getIdcrement()%>계단<%= vo.getState() %></td>
    </tr>
  </table>
</body>
</html>

 이제보니 영화가 아니라 내가 숙제로 한 음악 데이터이다. 여튼 <% %>안에 request로 parameter값을 받아온다. 

parameter에는 no라는 숫자값만 받아왔기 때문에 (데이터형은 String이지만) 따로 한글을 인코딩해줄 필요는 없었다. 

 

자바로 오라클을 연결해주고 no값을 받아서 VO에 값을 채워주고 출력해주면 끝이 난다.

 

 

 

728x90
반응형

'programming > Gukbi' 카테고리의 다른 글

국비 교육 59일차 - application, include  (0) 2021.03.24
국비 교육 58일차 - 답글형 게시판 만들기  (0) 2021.03.19
국비 교육 56일차 - jquery, jsp  (0) 2021.03.17
국비 교육 55일차 - 화면 UI 편집, javaScript  (0) 2021.03.17
국비 교육 54일차 - JavaScript  (0) 2021.03.15

'programming/Gukbi' Related Articles

티스토리툴바