BLOG ARTICLE Eclipse | 31 ARTICLE FOUND

  1. 2009.03.30 JDBC 드라이버를 이용한 JSP와 MySQL 연동
  2. 2009.03.24 웹프로그램의 개발 목적
  3. 2009.03.23 JSP에서 폼 데이터 처리
  4. 2009.03.18 쿼리스트링(Query String) 2
  5. 2009.03.18 HTML FORM

우리는 앞서 MySQL의 기본 사항에 대해 배울 때 "명령 프롬프트"를 통해 "mysql" 클라이언트 프로그램을 실행함으로써 데이터베이스 서버에 접속하고 몇몇 데이터 조작을 위한 명령을 실행하였다. 이 과정은 크게 네 가지 단계로 나누어 생각할 수 있다.

먼저 데이터베이스 서버로의 연결 단계이다. 이 단계는 "명령 프롬프트"에서 다음 명령을 실행하고 암호를 입력함으로써 이루어진다.

mysql  -u  jsp  -p

이 명령은  데이터베이스 사용자 "jsp"가 클라이언트 프로그램을 이용 서버에 연결 데이터 조작을 할 수 있도록 한다. 이 때 서버와의 연결을 위해 주어지는 정보는 세 가지다. 첫 째 사용자아이디, 둘 째 비밀번호, 그리고 데이터베이스 서버가 실행되고 있는 컴퓨터 정보다. 위 명령에서 컴퓨터 정보는 주어지지 않았지만 실제로는 "-h" 옵션 뒤에 도메인네임 또는 IP 주소와 같은 컴퓨터 이름을 줄 수 있으며 이 옵션이 생략되면 "-h localhost"가 주어진 것과 동일하다. 따라서 위 명령은

mysql  -u  jsp  -p  -h localhost

와 같다.

둘 째 데이터베이스 서버로의 연결이 완료되면 다음 명령을 이용 사용하고자 하는 데이터베이스를 선택해야 한다.

use  jsp ;


이 명령은 MySQL 서버가 관리하고 있는 데이터베이스 중 "jsp" 를 사용하겠다는 의미이다. 만약 데이터베이스를 선택하지 않고 쿼리를 실행할 때 많은 경우 데이터베이스가 선택되지 않았다는 오류 메세지를 출력한다.

데이터베이스를 선택한 후에는

SELECT, INSERT, DELETE, UPDATE, CREATE, DROP, ALTER
 

등과 같은 한 각종 SQL 명령을 실행 데이터를 조작한다.

마지막으로 원하는 데이터조작이 완료됐으면 데이터베이스 클라이언트와 서버 사이의 연결은 끊는다. 이 처럼 연결, 데이터베이스 선택, 쿼리실행, 연결종료 네 단계 과정이 하나의 주기로 이루어진다. JSP 프로그램에서도 이와 같이 네 단계의 과정을 통해 데이터베이스와의 연동이 이루어진다. 그러면 간단한 회원가입 폼과 프로그램을 통해 JSP와 데이터베이스를 연동하는 방법을 살펴보자.

아래 "MemberJoin.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>
<form action="MemberJoin.jsp" method="post">
<table>
    <tr>
        <td>회원아이디</td>
        <td><input type="text" size="10" maxlength="16" name="userid"></td>
    </tr>
    <tr>
        <td>비밀번호</td>
        <td>
            <input type="password" size="10" maxlength="16" name="userpwd1">
            <input type="password" size="10" maxlength="16" name="userpwd2">
        </td>
    </tr>
    <tr>
        <td>이름</td>
        <td><input type="text" size="10" maxlength="20" name="username"></td>
    </tr>
    <tr>
        <td>주민등록번호</td>
        <td>
            <input type="text" size="6" maxlength="6" name="jumin1"> -
            <input type="password" size="7" maxlength="7" name="jumin2">
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>
            <input type="submit" value="등록">
            <input type="reset" value="초기화">
        </td>
    </tr>
</table>
</form>
</body>
</html>

사용자 삽입 이미지

MemberView.html 실행결과


이 폼에서 회원 정보를 입력받는 창의 이름을 기억하자. 이 폼에 입력된 정보는 "등록" 버튼을 클릭하면 아래 "MemberJoin.jsp" 프로그램으로 전달한다. 그러면 "MemberJoin.jsp"는 데이서베이스 서버와 연결, 데이터베이스 선택의 단계를 거쳐 입력된 정보를 데이터베이스 테이블에 저장하기 위한 쿼리를 실행한 다음 데이터베이스 서버와의 연결을 종료하면 된다. 그러면 각 단계별로 JSP에서 어떻게 처리하는지 살펴보자.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%

