[JSP] 게시판 만들기 세번째 - 다시 만드는 게시판1

티스토리 뷰

공부 이야기

[JSP] 게시판 만들기 세번째 - 다시 만드는 게시판1

판다(panda) 2012. 3. 9. 00:02

이건 따지고 보면.. 게시판 만들기 두번째 확장 버전입니다..

이번엔 조금 더 진화시켜서 진행을 해보죠..

이메일 보내기는.. 찾는 분이 없어서 보류해두겠습니다..

원래 이게 강좌가 아니였는데 말이죠;.. 그냥 만드는 방법 적어놓고.. 나중에 참고해야지 라고 했던것이..

어느새 JSP 강좌가 되어버렸습니다..

제 블로그 유입키워드 중에 대부분이 JSP 게시판입니다..

잘하시는 분들이 제 소스 코드 보시면 답답하게 느낄텐데 말이죠;..

아무튼 게시판 만들기 세번째 시작해보겠습니다..

기존의 코딩 방법은 두번째 공지사항 만들기와 같습니다..

공지사항 만들기보다 더 발전된 화면을 보여줘야한다는 부담감이 생기는군요;..

저는 제 study 웹서버에 newboard 라는 작업명으로 작업을 시작하겠습니다..

이번에는 그래도 업그레이드 버전이니까 좀 꾸미면서 진행을 해보도록 하죠..

기존의 공지사항 만들기는 이렇게 생겼는데요.. 아래처럼 만들어볼껍니다..

위에 처럼 테두리를 만드려면 border 값을 주곤 하는데요..

cellpadding="1" cellspacing="1" border="1" 값을 주면 아래 처럼 나오죠..

"내가 원하는건 파란 테두리야~"..

파란 테두리는 이미지 파일입니다.. 만든거에요..
왼쪽

가운데

오른쪽

이미지 3개가 합쳐서 나온것이죠..

그럼 위에 이미지 3개를 다운 받던지.. 아니면 만드시던지 그건 알아서 하시구요..

newboard 폴더 아래에 img 폴더를 만들고.. 그 폴더 안에 3개의 파일을 넣었습니다..

코딩 시작해보겠습니다..

우선 매번 그렇지만 리스트를 하나 만듭니다..
newboard_list.jsp 라고 하나 만들었습니다..
<%@ page language="java" import="java.sql.*,java.util.*,java.io.*,util.*" contentType="text/html;charset=euc-kr" %>

<html>
<head>
<title>3번 게시판</title>
</head>
<body>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
테이블의 폭은 100%로 해놨습니다.. 해상도에 따라 크기가 변경되게 말이지요..

<tr height="5"><td></td></tr>
<tr style="background:url('/newboard/img/table_mid.gif') repeat-x; text-align:center;">
백그라운드에 이미지를 넣고 그 이미지를 repeat 을 사용해 반복해서 넣습니다..

  <td width="5"><img src="/newboard/img/table_left.gif" width="5" height="30" /></td>
가장 왼쪽에는 당연히 왼쪽 이미지를 넣어줘야겠죠..

  <td>번호</td>
  <td>제목</td>
  <td>이름</td>
  <td>등록일자</td>

   <td width="5"><img src="/newboard/img/table_right.gif" width="5" height="30" /></td>
    당연히 오른쪽에는 오른쪽 이미지를 넣어줘야합니다..

</tr>
</table>

<table>
<tr align="center">
  <td><a href="/newboard/newboard_add.jsp"><img src="이미지주소" border="0" alt="등록"></a></td>
</tr>
</table>

결과 화면..

이번엔 등록하는 화면을 만들어봤습니다..
newboard_add.jsp 라고 하나 만들었습니다..
<%@ page language="java" import="java.sql.*,java.util.*,java.io.*,util.*" contentType="text/html;charset=euc-kr" %>

   <table>
    <tr>
     <td> </td>
     <td>제목</td>
     <td><input name="subject" size="50" maxlength="100"></td>
     <td> </td>
    </tr>
    <tr height="1" bgcolor="#dddddd"><td colspan="4"></td></tr>
    칸을 구분해주기 위해서 회색 밑줄을 만들어 봤습니다..

    <tr>
     <td> </td>
     <td>이름</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>내용</td>
     <td><textarea name="contents" 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="image" src="이미지주소" border="0" alt="등록">
      <a href="/newboard/newboard_list.jsp"><img src="이미지주소" border="0" alt="취소"></a></td>
     <td> </td>
    </tr>
   </table>
   </form>
  </td>
</tr>
</table>

</body>
</html>

결과 화면..