[JSP] 게시판 만들기2

티스토리 뷰

공부 이야기

[JSP] 게시판 만들기2

판다(panda) 2011. 6. 18. 00:02

게시판 만들기1을 따라하셨던 분들 중에 이렇게 나오시는 분들이 있을겁니다..

아놔.. 이거 뭐야 글씨 왜 깨지지?.. 하시지 마시고..

각 페이지에.. 이 내용을 추가해 주시면 됩니다..
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR" %>

그리고 서블릿 안쓴다고 했는데.. 각 참고 사이트 보면.. 거의 서블릿을 이용해서..
빼도 되는지 안되는지 잘 모르지만 우선 넣겠습니다..
<%@ page language="java" import="java.util.*, java.sql.*, javax.servlet.http.*" %>

이 두줄을 각 페이지 상단에 추가해주세요..
그럼 아래와 같이 글자가 인코딩 되어 나옵니다..

지난 시간에는 글 목록, 글 쓰기 테이블을 만들어봤습니다..
오늘은 데이터를 저장할 DB 테이블과 오라클 연동을 위한 메소드를 만들겁니다..

우선 DB테이블을 만들기 위해 Toad for Oracle 이라는 프로그램을 사용했습니다..
이게 DB 만들고 테스트하기엔 좋더군요..

오라클에서 직접 Table 을 create 해서 만들던지.. toad 를 이용해서 만들던지 편한 방법으로 하시면 됩니다..

각 참고 사이트에 보면.. 게시판에 리플 수라던지.. 비밀번호라던지.. 이것 저것 추가되어서 복잡한데요..

저는 글번호, 글번호, 이름, 제목, 등록일, 조회수, 이메일, 홈페이지, 내용 칼럼만 만들겠습니다..

글번호가 두개인 이유는.. 변동이 생겼을때 글 번호를 확인하기 위해서일겁니다..
저는 그렇게 알고있습니다;..

CREATE TABLE BOARD (
AID                NUMBER(10) PRIMARY KEY NOT NULL,
RID              NUMBER(10),
DBSUBJECT    VARCHAR2(50),
DBNAME        VARCHAR2(50),
DBDATE        DATE,
DBEMAIL        VARCHAR2(50),
DBHOMEPAGE VARCHAR2(50),
DBHITS          NUMBER(10),
DBMEMO        VARCHAR2(500) )

Toad 로 만든다면..

쉽게.. 편하게 만들수 있죠..

또 toad 에서는 쉽게 시퀀스를 만들수 있는데..
글이 생성될때마다 자동으로 1씩 올라가게 만들어 편하게 쓸 수 있습니다..

아니면 아래와 같이 타이핑해서 시퀀스를 만듭시다..
CREATE SEQUENCE BOARD_SEQ
START WITH 1
MAXVALUE 99999
MINVALUE 1
CYCLE
NOCACHE
NOORDER;

DB테이블, 시퀀스를 만들었으니..
이제 만들어둔 jsp 와 연결을 해봅시다..

우선 글쓰기 페이지 board_write.jsp 부터 추가합니다..

기존에 만든 글쓰기 페이지에는 내용을 넘겨주는 폼이 없었습니다..
그냥 껍데기일 뿐이였죠..

내용을 넘겨주는 폼을 넣어봅시다..
<html>
<head>
<title>게시판 글쓰기</title>
</head>

<table width=700 border=1 cellspacing=0 cellpadding=5>
<form name=writeform method=post action="board_write_insert.jsp">
<tr><td><b>이름</b></td><td><input type=text name=dbname size=50 maxlength=50></td></tr>
<tr><td><b>이메일</b></td><td><input type=text name=dbemail size=50 maxlength=50></td></tr>
<tr><td><b>홈페이지</b></td><td><input type=text name=dbhomepage size=50 maxlength=50></td></tr>
<tr><td><b>제목</b></td><td><input type=text name=dbsubject size=50 maxlength=50></td></tr>
<tr><td><b>내용</b></td><td><textarea name=dbmemo cols=50 rows=10></textarea></td></tr>
</form>
</table>

<table width=700 border=1 cellspacing=0 cellpadding=0>
<tr><td><input type=button value="등록" OnClick="window.location='board_write_insert.jsp'"></td></tr>
</table>

이제 글쓰기에서 넘겨진 값이 저장되는 'board_write_insert.jsp' 페이지를 작성해봅시다..
이건 그냥 다 넣어줬습니다..
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR" %>
<%@ page language="java" import="java.util.*, java.sql.*, javax.servlet.http.*" %>

우선 오라클 연결을 위한 메소드가 필요합니다..

