JSP 프로그램에서 MySQL용 JDBC 드라이버를 이용 폼으로 부터 POST 메소드로 전달된 한글 데이터를 Insert 할 때 한글이 깨진다면 페이지 문자셋을 고려하여 연결 URL을 다음과 같이 지정한다. 그러면 한글이 깨지지 않은 데이터를 테이블에 잘 저장할 수 있다. 물론 request.setCharacterEncoding 메소드의 파라메터도 문자셋에 맞도록 올바르게 지정해야 하고...
 
페이지 문자셋이 "EUC-KR" 인 경우
request.setCharacterEncoding("euc-kr");
...
String jdbc_url = "jdbc:mysql://localhost:3306/jsp_test?useUnicode=true&characterEncoding=euckr";


페이지 문자셋이 "UTF-8" 인 경우
request.setCharacterEncoding("utf-8");
...
String jdbc_url = "jdbc:mysql://localhost:3306/jsp_test?useUnicode=true&characterEncoding=utf8";

만약 MySQL 서버가 4.x 까지의 버전 이라면 URL에서 "euckr"과 "utf8" 부분을 각각 "euc-kr", "utf-8"로 바꿔줘야 한다.

아래 예제 프로그램을 참조하자.

페이지 문자셋이 "EUC-KR"인 경우.

form.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="regdb.jsp" method="post">
이름 : <input type="text" name="name" />
<input type="submit" value="저장" />
</form>
</body>
</html>

regdb.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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
Connection conn = null;
Statement stmt = null;
String jdbc_driver = "com.mysql.jdbc.Driver";
String jdbc_url    = "jdbc:mysql://localhost:3306/jsp_test?useUnicode=true&characterEncoding=euckr";
String jdbc_user   = "jsp_test";
String jdbc_pwd    = "jsp_test";
String sql  = null;
String name = request.getParameter("name");
sql = "INSERT INTO member_euckr VALUES ('" + name + "')";
Class.forName(jdbc_driver);
conn = DriverManager.getConnection(jdbc_url, jdbc_user, jdbc_pwd);
stmt = conn.createStatement();
stmt.executeUpdate(sql);
%>
<%= sql %><br>
당신의 이름은
<%= name %>
입니다.
</body>
</html>


페이지 문자셋이 "UTF-8"인 경우.

form.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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="regdb.jsp" method="post">
이름 : <input type="text" name="name" />
<input type="submit" value="저장" />
</form>
</body>
</html>

regdb.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
Connection conn = null;
Statement stmt = null;
String jdbc_driver = "com.mysql.jdbc.Driver";
String jdbc_url    = "jdbc:mysql://localhost:3306/jsp_test?useUnicode=true&characterEncoding=utf8";
String jdbc_user   = "jsp_test";
String jdbc_pwd    = "jsp_test";
String sql  = null;
String name = request.getParameter("name");
sql = "INSERT INTO member_utf VALUES ('" + name + "')";
Class.forName(jdbc_driver);
conn = DriverManager.getConnection(jdbc_url,jdbc_user, jdbc_pwd);
stmt = conn.createStatement();
stmt.executeUpdate(sql);
%>
<%= sql %><br>
당신의 이름은
<%= name %>
입니다.
</body>
</html>


위 예제에서 사용된 두 테이블 member_euckr과 member_utf의 구조는 각각 다음과 같다.

CREATE TABLE `member_euckr` (
  `name` varchar(20) NOT NULL
) DEFAULT CHARSET=euckr;

CREATE TABLE `member_utf` (
  `name` varchar(20) NOT NULL
) DEFAULT CHARSET=utf8;
AND

Eclipse와 함께 Java 개발 통합환경으로 자주 이야기 되는 프로그램으로 NetBeans가 있다. NetBeans는 SUN에서 개발 배포되는 프로그램으로 "http://www.netbeans.org"에서 무료로 다운로드할 수 있다. NetBeans 역시 많은 사용자를 확보하고 있는 성공적인 오픈 소스 프로젝트로 지속적으로 성장하고 있는 커뮤니티와 전세계 100여개에 달하는 파트너들을 거느리고 있다.