request.setCharacterEncoding("euc-kr");

String userId   = request.getParameter("userid");
String userPwd1 = request.getParameter("userpwd1");
String userPwd2 = request.getParameter("userpwd2");
String userName = request.getParameter("username");
String jumin1   = request.getParameter("jumin1");
String jumin2   = request.getParameter("jumin2");

Class.forName("com.mysql.jdbc.Driver");

Connection conn = null;
Statement  stmt = null;

String url = "jdbc:mysql://localhost:3306/jsp?user=jsp&password=your_password";
String sql = "INSERT INTO members VALUES ('"
             + userId +"', md5('"+ userPwd1 +"'),'"+ userName +"','"+ jumin1 +"',md5('"+ jumin2 +"'))";
System.out.print(sql);
conn = DriverManager.getConnection(url);
stmt = conn.createStatement();
stmt.execute(sql);
stmt.close();
conn.close();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table>
    <tr>
        <td>회원아이디</td>
        <td><%= userId %></td>
    </tr>
    <tr>
        <td>비밀번호</td>
        <td><%= userPwd1 %></td>
    </tr>
    <tr>
        <td>이름</td>
        <td><%= userName %></td>
    </tr>
    <tr>
        <td>주민등록번호</td>
        <td><%= jumin1 %>-<%= jumin2 %></td>
    </tr>
</table>
</body>
</html>

먼저 데이터베이스와의 연동을 위해 JDBC 드라이버를 로딩해야 한다. 드라이버의 로딩은 "Class.forName" 메소드를 이용한다. 프로그램에서 보면

Class.forName("com.mysql.jdbc.Driver");

부분이 드라이버를 로딩하는 부분이다. 이 메소드를 실행하기 위해 필요한 파라메터는 값은 드라이버를 다운로드 할 때 매뉴얼에 함께 제공되며, MySQL 드라이버의 경우 "com.mysql.jdbc.Driver" 이다. 드라이버가 성공적으로 로딩되어야 JSP와 데이터베이스와 연동 프로그램을 작성할 수 있다.

드라이버가 로딩 됐으면 "DriverManager.getConnection" 메소드를 이용 JSP와 데이터베이스 서버와의 연결을 실행한다. 이 메소드를 실행하기 위해 필요한 파라메터 역시 드라이버 배포시 매뉴얼에 함께 제공되며 드라이버 별로 고유한 패턴을 가지는데 MySQL의 경우 다음과 같은 형식을 가진다.

"jdbc:mysql://hostname:3306/databasename?user=userid&password=userpassword"


이를 커넥션스트링이라 하는데 프로그램에서 사용된 커넥션스트링

"jdbc:mysql://localhost:3306/jsp?user=jsp&password=your_password"


를 살펴보면 "localhost"에 접속하라는 의미이며, 사용자 아이디는 "jsp", 비밀번호는 "your_password" 그리고 사용하려는 데이터베이스는 "jsp" 임을 알 수 있다. "DriverManager.getConnection" 메소드에 의해 연결된 결과는 Connection 클래스 객체를 생성한 후 저장한다.

conn = DriverManager.getConnection(url);


데이터베이스 선택과 함께 서버와의 연결이 이루어지면 쿼리실행 단계에 들어간다. 이 프로그램은 회원가입을 위한 프로그램이므로 만약 입력된 회원정보가 입력 창에

hong
1234
12345
Hong Gil Dong
123456
7654321

순으로 입력 됐다면 다음과 같은 SQL을 만들어 실행하여 회원정보를 테이블에 저장해야 한다.

INSERT INTO members VALUES
('hong', md5('1234'), 'Hong Gil Dong', '123456', md5('7654321'))

위 SQL 에서 md5('1234')와 md5('7654321')은 '1234', '7654321'을 암호화 알고리즘인 MD5 알고리즘을 사용하여 암호화 하라는 의미이다. 그러므로 members 테이블에 비밀번호와 주민등록번호 뒷 자리는 암호화되어 '1234', '7654321'이 아닌 전혀 다른 값으로 저장된다. 프로그램에서 회원 정보는 "request.getParameter" 메소드를 이용 전달받으며,

