프로그래밍/자바, JDBC
뉴렉처 학습(서블릿/JSP) 34강 ~ 35강
현호s
2020. 5. 18. 17:35
반응형
#34강 동적인 페이지(서버 페이지)의 필요성
- 계산기 구현과 관련하여, 동적인 페이지 만들기 위한 html 문서 작업 진행
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
input {
width: 50px;
height: 50px;
}
.output {
height: 50px;
background: #e9e9e9;
font-size: 24px;
font-weight: bold;
text-align: right;
padding: 0px, 5px;
}
</style>
</head>
<body>
<form action="calc3" 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="BS" /></td>
<td><input type="submit" name="operator" value="÷" /></td>
</tr>
<tr>
<td><input type="submit" name="vlaue" value="7" /></td>
<td><input type="submit" name="vlaue" value="8" /></td>
<td><input type="submit" name="vlaue" value="9" /></td>
<td><input type="submit" name="vlaue" value="X" /></td>
</tr>
<tr>
<td><input type="submit" name="vlaue" value="4" /></td>
<td><input type="submit" name="vlaue" value="5" /></td>
<td><input type="submit" name="vlaue" value="6" /></td>
<td><input type="submit" name="operator" value="-" /></td>
</tr>
<tr>
<td><input type="submit" name="vlaue" value="1" /></td>
<td><input type="submit" name="vlaue" value="2" /></td>
<td><input type="submit" name="vlaue" value="3" /></td>
<td><input type="submit" name="operator" value="+" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="vlaue" value="0" /></td>
<td><input type="submit" name="dot" value="." /></td>
<td><input type="submit" name="operator" value="=" /></td>
</tr>
</table>
</form>
</body>
</html>
#35강 처음이자 마지막으로 동적인 페이지 서블릿으로 직접 만들기
- html문서는 만들어진 것을 요청하는 정적인 페이지로 숫자를 바꿀수 없다.
- html 작업한 내역을 서블릿을 통해 구현해줘야 동적 페이지가 가능
- calc3.html / calc3.java 파일 준비 및 calcPage.java 생성진행
- calcPage.java 파일 중간에 calc3.html 소스코드 복사 후 붙여넣기 완료 후 실행 시 calc3.html과 비슷한 화면이 출력되게 된다.
- 기존 0 값에 동일하게 3+4로 변경하여 실행 시 html의 경우 기존 0에서 3+4 으로 값 변경 시 그대로 출력되는 반면, 서블릿의 경우 3+4의 결과값이 출력되게 된다.
// html 문서 내 소스코드 (3+4 적용)
<td class="output" colspan="4">3+4</td>
// 서블릿 문서 내 소스코드 (3+4 적용)
out.printf(" <td class=\"output\" colspan=\"4\">%d</td>", 3+4);
package com.newlecture.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet("/calcPage")
public class CalcPage extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.write("<!DOCTYPE html>");
out.write("<html>");
out.write("<head>");
out.write("<meta charset=\"UTF-8\">");
out.write("<title>Insert title here</title>");
out.write("<style>");
out.write("input {");
out.write("width: 50px;");
out.write("height: 50px;");
out.write("}");
out.write(".output {");
out.write("height: 50px;");
out.write("background: #e9e9e9;");
out.write("font-size: 24px;");
out.write("font-weight: bold;");
out.write("text-align: right;");
out.write("padding: 0px, 5px;");
out.write("}");
out.write("</style>");
out.write("</head>");
out.write("<body>");
out.write(" <form action=\"calc3\" method=\"post\">");
out.write(" <table>");
out.write(" <tr>");
out.printf(" <td class=\"output\" colspan=\"4\">%d</td>", 3+4);
out.write(" </tr>");
out.write(" <tr>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"CE\" /></td>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"C\" /></td>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"BS\" /></td>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"÷\" /></td>");
out.write(" </tr>");
out.write(" <tr>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"7\" /></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"8\" /></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"9\" /></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"X\" /></td>");
out.write(" </tr>");
out.write(" <tr>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"4\" /></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"5\" /></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"6\" /></td>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"-\" /></td>");
out.write(" </tr>");
out.write(" <tr>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"1\" /></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"2\" /></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"3\" /></td>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"+\" /></td>");
out.write(" </tr>");
out.write(" <tr>");
out.write(" <td></td>");
out.write(" <td><input type=\"submit\" name=\"vlaue\" value=\"0\" /></td>");
out.write(" <td><input type=\"submit\" name=\"dot\" value=\".\" /></td>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"=\" /></td>");
out.write(" </tr>");
out.write(" </table>");
out.write(" </form>");
out.write("</body>");
out.write("</html>");
}
}
반응형