현재 이 프로젝트는 NetBeans IDE와 NetBeans Platform, 두 종류의 프로덕트가 존재하는데 NetBeans IDE는 개발 환경이고, NetBeans Platform은 대규모 데스크탑 애플리케이션을 개발할 때, 소프트웨어의 뼈대로 활용할 수 있는 기반 소프트웨어이다.

두 제품 모두 오픈 소스이며, 상업적인 용도와 비상업적인 용도 모두에 대해 무료로 사용할 수 있다. 그러면 NetBeans IDE를 이용 JSP 프로젝트를 생성하고 프로그램을 작성 실행하는 방법을 살펴보자.

우선 NetBeans IDE를 싱행하면 다음과 같은 화면을 볼 수 있다.

사용자 삽입 이미지

NetBean IDE 초기화면


위 화면에서 JSP 프로젝트를 생성하려면 먼저 Project Window에서 마우스 오른쪽 버튼을 클릭해 "New Project..." 항목을 선택한다.

사용자 삽입 이미지

New Project 항목 선택


"New Project" 창은 생성할 프로젝트가 어떤 종류의 프로젝트인가를 지정하는 창이다. 이 창이 뜨면 "Categories" 에서 "Java Web"을 클릭한다. 그러면 "Projects:"의 내용이 변경되는데 여기서 "Web Application" 항목을 선택하고 "Next >" 버튼을 클릭 다음 화면으로 넘어간다.

사용자 삽입 이미지

JSP를 위한 프로젝트 선택


프로젝트 이름을 지정하기 위한 "New Web Application" 창이 뜨면 "Project Name"에 적당한 이름을 지정한다. 여기서는 "HelloWeb"으로 하였다. 프로젝트 이름을 지정한 후에 "Next >" 버튼을 클릭한다.

사용자 삽입 이미지

프로젝트 이름 지정


"New Web Application" 창에서는 JSP 프로그램을 실행시키기 위한 서버를 설정해야 한다. Eclipse에서는 "Apache Tomcat"을 별도로 다운로드 받은 후 JSP 실행을 위한 서버로 사용했지만 "NetBeans"에서는 기본적으로 "GlassFish" 서버를 포함하고 있다.

이 글을 작성하는 시점에서 "NetBeans IDE 6.5.1"에 포함된 "GlassFish"는 V2와 V3 Prelude이다. 그 중 GlassFish V3 Prelude는 모듈식 OSGi 기반 아키텍처 위에 구축된 경량의 Web 2.0 개발 및 배포 플랫폼으로 개발자는 JRuby, Groovy와 같은 기존 Java 웹 기술을 지원하면서 동적으로 확장 가능하고 포함 가능한 플랫폼의 이점을 누릴 수 있다고 한다.

여기서는 GlassFish V3을 서버로 사용하겠다. 물론 NetBeans에서도 "Apache Tomcat"을 원하면 이를 사용할 수 있다.

"Server" 항목을 "GlassFish V3"으로 설정했으면 "Next >" 버튼을 클릭하여 다음 단계로 넘어간다. 참고로 "Context Path" 항목은 프로젝트 이름 "HelloWeb"과 관련돼있음을 기억하자.

사용자 삽입 이미지

서버설정


이 창은 프레임워크를 설정하는 화면으로 자신이 사용하는 프레임워크가 있으면 이를 지정한다. 여기서는 사용하는 프레임워크가 없으므로 그냥 "Finish" 버튼을 클릭 모든 프로젝트 설정을 마무리한다.

사용자 삽입 이미지

프레임워크 설정


프로젝트가 성공적으로 생성되면 "Project Window"에 다음과 같은 구조의 트리가 나타난다.

사용자 삽입 이미지

프로젝트 트리


프로젝트가 성공적으로 생성됐다면 이제 프로그램을 작성해 보자. 먼저 "NameHandler"라는 JSP 빈즈를 만들어보자. JSP 빈즈를 만들기 위해서는 다음 그림과 같이 프로젝트 트리의 "Source Packages" 위에서 마우스 오른쪽 클릭을 한 다음 "New", "Java Class"를 차례로 선택한다.

