본문 바로가기
Backend

08월 23일 금 | JSP 03 - JSP 내장객체

by 구라미 2019. 8. 23.

 

내부객체

JSP 내부객체

톰캣서버에 의해 자동으로 생성된 객체

개발자는 별도의 객체를 선언하지 않고 가져다 사용만 한다.

 

 

1) out 본문(<body>)를 가리키는 출력객체 JspWriter out
2) request 사용자가 준 정보를 관리하는 객체 HttpServletRequest request
3) response 요청한 사용자에게 응답을 관리하는 객체 HttpServletResponse response
4) session 요청한 사용자를 개별적으로 구분하기 위한 객체 HttpSession session
5) application 서버에 대한 정보를 관리하는 객체 ServletContext application
6) pageContext JSP, JSTL, EL등 동일한 페이지내에서 서로 다른 문법과의 데이터를 교류할 수 있다. PageContext pageContext

 

 

객체 object

Sungjuk sj = new Sungjuk()

-> 클래스 : Sungjuk

-> 객체 : new Sungjuk()

-> 참조변수 : sj

-> 사용법 : sj.disp()

 

JSP 파일 경로

D:\java0514\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\basicWeb\org\apache\jsp\basic

 

 

 

즐겨찾기 해놓기

https://docs.oracle.com/javaee/7/api/toc.htm

 

 

다시 자바개념 복습하기

https://seaweedisland.tistory.com/30

 

06월 05일 수 | 프로그래밍기초와 JAVA 여태까지 개념 정리 (6/13 갱신)

1. 비트(bit)란? 비트는 컴퓨터를 이해하기 위한 가장 기본적인 용어로, Binary Digit의 약칭이다. 0과 1로 만 구성된 이진법(ex. 101001)을 이용하며, 컴퓨터 이용 시 흔히 접할 수 있는 1바이트 (Byte)는 8비트(..

seaweedisland.tistory.com

 

 

 

interface ServletRequest {} 
interface HttpServletRequset extends ServletRequest{}	
class HttpServletRequestWrapper implements HttpServletRequest {}	
HttpServletRequest request = new HttpServletRequestWrapper();

 

 

 

JSP로 정보전송하기

1) JSP파일 작성

사용자가 입력한 정보를 서버로 전송하기 위한 양식
name: 웹서버에서 사용
id: 주로 Javascript, jQuery에서 사용
method: 전송방식, get | post 방식, 생략시 
action: 사용자가 요청한 정보를 서버가 받아서 처리할 경우 
enctype: 폼에서 파일을 첨부해서 서버로 전송하고자 할 때 multipart/form-data 추가

 

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8">
<title>06_form기초.jsp</title>
</head>
<body>

<!-- <form></form>
	사용자가 입력한 정보를 서버로 전송하기 위한 양식
	name: 웹서버에서 사용
	id: 주로 Javascript, jQuery에서 사용
	method: 전송방식, get | post 방식, 생략시 
	action: 사용자가 요청한 정보를 서버가 받아서 처리할 경우 
	enctype: 폼에서 파일을 첨부해서 서버로 전송하고자 할 때 multipart/form-data
 -->

<h1>* 성적입력 *</h1>
	<form name="sungjukfrm" id="sungjukfrm" method="get" action="06_formok.jsp" enctype="multipart/form-data">
	  이름: <input type ="text" name ="uname" id = "uname" size="10" maxlength="10" required> 
	  <hr>
	  국어: <input type ="number" name ="kor" id = "kor" size="5" min="0" max="100">
	  <hr>
	  영어: <input type ="text" name ="eng" id = "eng" size="5" min="0" max="100">
	  <hr>
	  수학: <input type ="text" name ="mat" id = "mat" size="5" min="0" max="100">
	  <hr>
	  평균: <input type ="text" name ="aver" id = "aver" size="5" min="0" max="100">
	  
	  <input type ="submit" value="전송">
	  <input type ="reset" value="취소">
	  

	</form>

</body>
</html>

 

 

2) 06_formok.jsp

request 내부객체
-> 사용자가 요청한 정보를 관리하는 객체
request.getParameter("")
-> 요청한 정보를 개별적으로 가져올때
-> 예) input type=text name=kor
request.getParameter("kor")

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>성적결과</h1>
	<%
	//request 내부객체
	//-> 사용자가 요청한 정보를 관리하는 객체
	//request.getParameter("")
	//-> 요청한 정보를 개별적으로 가져올때
	//-> 예) <input type=text name=kor>
	// request.getParameter("kor")
		
	out.print(request.getParameter("uname"));
	out.print("<hr>");
	out.print(request.getParameter("kor"));
	out.print("<hr>");
	out.print(request.getParameter("eng"));
	out.print("<hr>");
	out.print(request.getParameter("mat"));
	out.print("<hr>");	
	
	
	%>

</body>
</html>

 

 

 

그래서 실행하면

input에 내용을 입력하고 전송하면 제대로 결과가 전송된다.

 

 

GET

- 전송방식

method= get 방식

-> 생략가능하다

-> 사용자가 요청한 정보가 URL에 노출

-> 이런 식으로

