본문 바로가기
☕ Java 웹 프로그래밍/Servlet & JSP

[Servlet&JSP] 동적인 페이지(서버 페이지)의 필요성

by 일단연 2023. 6. 2.

* 본 글은 [뉴렉처]의 Servlet&JSP 프로그래밍 강의를 듣고 정리한 글입니다.

 

2020 Servlet&JSP 프로그래밍

 

www.youtube.com

 

 동적인 페이지(서버 페이지)의 필요성 

좀 더 현실적인 계산기 프로그램

  • 사용자는 키보드로 값을 입력하지 않고 간단하게 버튼 클릭
  • 사용자가 누른 값들은 입력되는 게 아니라 라벨만 출력되는 것
  • 사용자가 입력한 내용을 서버에서 페이지를 만들 때 끼워넣어야 함 > 동적인 페이지가 필요
    • 사용자가 누른 숫자 버튼이 화면에 숫자로 입력해야 함
    • 사용자가 누른 연산자 버튼도 화면에 연산자로 입력되어야 함

 

계산기 프로그램에 동적인 페이지(서버 페이지)가 필요

  • 계산기가 동작하는 과정
    • 1) 왼쪽의 계산기 프로그램에서 숫자 버튼과 연산자 버튼을 눌러서 서버에 POST 요청
    • 2) 서버는 그 값들을 쿠키나 세션에 저장하고, 그 값들을 calc.html 화면에 출력해 redirect
    •  
    • But, html은 정적인 페이지이기 때문에 사용자가 누적한 값들을 심어서 보내줄 수 없음
  • 쿠키를 읽어서 출력해주는 기능이 필요
    • html을 동적으로 만들어주는 페이지: Servlet(/calcpage)

  • 서버 페이지(동적인 페이지)를 거쳐 계산기가 동작하는 과정
    • 1) 계산기 프로그램에서 서버로 POST 요청이 옴
    • 2) Servlet(/calcpage)에서는, 사용자가 입력한 데이터를 결합해 출력할 문서를 만듦
      • 서블릿을 통해 출력했으니 형태는 html
    •  

 

동적인 페이지/서버 페이지라고 명명되는 이유

  • 동적인 페이지: 클라이언트 요청이 있을 때마다 만들어지는 문서라서
  • 서버 페이지: 위치 상에서 보면, 서버에 의해 만들어지는 페이지라서

 

동적인 페이지(서버 페이지) 만들기 - calc3.html

  • 계산기 화면을 <table>로 만듦: 6행 4열의 표
  • 맨처음 입력창은 아무 버튼도 없게 + 4칸을 다 쓰도록 하고, 나머지 칸들을 만듦
    • <tr>
         <td colspan="4">0</td>
      </tr>

동적인 페이지(서버 페이지) 만들기 - calc3.html - CSS 추가 전

  • 디자인이 이상하니까 <head> 안에 <style>로 스타일 변형
    • <style>
         input{
            width: 50px; height: 50px;
         }
      </style>
  • 입력창의 스타일 바꾸기
    • <td colspan="4">0</td>에 클래스명 설정
      • <td class = "output" colspan="4">0</td>
    • <style>에 높이, 배경색, 글자 크기, 글자 굵기, 정렬, 패딩 값 설정
      • .output{
           height: 50px;
           background: #e9e9e9;
           font-size: 24px;
           font-weight: bold;
           text-align: right;
           padding: 0px 5px;
        }
  • 값과 연산자를 구분하기 위해 <input>의 name을 숫자는 value로, 연산자는 operator로, .은 dot으로 변경

 

  • calc3.html 코드
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>계산기 웹 프로그램</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="calc2" 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="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="X"></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></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>

 

저작자표시 비영리 (새창열림)

'☕ Java 웹 프로그래밍 > Servlet & JSP' 카테고리의 다른 글

[Servlet&JSP] 계산기 서블릿 완성하기  (0) 2023.06.03
[Servlet&JSP] 처음이자 마지막으로 동적인 페이지를 서블릿으로 직접 만들기  (0) 2023.06.02
[Servlet&JSP] 서버에서 페이지 전환하기(redirection)  (0) 2023.06.02
[Servlet&JSP] Application, Session, Cookie 정리  (0) 2023.06.01
[Servlet&JSP] Cookie의 maxAge 옵션: 브라우저와 상관없이 설정한 기간 동안 쿠키 유지  (0) 2023.06.01

관련글

티스토리툴바