Server 공부 흐름
[Servlet] --HTML코드 출력 문제--> JSP --스파게티 코드 문제--> JSP MVC -> Spring MVC -> SpringBoot
동적 페이지의 필요성
여태까지 html파일을 통한 페이지들은 정적(static)이었다.
정적(static)인 페이지 : 저장된 그대로만 전달되는 페이지
동적(dynamic)인 페이지 : 데이터를 처리한 뒤 생성되는 페이지
정적 페이지
calc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calc</title>
</head>
<body>
<form action="calc" method="post">
<div>
<label>입력 : </label><input type="text" name="value"/>
</div>
<div>
<input type="submit" name = "op" value="+"/>
<input type="submit" name = "op" value="-"/>
<input type="submit" name = "op" value="="/>
</div>
<div>
Result : 0
</div>
</form>
</body>
</html>calc.html을 요청하면 언제나 저장된 이대로만 전달된다.
하지만 이 페이지로는 Result : # #에 연산 결과가 누적되는 페이지를 구현할 수 없다.
따라서 데이터를 처리한 뒤 페이지를 생성하는 동적인 페이지가 필요하다.
동적 페이지
클라이언트에서 서버로 요청이 들어올 때, 서버는 들어온 요청에 걸맞는 페이지를 생성 후 응답하게 된다.
서버에서 페이지가 만들어지기 때문에 '서버 페이지'라고 부르기도 한다.
calcPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calc</title>
<style>
input{
width: 50px;
height: 50px;
}
.output{
height: 50px;
font-size: 24px;
font-weight: bold;
background: gray;
text-align: right;
padding-right: 5px;
}
</style>
</head>
<body>
<form action="calc" method="post">
<table>
<tr>
<td class="output" colspan="4">0</td>
</tr>
<tr>
<td><input type="submit" name="operator" value="CE"/></td>
<td><input type="submit" name="operator" value="C"/></td>
<td><input type="submit" name="operator" value="≪"/></td>
<td><input type="submit" name="operator" value="÷"/></td>
</tr>
<tr>
<td><input type="submit" name="value" value="7"/></td>
<td><input type="submit" name="value" value="8"/></td>
<td><input type="submit" name="value" value="9"/></td>
<td><input type="submit" name="operator" value="×"/></td>
</tr>
<tr>
<td><input type="submit" name="value" value="4"/></td>
<td><input type="submit" name="value" value="5"/></td>
<td><input type="submit" name="value" value="6"/></td>
<td><input type="submit" name="operator" value="－"/></td>
</tr>
<tr>
<td><input type="submit" name="value" value="1"/></td>
<td><input type="submit" name="value" value="2"/></td>
<td><input type="submit" name="value" value="3"/></td>
<td><input type="submit" name="operator" value="＋"/></td>
</tr>
<tr>
<td><input type="submit" name="operator" value="±"/></td>
<td><input type="submit" name="value" value="0"/></td>
<td><input type="submit" name="dot" value="."/></td>
<td><input type="submit" name="operator" value="="/></td>
</tr>
</table>
</form>
</body>
</html>기반이 될 html파일이고, 이 html파일은 아래처럼 보인다.
동적인 계산기는 숫자를 입력하고 연산을 진행할 때마다 결과를 0이 입력된 칸에 출력되어야한다.
동적 페이지 만들기
동적인 계산기를 만들기 위해서는 Servlet에서 calcPage.html으로 Redirection하지 않고 직접 페이지를 만들어서 Client에게 제공해주는 방법이 있다.
구조를
Client > WAS > Servlet Calc > Servlet CalcPage > WAS > Client
이런 방식으로 해서
localhost:8080/calcpage를 요청하면 ServletCalcPage가 실행되고- 인자 입력 시, Serlvet
Calc로 전달되어 데이터를 가공 - 데이터 가공한 뒤 다시 Serlvet
CalcPage로 Redirection- Servlet
CalcPage에서 생성된 페이지들은 WAS를 통해 Client에게 응답됨
- Servlet
코드를 구현했다.
Calc.java
@WebServlet("/calc")
public class Calc extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Cookie[] cookies = request.getCookies();
String value = request.getParameter("value");
String operator = request.getParameter("operator");
String dot = request.getParameter("dot");
String exp = "";
if(cookies != null)
for (Cookie c : cookies) {
if(c.getName().equals("exp"))
exp = c.getValue();
break;
}
if (operator != null && operator.equals("=")) {
ScriptEngine engine = new ScriptEngineManager().getEngineByName("nashorn");
try {
exp = String.valueOf(engine.eval(exp));
} catch (ScriptException e) {
e.printStackTrace();
}
} else {
exp += (value!=null) ? value : "";
exp += (operator!=null) ? operator : "";
exp += (dot!=null) ? dot : "";
}
Cookie expCookie = new Cookie("exp", exp);
response.addCookie(expCookie);
response.sendRedirect("calcpage");
}
}CalcPage.java
@WebServlet("/calcpage")
public class CalcPage extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=UTF-8");
response.setCharacterEncoding("UTF-8");
String exp = "";
Cookie[] cookies = request.getCookies();
if(cookies != null)
for (Cookie c : cookies) {
if (c.getName().equals("exp"))
exp = c.getValue();
break;
}
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=\"calc\" 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><input type=\"submit\" name=\"operator\" value=\"±\"/></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>");
}
}
이렇게 html코드를 한 줄씩 Servlet에서 PrintWriter객체를 통해 출력해주는 것이다.
response.setContentType("text/html; charset=UTF-8");CalcPage Servlet의 응답response은 ContentType이 text/html이기 때문에 만들어진 calcPage.html로 Redirect해주는 것보다 이렇게 직접 페이지를 만들면서 원하는 곳에 데이터를 처리할 수 있게 된다.
(두 번은 이렇게 못 짜겠다...)
|
|
연산 결과까지 잘 출력되는 것을 확인할 수 있다.
울릉도에 별장 짓고 싶다