5차시 웹 Query 문자열

Form Tag : 클라이언트의 입력 데이터를 받음

                                 ↓

Query 획득 : 입력데이터를 Servlet 프로그램에서 얻음

 

학습목표

HTTP Request Method와 상태 코드를 설명할 수 있다.

FORM Tag 작성 방법과 INPUT 태그에 대해 설명할 수 있다.

Query 문자열 전송 방법과 Servlet에서 Query 문자열 획득 방법에 대해 설명할 수 있다.

 

 

HTTP Request Method

클라이언트 요청에 의해 서버에서 수행되기를 원하는 행동을 표현

• HTTP Request Header 정보
• GET, HEAD, POST, PUT, DELETE 등이 사용
  • ★GET : 특정 리소스의 획득 요청
  • HEAD : 특정 리소스의 획득 요청하고 응답 Header 정보 취득
  • ★POST : 특정 데이터를 전달하는 요청
  • PUT : 특정 리소스의 수정 요청
  • DELETE : 특정 리소스의 삭제 요청

기본적으로 브라우저는 클라이언트의 요청을 서버에 보낼 때 Request Header 값에 지정하게 되어 있음

 

HTTP 응답 상태 코드

HTTP Response에는 클라이언트의 요청이 어떻게 처리되었는지를 표현하는 상태코드가 표현됨

 

상태 코드 표현 방법

숫자로 표현 : 100번 그룹~500번 그룹까지 5개의 그룹으로 구분됨

• 200번 그룹 : 클라이언트의 요청이 성공적으로 처리된 상태
• 400번 그룹 : 클라이언트의 요청이 잘못된 상태
  • 401 : 인증오류
  • 403 : 사용자 허가 모드 오류
  • 404 : 요청한 파일이 존재하지 않음
  • 405 : 요청한 Method를 지원하지 않음
• 500번 그룹 : 서버사이드에서 요청을 처리하다 오류가 발생한 상태
  • 500 : Internal Server Error (실행오류) - 서버 오류

 

FORM Tag (전체 설정을 위한 Tag)

클라이언트 데이터 입력 폼 정의

입력한 데이터를 서버에 전송하기 위한 설정

<FORM NAME="myForm" METHOD="get" ACTION="TestServlet">

</FORM>

--> TestServlet URL에 get방식으로 클라이언트의 데이터를 넘겨라

• NAME : FORM 태그의 이름으로 하나의 HTML 파일에 여러 FORM 태그를 식별할 때 이용
• ACTION : 사용자가 입력한 정보를 가지고 호출할 서버의 URL

 

INPUT Tag (하나하나 입력을 받기 위한 Tag)

INPUT 태그는 사용자로부터 입력값을 받아들이기 위한 태그

필수 속성은 TYPE과 NAME이며 VALUE, SIZE, MAXLENGTH 등의 선택 옵션이 정의될 수도 있음

<INPUT TYPE="text|password|checkbox..."
       NAME="tage_name"
       VALUE="default_value"/>

• TYPE : 기본값은 TEXT이며, PASSWORD, CHECKBOX 등 INPUT의 타입 지정
• NAME : 입력되는 값의 식별자
• VALUE : 초기값 지정

 

TEXT

Address :
<INPUT TYPE="text" NAME="address"/>

클라이언트에게 문자열을 입력 받기 위한 TEXTFIELD 제공

 

PASSWORD

Address :
<INPUT TYPE="password" NAME="password"/>

비밀번호 입력, 입력된 데이터가 ' * ' 로 표시

 

CHECKBOX (true/false 값을 입력하는 CHECKBOX로 여러 개 선택 가능)

사용자가 항목을 선택할 수 있는 칸 제공

선택된 경우에만 NAME / VALUE 쌍을 전달

여러 개의 CHECKBOX에 같은 이름을 제공하는 것이 가능

선택 속성인 CHECKED 속성은 초기 상태를 선택된 상태로 만듦

One
<INPUT TYPE="checkbox" NAME="choice"/>
Two
<INPUT TYPE="checkbox" NAME="choice" VALUE="two"/>
Three
<INPUT TYPE="checkbox" NAME="choice" VALUE="three"/>
Four
<INPUT TYPE="checkbox" NAME="choice" VALUE="four" checkded/>

 

RADIO

한 번에 한 개만 선택 가능

RADIO 타입에는 VAUE 값이 지정되어 있어야 하며 선택 시 VALUE 값이 전송

CHECKED 속성으로 초기 선택 상태로 지정 가능

One
<INPUT TYPE="radio" NAME="choice" VALUE="one"/>
Two
<INPUT TYPE="radio" NAME="choice" VALUE="two"/>
Three
<INPUT TYPE="radio" NAME="choice" VALUE="three"/>
Four
<INPUT TYPE="radio" NAME="choice" VALUE="four" checkded/>

 

SELECT Tag (=Combobox)

선택적으로 고를 수 있는 리스트 상자 제공

