티스토리 뷰

공부 이야기

[JSP] 게시판 만들기1

판다(panda) 2011. 6. 16. 00:00

추가 : http://blog.naver.com/ckdrjsl7?Redirect=Log&logNo=150124649755

제가 만든 소스를 가지고 주석 걸어주신 분인데요.. 보시면 더욱 도움이 될것 같아서 링크 걸어드립니다..

 

우선 게시판 만들기 전에..

ORACLE, CentOS, Tomcat, Apache 등을 설치했구요..

그 외.. 뭘 설치했는지 생각이 안나지만.. 아무튼 하면서 생각나면 바로 바로 적을께요..

JSP 관련 서적들을 살펴보면.. 대부분이 이클립스를 사용하여 java 로 제작하고..
서블릿 같은것을 이용해서.. 제작을 하더라구요..

대규모 프로젝트인 경우 이클립스 같은 프로그램으로 패키지 만들어서 하는것이 효과적일 수 있습니다..

하지만.. 제가 만들 게시판은.. 저 혼자 작업하고.. 간단하게 만들것이기 때문에..

이클립스, 서블릿 같은건 안 쓰고.. 제작을 하려고 합니다..

사용할 툴은 다음과 같습니다..

ftp를 실행할 수 있는 알FTP나 타FTP 프로그램,
문서 편집을 할 수 있는데 메모장이나, EditPlus,.Notepad2.exe
같은 프로그램을 사용하여 제작을 할겁니다..


같이 공부해요 카테고리는.. 제가 전문가도 아닐뿐더러.. 같이 배우면서 공부해보자.. 라는게 목적이기 때문에..

틀린점, 잘못된점이 많이 있을 수 있구요.. 자신이 알고있는 범위내에서 틀렸다면 틀렸다..

이건 이렇게 해야한다.. 라고 말씀해주시면..

수정하고 고쳐서 더 완성된 내용을 만들어가는게 목적인 카테고리입니다..

우선 참고 사이트입니다..