?표를 기점으로 전송된 정보가 그대로 노출되었다.

 

-> ok.jsp?서버로 전송되는 값들

-> ok.jsp?변수=값1&값2&값3...

-> 검색엔진 검색어에서 사용됨

 

 

POST

- 전송방식

method = post 방식

-> 사용자가 요청한 정보가 URL에 노출되지 않고

-> 패키지화 되어서 서버로 전송된다.

한글은 깨져서 나온다. 이부분도 해결할 수 있어야한다.

 

 

06_formok.jsp를 수정해보면,

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>성적결과</h1>
	<%
	//1) 한글 UTF-8 인코딩하기
	request.setCharacterEncoding("UTF-8");
	
	//2) 사용자 입력 요청한 정보를 개별적으로 가져오기
			
	String uname = request.getParameter("uname");	
	int kor = Integer.parseInt(request.getParameter("kor"));	
	int eng = Integer.parseInt(request.getParameter("eng"));	
	int mat = Integer.parseInt(request.getParameter("mat"));
	out.print("<hr>");	
	out.print(uname+"의 성적은");
	out.print("<br>");
	out.print("국어:"+ kor);
	out.print("<br>");	
	out.print("영어:"+ eng);
	out.print("<br>");
	out.print("수학:"+ mat);
	out.print("<hr>");
	out.print("평균:"+ (kor+eng+mat)/3);
	
	%>

</body>
</html>

 

 

이렇게 결과가 나온다.

 

 

 

테이블에서 넣어서 출력하기

 

 

계산기 만들기

