BLOG ARTICLE 이클립스 | 30 ARTICLE FOUND

  1. 2009.03.24 웹프로그램의 개발 목적
  2. 2009.03.23 JSP에서 폼 데이터 처리
  3. 2009.03.18 쿼리스트링(Query String) 2
  4. 2009.03.18 HTML FORM
  5. 2009.03.17 쿠키 및 세션을 이용한 카운터

웹프로그램의 개발 목적

프로그래밍/JSP 2009. 3. 24. 20:21

웹프로그램을 배우는 목적은 여러가지가 있을 수 있다. 여기서는 두 가지 정도의 목적을 살펴보겠다. 먼저 다음 그림과 같은 구구단표를 웹브라우저에서 보기위한 html 코드를 작성한다고 생각해 보자.

사용자 삽입 이미지

구구단표 만들기

위 그림을 출력하려면 아래 "mux.html"과 같은 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>

이 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>

다음 프로그램 "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>


사용자 삽입 이미지

today.jsp 실행결과


이처럼 웹프로그램을 이용하면 자동으로 변하는 동적인 페이지를 생성할 수 있다.

'프로그래밍 > JSP' 카테고리의 다른 글

NetBeans에서 JSP 개발하기  (0) 2009.06.07
JDBC 드라이버를 이용한 JSP와 MySQL 연동  (0) 2009.03.30
JSP에서 폼 데이터 처리  (0) 2009.03.23
쿼리스트링(Query String)  (2) 2009.03.18
쿠키 및 세션을 이용한 카운터  (0) 2009.03.17
AND

JSP에서 폼 데이터 처리

프로그래밍/JSP 2009. 3. 23. 13:17
앞서 폼으로부터 입력된 값을 프로그램으로 전달하는 방법 두 가지(GET/POST)와 각각의 차이점에 대해서 설명하였다. 다음은 각각의 방법을 이용하여 데이터를 프로그램으로 전달하는 방법의 차이점을 보여주고 있다. 특히 그림에서 URL 주소 입력창을 주의깊게 살펴보면 그 차이를 알 수 있다. 그러면 먼저 GET 방식으로 폼 데이터를 전달할 경우를 살펴보자.

다음은 아이디와 비밀번호를 입력받아 그 값을 GET 방식으로 프로그램 "loginGET.jsp"에 전달 실행하기위한 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>입력 폼</title>
</head>
<body>
<form name="form" method="get" action="loginGet.jsp">
<table border="0" cellpadding="2" cellspacing="0">
    <tr>
        <td width="75">
            <p align="right">
            <font size="2">아이디</font>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="text" name="id" maxlength="20">
            </font>
        </td>
    </tr>
    <tr>
        <td width="75">
            <p align="right"><font size="2">비밀번호</font>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="password" name="pass" maxlength="20">
            </font>
        </td>
    </tr>
    <tr>
        <td width="75">
            <p align="right"><font size="2">&nbsp;</font>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="submit" value="로그인" maxlength="20">
            </font>
        </td>
    </tr>
</table>
</form>
</body>
</html>

사용자 삽입 이미지

loginGet.html 실행결과


이 프로그램에서 아이디와 비밀번호를 입력받는 창의 이름이 각각 "id"와 "pass"로 지정되었다. 그리고 각 창에 입력된 값이 각각 "ysoh"와 "JSP"라 한 후 "로그인"버튼을 클릭했다고 가정하자. 그러면 다음 프로그램 "loginGet.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>
아이디 : <%= request.getParameter("id") %><br />
비밀번호 : <%= request.getParameter("pass") %><br />
</body>
</html>

사용자 삽입 이미지

loginGet.jsp 실행결과



이 때 주소창 URL 주소를 살펴보면

id=ysoh&pass=JSP

