티스토리 뷰
반응형
html에서는 정적인 페이지만 구현할 수 있다. 그렇다면 어떻게 해야 동적인 페이지를 구현할 수 있을까?
바로! 서블릿으로 구현하면 된다!
이번 글에서는 귀찮지만 직접 다 해보는 것을 적극 추천한다. 처음이자 마지막으로!
유튜브 선생님 "뉴렉처" 님의 말씀처럼 직접 다 손으로 해보겠다!
//CalcPage.java
package com.newlecture.web;
import java.io.IOException;
import java.io.PrintWriter;
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 {
@Override
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(); //출력을 위한 PrintWriter 선언 및 import
/* calc3.html 내용을 모두 복붙*/
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(" backgroud: #e9e9e9;");
out.write(" font-size:24px;");
out.write(" font-width: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>");
/*printf로 중간의 변할수 있는 값을 설정*/
out.printf(" <td class=\"output\" colspan=\"4\">%d</td>", 7+5);
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=\"number\" value=\"7\"></td>");
out.write(" <td><input type=\"submit\" name=\"number\" value=\"8\"></td>");
out.write(" <td><input type=\"submit\" name=\"number\" value=\"9\"></td>");
out.write(" <td><input type=\"submit\" name=\"operator\" value=\"X\"></td>");
out.write(" </tr>");
out.write(" <tr>");
out.write(" <td><input type=\"submit\" name=\"number\" value=\"4\"></td>");
out.write(" <td><input type=\"submit\" name=\"number\" value=\"5\"></td>");
out.write(" <td><input type=\"submit\" name=\"number\" 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=\"number\" value=\"1\"></td>");
out.write(" <td><input type=\"submit\" name=\"number\" value=\"2\"></td>");
out.write(" <td><input type=\"submit\" name=\"number\" 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=\"number\" 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>");
}
}
html 모든 코드에 out.write(); 로 감싸준다. 코드가 그대로 실행 되게 하기 위해서임.
그리고 코드내에 삽입된 ""코드들은 모두 \" \"로 수정해주어야 자바코드 내에서 오류없이 진행이 된다. 물론 노가다로.
코드 중에 유일하게 out.printf();로 구현 된 부분이 있다.
이 코드는 html에서 할 수없었던 계산을 위한 코드이며, 보면 "아~~~ 왜 서블릿에서 하는지 알겠네"하며 감탄을 자아 낼 것이다!
out.printf(" <td class=\"output\" colspan=\"4\">%d</td>", 7+5);이 코드에서는 7+5가 문자로 출력 되는 것이 아니라, 12로 출력된다는 것을 보여준다.
즉, html과 달리 계산이 된다는 말이다.
이로써 왜 서블릿을 이용해 동적 페이지를 사용하는지에 대해서 알아 보았다!
반응형
'Servlet JSP' 카테고리의 다른 글
| 클리어(쿠키삭제)추가_계산기 만들기(완성2) (0) | 2021.04.26 |
|---|---|
| 동적 페이지 구현_계산기 만들기3(완성) (0) | 2021.04.25 |
| 동적인 페이지(서버 페이지)의 필요성_계산기 만들기1 (0) | 2021.04.24 |
| redirect 페이지전환 (0) | 2021.04.24 |
| Application / Session / Cookie 특징 (0) | 2021.04.24 |
댓글
공지사항