티스토리 뷰

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

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

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


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

어느새 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" %>

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

<table>
 <tr>
  <td>
   <form name="addForm" method="post" target="action" action="/newboard/newboard_add_act.jsp" onSubmit='return chkForm(this)'>
   <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr style="background:url('/newboard/img/table_mid.gif') repeat-x; text-align:center;">
     <td width="5"><img src="/newboard/img/table_left.gif" width="5" height="30" /></td>
     <td>판다의 이상한 게시판 등록</td>
     <td width="5"><img src="/newboard/img/table_right.gif" width="5" height="30" /></td>
    </tr>
   </table>

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

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

</body>
</html>

결과 화면..



우선 화면 구성만 해봤구요..

다음 글에서 테이블 구성등을 해보겠습니다..

오늘의 소스코드입니다..


저작권 표시 꼭!.. 상업적 이용 절대 불가!.. 컨텐츠 변경 안됨!..