과 같이 쿼리스트링을 이용하여 프로그램 "loginGet.jsp"로 아이디와 비밀번호를 전달하고 있음을 알 수 있다. 눈치가 빠르신 분들은 이미 알겠지만 쿼리스트링을 보면 쿼리스트링에 주어진 변수 "id"와 "pass"는 "loginGet.html" 폼의 <INPUT> 태그의 속성 중 NAME 속성의 값에서 비롯된 것이다. 또한 쿼리스트링에 주어진 값 "ysoh"와 "JSP"는 사용자가 폼에서 입력한 값임을 알 수 있다. 이 처럼 GET 방식의 경우 "<INPUT>" 태그의 NAME 속성의 값과 그 폼에 입력된 값이 쌍을 이루어 쿼리스트링을 구성하게 된다. 우리는 이미 쿼리스트링 통해 전달된 데이터를 JSP 프로그램에서 처리하는 방법을 배웠다. 그러므로 프로그램 내에서 request 객체의 getParameter 메소드를 이용

request.getParameter("id")
request.getParameter("pass")

와 같이 처리함으로써 입력된 값 "ysoh"와 "JSP"를 가져올 수 있다. 그러나 위 예제에서는 쿼리스트링을 통해 데이터를 전달하므로 비밀번호와 같이 보안이 유지되어야 하는 데이터가 그대로 노출되는 문제점이 발생한다. 그러므로 이러한 경우에는 GET 방식을 통한 데이터의 전달이 아닌 POST 방식을 통한 데이터의 전달을 사용한다.

다음 프로그램 "loginPost.html"는 "loginGet.html"에서 "Form" 태그의 "Method" 속성값 GET을 POST로 바꾼 것이다.

<!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>입력 폼</title>
</head>
<body>
<form name="form" method="post" action="loginGet.jsp">
<table border="0" cellpadding="2" cellspacing="0">
    <tr>
        <td width="75">
            <p align="right">
            <font size="2">아이디</font>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="text" name="id" maxlength="20">
            </font>
        </td>
    </tr>
    <tr>
        <td width="75">
            <p align="right"><font size="2">비밀번호</font>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="password" name="pass" maxlength="20">
            </font>
        </td>
    </tr>
    <tr>
        <td width="75">
            <p align="right"><font size="2">&nbsp;</font>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="submit" value="로그인" maxlength="20">
            </font>
        </td>
    </tr>
</table>
</form>
</body>
</html>

사용자 삽입 이미지

loginPost.html 실행결과


POST를 이용한 폼 데이터의 전달 역시 GET과 마찬가지로 프로그램에서 처리할 때 NAME 속성의 값을 request.getParameter 메소드의 파라메터값으로 넘기면 해당 창에 입력된 값을 읽을 수 있다. 그러므로 프로그램 "loginPost.jsp"는 "loginGet.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>
아이디 : <%= request.getParameter("id") %><br />
비밀번호 : <%= request.getParameter("pass") %><br />
</body>
</html>

사용자 삽입 이미지

loginPost.jsp 실행결과


그러나 "loginPost.jsp"가 실행될 때 URL 주소를 살펴보면 "loginGet.jsp"가 실행될 때와는 달리 쿼리스트링이 없음을 알 수 있다. 그러므로 로그인과 같이 보안이 유지될 필요가 있는 경우라면 반드시 폼 데이터를 전달할 때 표준입출력을 통하여 내부적으로 처리되어 눈으로 확인 불가능 한 POST 방식을 사용해야 한다.
 

'프로그래밍 > JSP' 카테고리의 다른 글

JDBC 드라이버를 이용한 JSP와 MySQL 연동  (0) 2009.03.30
웹프로그램의 개발 목적  (0) 2009.03.24
쿼리스트링(Query String)  (2) 2009.03.18
쿠키 및 세션을 이용한 카운터  (0) 2009.03.17
세션  (0) 2009.03.17
AND

쿼리스트링(Query String)

프로그래밍/JSP 2009. 3. 18. 15:17
쿼리스트링은 사용자가 웹프로그램으로 입력 데이터를 전달하는 가장 단순하고 또한 널리 사용되는 방법이다. 이 방법은 URL 주소 뒤에 입력 데이터를 함께 제공하는 방법으로 다음과 같은 형식을 취한다.

http://hostname[:port]/folder/file?변수1=값1&변수2=값2&변수3=값3