// 오라클 커넥션을 위한 메소드
<%!
Connection DB_Connection() throws ClassNotFoundException, SQLException, Exception
{
String url = "jdbc:oracle:thin:@127.0.0.1:1521:ORCL"; // 오라클 @ 주소:포트:오라클호스트
Class.forName( "oracle.jdbc.driver.OracleDriver" );
Connection conn = DriverManager.getConnection( url, "study", "study" ); // (url, ID, PASSWD)

// 위와 같이 안하고 아래와 같은 방법으로도 할 수 있습니다..
// String username = "study";
// String userpass = "study";
// Connection conn = DriverManager.getConnection( url, username, userpass );
return conn;
}

다음은 파라메터로 들어온 값이 null 값이 아닌 경우에만..
한글로 인코딩 처리해서 값을 리턴시켜주는 메소드입니다..
이렇게 안하면 글씨가 깨지거나 뭐 그렇게 되던군요..

String TO_DB( String str ) throws Exception
{
if( str == null )
return null;
return new String( str.getBytes( "8859_1" ), "euc-kr" );   // 8859_1 숫자 타입을 euc-kr 타입으로 변경
}
%>

오라클 설치하는 방법등은 예전에 올려놨는데요.. 제 블로그 내에서 검색하셔서 찾아 보시던가..
지식인이나.. 잘 정리된 블로그에 가셔서 보시면 됩니다..
아마 이 부분이 가장 어려운 부분일겁니다..

오라클 커넥션 메소드를 만들었으니.. 이제 데이터를 받고 DB에 저장을 해봅시다..
<%
Connection conn = DB_Connection();
Statement stmt = null;

String dbname = request.getParameter( "dbname" );    // input 태그에서 name=dbname 의 값을 받아 String으로 받음

dbname = TO_DB( dbname );        // 한글 인코딩 처리하는 메서드에 넣고 인코딩 된 값을 다시 할당

String dbemail = request.getParameter( "dbemail" );
String dbhomepage = request.getParameter( "dbhomepage" );
// (" ") 안에 있는 파라메터를 넘겨받아 String 형으로 저장 위에 String dbname 이랑 똑같은 말입니다..
// TO_DB 안한 이유는 이메일이나 홈페이지는 대부분 영어로 쓰기 때문이죠..
// 한글도메인이라면 위와 같이 TO_DB 해주시면 됩니다..

String dbsubject = request.getParameter( "dbsubject" );
dbsubject = TO_DB( dbsubject );
String dbmemo = request.getParameter( "dbmemo" );
dbmemo = TO_DB( dbmemo );

try
{
// 이제 본격적인 쿼리문 작성에 들어가는데요..
// 쿼리문 작성방법엔 여러가지 방법이 있습니다..
// query.append() 로 하는 방법이 있고, sql += 이런식으로 쓰는 방법이 있습니다..

stmt = conn.createStatement(); // 커넥션 개체로 부터 Statement 생성 핸들러 연결
String seq = "select max(aid) from board"; // 쿼리문
ResultSet rs = stmt.executeQuery( seq );  // 쿼리문 명령 실행, 리턴값은 처리항 행의 갯수 ResultSet 에 결과 저장

  int aid = -1;
  if( rs.next() )
   aid = rs.getInt(1);       // re.next()가 있으면 Integer형 aid에 결과값 할당
  aid++;

  String sql = "";
  sql += "insert into board values( ";
  sql +=     aid;     // article id 글 번호
  sql +=     ", ";
  sql +=     aid;
  sql +=     ", '";
  sql +=     dbsubject;    // 제목
  sql +=     "', '";
  sql +=     dbname;     // 작성자
  sql +=     "', sysdate, '";  // 등록일
  sql +=     dbemail;    // 이메일
  sql +=     "', '";
  sql +=     dbhomepage;    // 홈페이지
  sql +=     "', 0, '";    // 조회수
  sql +=     dbmemo;     // 내용
  sql +=     "')";

  // 필드명 순서대로 위에서 얻은 값들을 넣음
  stmt.executeUpdate( sql );  // .executeUpdate() - insert, delete, update 때만 사용
  stmt.close();
}
catch( Exception e )
{
  out.println( e.toString() );
}
%>

글이 저장되면.. 자동으로 글 목록을 보여주는 페이지를 만들기 위해서
자바스크립트로 페이지 이동을 시킵니다..
저장됐다는 메세지 한번 보여주고 나서 말이죠..
<html>
<head>
<script language=javascript>
self.window.alert("입력한 글을 저장하였습니다.");
location.href="board_list.jsp";
</script>
</head>
</html>

