서블릿 동적인 페이지

정적인 페이지(Static Page)

서버에 미리 저장된 그대로의 내용을 사용자에게 제공하는 페이지이다.

서버에서 추가적인 처리없이 클라이언트에게 제공되며 주로 HTML, CSS, JavaScript등의 정적 파일로 구성된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		<form action="calc2" method="post">
			<div>
				<label>입력 : </label>
				<input type="text" name="v" />
			</div>
			<div>
				<input type="submit" name="operator" value="+" />
				<input type="submit" name="operator" value="-" />
				<input type="submit" name="operator" value="=" />
			</div>
			<div>
				결과 : 0
			</div>
		</form>
	</div>
</body>
</html>

동적인 페이지(Dynamic Page / Server Page)

서버에서 데이터를 처리 후 생성되는 페이지다.

서버에서 필요한 추가적인 처리를 거친 후에 클라이언트에게 제공되며 데이터베이스와의 상호작용을 통해 필요한 정보를 가져와 동적인 페이지를 생성한다.

계산기에 적용

CalcPage 서블릿

@WebServlet("/calcpage")
public class CalcPage extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    	Cookie[] cookies = request.getCookies();
    	
    	String exp = "0"; 
    	// 쿠키배열이 null이 아닌 경우만
    	if(cookies!=null) {
    		for(Cookie c :  cookies) {
    			if(c.getName().equals("exp")) {
    				exp = c.getValue();
    				break; 
    			}
    		}
    	}
    	
    	response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		

        out.println("<!DOCTYPE html>");
        out.println("<html>");
        out.println("<head>");
        out.println("<meta charset=\"UTF-8\">");
        out.println("        <title>Calc</title>");
        out.println("        <style>");
        out.println("            input{");
        out.println("                width: 50px;");
        out.println("                height: 50px;");
        out.println("            }");
        out.println("            .output{");
        out.println("                height: 50px;");
        out.println("                font-size: 24px;");
        out.println("                font-weight: bold;");
        out.println("                background: gray;");
        out.println("                text-align: right;");
        out.println("                padding-right: 5px;");
        out.println("            }");
        out.println("        </style>");
        out.println("     </head>");
        out.println("     <body>");
        out.println("      <form action=\"calc3\" method=\"post\">");
        out.println("        <table>");
        out.println("            <tr>");
        out.printf("               <td class=\"output\" colspan=\"4\">%s</td>\n", exp);
        out.println("            </tr>");
        out.println("            <tr>");
        out.println("                <td><input type=\"submit\" name=\"operator\" value=\"CE\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"operator\" value=\"C\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"operator\" value=\"≪\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"operator\" value=\"/\"/></td>");
        out.println("            </tr>");
        out.println("            <tr>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"7\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"8\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"9\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"operator\" value=\"*\"/></td>");
        out.println("            </tr>");
        out.println("            <tr>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"4\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"5\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"6\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"operator\" value=\"-\"/></td>");
        out.println("            </tr>");
        out.println("            <tr>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"1\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"2\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"3\"/></td>");
        out.println("               <td><input type=\"submit\" name=\"operator\" value=\"+\"/></td>");
        out.println("            </tr>");
        out.println("            <tr>");
        out.println("                <td></td>");
        out.println("                <td><input type=\"submit\" name=\"value\" value=\"0\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"dot\" value=\".\"/></td>");
        out.println("                <td><input type=\"submit\" name=\"operator\" value=\"=\"/></td>");
        out.println("            </tr>");
        out.println("        </table>");
        out.println("      </form>");
        out.println("    </body>");
        out.println("</html>");
    }
}

Calc3 서블릿