위 형식에서 "?" 뒤의 굵은 이탤릭체로 표현된 부분이 쿼리스트링 이다. URL 주소와 쿼리스트링은 "?"로 구분되며 변수와 값의 쌍(변수=값)으로 구성된다. 만약 여러 쌍의 변수와 값을 전달할 경우 각각의 쌍을 "&"로 구분해주면 된다.

다음 URL을 살펴보자.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong

위 URL은 localhost의 프로그램 "queryStr.jsp"를 실행할 때 두 개의 입력 데이터(no=200058001, name=Hong)를 가지고 실행하라는 의미이다. 그러면 JSP 프로그램에서는 쿼리스트링에 주어진 데이터를 request 객체의 getParameter 메소드를 이용하여 쿼리스트링을 처리하면 된다.

다음 프로그램 "queryStr.jsp"에서 주어진 쿼리스트링을 처리하는 방법에 대해 잘 살펴보자. 단 다음 프로그램을 실핼할 때 주소창에 위에 주어진 URL

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong

을 입력했다고 가정하자.

<%@ 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>
    당신의 학번은 <b><%= request.getParameter("no") %></b> 입니다. <br />
    당신의 이름은 <b><%= request.getParameter("name") %></b> 입니다. <br />
</body>
</html>

사용자 삽입 이미지

queryStr.jsp?no=200058001&name=Hong 실행결과


프로그램 "queryStr.jsp"를 살펴보면 두 번의 request.getParameter 메소드가 사용되고 있다. 먼저 첫 번째 메소드

request.getParameter("no")

는 쿼리스트링의 첫 번째 부분인 "no=200058001"를 처리하기위한 코드로 결과값으로 "200058001"을 저장하고 있으며

request.getParameter("name")

는 쿼리스트링의 두 번째 부분인 "name=Hong"를 처리하기위한 코드로 결과값으로 "Hong"을 저장하고 있다. 이 예를 통해 알 수 있듯 request.getParameter 메소드의 파라메터는 쿼리스트링을 구성하고 있는 "변수"="값"의 쌍 중 변수의 이름이 된다. 그러면 그 변수와 쌍을 이룬 값이 결과가 된다.

만약 쿼리스트링을 생략하고 주소창에

http://localhost:8080/JSPLecture/queryStr.jsp

만을 입력했다면 request.getParameter("no"), request.getParameter("name") 모두 값을 읽을 수 없으므로 null이 되어 다음과 같은 결과를 보인다.


사용자 삽입 이미지

쿼리스트링을 생략하고 queryStr.jsp를 실행한 결과



그러면 다음과 같이 쿼리스트링에 공백이 입력된 경우를 살펴보자.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong Gil Dong

위 URL을 주소창에 입력하고 엔터키를 쳐보자.


그러면 입력한 URL이 다음과 같이 공백 부분이 "%20"으로 대치되어 프로그램이 실행되고 있음을 볼 수 있다.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong%20Gil%20Dong

이는 예전의 브라우저가 쿼리스트링에 주어진 공백문자를 만나면 쿼리스트링의 끝으로 인식 그 뒤의 문자는 처리하지 않았기 때문이다. 따라서 공백문자를 처리하기 위해 몇 가지 편법을 사용하였는데 그 공백을 대신한 문자가 "%20" 이다. 그러므로 "queryStr.jsp" 실행 결과를 살펴보면 request.getParameter("name")에 의해 출력되는 값이 "Hong%20Gil%20Dong"이 아닌 "Hong Gil Dong"으로 올바르게 출력되고 있다.

사용자 삽입 이미지

쿼리스트링에 공백문자가 주어진 경우

[그림 7-2] 공백이 포함된 Query String

"%20" 이외에도 URL에서 공백문자를 처리하기 위한 또 다른 방법이 있는데 "%20" 대신 "+"를 사용하는 방법이다. "+" 역시 URL에서 사용되면 프로그램 내에서는 공백으로 처리되어 출력된다. 그러므로 다음 세 개의 URL은 모두 같은 결과를 출력한다.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong Gil Dong
http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong+Gil+Dong
http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong%20Gil%20Dong