티몰스 의 랩하는 프로그래머  [개발Tools] 톰켓 (Tomcat) 다운로드 방법
Programmer를 꿈꾸며..  jsp 게시판 강좌
JSP 게시판 프로젝트 by ITmembers.net 손병목
귀가 즐거워질 시간.. Music is My Life  네이버 블로그
소설같은자북(jabook.com)-소설같은시리즈(Java, C#, C, JSP)



게시판을 만들기 위해 필요한 페이지를 생각해봅시다..

게시판 글 목록이 보이는 페이지가 있어야겠구요..
게시판 글 쓰는 페이지 정도 있으면 어느정도 게시판이 될것 같군요..

우선 몸통인 게시판 글 목록이 보이는 페이지를 만들어 봅시다..

board_list.jsp 파일을 새로 만들었습니다..

게시판에 필요한게 뭐가 있을까요?..
우선 글 번호가 있어야 할것 같고..
글이 뭔지 제목도 있어야 할것 같고..
누가 썼는지 등록자 이름도 있어야 할것 같습니다..
거기에 등록일자, 조회수도 추가하면 좋겠죠?..

우선 이런 형태의 테이블을 만들어봅시다..


요샌 에디터 프로그램들이 너무 좋아서..
그냥 버튼 하나로 테이블이 만들어지고 버튼이 만들어지고 하더군요..
뭐 그것을 사용하여 만드는것도 능력입니다.. 쓰다가 오타날 확률도 줄어들고.. 편하고..

하지만 다들 그러더군요.. 그런것 사용할때 하더라도.. 알고는 해야하지 않냐고..

알고 쓰면 좋죠.. 하지만 굳이 꼭 알아야할 필요는 없는것 같습니다..
모르면 그때그때 인터넷 좀 찾아보고..
아니 버튼 눌러서 쉽게 만들라고 만들어 놨는데.. 굳이 안쓰고 귀찮고 어렵게 타이핑해서 할 필요도 없고 말이죠..

버튼 있으면 버튼눌러 쉽게 쉽게 갑시다..

우선 태그 작성을 해서 테이블을 구성합시다..

<html> 옛날에 홈페이지 만들때 쓰고 되게 오랫만에 써보네요..
<head> 이건 없어도 그만인것 같은데
<title>게시판 목록</title>   타이틀입니다..  이건 뭐 다 아시죠?..
</head>

<table> 하면 테이블 생성이 됩니다..

<table ... ... ... ... > 하고 옵션을 주면 테이블 모양이 변하죠..
옵션한번 줘 봅시다..
<table width=700> 너비를 700 정도의 크기를 줬습니다..
 <tr>
  <td width=50> 너비를 50 정도 줬습니다.. 나머지 내용 합쳐서 650~700 정도 잡으면 될것 같네요..
  <p align=center> 번호 </p> 가운데 정렬 해줬습니다..
  </td>
 </tr>
</table>

위와 같이 만들었다면.. 번호 한칸 만든겁니다..

<tr> </tr> 사이에.. <td>를 추가해서 나머지를 만듭니다..
그럼 이런식으로 들어가겠죠..

 <tr>
  <td width=50><p align=center>번호</p></td>
  <td width=100><p align=center>이름</p></td>
  <td width=300><p align=center>제목</p></td>
  <td width=100><p align=center>등록일</p></td>
  <td width=100><p align=center>조회수</p></td>
 </tr>
</table>

다시 테이블을 만듭니다..
왜냐구요?.. 버튼을 만들기 위해서입니다.. 글 쓰기 버튼이 있어야 글을 쓰죠..
그냥 만들어도 되지만.. 윗 테이블과 크기를 맞추고 싶어서 크기는 똑같이 만들었습니다..

<table width=700>
 <tr>
  <td><input type=button value="글쓰기" OnClick="window.location='board_write.jsp'"></td>
       타입은 버튼이고, 버튼 위에 표시되는 내용은 글쓰기, 버튼을 눌렀을때 이동하는 페이지는 'board_write.jsp' 입니다..
       하지만 페이지를 아직 안만들었기 때문에 알수없는 페이지가 나올겁니다..
       board_write.jsp 도 새로 생성합니다..
 </tr>
</table>

그리고 만든 board_list.jsp 를 보니..
어라.. 테두리가 없고.. 이거 보기가 힘들군요..

테이블 옵션을 추가해야할 것 같습니다..

<table width=700 border=1 cellspacing=1> 테이블 두께를 1만큼 크기했고, 셀 경계면을 1만큼 올려 두툼하게 만들었습니다..

그리고 다시 확인!..
아래와 같은 테이블을 만들어졌을겁니다..


현재까지의 'board_list.jsp' 의 내용은 이렇습니다..
<html>
<head>
<title>게시판 목록</title>
</head>
<table cellspacing=1 width=600 border=1>
<tr>
<td width=50><p align=center>번호</p></td>
<td width=100><p align=center>이름</p></td>
<td width=320><p align=center>제목</p></td>
<td width=100><p align=center>등록일</p></td>
<td width=100><p align=center>조회수</p></td>
</tr>
</table>
<table width=700>
<tr><td><input type=button value="글쓰기" OnClick="window.location='board_write.jsp'"></td></tr>
</table>

앞으로 이 소스에 글찾기, 글목록 표시, 페이지, 게시물 숫자 등을 추가할겁니다..
기회가 되면 이메일 보내는것도 만들어보죠..


이제 글쓰기 버튼을 눌렀을때 나올 화면을 만들어 봅시다..
저는 이런식으로 구성을 해봤습니다..


이름, 이메일, 홈페이지주소, 제목, 내용, 그리고 글 등록 버튼.. 을 만들겁니다..
귀찮으시면 이름, 제목, 내용, 버튼 만 만드셔도 됩니다..

이것 역시 테이블을 이용해서 만들겠습니다..

<html>
<head>
<title>게시판 글쓰기</title>
</head>

<table width=700 border=1  cellspacing=0 cellpadding=5>
어라 cellpadding 이란게 새로 나왔네요?.. 이건 뭘까요? 하시는 분은 아래 글을 보시구요.. 바로 넘어가겠습니다..

cellspacing 속성은 셀 구분 선의 굵기를 조정해주는 속성이고,
cellpadding 은 셀 안쪽 여백의 간격을 조정해 주는 속성을 갖고 있습니다. 라고..
출처사이트 - cellspacing="수치" 와 cellpadding="수치"  에 나와있습니다..

<tr>
<td><b>이름</b></td> 이름에 <b>를 줘서 강조 좀 해봤습니다..
</tr>
<tr>
<td> ... ... </td>
</tr>

board_list.jsp 에서 테이블 만든것 처럼.. 쭈욱 적어주시면 되는데..
<tr>과 </tr> 을 넣어서 아래로 한칸씩 내려줘야 합니다..

그럼 아래 빨간 상자 부분만 완성될겁니다..


이제 왼쪽 빈칸을 만들어야 하는데.. 이것또한 쉽습니다..
<tr>과 </td> 사이에 <td></td>를 한개 더 넣습니다..
<tr>
<td><b>이름</b></td>
<td><input type=text name=dbname size=50  maxlength=50></td>
       타입은 텍스트, 이름은 오라클 데이터 베이스에 저장할것이라 dbname 로 만들었습니다..
       사이즈는 50 만큼 만들었고, 최대 저장되는 문자길이는 50자입니다..
</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>

여기서 내용은 칸이 큰데.. input type 이 아닌 textara 를 사용합니다..
<tr><td><b>내용</b></td><td><textarea name=dbmemo cols=50 rows=10></textarea></td></tr>
한줄에 들어갈 문자행 수는 50자, 화면에 표시될 문자여 수는 10줄..

<table width=700 border=1 cellspacing=0 cellpadding=0>
<tr>
<td><input type=button value="등록" OnClick="window.location='board_write_insert.jsp'"></td>
       타입은 버튼, 버튼에 표시될 내용은 등록, 버튼을 눌렀을때 'board_write_insert.jsp' 으로 이동합니다..
</tr>
</table>

여기서 또 'board_write_insert.jsp' 페이지가 없으니.. 알수없는 페이지가 뜰겁니다..
'board_write_insert.jsp' 를 새로 만들어줍니다..

'board_write_insert.jsp' 페이지는 'board_write.jsp' 페이지에 입력했던 내용을 오라클 DB에 저장하는 페이지입니다..
필수 페이지라고 할 수 있겠죠..

현재까지의 'board_write.jsp' 의 내용은 이렇습니다..
<html>
<head>
<title>게시판 글쓰기</title>
</head>
<table width=700 border=1 cellspacing=0 cellpadding=5>
<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>
</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>

오늘은 각 페이지 구성목록, 테이블 작성을 해봤습니다..

다음은 오라클 테이블 구성과 DB에 저장하기 위한 메소드들을 알아보죠..


타이핑 보다는 드래그 하시는 분들이 많으시겠지만.. 드래그방지를 해놔서.. 불편하실겁니다..
물론 드래그방지 풀고 드래그 하시는 분들도 있으시겠지만..
이렇게 파일 올려드리는게 더 편하실것 같아서 말이죠..
그래서 지금까지 작성한 파일을 올려드리겠습니다..
board_list.jspboard_write.jsp


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

저작자표시