사용자 삽입 이미지

JSP 빈즈 생성


"New Java Class" 창이 뜨면 "Class Name"과 "Package"를 지정한다. 여기서는 각 항목을 "NameHandler"와 "org.mypackage.hello"로 지정한 후 "Finish" 버튼을 클릭하였다.

사용자 삽입 이미지

클래스 이름 및 패키지 지정


JSP 빈즈가 올바르게 생성됐으면 다음과 같이 "Source Packages" 아래에 "org.mypackage.hello" 패키지가 생성되고 그 패키지 아래에 "NameHandler.java" 파일이 위치한다.

사용자 삽입 이미지

JSP 빈즈를 생성한 후 프로젝트 트리


여기서 "NameHandler.java" 항목을 더블클릭하여 "NameHandler.java" 파일이 다음 내용이 되도록 수정한 후 저장한다.

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package org.mypackage.hello;

/**
 *
 * @author 오윤상
 */
public class NameHandler {
    private String name;

    /** Creates a new instance of NameHandler */
    public NameHandler() {
       name = null;
    }

    public String getName() {
       return name;
    }

    public void setName(String name) {
       this.name = name;
    }

}

이제 프로젝트 트리에서 "index.jsp"를 더블클릭하여 "index.jsp"를 편집화면으로 불러낸 후 아래 내용으로 변경한 후 저장한다.

<%--
    Document   : index
    Created on : 2009. 6. 7, 오후 2:49:36
    Author     : 오윤상
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Entry Form</h1>

        <form name="Name Input Form" action="response.jsp">
            Enter your name:
            <input type="text" name="name" />
            <input type="submit" value="OK" />
        </form>
    </body>
</html>


이제 새로운 JSP 프로그램 "response.jsp"를 만들어 보자. 새로운 JSP 프로그램을 만들기 위해서는 프로젝트 이름 "HelloWeb" 위에서 마우스 오른쪽 클릭을 한 후 다음 그림과 같이 "New", "JSP..." 항목을 차례로 선택한다.
 
사용자 삽입 이미지

JSP 파일 만들기


"New JSP File" 창이 뜨면 "JSP File Name"에 원하는 JSP 파일 이름을 준다 이 때 확장자 ".jsp"는 생략 가능하며 자동으로 ".jsp"가 붙는다. 여기서는 이릉으로 "response"를 입력했다. 이름을 입력했으면 "Finish" 버튼을 클릭 새로운 JSP 파일의 생성을 마무리한다.

사용자 삽입 이미지

JSP 파일 이름 입력


이제 프로젝트 트리에서 "Web Pages" 아래에 새롭게 생성된 "response.jsp" 파일을 더블클릭하여 내용을 아래와 같이 수정한 후 저장한다.

<%--
    Document   : response
    Created on : 2009. 6. 7, 오후 3:07:15
    Author     : 오윤상
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
        <jsp:setProperty name="mybean" property="name" />
        <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>
    </body>
</html>


앞의 프로그램 "NameHandler.java", "index.jsp", "response.jsp"를  모두 입력했다면 이제 실행릉 해 보자. 이 세 프로그램 중 "index.jsp"를 실행하면 나머지 두 프로그램은 자동으로 처리되므로 여기서는 index.jsp 프로그램만 실행하는 방법만 살펴보자.

"index.jsp"를 샐행하려면 다음 그림과 같이 프로젝트 트리의 "index.jsp"에서 마우스 오른쪽 클릭 후 "Run File" 항목을 선택한다.

사용자 삽입 이미지

JSP 파일 실행


그러면 "NetBeans IDE" 하단에 메세지 출력과 함께 잠시 후에 "index.jsp" 프로그램이 실행된 인터넷 브라우저가 뜬다. 여기서 적당한 값을 주고 "OK" 버튼을 클릭하면 "response.jsp"를 실행한다.

사용자 삽입 이미지

index.jsp 실행화면


사용자 삽입 이미지

response.jsp 실행화면


AND

우리는 앞서 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