그러면 "queryStr.jsp"를 실행항 결과로 다음 그림과 같이 출력되게 하려면 쿼리스트링을 어떻게 줘야 할까 생각해 보자.

사용자 삽입 이미지

"+" 및 "=" 출력


위 결과를 보면 화면에 "+" 및 "="을 출력하고 있다. 그러나 URL에서 이 두 문자를 사용하면 "+"는 화면상에 공백으로 그리고 "="은 쿼리스트링의 "변수=값"의 형식에서 관계를 위해 사용되므로 올바르게 출력되지 않는다. 이를 위해서는 "+"과 "="을 위한 두 자리 16진수 문자코드(ASCII 호환)를 "%" 뒤에 써 주면 된다. 앞에서 공백을 위해 사용된 "%20" 역시 공백을 위한 두 자리 16진수 코드를 의미한다.

공백문자와 같이 변경이 필요한 특수 문자들은 다음과 같다.

화면출력URL문자 또는 코드
화면출력URL문자 또는 코드
공백
+%%25
&
%26+%2B
=%3D?%3F


그러므로 수식 "2 + 3 = 100"을 출력하기 위한 쿼리스트링은

"2+%2B+3+%3D+100" 또는 "2%20%2B%203%20%3D%20100"
 
이므로 다음과 같은 URL을 프로그램 "queryStr.jsp"에 전달하면 위 그림과 같은 결과를 얻을 수 있다.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=2+%2B+3+%3D+100

또는

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=2%20%2B%203%20%3D%20100

'프로그래밍 > JSP' 카테고리의 다른 글

웹프로그램의 개발 목적  (0) 2009.03.24
JSP에서 폼 데이터 처리  (0) 2009.03.23
쿠키 및 세션을 이용한 카운터  (0) 2009.03.17
세션  (0) 2009.03.17
쿠키  (0) 2009.03.17
AND

HTML FORM

홈페이지/HTML 2009. 3. 18. 10:56

FORM 태그

HTML에서 사용자로부터 일정한 형식의 정보를 입력받기 위해서는 <FORM> 태그를 사용해야 한다. 이 태그는 반드시 </FORM> 태그와 쌍을 이룬다. <FORM> 태그는 단독으로 사용할 수 없으며 <INPUT />, <SELECT> ~ </SELECT>, <TEXTAREA> ~ </TEXTAREA> 등과 같은 각종 입력 태그들을 조합하여 사용해야 한다. 다음 프로그램 "formTag.html"은 <FORM> 태그의 기본적인 사용 예를 보여준다.

<!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>
<FORM ACTION="action.jsp" METHOD="GET" NAME="myform">
    이름 : <INPUT TYPE="TEXT" NAME="name" /><BR/>
    비밀번호 : <INPUT TYPE="PASSWORD" NAME="pass" /><BR/>
    <INPUT TYPE="SUBMIT" VALUE="로그인" />
</FORM>
</body>
</html>

사용자 삽입 이미지

formTag.html 실행결과


위 예를 보면 <FORM> 태그에 ACTION과 METHOD 속성을 볼 수 있다. ACTION 속성에는 입력된 자료를 전달받아 실행할 프로그램 이름을 지정해 준다. 이 예에서는 "action.jsp" 프로그램을 실행하도록 지정되었다. 다음으로 METHOD 속성에는 GET 또는 POST 값을 지정할 수 있다. METHOD 속성은 HTML 폼으로부터 입력된 데이터를 ACTION 속성에 정의된 프로그램으로 전달할 때 어떻게 전달할 것인가 그 방법을 정의해주는 속성이다. GET과 POST의 차이점은 다음 표를 참조하기 바란다.

METHOD

 특징
GET - Query String 형태로 데이터가 전달되므로 전달 내용을 사용자가 확인할 수 있다.
- 전달되는 내용의 크기에 한계를 가지므로 대용량의 데이터를  전달할 수 없다.
POST - 표준 입출력을 통해 데이터가 전달되므로 사용자가 확인할 수 없다. 따라서 로그인과 같이 보안을 유지할 필요가 있을 때 사용할 수 있다.
- 전달되는 내용의 크기에 한계가 없으므로 파일 업로드 등의 경우에도 사용할 수 있다.

