목록보기에 이어 글쓰기파일을 만들어 보겠습니다.
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> </td> <td align="center">제목</td> <td><input name="title" size="50" maxlength="100"></td> <td> </td> </tr> <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr> <tr> <td> </td> <td align="center">이름</td> <td><input name="name" size="50" maxlength="50"></td> <td> </td> </tr> <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr> <tr> <td> </td> <td align="center">비밀번호</td> <td><input name="password" size="50" maxlength="50"></td> <td> </td> </tr> <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr> <tr> <td> </td> <td align="center">내용</td> <td><textarea name="memo" cols="50" rows="13"></textarea></td> <td> </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> </td> <td colspan="2"><input type=button value="등록"> <input type=button value="취소"> <td> </td> </tr> </table> </td> </tr> </table> </body>
</html>
코드를 입력하시고 실행해보시면
글쓰기 양식이 생겼습니다.
write.jsp 파일도 생성했으니 list.jsp에서 write.jsp로 넘어가는 코드를 삽입하겠습니다.
list.jsp를 열어서 맨아래에 보시면
<td><input type=button value="글쓰기"></td>
이 부분이 있습니다. 현재는 글쓰기 버튼을 눌러도 아무 반응이 없습니다.
자 이곳에
OnClick="window.location='write.jsp'"
이 코드를 삽입하겠습니다.
<td><input type=button value="글쓰기" OnClick="window.location='write.jsp'"></td>
이렇게 링크를 걸게 되면 버튼을 눌렀을때 write.jsp로 넘어가게 됩니다.
다시 write.jsp로 넘어와서 글쓰기에 필요한 코딩을 추가시키도록 하겠습니다.
첫번째 테이블 안쪽에
<form name=writeform method=post action="write_ok.jsp">
이 코드를 추가시킵니다.
이 곳에 쓰인 값들을 write_ok.jsp에 보내야 하는데
데이터전달에는 주소에 값을 붙여서 보내는 Get방식과
파일형식으로 보내는 Post방식중 이곳은 Post방식을 사용합니다.
form을 열었으니 맨아래에 </form>을 써서 form을 닫아줍니다.
그리고 상단에 이 코드를 추가시킵니다.
<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>자바스크립트를 이용한 유효성검사입니다. 이름, 비밀번호, 제목, 내용을 입력 안했을시에 경고창을 띄우고 입력하게끔 합니다.
이제 아래쪽에 있는 버튼에 링크를 걸겠습니다.
<input type=button value="등록" OnClick="javascript:writeCheck();">
<input type=button value="취소" OnClick="javascript:history.back(-1)">
등록 버튼을 누를시 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> </td> <td align="center">제목</td> <td><input name="title" size="50" maxlength="100"></td> <td> </td> </tr> <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr> <tr> <td> </td> <td align="center">이름</td> <td><input name="name" size="50" maxlength="50"></td> <td> </td> </tr> <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr> <tr> <td> </td> <td align="center">비밀번호</td> <td><input type="password" name="password" size="50" maxlength="50"></td> <td> </td> </tr> <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr> <tr> <td> </td> <td align="center">내용</td> <td><textarea name="memo" cols="50" rows="13"></textarea></td> <td> </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> </td> <td colspan="2"><input type=button value="등록" OnClick="javascript:writeCheck();"> <input type=button value="취소" OnClick="javascript:history.back(-1)"> <td> </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 |