"INSERT INTO members VALUES ('"
+ userId +"', md5('"+ userPwd1 +"'),'"+ userName +"','"+ jumin1 +"',md5('"+ jumin2 +"'))"

부분이 회원정보를 테이블에 저장하기위한 "INSERT" 문을 만드는 부분이다. JSP 프로그램에서 데이터 조작을 위한 SQL 문을 만든 후에는 Connection 객체의 메소드 "createStatement"를 이용 Statement 객체를 생성한 후 이 객체의 "execute" 메소드를 이용 쿼리를 실행한다.

stmt = conn.createStatement();
stmt.execute(sql);

쿼리 실행 후 모든 데이터 조작이 마무리되면 Statment 객체와 Connection 객체의 "close" 메소드를 이용 할당된 자원을 돌려주고 연결을 끊는다.

stmt.close();
conn.close();

 
사용자 삽입 이미지

MemberJoin.jsp 실행결과


다음 프로그램 "MemberView.jsp"는 "members" 테이블에 저장된 레코드를 출력하는 JSP 프로그램이다. 테이블 검색을 위해서 사용하는 SQL은 "SELECT" 문이다. "SELECT" 문은 "INSERT", "DELETE","UPDATE" 문과는 달리 처리해야 하는 부분이 더 필요하다. "SELECT" 문을 실핼할 때도 서버연결, 데이터베이스 선택, 쿼리실행, 연결끊기의 네 단계가 필요하다. 그러나 "SELECT" 문의 경우 검색된 결과를 사용자에게 출력해야 하기 때문에 쿼리실행 후 검색된 레코드를 반복문을 통해 추출하고 출력하는 부분이 추가된다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
Class.forName("com.mysql.jdbc.Driver");

Connection conn = null;
Statement  stmt = null;
ResultSet  rs = null;

String url = "jdbc:mysql://localhost:3306/jsp?user=jsp&password=your_password";
String sql = "SELECT userid, username, jumin1 FROM members";
conn = DriverManager.getConnection(url);
stmt = conn.createStatement();

rs = stmt.executeQuery(sql);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
while (rs.next()) {
%>
아이디 : <%= rs.getString("userid") %><br />
이름 : <%= rs.getString("username") %><br />
주민등록 : <%= rs.getString("jumin1") %><br />
<%
}
%>
</body>
</html>
<%
stmt.close();
conn.close();
%>

위 프로그램을 살펴보면 ResultSet 객체 rs를 선언하고 있다. 이 객체는 쿼리실행 단계에서 그 결과를 저장한다. 이 때 "SELECT" 문의 실행을 위해 stmt.execute가 아닌 stmt.executeQuery 메소드를 사용하고 있음에 주목하자. 저장된 결과는 ResultSet 형으로 검색된 모든 레코드를 가지고 있다. 여기서 각각의 레코드로 접근을 하기 위해서는 "next" 메소드를 이용한다. "next" 메소드가 호출되면 현 레코드에서 다음 레코드로 커서를 이동한다. 커서란 레코드를 가리키는 포인터를 의미한다. 만약 마지막 레코드인 경우 false를 돌려준다. 그러므로 반복문을 이용하면 모든 레코드를 읽을 수 있다.

현재 레코드에서 각 필드값을 얻기 위해서는 "rs.getString" 메소드를 사용한다. 파라메터로는 해당 테이블의 필드명을 준다. 다음은 "MemberView.jsp"를 실행한 결과이다.

사용자 삽입 이미지

MemberView.jsp 실행결과


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

JDBC 드라이버와 한글 깨짐 해결  (0) 2009.06.09
NetBeans에서 JSP 개발하기  (0) 2009.06.07
웹프로그램의 개발 목적  (0) 2009.03.24
JSP에서 폼 데이터 처리  (0) 2009.03.23
쿼리스트링(Query String)  (2) 2009.03.18
AND

웹프로그램을 배우는 목적은 여러가지가 있을 수 있다. 여기서는 두 가지 정도의 목적을 살펴보겠다. 먼저 다음 그림과 같은 구구단표를 웹브라우저에서 보기위한 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 실행결과


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

앞서 폼으로부터 입력된 값을 프로그램으로 전달하는 방법 두 가지(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

쿼리스트링은 사용자가 웹프로그램으로 입력 데이터를 전달하는 가장 단순하고 또한 널리 사용되는 방법이다. 이 방법은 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