NAME 속성은 하나의 HTML 내부에 여러 개의 FORM 태그가 사용됐을 경우 각각을 구분하기 위해 사용되는 속성으로 그 값은 사용자가 임의로 줄 수 있다. 그러면 FORM 태그와 함께 사용되는 각종 입력 태그들에 대해서 살펴보자.

INPUT 태그

<INPUT> 태그는 <FORM> 태그와 함께 사용되는 태그 중 가장 기본이 되는 태그로 </INPUT> 태그 없이 단독으로 사용된다. <INPUT> 태그에는 다양한 속성이 있다. 먼저 NAME 속성에 대하여 살펴보자. NAME 속성은 입력폼을 구성하는 각 요소들을 구분하기 위한 속성으로 프로그램 실행 시 중요한 역할을 하는 속성이다. 이 속성의 값은 사용자에의해 정의된다. 또 다른 속성으로 TYPE 속성이 있다. 이 속성은 각 요소들의 형태을 지정해주는 속성으로 그 내용은 다음 표와 같다.

Type 특징
TEXT 한 줄짜리 입력창을 표시한다.
PASSWORD TEXT와 유사하지만 입력되는 내용을 화면에 '*'로 표시한다.
RADIO 원형 모양의 창에 점이 찍히는 라디오버튼을 표시한다.
CHECKBOX 사각형 모양의 창에 체크 표시가 되는 체크박스를 표시한다.
BUTTON 버튼을 표시한다.
SUBMIT 각각의 폼에 입력된 데이터를 가지고 Action 속성에 지정된 프로그램을 실행하도록 하는 버튼을 표시한다.
RESET 클릭하면 폼에 입력된 값을 초기화 하는 버튼을 표시한다.
FILE 파일 업로드를 위한 입력창과 파일검색 버튼을 표시한다.


또한 <INPUT> 태그에는 SIZE, MAXLENGTH, VALUE, CHECKED 등의 속성이 있다. SIZE 속성과 MAXLENGTH 속성은 TYPE 속성의 값이 TEXT, PASSWORD 인 경우 함께 사용되며 각각 입력창의 크기와 입력 가능한 최대 글자수를 지정한다. 또한 VALUE 속성은 TEXT, PASSWORD, BUTTON, SUBMIT, RESET와 함께 사용되며 TEXT, PASSWORD에서는 창에 표시될 초기값을 지정하고 출력하며, BUTTON, SUBMIT, RESET에서는 버튼 위에 표시될 문자를 지정한다. 마지막으로 CHECKED 속성은 RADIO, CHECKBOX와 함께 사용되며 라디오버튼 또는 체크박스가 기본적으로 선택된 상태가 되도록 하기위해 사용된다.

속성 관련 Type 의미
Size Text, Password
 표시 가능한 문자의 개수로 창의 크기 지정
Maxlength 창에 입력 가능한 최대 문자
Value
 Text, Password 창에 표시될 초기값 지정
Button, Submit, Reset 버튼 위에 표시될 문자 지정
Radio, Checkbox 각 항목에 대해 프로그램으로 전달될 실제 값 지정
Checked Radio, Checkbox 기본적으로 선택된 상태 지정
Name
HTML의 모든 태그를 구분하기 위한 고유 값을 지정하며 JSP 프로그램에서 파라메터로 처리


다음 프로그램 "inputTag.html"은 다양한 <INPUT> 태그의 예를 보여주고 있다.

