<< 학습 목표 >>

1. 클라이언트에게 "결괏값을 담고 있는 페이지"를 전달할 수 있다.

2. 클라이언트에게 한글을 포함한 데이터를 전달할 수 있다.

앞 글에서는 클라이언트가 Jquery의 ajax를 사용해 요청을 해 서버가 "결괏값" 만 응답했음

이번에는 클라이언트가 그외의 방법 중 form 태그를 사용해 요청을 하고 서버는 "결괏값을 담은 페이지"를 응답하는 방법을 배워보자

항상 그래왔듯 먼저 클라이언트 페이지부터 만들자

앞서 만들었던 ajaxRequest.html 을 복사 붙여넣기 한 후 이름을 formRequest.html로 바꾸자

그리고 그 안에 JS는 모두 지우고 로그인 버튼을 button 태그 대신 input 태그로 바꾸자

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Form으로 요청하는 페이지</title>
</head>
<body>
	<form action="/studyProject/chapter04/login2" method="POST">
		<h1>로그인 페이지</h1>
		<fieldset>
			아이디: <input type="text" name="id">
		</fieldset>
		<fieldset>
			비밀번호: <input type="password" name="pw">
		</fieldset>
		<fieldset>
			<input type="submit" value="로그인">
		</fieldset>
	</form>
</body>
</html>

 

이번에는 서블릿을 만들자 ValureResponse 서블릿을 복사 붙여넣기 하고 PageResponse 로 이름을 바꾸자

경로는 /chapter04/login2 로 바꾸고 아래 코드를 입력하자

package chapter04;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import utility.ParameterUtil;

@WebServlet("/chapter04/login2")
public class PageResponse extends HttpServlet {
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		PrintWriter output = response.getWriter();
		
		String id = ParameterUtil.getString(request, "id");
		String pw = ParameterUtil.getString(request, "pw");
		
		output.print("<html>");
		output.print("<head>");
		output.print("    <meta charset=\"UTF-8\">");
		output.print("    <title>Response Page</title>");
		output.print("    <style>");
		output.print("        p.fail {color: red;}");
		output.print("        p.success {color: blue;}");
		output.print("    </style>");
		output.print("</head>");
		output.print("<body>");
		
		if(id == null || pw == null) {
			output.print("    <p class=\"fail\">ID or PW is empty</p>");
			output.print("    <a href=\"/studyProject/chapter04/formRequest.html\">Go Back!</a>");
		} else {
			String tempId = "myId";
			String tempPw = "myPw";
			
			if(id.equals(tempId) && pw.equals(tempPw)) {
				output.print("    <p class=\"success\">Login Success~!</p>");
			} else {
				output.print("    <p class=\"fail\">ID or PW do not match</p>");
				output.print("    <a href=\"/studyProject/chapter04/formRequest.html\">Go Back!</a>");
			}
		}
		
		output.print("</body>");
		output.print("</html>");
	}

}

 

서블릿을 분석해보자

1. 클라이언트에게 "결괏값을 담은 페이지"를 보내기 위해 응답 정보(HttpServletResponse) 객체에서 PrintWriter 를 꺼냈음

2. 클라이언트가 보낸 id, pw 파라미터 값을 꺼냈음

3. 클라이언트가 id, pw 파라미터를 비정상적인 값으로 보냈을 때 전달할 페이지와 id, pw 파라미터를 정상적인 값으로 보냈을 때 전달할 페이지의 공통 HTML 태그 작성

4. 클라이언트가 id, pw 파라미터를 비정상적인 값으로 보냈다면 "Id or PW is empty" 가 보이는 페이지를 클라이언트에게 전달

5. 클라이언트가 id, pw 파라미터를 정상적인 값으로 보냈다면

6. id와 tempId가 일치하고 pw와 tempPw가 일치한다면 "Login Success~!" 가 보이는 페이지를 클라이언트에게 전달

7. id와 tempId 가 일치하지 않거나 pw와 tempPw 가 일치하지 않는다면 "ID or PW do not match" 가 보이는 페이지를 클라이언트에게 전달

이 서블릿 자체만 놓고 봤을 때 주의 깊게 봐야하는 부분은 클라이언트에게 전달하는 모든 것이 다 영문이라는 점

 

이제 서버를 재시작하고 formRequest.html 페이지에 접속해 로그인을 해보자