MULTIPLE 속성을 적용하면 사용자가 한번에 한 개 이상 선택할 수 있음

각 항목은 옵션 속성으로 표시하고, 최소 한 개 이상의 옵션이 필요함

선택적 항목인 SELECTED는 초기 화면에 선택되는 요소를 나타냄

<SELECT NAME="JOB">
 <OPTION VALUE="학생">학생
 <OPTION VALUE="회사원">회사원
 <OPTION VALUE="교사">교사
</SELECT/>

와 컴활1급 생각난다 .........

 

TEXTAREA Tag (큰 사이즈)

여러 행을 작성할 수 있는 텍스트 상자를 만듦

ROWS는 화면에 표시되는 줄 수를, COLS는 상자의 폭을 결정함

<TEXTAREA NAME="COMMENT" ROWS="5" COLS="50">
</TEXTAREA/>

 

 

Query 문자열

• 클라이언트에서 요청 시 서버에 전송하는 데이터
• Key-Value 형식의 문자열
  • Key와 Value는 "="로 연결
  • 데이터와 데이터는 "&"로 연결
  • 예: id=kkang&password=1234

GET Method의 Query 전송

• HTTP Method가 지정되지 않으면 GET 적용
• Request Header의 URL에 Query 문자열을 추가해서 전송
• URL 뒤에 "?"을 붙이고 그 뒤에 Query 문자열 추가
• 예: http://localhost:8080/servlet/loginServlet?id=kkang&password=1234
• 한계
  
  • 안전하게 전송할 수 있는 Query 문자열의 길이 (대량의 문자를 전송할 수는 없다.)
  • URL 상에 정보가 공개되기 때문에 보안상 중요한 데이터는 GET 방식으로는 부적절

GET방식-Header, POST방식-Body

 

POST Method의 Query 전송

• HTTP Method를 POST로 지정해서 요청
• HTTP Request Body로 Query 문자열 전송
• 전송할 수 있는 데이터 제한 없음 (Post방식은 Header를 이용하지 않고 Body를 이용하기 때문)
• GET 방식보다 보안 우수
• 파일 업로드에 사용 (무조건)

 

Query 문자열 획득

HttpServletRequest 객체의 함수를 이용해 클라이언트가 전달하는 Query 데이터 획득

• getParameter() - 주로 이용
• getParameterValues()
• getParameterMap()
• getParameterNames()

String id = request.getParameter("id");
String phones[] = request.getParameterValues("phone");
Map map = request.getParameterMap();
Enumeration e = request.getParameterNames();

동일 이름으로 여러 개의 데이터가 넘어올 경우 getParameterValues 사용

 

 

실습 : 클라이언트가 입력한 데이터를 Servlet에서 받는 방법

[html 파일 만들기 경로] src > main > webapp > new folder > new html

 

input.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<form method="get" action="/WebLab/QueryServlet">
name : <input type="text" name="name"/><br/>
password : <input type="password" name="password"/><br/>
성별 : <input type="radio" name="sex" value="남성"/>남성
<input type="radio" name="sex" value="여성"/>여성
<br/>
관심사항 : <input type="checkbox" name="favor" value="정치"/>정치
<input type="checkbox" name="favor" value="경제"/>경제
<input type="checkbox" name="favor" value="역사"/>역사
<br/>
직업
<select name="job">
	<option>학생
	<option>주부
	<option>회사원
</select>
</br>
자기소개
<textarea name="comments" rows="10" cols="35">
</textarea>
<br/>
<input type="submit" value="전송"/>
</form>
</body>
</html>

 

QueryServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("euc-kr");
		response.setContentType("text/html;charset=EUC-KR");
		
		// 클라이언트의 요청 값을 브라우저로 전송하는 구성
		PrintWriter out = response.getWriter();
		out.println("<h1>Query Test</h1>");
		out.println("name : " + request.getParameter("name")+"<br/>");
		out.println("password : " + request.getParameter("password")+"<br/>");
		out.println("sex : " + request.getParameter("sex")+"<br/>");
		out.println("관심사항 : ");
		// 여러개 들어올 수 있기 때문에 getParameterValues 사용
		String favors[] = request.getParameterValues("favor");
		// 전체 몇 건이 들어오든 전체 출력하도록 작성
		for(String favor : favors) {
			out.println(favor + ",");
		}
		out.println("<br/>");
		out.println("job: " + request.getParameter("job")+"<br/>");
		out.println("comments: " + request.getParameter("comments"));
	}

html에서 데이터를 체크, 입력하고 전송버튼을 눌렀을 때 나오는 결과이다.

클라이언트의 요청 데이터인 쿼리데이터를 서블릿에서 받는 실습을 진행했다.

처음에 전송 눌렀을 때 오류메시지가 떠서 당황했는데 input.html 상단의 URL에서 WebLab 대소문자를 구분해서 적어주고 왠지 모르게 사라진 </body> </html> 써주니 잘 작동했다.