<!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>입력 폼</title>
</head>
<body>
<form name="form" method="get" action="exam7-2.php">
<table border="0" cellpadding="2" cellspacing="0">
    <tr>
        <td width="80">
            <p align="right">
            <font size="2">아이디</font>
            </p>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="text" name="id" maxlength="20"
                value="아이디를 입력하세요" />
            </font>
            </p>
        </td>
    </tr>
    <tr>
        <td width="80">
            <p align="right"><font size="2">비밀번호</font></p>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="password" name="pass" maxlength="20" />
            </font>
            </p>
        </td>
    </tr>
    <tr>
        <td width="80">
            <p align="right"><font size="2">성별</font></p>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="radio" name="gender" checked />남자
            <input type="radio" name="gender" />여자
            </font>
            </p>
        </td>
    </tr>
    <tr>
        <td width="80">
            <p align="right"><font size="2">취미</font></p>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="checkbox" name="hobby" checked />여행
            <input type="checkbox" name="hobby" />독서
            </font>
            </p>
        </td>
    </tr>
    <tr>
        <td width="80">
            <p>&nbsp;</p>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="submit" value="저장" />
            <input type="reset" value="취소" />
            <input type="button" value="버튼" />
            </font>
            </p>
        </td>
    </tr>
</table>
</form>
</body>
</html>

사용자 삽입 이미지

inputTag.html 실행결과


TEXTAREA 태그

<TEXTAREA> 태그는 게시판 글올리기에서와 같이 여러줄을 입력할 수 있는 입력창을 표시한다. <TEXTAREA> 태그는 </TEXTAREA> 태그와 함께 사용되며 두 태그 사이에 위치한 내용을 화면에 표시한다. <TEXTAREA> 태그 역시 다양한 속성을 가지고 있으며 그 중 몇가지 속성에 대해 살펴보겠다. 먼저 입력창의 크기를 지정하는 ROWS, COLS 속성이 있다. ROWS 속성은 입력창의 높이를 지정하며 COLS는 폭을 지정한다. 또한 이 태그 역시 NAME 속성을 가지며 이 속성의 의미는 <INPUT> 태그의 그것과 같다.

다음 프로그램 "textareaTag.html"은 <TEXTAREA> 속성의 예를 보여준다.

<!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>입력 폼</title>
</head>
<body>
<form name="form" method="get">
<table border="0" cellpadding="2" cellspacing="0">
    <tr>
        <td width="80">
            <p align="right">
            <font size="2">아이디</font>
            </p>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="text" name="id" maxlength="20"
            value="아이디를 입력하세요"/>
            </font>
            </p>
        </td>
    </tr>
    <tr>
        <td width="80">
            <p align="right"><font size="2">메세지</font></p>
        </td>
        <td width="195">
            <p><font size="2">
            <textarea name="msg" cols="25" rows="3">메세지 영역</textarea>
            </font>
            </p>
        </td>
    </tr>
    <tr>
        <td width="80">
            <p>&nbsp;</p>
        </td>
        <td width="195">
            <p><font size="2">
            <input type="submit" value="저장"/>
            <input type="reset" value="취소"/>
            <input type="button" value="버튼"/>
            </font>
            </p>
        </td>
    </tr>
</table>
</form>
</body>
</html>

사용자 삽입 이미지

textareaTag.jap 실행결과


프로그램에서 "<textarea name="msg" cols="25" rows="3">메세지 영역</textarea>"의 내용에 의해 가로 25 자 세로 3 줄 짜리 텍스트 영역이 만들어 졌으며 이 영역에 "메세지 영역"이라는 내용을 기본으로 출력하고 있다.

SELECT 태그

<SELECT> 태그는 펼침목록 또는 리스트 형태의 입력폼을 표시한다. 이 태그는 </SELECT> 태그와 함께 사용되어야 한다. 이 태그 역시 다른 태그들과 마찬가지로 NAME 속성을 가진다. 또한 SIZE 속성을 가지는데 값이 1이면 펼침목록 형태로 출력되며 값이 2 이상이면 리스트박스 형태로 출력된다. <SELECT> 태그는 단독으로 사용될 수 없으며 <SELECT> 태그와 </SELECT> 태그 사이에 열거하려는 각각의 목록을 <OPTION> ~ </OPTION> 태그 사이에 써 줘야한다. <OPTION> 태그는 VALUE 속성과 SELECTED 속성을 가진다. VALUE 속성은 해당 목록이 선택됐을 때 프로그램으로 전달할 값을 지정해 주며, SELECT 속성은 라디오버튼 및 체크박스에서의 CHECKED 와 같은 의미를 가진다.

다음 프로그램 "selectTag.html"은 <SELECT> 태그를 사용한 예를 보여주고 있다.