이제 앞서 클라이언트에게 "결괏값"을 전달했던 코드와 이번에 "결괏값을 담고 있는 페이지"를 전달하는 코드를 비교해보자

 

결괏값을 전달해야하는 상황이든 결괏값을 담고 있는 페이지를 전달하는 상황이든 PrintWriter 객체를 꺼낸 후 print 를 함

이때 값만 print를 하면 결괏값이 전달되는 것이고 HTML 코드를 print 하면 결괏값을 담고 있는 페이지가 전달되는 것

앞서 결괏값을 보낼때와 이번에 결괏값을 담고 있는 페이지에서 모두 영문만 보냈음

한글을 보내면 어떻게 될까?

위에서 언급한대로 결괏값을 보낼 때와 결괏값을 담고 있는 페이지를 보내는건 한 끗 차이이므로 결괏값을 담고 있는 페이지를 보내는 상황에서만 한글을 보내는 걸 알아보자

여기서 배운 원리는 결괏값을 보낼 때도 마찬가지로 적용됨

 

전체 코드가 길어 바뀐 부분만 가져왔음

바뀐 부분은 서블릿의 doPost 메서드 내 if ~ else 코드임

if(id == null || pw == null) {
	output.print("    <p class=\"fail\">아이디 또는 비밀번호가 비어있습니다.</p>");
	output.print("    <a href=\"/studyProject/chapter04/formRequest.html\">되돌아가기!</a>");
} else {
	String tempId = "myId";
	String tempPw = "myPw";
	
	if(id.equals(tempId) && pw.equals(tempPw)) {
		output.print("    <p class=\"success\">로그인 성공~!</p>");
	} else {
		output.print("    <p class=\"fail\">아이디 또는 비밀번호가 일치하지 않습니다</p>");
		output.print("    <a href=\"/studyProject/chapter04/formRequest.html\">되돌아가기!</a>");
	}
}

 

서버를 재시작하고 formRequest.html 부터 다시 시작해보자

아이디와 비밀번호를 아래와 같이 입력하고 [ 로그인 ] 버튼을 누르면 "아이디 또는 비밀번호가 일치하지 않습니다" 문구가 보여야함

 

그러나 ? 또는 알 수 없는 문자로 채워진 페이지가 보여지게 됨

 

왜이럴까?

Chapter03에서 클라이언트가 서버로 한글 데이터를 보냈을 때 서버에서 어떤 코드를 반드시 써줘야했음

그래야 그 한글 데이터가 정상적으로 꺼내졌음

어떤 코드였을까?

더보기

request.setCharacterEncoding("UTF-8");

이렇게 클라이언트가 서버로 한글 데이터를 보냈을 때 꺼내기 전 반드시 선행 되야할 코드가 있는것처럼 서버가 클라이언트로 한글 데이터를 보낼 때 PrintWriter 객체를 꺼내기 전 반드시 선행 되야하는 코드가 있음

 

response.setCharacterEncoding("UTF-8");

 

이것도 마찬가지로 왜 이래야하는지 이해하려면 서블릿과는 크게 상관이 없는 인코딩부터 얘기해야하므로 외우자

 

서버가 클라이언트로 한글 데이터를 보낼 때는 PrintWriter 객체를 꺼내기 전 반드시 response.setCharacterEncoding("UTF-8"); 코드를 써야한다.(1)

 

여기서 중요한 점은 PrintWriter 객체를 꺼내기 전! 이라는 것임

꺼낸 후에는 저 코드를 입력해도 무용지물임

728x90
LIST
저작자표시 비영리 변경금지 (새창열림)

'Servlet + JSP > Serlvet-Chapter04' 카테고리의 다른 글

Chapter04. 포워딩(Forwarding) / 클라이언트 몰래 요청 넘기기  (2) 2023.03.03
Chapter04. 포워딩(Forwarding) / 클라이언트에게 "여기로 가!" 지시하기  (0) 2023.03.02
Chapter04. 클라이언트에게 JSON 데이터 전달하기  (0) 2023.03.02
Chapter04. 클라이언트에게 상태 코드 담아 전달하기  (0) 2023.03.02
Chapter04. 서버가 클라이언트에게 처리 결과 전달(응답) 하기  (0) 2023.03.01

티스토리툴바