'board_write_insert.jsp' 의 전체 소스 코드는..
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR" %>
<%@ page language="java" import="java.util.*, java.sql.*, javax.servlet.http.*" %>
<%!
Connection DB_Connection() throws ClassNotFoundException, SQLException, Exception
{
  String url = "jdbc:oracle:thin:@127.0.0.1:1521:ORCL";
  Class.forName( "oracle.jdbc.driver.OracleDriver" );
  Connection conn = DriverManager.getConnection( url, "study", "study" );
  return conn;
}

String TO_DB( String str ) throws Exception
{
  if( str == null )
   return null;
  return new String( str.getBytes( "8859_1" ), "euc-kr" );
}
%>

<%
Connection conn = DB_Connection();
Statement stmt = null;

String dbname = request.getParameter( "dbname" );
dbname = TO_DB( dbname );
String dbemail = request.getParameter( "dbemail" );
String dbhomepage = request.getParameter( "dbhomepage" );
String dbsubject = request.getParameter( "dbsubject" );
dbsubject = TO_DB( dbsubject );
String dbmemo = request.getParameter( "dbmemo" );
dbmemo = TO_DB( dbmemo );

try
{
  stmt = conn.createStatement();
  String seq = "select max(aid) from board";
  ResultSet rs = stmt.executeQuery( seq );

  int aid = -1;
  if( rs.next() )
   aid = rs.getInt(1);
  aid++;

  String sql = "";
  sql += "insert into board values( ";
  sql += aid;
  sql += ", ";
  sql += aid;
  sql += ", '";
  sql += dbsubject;
  sql += "', '";
  sql += dbname;
  sql += "', sysdate, '";
  sql += dbemail;
  sql += "', '";
  sql += dbhomepage;
  sql += "', 0, '";
  sql += dbmemo;
  sql += "')";

  stmt.executeUpdate( sql );
  stmt.close();
}
catch( Exception e )
{
  out.println( e.toString() );
}
%>

<html>
<head>
<script language=javascript>
self.window.alert("입력한 글을 저장하였습니다.");
location.href="board_list.jsp";
</script>
</head>
</html>

글을 쓴 후에.. 등록을 눌렀더니..
입력한 글을 저장하였습니다.. 라고 뜨면서..
글 목록 페이지로 이동!..

글이 저장됐는지 확인하려고 Toad 를 보니까.. 글이 입력은 됐군요..
하지만 뭐가 잘못 됐느지.. null 값이 뜹니다..

각 값이 null 뜨는게 입력값을 제대로 못 넘겨 받았다는 것이죠..

'board_write.jsp' 에서 input type = submit 으로 바꾸면 되는데..
제가 귀찮으니까.. 나중에 추가할 예정이였는데.. 지금 합시다..
나중에 또 추가하기 귀찮으니까 말이죠..

글을 쓸때 빈칸이 들어오게 되면 null 값이 뜹니다.. null 값이 들어오는걸 방지하기 위해서..
자바 스크립트를 이용하여.. null 값일때 경고창을 보여주고..
포커스를 이동하여 null 값 위치로 커서를 보내는 것을 할겁니다..

'board_write.jsp' 상단에 <%@ page import="java.io.*, java.text.*" %> 을 추가하고..
그 아래 자바스크립트를 추가합니다..

<script language="javascript">  // 자바 스크립트 시작
function writeCheck()
{
  var form = document.writeform;

  if( !form.dbname.value )   // form 에 있는 dbname 값이 없을 때
  {
   alert( "이름을 적어주세요" ); // 경고창 띄움
   form.dbname.focus();   // form 에 있는 dbname 위치로 이동
   return;
  }

  if( !form.dbsubject.value )
  {
   alert( "제목을 적어주세요" );
   form.dbsubject.focus();
   return;
  }

  if( !form.dbmemo.value )
  {
   alert( "내용을 적어주세요" );
   form.dbmemo.focus();
   return;
  }

  if( !form.dbemail.value )
  {
   alert( "이메일을 적어주세요" );
   form.dbemail.focus();
   return;
  }

// 이메일에 이런식으로 적어줘서 @ 가 없을때 이메일이 아니라고 판단하는 스크립트를 만들어봤습니다..
// 1@ 이라고 쓰면 이메일이라고 인식하긴 하지만;.. 그래도 간단하게 체크할 수 있죠 ㅎㅎ..
  if( form.dbemail.value.indexOf("@")== -1 )
  {
   alert( "정확한 이메일을 적어주세요" );
   form.dbemail.focus();
   return;
  }

  if( !form.dbhomepage.value )
  {
   alert( "홈페이지를 적어주세요" );
   form.dbhomepage.focus();
   return;
  }

  form.submit();
}
</script>

또 아래 table 에 있는..
등록버튼 OnClick 내용을 바꿉니다..
<input type=button value="등록" OnClick="javascript:writeCheck();">

이제 다시 글을 써봅니다..