계산기 예제를 통해 jsp실습하기

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html">
<html>
 <head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Iceland&display=swap" rel="stylesheet">
  <title>디지털계산기</title>
    <style>
    body {background: #21222b; color:#fff;}
    h1 {color:#fff;}
    </style>

</head>
<body onkeydown="enter(event)">

  <div id="calculator"></div>
  <div class="frm">
     <h1>DIGITAL CACULATOR</h1>
     <form name="calcfrm" id="calcfrm" method="get" action="07_calcok.jsp">
     	첫번째 수: <input type="number" name="num1" min="" max="" required>
     	<hr>
     	연산자 : <input type="text" name="op" size="3" required>
     	<hr>
     	두번째 수: <input type="number" name="num2" min="" max="" required>
     	<br>    
     	
     	<input type ="submit" value="전송">
	  	<input type ="reset" value="취소">
	  	<br>	  	
</form>
</div>
</html>

 

ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {background: #21222b; color:#fff;}
</style>
</head>
<body>
<% 
	int num1 = Integer.parseInt(request.getParameter("num1"));
	int num2 = Integer.parseInt(request.getParameter("num2"));
	String str = request.getParameter("op");
	char op = str.charAt(0);
	double ans=0.0; //초기화
	
	//Switch문으로 연산기호 받아서 연산
	switch(op){
	case '+': ans = num1+num2 ; break;
	case '-': ans = num1-num2 ; break;
	case '*': ans = num1*num2 ; break;
	case '/': ans = (double)num1/num2 ; break;	
	};
	
	//소수점 자리 .0 일 경우 생략하는 코드
	if(ans == (long) ans) {
		out.print(String.format("%d",(long)ans));
     } else {
    	out.print(String.format("%s",ans));	 
     }     
	  
%>
<table border='1'>
	<tr>
		<td><%=num1%></td>
		<td><%=op%></td>
		<td><%=num2%></td>
		<td><%
		if(ans == (long) ans) {
			out.print(String.format("%d",(long)ans));
	     } else {
	    	out.print(String.format("%s",ans));	 
	     } 
		%></td>
	</tr>
</table>


</body>
</html>

 

결과는

 

 

 

다양한 컨트롤 요소들

폼요소들을 전송하고 값을 받아오는 것이다.

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8">
<title>다양한 컨트롤 요소들</title>
<style>
.content {margin: 0 auto; width: 800px; padding: 40px;}
.contentForm {background: #fbfbfb; border: 1px solid #e4e4e4; padding: 30px;}
.content .user {margin: 20px 0; font-size: 12px;}
.blank {width: 100%; height: 30px; margin-bottom: 15px; box-sizing:border-box;}

.user label {font-size: 14px; font-weight: bold; margin: 10px 0px; display:block; width: 100%;}
.user input {padding:4px; border: 1px solid #e4e4e4;}
.comment {width: 100%; margin-bottom: 15px; height: 100px; border: 1px solid #e4e4e4; box-sizing:border-box;}
.user button {font-size: 16px; width: 100%; height: 34px; background: #4ec53d; border: 1px #08a600; color:#fff;}

</style>


</head>
<body>
	<h1>다양한 컨트롤 요소들</h1>
	<div class="content">					
		<h4 class="subtitle">회원가입</h4>					
			<form method="get" action = "08_ok.jsp" enctype="">
				<div class="contentForm">
				<div class="user user_id">
				<label for="user_id">아이디</label>
					<input type="text" class="blank" name="user_id" value="">
				</div>

				<div class="user user_pw">
					<label for="user_pw">비밀번호</label>
					<input type="password" class="blank" name="user_pw" value="">
				</div>

				<div class="user user_name">
					<label for="user_nm">이름</label>
					<input type="text" class="blank" name="user_nm" value="">
				</div>
				
				<div class="user user_num1">
					<label for="user_num1">숫자1</label>
					<input type="text" class="blank" name="num" value="">
					
					<label for="user_num1">숫자2</label>
					<input type="text" class="blank" name="num" value="">
					
					<label for="user_num1">숫자3</label>
					<input type="text" class="blank" name="num" value="">
				</div>
				
				<div class="user user_gender">
					<label for="gender">성별</label>
					<input type="radio" name="gender" id="gender" value="M" checked><span>남자</span>
					<input type="radio" name="gender" id="gender" value="F" ><span>여자</span>
				</div>
				
				<div class="user user_agree">
					<label for="agree">약관동의</label>
					<input type="checkbox" name="agree" id="agree" value="y" checked><span>동의</span>
					<input type="checkbox" name="agree" id="agree" value="n" ><span>동의안함</span>
				</div>
				
				<div class="user user_sms">
					<label for="sms">SMS</label>
					<input type="checkbox" name="sms" id="sms"><span>SMS동의</span>
				</div>
				
				<div class="user user_tel">
							<label for="user_tel">통신사</label>
							<select name="telecom" id="user_tel">
								<option value="">통신사</option>
								<option value="SK">SK</option>
								<option value="KT">KT</option>
								<option value="LG">LG</option>					
							</select>							
				</div>
								
				<!-- 폼요소이지만 본문에 출력은 안되는 요소 -->
				<input type ="hidden" name="page" value="7">
				
				<!-- 첨부파일 form enctype="" 추가해야한다. -->
				<input type ="file" name="attach">

				
						
				<div class="user user_comment">
					<label for="comment">가입인사</label>
					<textarea class="comment" name="comment" id="comment"></textarea>					
				</div>
				
				<div class="user user_submit">
				<button name="join" type="submit">가입하기</button>
				</div>		
				
			</div>						
			</form>					
					
					
	</div>
	
</body>
</html>

 

 

 

ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
table{border: 1px solid #ddd; border-collape: collapsed;}
tr {align-items: center; text-align: center; }
td { width: 120px; height: 50px; font-size: 14px;}

</style>
</head>
<body>
	<%	
	request.setCharacterEncoding("UTF-8");
	String uid = request.getParameter("user_id").trim();
	String upw = request.getParameter("user_pw").trim();
	String uname = request.getParameter("user_nm").trim();
	String comment = request.getParameter("comment").trim();
	
	//동일한 이름의 name값은 배열로 받아온다.
	String[] num = request.getParameterValues("num");	
	int size = request.getParameterValues("num").length;
	
	
	//성별
	String gender = request.getParameter("gender");
	
	//약관동의
	String agree = request.getParameter("agree");
	
	//SMS동의 , checkbox에 value가 없는경우는 체크시 on이 넘어감 체크안하면 null
	String sms = request.getParameter("sms");
	
	//통신사
	String telecom = request.getParameter("telecom");
	
	//hidden
	request.getParameter("page");
	
	//첨부파일
	String file = request.getParameter("attach");
	
	
	//textarea값은 엔터를 <br>로 치환해서 출력해야한다.
	comment = comment.replace("\n", "<br>");
		
	//request객체에 존재하지 않는 정보를 가져오면 어떤값이 나오나
	//-> null값이 반환된다.
	//out.print(request.getParameter("kor"));
	
	%>
		
	<table border='1'>
		<tr>
			<th>아이디</th>
			<th>비밀번호</th>
			<th>이름</th>
			<th>가입인사</th>
			<th>성별</th>
			<th>숫자1</th>
			<th>숫자2</th>
			<th>숫자3</th>			
			<th>약관동의</th>			
			<th>SMS동의</th>			
			<th>통신사</th>			
			<th>첨부파일</th>			
		</tr>
		
		<tr>
			<td><%=uid%></td>
			<td><%=upw%></td>
			<td><%=uname%></td>
			<td><%=comment%></td>		
			<td><%=gender%></td>		
			<td><%=num[0]%></td>
			<td><%=num[1]%></td>
			<td><%=num[2]%></td>
			<td><%=agree%></td>
			<td><%=sms%></td>
			<td><%=telecom%></td>
			<td><%=file%></td>
		</tr>
	
	</table>
	
	
</body>
</html>

 

저작자표시 비영리

'Backend' 카테고리의 다른 글

08월 27일 화 | JSP 05 - JSP CRUD 게시판 삭제, 수정  (0) 2019.08.27
08월 26일 월 | JSP 04 - JSP CRUD 게시판 생성, 목록, 상세페이지  (1) 2019.08.26
08월 22일 목 | JSP 02 - JSP 문법  (0) 2019.08.22
08월 21일 수 | JSP 01 - 톰캣설치, 개발환경설정  (0) 2019.08.21
08월 07일 수 | 데이터입출력 구현 03 - 백업 및 복원  (2) 2019.08.07

관련글

댓글

티스토리툴바