행복을 찾아서 :: [JSP] JSP로 게시판 만들기

[JSP] JSP로 게시판 만들기 - 3(글쓰기)

Programming/JSP - 게시판만들기 2013. 1. 23. 16:35

목록보기에 이어 글쓰기파일을 만들어 보겠습니다.

write.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>
 <title>게시판</title>
 </head>
 <body>
<table>
  <tr>
   <td>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
     <tr style="background:url('img/table_mid.gif') repeat-x; text-align:center;">
      <td width="5"><img src="img/table_left.gif" width="5" height="30" /></td>
      <td>글쓰기</td>
      <td width="5"><img src="img/table_right.gif" width="5" height="30" /></td>
     </tr>
    </table>
   <table>
     <tr>
      <td>&nbsp;</td>
      <td align="center">제목</td>
      <td><input name="title" size="50" maxlength="100"></td>
      <td>&nbsp;</td>
     </tr>
     <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
    <tr>
      <td>&nbsp;</td>
      <td align="center">이름</td>
      <td><input name="name" size="50" maxlength="50"></td>
      <td>&nbsp;</td>
     </tr>
      <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
    <tr>
      <td>&nbsp;</td>
      <td align="center">비밀번호</td>
      <td><input name="password" size="50" maxlength="50"></td>
      <td>&nbsp;</td>
     </tr>
     <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
     <tr>
      <td>&nbsp;</td>
      <td align="center">내용</td>
      <td><textarea name="memo" cols="50" rows="13"></textarea></td>
      <td>&nbsp;</td>
     </tr>
     <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
     <tr height="1" bgcolor="#82B5DF"><td colspan="4"></td></tr>
     <tr align="center">
      <td>&nbsp;</td>
      <td colspan="2"><input type=button value="등록">
       <input type=button value="취소">
      <td>&nbsp;</td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</body>

</html>

코드를 입력하시고 실행해보시면

글쓰기 양식이 생겼습니다.

write.jsp 파일도 생성했으니 list.jsp에서 write.jsp로 넘어가는 코드를 삽입하겠습니다.

list.jsp를 열어서 맨아래에 보시면

이 부분이 있습니다. 현재는 글쓰기 버튼을 눌러도 아무 반응이 없습니다.

자 이곳에

OnClick="window.location='write.jsp'"

이 코드를 삽입하겠습니다.

이렇게 링크를 걸게 되면 버튼을 눌렀을때 write.jsp로 넘어가게 됩니다.

다시 write.jsp로 넘어와서 글쓰기에 필요한 코딩을 추가시키도록 하겠습니다.

첫번째 테이블 안쪽에

이 코드를 추가시킵니다.

이 곳에 쓰인 값들을 write_ok.jsp에 보내야 하는데

데이터전달에는 주소에 값을 붙여서 보내는 Get방식과

파일형식으로 보내는 Post방식중 이곳은 Post방식을 사용합니다.

form을 열었으니 맨아래에 </form>을 써서 form을 닫아줍니다.

그리고 상단에 이 코드를 추가시킵니다.

function writeCheck()
  {
   var form = document.writeform;
   
   if( !form.name.value )   // form 에 있는 name 값이 없을 때
   {
    alert( "이름을 적어주세요" ); // 경고창 띄움
    form.name.focus();   // form 에 있는 name 위치로 이동
    return;
   }
   
   if( !form.password.value )
   {
    alert( "비밀번호를 적어주세요" );
    form.password.focus();
    return;
   }
   
  if( !form.title.value )
   {
    alert( "제목을 적어주세요" );
    form.title.focus();
    return;
   }
 
  if( !form.memo.value )
   {
    alert( "내용을 적어주세요" );
    form.memo.focus();
    return;
   }
 
  form.submit();
  }
 </script>

자바스크립트를 이용한 유효성검사입니다. 이름, 비밀번호, 제목, 내용을 입력 안했을시에 경고창을 띄우고 입력하게끔 합니다.