@WebServlet("/calc3")
public class Calc3 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 클라이언트로부터 전송된 쿠키를 읽어옴
        Cookie[] cookies = req.getCookies();
        
        // 사용자가 입력한 값(value), 연산자(operator), 소수점(dot)을 가져옴
        String value = req.getParameter("value");
        String operator = req.getParameter("operator");
        String dot = req.getParameter("dot");

        // 이전에 저장된 계산식을 읽어옴
        String exp = "";
        if (cookies != null) {
            for (Cookie c : cookies) {
                if (c.getName().equals("exp")) {
                    exp = c.getValue();
                    break;
                }
            }
        }

        // '=' 연산자가 들어온 경우, 계산식(exp)을 처리
        if (operator != null && operator.equals("=")) {
        	// Graal.js 엔진을 사용하여 계산식 처리
        	ScriptEngine engine = new ScriptEngineManager().getEngineByName("graal.js"); 
        	try {
        		// 계산식을 평가하여 결과를 문자열로 변환
        		exp = String.valueOf(engine.eval(exp));
			} catch (ScriptException e) {
				// 스크립트 평가 중 오류가 발생한 경우
				e.printStackTrace();
			} 
        } else {
            // 입력값(value), 연산자(operator), 소수점(dot)을 기존의 계산식에 추가
            exp += (value == null) ? "" : value;
            exp += (operator == null) ? "" : operator;
            exp += (dot == null) ? "" : dot;
        }

        // 계산식을 쿠키로 저장
        Cookie expCookie = new Cookie("exp", exp);
        resp.addCookie(expCookie);

        // "calcpage"로 리다이렉트
        resp.sendRedirect("calcpage");
    }
}

각 서블릿의 역할

CalcPage 서블릿
- 쿠키에서 이전에 저장된 계산식을 읽어와서 화면에 표시
- HTML 폼을 사용하여 사용자에게 입력을 받고, 사용자의 입력을 다시 Calc3 서블릿으로 전송
- Calc3 서블릿에서 계산된 결과를 다시 받아와서 화면에 표시
- 사용자가 입력한 값(value), 연산자(operator), 소수점(dot)을 가져와서 이전에 저장된 계산식과 결합
- 결합된 계산식을 쿠키에 저장하여 클라이언트로 전송
- 마지막으로 "/calcpage"로 리다이렉트하여 결과를 표시할 페이지로 이동Calc3 서블릿

동작과정

사용자가 브라우저를 통해 웹 애플리케이션에 접속한다.
사용자가 "/calcpage" 페이지를 요청한다. 이때, 클라이언트는 HTTP 요청을 서버로 전송한다.
서버는 "/calcpage"에 매핑된 CalcPage 서블릿을 실행한다.
CalcPage 서블릿은 클라이언트로부터 전송된 쿠키를 읽어오며 처음 요청이므로 쿠키는 미포함이다.
사용자에게 입력 폼과 함께 이전에 입력한 계산식을 포함한 HTML 페이지를 응답한다.

6. 사용자가 입력 폼을 사용하여 계산식을 입력하고 제츨하면 클라이언트는 입력된 데이터와 함께 "/calc3" 페이지를 요청한다. // <form action=\"calc3\" method=\"post\">")

7. Calc3 서블릿은 사용자가 입력한 데이터를 받아와서 이전에 저장된 계산식과 결합한다.
8. 결합된 계산식을 쿠키에 저장하여 클라이언트로 전송하는데 Calc3 서블릿은 클라이언트를 "/calcpage" 페이지로 리다이렉트한다.

9. CalcPage 서블릿을 실행한다. 이때, 클라이언트가 전송한 쿠키를 읽어와서 이전에 저장된 계산식을 가져온다.

10. CalcPage 서블릿은 사용자에게 입력 폼과 함께 이전에 입력한 계산식을 포함한 HTML 페이지를 응답한다.

쿠키 삭제

1. 쿠키를 사용하는 값을 비운다.

else if(operator !=null && operator.equals("C")) {
        	// 
        	exp=""; 
        }

2 . setMaxAge(int second) // 쿠키의 생명주기를 0으로 설정

        // C 누를 시 초기화(쿠키 삭제)
        if(operator!=null && operator.equals("C")) {
            expCookie.setMaxAge(0);
        }

참고 자료 출처 :

https://www.youtube.com/watch?v=zBJm651KcZE&list=PLq8wAnVUcTFVOtENMsujSgtv2TOsMy8zd&index=36

https://www.youtube.com/watch?v=qkGPEAM6bmo&list=PLq8wAnVUcTFVOtENMsujSgtv2TOsMy8zd&index=38

https://www.youtube.com/watch?v=OIosefk9PbA&list=PLq8wAnVUcTFVOtENMsujSgtv2TOsMy8zd&index=39

'서블릿 JSP' 카테고리의 다른 글

JSP 기본 구조 (0)	2024.02.26
두 개의 서블릿을 하나로 합치기 (0)	2024.02.26
redirect (0)	2024.02.24
Session & Cookie (0)	2024.02.23
Application 저장소 (0)	2024.02.23