<!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>SELECT</title>
</head>
<body>
<form name="form" method="get">
<table border="0" cellpadding="2" cellspacing="0">
    <tr>
        <td width="55">
            <p align="right"><font size="2">직업</font></p>
        </td>
        <td width="150">
            <p><font size="2">
            <select name="job">
                <option value="1">회사원</option>
                <option selected value="2">학생</option>
                <option value="3">자영업</option>
                <option value="4">주부</option>
                <option value="5">무직</option>
            </select>
            <input type="submit" value="확인"/>
            </font>
            </p>
        </td>
    </tr>
</table>
</form>
</body>
</html>

사용자 삽입 이미지

selectTag.html 실행결과


프로그램의 실행결과를 살펴보면 <option>~</option> 태그에 열거된 내용들이 펼침목록에 표시되었으며 "SELECTED" 된 항목인 "학생"이 기본적으로 선택되었다.

'홈페이지 > HTML' 카테고리의 다른 글

HTTP 접속  (0) 2009.03.12
AND

쿠키 및 세션을 이용한 카운터

프로그래밍/JSP 2009. 3. 17. 17:40
쿠키를 이용한 카운터

다음 프로그램 "cCounter.jsp"는 쿠키를 이용해 카운터를 구현한 프로그램이다. 쿠키는 브라우저별로 각각 저장 관리되므로 이 프로그램은 프라우저별로 각각 1에서 시작하여 브라우저의 새로고침 버튼을 클릭할 때 마다 1 씩 증가된다.

<%@ 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>
<%
Cookie [] cookieArray = request.getCookies(); // 브라우저에서 전달된 모든 쿠키 저장
Cookie cookie = null;
int countNum = 0;
String countStr = "";

if(cookieArray != null) { // 브라우저에서 전달된 쿠키정보가 있다면
   for(int i = 0; i < cookieArray.length; i++) { // 전달된 모든 쿠키를 검사하며,
      if(cookieArray[i].getName().equals("counter")) { // "counter"란 이름의 쿠키정보를 찾아
         cookie = cookieArray[i]; // 저장하고
         break; // for문을 빠져나간다.
      }
   }
}
if(cookie != null) { // "counter"란 이름의 쿠키가 있으면
   countNum = Integer.parseInt(cookie.getValue()) + 1; // 값을 정수로 변환한 다음 1 증가한 후
   countStr = Integer.toString(countNum); / 다시 증가된 값을 문자열로 변환한 후
   cookie.setValue(countStr); // "counter"란 이름의 쿠키값을 새롭게 설정한다.
}
else { // "counter"란 이름의 쿠키가 없으면
   cookie = new Cookie("counter", "1"); // counter란 이름으로 초기값 1인 쿠키를 생성한다.
}

response.addCookie(cookie); // "counter"란 이름의 쿠키와 그 값을 클라이언트에 전달한다.
%>
<h2>당신은 <%=cookie.getValue()%>
번째 방문하셨습니다.</h2>
</body>
</html>

사용자 삽입 이미지

cCounter.jsp 실행결과


위 프로그램은 브라우저에서 전달된 쿠키 중 쿠키이름이 "counter"인 쿠키의 쿠키값을 찾는다. 만약 "counter"라는 이름의 쿠키가 없으면 "counter"란 이름과 1을 초기값으로 하는 쿠키를 생성한 후 response.addCookie 메소드를 이용 클라이언트에 쿠키를 저장한다. 만약 "counter"란 이름의 쿠키가 있다면 해당 쿠키의 값을 읽어 그 값을 하나 증가시킨 후 다시 지정한 후 클라이언트에 저장한다. 

사용자 삽입 이미지

cCounter.jsp의 원리