이제 아래쪽에 있는 버튼에 링크를 걸겠습니다.

<input type=button value="등록" OnClick="javascript:writeCheck();">

등록 버튼을 누를시 writeCheck() 함수로 가서 검사를 하고 이상이 없을시 form.submit()으로 write_ok.jsp로 값을 보내게 됩니다.

취소 버튼을 누를시 뒤로가기 코드인 history.back()을 넣었습니다.

그리고 write_ok.jsp파일을 만들어 놓고

잘 실행되는지 테스트해보겠습니다. list.jsp파일을 실행시켜서 글쓰기 버튼을 누릅니다.

모든 값을 입력하고 등록버튼을 눌렀을때 이 주소처럼 write_ok.jsp가 열리는지 확인합니다.

여기까지 소스를 보겠습니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>


<script language = "javascript">  // 자바 스크립트 시작

function writeCheck()
  {
   var form = document.writeform;
   
   if( !form.name.value )   // form 에 있는 name 값이 없을 때
   {
    alert( "이름을 적어주세요" ); // 경고창 띄움
    form.name.focus();   // form 에 있는 name 위치로 이동
    return;
   }
   
   if( !form.password.value )
   {
    alert( "비밀번호를 적어주세요" );
    form.password.focus();
    return;
   }
   
  if( !form.title.value )
   {
    alert( "제목을 적어주세요" );
    form.title.focus();
    return;
   }
 
  if( !form.memo.value )
   {
    alert( "내용을 적어주세요" );
    form.memo.focus();
    return;
   }
 
  form.submit();
  }
 </script>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>게시판</title>
 </head>
 <body>
<table>
<form name=writeform method=post action="write_ok.jsp">
  <tr>
   <td>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
     <tr style="background:url('img/table_mid.gif') repeat-x; text-align:center;">
      <td width="5"><img src="img/table_left.gif" width="5" height="30" /></td>
      <td>글쓰기</td>
      <td width="5"><img src="img/table_right.gif" width="5" height="30" /></td>
     </tr>
    </table>
   <table>
     <tr>
      <td>&nbsp;</td>
      <td align="center">제목</td>
      <td><input name="title" size="50" maxlength="100"></td>
      <td>&nbsp;</td>
     </tr>
     <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
    <tr>
      <td>&nbsp;</td>
      <td align="center">이름</td>
      <td><input name="name" size="50" maxlength="50"></td>
      <td>&nbsp;</td>
     </tr>
      <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
    <tr>
      <td>&nbsp;</td>
      <td align="center">비밀번호</td>
      <td><input type="password" name="password" size="50" maxlength="50"></td>
      <td>&nbsp;</td>
     </tr>
     <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
     <tr>
      <td>&nbsp;</td>
      <td align="center">내용</td>
      <td><textarea name="memo" cols="50" rows="13"></textarea></td>
      <td>&nbsp;</td>
     </tr>
     <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
     <tr height="1" bgcolor="#82B5DF"><td colspan="4"></td></tr>
     <tr align="center">
      <td>&nbsp;</td>
      <td colspan="2"><input type=button value="등록" OnClick="javascript:writeCheck();">
       <input type=button value="취소" OnClick="javascript:history.back(-1)">
      <td>&nbsp;</td>
     </tr>
    </table>
   </td>
  </tr>
  </form>
 </table>
</body>
 </html>

이제 write_ok.jsp 파일을 열겠습니다. 이 ok파일에서는 실질적인 동작이 이루어집니다. 데이터베이스에 접근을 해서 자료를 데이터베이스에 입력하겠습니다.

<%@ page import="java.sql.*"%>

SQL문을 사용하기 위해 java.sql.* 을 import시킵니다.

