웹프로그램을 배우는 목적은 여러가지가 있을 수 있다. 여기서는 두 가지 정도의 목적을 살펴보겠다. 먼저 다음 그림과 같은 구구단표를 웹브라우저에서 보기위한 html 코드를 작성한다고 생각해 보자.
구구단표 만들기
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
</head>
<body>
<CENTER>
구구단
<TABLE BORDER=”1″>
<TR>
<TD>1*1=1</TD>
<TD>1*2=2</TD>
<TD>1*3=3</TD>
<TD>1*4=4</TD>
<TD>1*5=5</TD>
<TD>1*6=6</TD>
<TD>1*7=7</TD>
<TD>1*8=8</TD>
<TD>1*9=9</TD>
</TR>
<TR>
<TD>2*1=2</TD>
<TD>2*2=4</TD>
<TD>2*3=6</TD>
<TD>2*4=8</TD>
<TD>2*5=10</TD>
<TD>2*6=12</TD>
<TD>2*7=14</TD>
<TD>2*8=16</TD>
<TD>2*9=18</TD>
</TR>
<TR>
<TD>3*1=3</TD>
<TD>3*2=6</TD>
<TD>3*3=9</TD>
<TD>3*4=12</TD>
<TD>3*5=15</TD>
<TD>3*6=18</TD>
<TD>3*7=21</TD>
<TD>3*8=24</TD>
<TD>3*9=27</TD>
</TR>
<TR>
<TD>4*1=4</TD>
<TD>4*2=8</TD>
<TD>4*3=12</TD>
<TD>4*4=16</TD>
<TD>4*5=20</TD>
<TD>4*6=24</TD>
<TD>4*7=28</TD>
<TD>4*8=32</TD>
<TD>4*9=36</TD>
</TR>
<TR>
<TD>5*1=5</TD>
<TD>5*2=10</TD>
<TD>5*3=15</TD>
<TD>5*4=20</TD>
<TD>5*5=25</TD>
<TD>5*6=30</TD>
<TD>5*7=35</TD>
<TD>5*8=40</TD>
<TD>5*9=45</TD>
</TR>
<TR>
<TD>6*1=6</TD>
<TD>6*2=12</TD>
<TD>6*3=18</TD>
<TD>6*4=24</TD>
<TD>6*5=30</TD>
<TD>6*6=36</TD>
<TD>6*7=42</TD>
<TD>6*8=48</TD>
<TD>6*9=54</TD>
</TR>
<TR>
<TD>7*1=7</TD>
<TD>7*2=14</TD>
<TD>7*3=21</TD>
<TD>7*4=28</TD>
<TD>7*5=35</TD>
<TD>7*6=42</TD>
<TD>7*7=49</TD>
<TD>7*8=56</TD>
<TD>7*9=63</TD>
</TR>
<TR>
<TD>8*1=8</TD>
<TD>8*2=16</TD>
<TD>8*3=24</TD>
<TD>8*4=32</TD>
<TD>8*5=40</TD>
<TD>8*6=48</TD>
<TD>8*7=56</TD>
<TD>8*8=64</TD>
<TD>8*9=72</TD>
</TR>
<TR>
<TD>9*1=9</TD>
<TD>9*2=18</TD>
<TD>9*3=27</TD>
<TD>9*4=36</TD>
<TD>9*5=45</TD>
<TD>9*6=54</TD>
<TD>9*7=63</TD>
<TD>9*8=72</TD>
<TD>9*9=81</TD>
</TR>
</TABLE>
</CENTER>
</body>
</html>
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
</head>
<body>
<CENTER>
구구단
<TABLE BORDER=”1″>
<TR>
<TD>1*1=1</TD>
<TD>1*2=2</TD>
<TD>1*3=3</TD>
<TD>1*4=4</TD>
<TD>1*5=5</TD>
<TD>1*6=6</TD>
<TD>1*7=7</TD>
<TD>1*8=8</TD>
<TD>1*9=9</TD>
</TR>
<TR>
<TD>2*1=2</TD>
<TD>2*2=4</TD>
<TD>2*3=6</TD>
<TD>2*4=8</TD>
<TD>2*5=10</TD>
<TD>2*6=12</TD>
<TD>2*7=14</TD>
<TD>2*8=16</TD>
<TD>2*9=18</TD>
</TR>
<TR>
<TD>3*1=3</TD>
<TD>3*2=6</TD>
<TD>3*3=9</TD>
<TD>3*4=12</TD>
<TD>3*5=15</TD>
<TD>3*6=18</TD>
<TD>3*7=21</TD>
<TD>3*8=24</TD>
<TD>3*9=27</TD>
</TR>
<TR>
<TD>4*1=4</TD>
<TD>4*2=8</TD>
<TD>4*3=12</TD>
<TD>4*4=16</TD>
<TD>4*5=20</TD>
<TD>4*6=24</TD>
<TD>4*7=28</TD>
<TD>4*8=32</TD>
<TD>4*9=36</TD>
</TR>
<TR>
<TD>5*1=5</TD>
<TD>5*2=10</TD>
<TD>5*3=15</TD>
<TD>5*4=20</TD>
<TD>5*5=25</TD>
<TD>5*6=30</TD>
<TD>5*7=35</TD>
<TD>5*8=40</TD>
<TD>5*9=45</TD>
</TR>
<TR>
<TD>6*1=6</TD>
<TD>6*2=12</TD>
<TD>6*3=18</TD>
<TD>6*4=24</TD>
<TD>6*5=30</TD>
<TD>6*6=36</TD>
<TD>6*7=42</TD>
<TD>6*8=48</TD>
<TD>6*9=54</TD>
</TR>
<TR>
<TD>7*1=7</TD>
<TD>7*2=14</TD>
<TD>7*3=21</TD>
<TD>7*4=28</TD>
<TD>7*5=35</TD>
<TD>7*6=42</TD>
<TD>7*7=49</TD>
<TD>7*8=56</TD>
<TD>7*9=63</TD>
</TR>
<TR>
<TD>8*1=8</TD>
<TD>8*2=16</TD>
<TD>8*3=24</TD>
<TD>8*4=32</TD>
<TD>8*5=40</TD>
<TD>8*6=48</TD>
<TD>8*7=56</TD>
<TD>8*8=64</TD>
<TD>8*9=72</TD>
</TR>
<TR>
<TD>9*1=9</TD>
<TD>9*2=18</TD>
<TD>9*3=27</TD>
<TD>9*4=36</TD>
<TD>9*5=45</TD>
<TD>9*6=54</TD>
<TD>9*7=63</TD>
<TD>9*8=72</TD>
<TD>9*9=81</TD>
</TR>
</TABLE>
</CENTER>
</body>
</html>
이 HTML 코드의 길이는 그리 길지 않지만 다음 “mux.jsp”와 같은 JSP 프로그램으로 다시 작성하면 동일한 결과를 보임과 동시에 더 짧은 코드로 쓸 수 있다.
<%@ page language=”java” contentType=”text/html; charset=EUC-KR”
pageEncoding=”EUC-KR”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
</head>
<body>
<CENTER>
구구단
<TABLE BORDER=”1″>
<%
int i, j;
for(i = 1; i <= 9; i ++) {
out.println(” <TR>”);
for(j = 1; j <= 9; j ++) {
out.print(” <TD>”);
out.print(i + “*” + j + “=” + i*j);
out.println(“</TD>”);
}
out.println(” </TR>”);
}
%>
</TABLE>
</CENTER>
</body>
</html>
mux.jsp 실행결과
물론 “mux.html”의 길이가 그리 긴 편은 아니지만 만약 “9 x 9” 단이 아닌 “9999 x 9999” 단이라면 어떨까. HTML 코드로 작성한다면 상당한 수고를 해야 작성할 수 있을 것이다. 코드의 길이도 길이지만 곱셈의 결과 또한 하나하나 확인해야 하기 때문이다. 그러나 JSP 프로그램으로 다시 작성한다면 “mux.jsp”에서 for 문 안에 사용된 두 개의 9 만 바꾸면 큰 수고를 들이지 않고 작성할 수 있다. 따라서 HTML의 반복적인 부분을 프로그램화 함으로써 코드의 효율성을 증가시킬 수 있다.
또 다른 경우를 생각해 보자. 다음 그림과 같이 서버 접속 시 브라우저에 접속 당시의 날짜와 시각을 출력하는 페이지를 만들려고 한다.
접속 날짜 및 시각 출력하기
브라우저 출력결과만을 고려한다면 다음과 같은 코드 “today.html”로 작성할 수 있다. 그러나 시간이 지난 후 다시 “today.html”로 접속한다면 여전히 출력되는 결과는 변하지 않으며, 원래 의도인 접속 당시의 날짜와 시각을 출력할 수 없다. 물론 일정 시간을 간격으로 관리자가 “today.html”의 내용을 갱신한다면 가능할 수도 있으나 그 간격이 1분 아니 1초라면 갱신은 불가능할 것이다. 그러나 웹프로그램으로 구현한다면 이런 문제를 해결할 수 있다.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
</head>
<body>
현재 시간은 Tue Mar 24 23:12:25 KST 2009 입니다.
</body>
</html>
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
</head>
<body>
현재 시간은 Tue Mar 24 23:12:25 KST 2009 입니다.
</body>
</html>
다음 프로그램 “today.jsp”는 접속 당시의 날짜와 시각을 출력하는 프로그램이다. 이 프로그램은 프로그램이 자동으로 서버의 날짜와 시각을 읽어와 접속을 요구한 브라우저로 결과를 돌려준다. 따라서 프로그램을 한 번 작성하면 내용을 수정하지 않아도 자동으로 날짜와 시각을 변경하며 출력해 준다.
<%@ page language=”java” contentType=”text/html; charset=EUC-KR”
pageEncoding=”EUC-KR”%>
<%@ page import=”java.util.Date” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
</head>
<body>
<%
Date toDay = new Date();
%>
현재 시간은 <%= toDay %> 입니다.
</body>
</html>
pageEncoding=”EUC-KR”%>
<%@ page import=”java.util.Date” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
</head>
<body>
<%
Date toDay = new Date();
%>
현재 시간은 <%= toDay %> 입니다.
</body>
</html>
today.jsp 실행결과
이처럼 웹프로그램을 이용하면 자동으로 변하는 동적인 페이지를 생성할 수 있다.