위 그림은 프로그램 "cCounter.jsp"의 처리과정을 도식화한 것이다. 좌측의 사각형은 클라이언트를 우측의 사각형은 서버를 나타낸다. "cCounter.jsp"으로의 첫 접속에서는 지정된 쿠키가 없으므로 클라이언트에서 서버로 전달되는 쿠키 또한 없다. 따라서 "cCounter.jsp"는 "counter"/"1"을 쌍으로 하는 쿠키를 생성하고 결과에 해당 쿠키를 클라이언트에 전달한다. 그러면 두 번째 접속에서 클라이언트는 저장된 쿠키 "counter"/"1"을 서버로 전달하고 "cCounter.jsp"는 하나 증가시킨 값으로 재 설정 "counter"/"2"를 쌍으로 하는 쿠키를 생성하고 결과에 해당 쿠키를 클라이언트에 새롭게 전달한다. 세 번째 접속에서는 쿠키 "counter"/"2"가 서버로 전달되고 서버는 "counter"/"3"으로 쿠키를 재 설정해 클라이언트로 전달한다. 그러므로 재 접속이 요구될 때 마다 하나 증가된 값이 서버로부터 클라이언트에 저장되게 된다.

세션을 이용한 카운터

아래 프로그램 "sCounter.jsp"은 세션을 이용해 카운터 프로그램을 작성한 것이다. 이 프로그램 역시 쿠키로 구현한 프로그램과 마찬가지로 브라우저별로 1부터 시작 재 접속이 요구될 때 마다 하나 씩 증가된다.

<%@ 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>
<%
Integer countNum =(Integer)session.getAttribute("counter"); 
//  "counter" 이름의 세션값을 저장한다.
if(countNum == null) // "counter"란 이름의 세션값이 없으면
{
   countNum = new Integer(1); // 초기값으로 1을 저장하고
}
else // "counter"란 이름의 세션값이 있으면
{
   int num = countNum.intValue(); // 그 값을 정수로 변환한 후
   num++; // 그 값을 하나 증가시킨 후 
   countNum = new Integer(num); // 증가된 값으로 저장한다.
}

session.setAttribute("counter", countNum); 
// 새롭게 지정된 값을 "counter"란 이름과 함께 저장한다.
%>
<h2>당신은 <%=countNum.intValue()%>
번째 방문하셨습니다.</h2>
세션ID : <%= session.getId() %>
</body>
</html>

사용자 삽입 이미지

sCounter.jsp 실행결과


위 프로그램은 "cCounter.jsp"와 비교하여 쿠키 대신 세션을 이용했다는 차이점을 제외하면 구현 원리는 유사하다. 이 프로그램 역시 "counter"란 이름으로 저장된 세션이름이 있는지 찾은 후 없으면 초기값을 1로 가지는 "counter"라는 이름의 세션을 만들고 "counter"라는 이름의 세션이 있다면 그 값을 하나 증가시켜 다시 지정한다.

사용자 삽입 이미지

sCounter.jsp의 원리


위 그램은 "sCounter.jsp"의 처리관정을 도식화 한 것이다. 이 그림에서 최초 접속 시 클라이언트는 서버로 전달하는 세션정보 "JSESSIONID"가 없다. 따라서 "sCounter.jsp"에서는 "counter"란 이름의 세션 역시 찾을 수 없기 때문에 if 문의 조건식 

countNum == null

가 참이되어 초기값을 1로 하는 "counter"란 이름의 세션을 생성 서버에 저장한다. 그리고 이와 동시에 서버는 고유한 세션아이디를 생성 클라이언트에 "JSESSIONID"란 이름과 함께 쿠키로 전달한다. 그러면 두 번째 접속부터 클라이언트는 서버에 "JSESSIONID"/"세션아이디"를 쌍으로 하는 쿠키정보를 서버에 전달하게 된다. 그러면 서버는 클라이언트에서 전달된 세션아이디를 가지고 그와 관련된 저장공간에서 "counter"란 이름과 함께 쌍으로 저장된 값을 찾아 그 값을 하나 증가시킨 후 새롭게 변경된 세션정보를 다시 서버에 저장한다.

'프로그래밍 > JSP' 카테고리의 다른 글

JSP에서 폼 데이터 처리  (0) 2009.03.23
쿼리스트링(Query String)  (2) 2009.03.18
세션  (0) 2009.03.17
쿠키  (0) 2009.03.17
continue, break 문  (1) 2009.03.09
AND

티스토리툴바