<%
	request.setCharacterEncoding("euc-kr"); //받아오는 값들을 한글로 인코딩합니다.

	Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
	
	String url = "jdbc:odbc:board2";
	String id = "";
	String pass = "";


	String name = request.getParameter("name"); //write.jsp에서 name에 입력한 데이터값
	String password = request.getParameter("password");//write.jsp에서 password에 입력한 데이터값
	String title = request.getParameter("title"); //write.jsp에서 title에 입력한 데이터값
	String memo = request.getParameter("memo"); //write.jsp에서 memo에 입력한 데이터값
	
	try {	
		Connection conn = DriverManager.getConnection(url,id,pass);
		
		String sql = "INSERT INTO board1(USERNAME,PASSWORD,TITLE,MEMO) VALUES(?,?,?,?)";
		PreparedStatement pstmt = conn.prepareStatement(sql);
		
		pstmt.setString(1, name);
		pstmt.setString(2, password);
		pstmt.setString(3, title);
		pstmt.setString(4, memo);
		
		pstmt.execute();
		pstmt.close();
		
		conn.close();
} catch(SQLException e) {
	out.println( e.toString() );
	}

list.jsp에서는 Statement를 사용했는데 이곳에서는 PreparedStatement를 사용했습니다.

둘다 사용하기에 따라 장점이 있지만 PrepatedStatement가 더 오류잡기도 편한것 같습니다.

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

자바스크립트를 이용하여 데이터베이스에 자료가 입력된후 "입력한 글을 저장하였습니다"라는 경고창을 띄운후

list.jsp 즉 게시판 목록으로 돌아가게됩니다.

이곳은 사용자가 페이지를 볼 이유가 없기때문에 html파일은 필요없습니다.

이제 코딩이 잘 되었나 확인하기 위해 write.jsp를 실행시켜서 자료를 입력해봅니다.

저장하였다고 경고창이 뜹니다.

목록으로 이동하니 테스트2라는 게시물이 하나 더 생겼네요.

데이터베이스를 한번 봤더니 잘 들어가있네요.

write_ok.jsp 최종코드

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*"%>  
<%
	request.setCharacterEncoding("euc-kr");

	Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
	
	String url = "jdbc:odbc:board2";
	String id = "";
	String pass = "";
	String name = request.getParameter("name");
	String password = request.getParameter("password");
	String title = request.getParameter("title");
	String memo = request.getParameter("memo");
	
	try {	
		Connection conn = DriverManager.getConnection(url,id,pass);
		
		String sql = "INSERT INTO board1(USERNAME,PASSWORD,TITLE,MEMO) VALUES(?,?,?,?)";
		PreparedStatement pstmt = conn.prepareStatement(sql);
		
		pstmt.setString(1, name);
		pstmt.setString(2, password);
		pstmt.setString(3, title);
		pstmt.setString(4, memo);
		
		pstmt.execute();
		pstmt.close();
		
		conn.close();
} catch(SQLException e) {
	out.println( e.toString() );
	}
%>
  <script language=javascript>
   self.window.alert("입력한 글을 저장하였습니다.");
   location.href="list.jsp";

</script>

이미지출처 : 판다의 이상한 블로그(http://ssppmm.tistory.com/)

저작자표시 비영리 동일조건

'Programming > JSP - 게시판만들기' 카테고리의 다른 글

[JSP] JSP로 게시판 만들기 - 6(글수정) (22)	2013.01.24
[JSP] JSP로 게시판 만들기 - 5(글삭제) (7)	2013.01.24
[JSP] JSP로 게시판 만들기 - 4(내용보기) (20)	2013.01.23
[JSP] JSP로 게시판 만들기 - 2(게시판 목록) (87)	2013.01.22
[JSP] JSP로 게시판 만들기 - 1(구상, 준비) (7)	2013.01.21

Posted by 세이나린

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

[JSP] JSP로 게시판 만들기 - 3(글쓰기)

'Programming > JSP - 게시판만들기' 카테고리의 다른 글

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바


	by 세이나린