1. 서버를 활용해보자!
이제 본격적으로 JSP를 다이나믹하게 사용해보자.
바로바로, 서버로 데이터를 전송하는 것이다.
이 때 사용하는 것이 바로 form!
사용자가 입력한 데이터를 전송시키는 기능을 한다.
<h3>* 성적 입력 *</h3>
<form name="sungjukfrm" id="sungjukfrm" method="get" action="06_ok.jsp">
이름 : <input type="text" name="uname" id="uname" size="10" maxlength="20" placeholder="이름" required>
<hr>
국어 : <input type="number" name="kor" id="kor" size="5" min="0" max="100">
<hr>
영어 : <input type="number" name="eng" id="eng" size="5" min="0" max="100">
<hr>
수학 : <input type="number" name="mat" id="mat" size="5" min="0" max="100">
<hr>
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
여기서 전송을 누르면 입력된 정보를 06_ok.jsp 가 받게 하려고 한다.
2. <form>의 다양한 속성들
우선 <form>의 다양한 속성들에 대해 알아보자.
1) name : 폼의 이름, 서버에서 식별하기 위한 이름
2) id : 폼의 아이디, Frontend단에서 식별자로 주로 사용
3) method : 폼의 전송방식, Get과 Post 방식으로 나뉜다. 생략시 Get 방식이 default 값이다
4) action : 사용자가 요청한 정보를 서버가 받아서 처리할 결과 페이지
5) enctype : 폼에서 파일을 첨부해서 서버로 전송하고자 할 때 "multipart/form-data" 추가
3. 폼의 전송방식
Http 프로토콜이 제공해주는 메서드들 중 웹서비스 개발에 주로 사용하는 GET 메서드와 POST 메서드에 대하여 알아보자.
1) GET 메서드와 POST 메서드란?
① method = get 방식
- 생략 시 기본값
- 사용자가 입력 요청한 정보가 URL 그대로 노출
② method = post 방식
- 사용자가 요청한 정보가 URL에 노출되지 않고 패키지화하여 전송
사용자가 URL을 브라우저 주소창에 작성하고 엔터를 누르면 원하는 웹페이지가 나온다.
사용자는 웹페이지를 보기위해 단순한 일을 한 것이지만 특정 웹페이지를 사용자 웹브라우저에게 보여주기 위해서는 내부적인 처리들이 있다.
그 내부적인 처리에서 클라이언트가 서버에게 웹페이지를 보여달라고 말하는 것을 요청이라 부르고 서버가 클라이언트에게 요청받은 것에 대한 대답으로 웹페이지 내용을 표현하기 위해 html문서로 주는것을 응답이라 부른다.
2) HTTP 패킷
클라이언트가 서버로 요청을 했을때, 보내는 데이터를 HTTP 패킷이라 표현한다.
HTTP 프로토콜을 쓰므로, 앞에 HTTP가 붙고 인터넷을 통해 보내는 데이터를 패킷이라 표현하므로 HTTP패킷 이라 부른다.
HTTP 패킷의 구조는 크게 헤더와 바디로 나뉘어진다.
헤더에는 7가지 HTTP 메서드 방식중 무엇을 썻는지, 클라이언트의 정보, 브라우저 정보, 접속할 URL 등등 과 같은 클라이언트 정보를 담는다. 바디는 보통 비어있다. 하지만, 특정 데이터를 담아서 서버에게 요청을 보낼 수 있다.
이러한 웹 개념아래, 우리는 GET메서드와 POST메서드를 통해서 요청을 할 수 있다.
3) GET방식 vs POST방식
두 방식 모두, 서버에 요청을 하는 메서드이다.
클라이언트가 서버에 요청을 할때, 제공해야 하는 자원이 있다고 하자.
예를 들면, 어떤 홈페이지의 로그인 페이지에서 로그인을 하는 경우이다.
아이디와 패스워드는 클라이언트가 작성한 후, 그 정보를 서버에 요청하여 클라이언트가 작성한 아이디와 패스워드가 올바른 것인지 검사를 해야한다.
위의 예시를 보듯, 요청에는 자원을 보내야 하는 경우가 존재한다.
- GET방식으로 데이터를 보내기
클라이언트의 데이터를 URL뒤에 붙여서 보낸다. 위에서 쓴 예시처럼 아이디 패스워드를 보낸다고 하면,
www.itwill.com?id=itwill&pass=1234 (예시로 쓴 URL입니다. 존재하지 않습니다.)
이런 식으로 보낸다.
URL 뒤에 "?" 마크를 통해 URL의 끝을 알리면서, 데이터 표현의 시작점을 알린다.
데이터는 key 와 value 쌍으로 넣어야 한다 윗 예시에서의 key는 id 랑 pass고 value는 soldesk와 1234가 되겠다.
중간에 &마크는 구분자 이다. 2개이상의 key - value 쌍 데이터를 보낼때는 &마크로 구분해준다.
URL에 붙이므로, HTTP패킷의 해더에 포함되여 서버에 요청한다.
따라서, GET 방식에서 BODY에 특별한 내용을 넣을 것이 없으므로 BODY가 빈상태로 보내진다.
그러므로, 헤더의 내용중 BODY 데이터를 설명하는 Content-Type이라는 헤더필드는 들어가지 않는다.
URL형태로 표현되므로, 특정 페이지를 다른사람 에게 접속하게 할 수 있다.
또한 간단한 데이터를 넣도록 설계되어, 데이터를 보내는 양의 한계가 있다.
- POST방식으로 데이터를 보내기
POST 방식은 GET 방식과 달리, 데이터 전송을 기반으로 한 요청 메서드이다.
GET방식은 URL에 데이터를 붙여서 보내는 반면, POST방식은 URL에 붙여서 보내지 않고
BODY에다가 데이터를 넣어서 보낸다.
따라서, 헤더필드중 BODY의 데이터를 설명하는 Content-Type이라는 헤더 필드가
들어가고 어떤 데이터 타입인지 명시한다.
컨텐츠 타입으로는 여러가지가 있다
① application/x-www-form-urlencoded
② text/plain
③ multipart/form-data
등이 있다.
따라서 POST 방식으로 데이터를 보낼때는 위와 같이 컨텐츠 타입을 꼭 명시해줘야한다.
보통 작성하지 않는 경우는 1번의 컨텐츠 타입으로 셋팅된다.
①의 컨텐츠 타입은, GET방식과 마찬가지로 BODY에 key 와 value 쌍으로 데이터를 넣는다. 똑같이 구분자 &를 쓴다.
②의 컨텐츠 타입은, BODY에 단순 txt를 넣는다.
③의 컨텐츠 타입은, 파일전송을 할때 많이 쓰는데 BODY의 데이터를 바이너리 데이터로 넣는다는걸 알려준다.
자바와 같이 oop 프로그래밍에서는 BODY에 데이터를 InputStream/OutputStream 클래스를 통해서 읽고/쓰고 한다.
4) GET방식 과 POST방식에 대한 상식
- POST방식이 GET방식보다 보안측면에서 더 좋다?
POST든 GET이든 보내는 데이터는 전부 클라이언트측에서 볼 수 있다.
단지 GET방식은 URL에 데이터가 표시되여 별다른 노력없이 볼 수 있어서지,
두 방식 전부 보안을 생각한다면 암호화 해야한다.
- GET방식이 POST방식보다 속도가 빠르다?
빠른건 맞다. 하지만 왜 빠른지를 알아야 하는데,
이유는 GET방식의 요청은 캐싱(한번 접근 후, 또 요청할 시 빠르게 접근하기 위해 데이터를 저장시켜 놓는 것)때문에 빠른것이다.
4. 06_ok.jsp 만들고 서버로 전송하기
이제 서버를 통해 전송될 jsp 파일을 만들어보자.
이 때 사용되는 것이 request라는 내부 객체이다.
이 request 내부 객체는 사용자가 요청한 모든 정보를 관리하는 객체이다.
우리는 request 객체가 갖고 있는 getParameter 메소드를 사용하려 한다.
// request.getParameter("") 메소드
// -> 사용자가 입력한 정보를 개별적으로 가져올 때
// -> 예)
<input type="text" name="uname">
request.getParameter("uname")
이제 06_ok.jsp에 코드를 작성해보자.
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>");
그리고 서버에서 어느 jsp 파일을 run 해야 할까?
결과가 출력될 ok.jsp 파일이 아니라 결과를 보낼 06_form.jsp 페이지(부모페이지)를 런한다.
값을 입력하고 전송을 하면 아래의 사진처럼 자료들이 서버를 통해 잘 넘어가는 것을 확인할 수 있다.
이 때 get 방식을 했기 때문에 url에 모든 정보가 표기가 된다. 그리고 한글 입력도 가능하다.
(post 방식은 한글 입력이 불가능하다)
post방식으로도 출력해보자.
똑같은 출력 결과가 나오지만 URL의 형태가 다르다.
또한 한글을 입력하면 아래처럼 문자가 깨진다.
이것을 안깨지게 하기 위해선 아래의 메서드를 사용하여 인코딩을 따로 해주어야 한다.
그래서 서버단에선 이 메서드를 꼭 첫줄에 집어넣어준다.
request.setCharacterEncoding("UTF-8");
나중에 이런 것들을 빼먹지 않게 하기 위해 배치관리자인 web.xml 을 사용할 것이다(나중에 알아볼 것이다).
5. 성적 결과 테이블로 전송하기
<h3>* 성적 결과 *</h3>
<%
// method = post 방식이면 한글이 깨지기 때문에 한글을 인코딩하는 작업을 해야한다.
// 한글 인코딩
request.setCharacterEncoding("UTF-8");
// 사용자가 입력 요청한 정보를 개별적으로 가져오기
String uname = request.getParameter("uname").trim();
int kor = Integer.parseInt(request.getParameter("kor").trim());
int eng = Integer.parseInt(request.getParameter("eng").trim());
int mat = Integer.parseInt(request.getParameter("mat").trim());
int aver = (kor+eng+mat)/3;
%>
<!-- 성적 결과 테이블에 출력 -->
<div>
<table>
<tr>
<th>이름</th>
<td><%=uname%></td>
</tr>
<tr>
<th>국어</th>
<td><%=kor%></td>
</tr>
<tr>
<th>영어</th>
<td><%=eng%></td>
</tr>
<tr>
<th>수학</th>
<td><%=mat%></td>
</tr>
<tr>
<th>평균</th>
<td><%=aver%></td>
</tr>
</table>
</div>
'⁂ JSP > : 기본 익히기' 카테고리의 다른 글
| [JSP] #3-3 Request 내부 객체의 다양한 메소드 (0) | 2022.10.05 |
|---|---|
| [JSP] #3-2 다양한 폼 컨트롤 요소에 접근하기 (0) | 2022.10.05 |
| [JSP] #2-4 내부 객체 (0) | 2022.10.05 |
| [JSP] #2-3 사용자 정의 함수 (0) | 2022.10.05 |
| [JSP] #2-2 배열 만들기 (0) | 2022.10.05 |