오늘은 게시판 만드는 법을 알아보았다.
데이터 입력창부터 시작해서 결과를 뿌리고, 그 중간을 연결하는 파일들까지 촘촘하게 짜여져 있다.
차근차근 알아보겠다.
1. <BoardDTO> 클래스
public class BoardDTO {
private int num;
private String name;
private String pwd;
private String email;
private String subject;
private String content;
private String ipAddr;
private String created;
private int hitCount;
앞으로 입력할 데이터들을 적어주고
getter, setter도 해줘야 한다! (여기선 생략하겠다)
2. 게시판 입력창 <created.jsp>
완성된 페이지이다. 이를 만들기 위한 코딩을 살펴보겠다.
(css 파일을 연결하는 것은 따로 css카테고리의 글 참고!!)
<body>
<div id="bbs">
<div id="bbs_title">
게 시 판
</div>
<form action="" method="post" name="myForm">
<div id="bbsCreated">
<div class="bbsCreated_bottomLine">
<dl>
<dt>제 목</dt>
<dd>
<input type="text" name="subject" size="60" maxlength="100" class="boxTF"/>
</dd>
</dl>
</div>
<!-- 작성자부터 패스워드까지 코딩은 같으니 여기선 생략 -->
<div id="bbsCreated_footer">
<input type="button" value=" 등록하기 " class="btn2" onclick="sendIt()"/>
<input type="reset" value=" 다시입력 " class="btn2" onclick="document.myForm.subject.focus();"/>
<input type="button" value=" 작성취소 " class="btn2" onclick="javascript:location.href='<%=cp%>/board/list.jsp';"/>
</div>
</form>
</div>
</body>
중간에 작성자부터 패스워드까지 입력하는 코딩은 같으며 (내용은 input대신 textarea로 설정)
블로그 글 진행을 위해 생략하였으니 참고바란다.
<dl>의 l은 line으로 하나의 행을 의미한다.
<dt>의 t는 title으로 제목이다.
<dd>의 d는 data로 값을 나타낸다.
마지막 부분에 '다시입력'과 '작성취소'부분은 지난 '성적처리'글에서 확인할 수 있다.
그 외의 '등록하기' 버튼은 누르면 sendIt()로 연결되며, 이는
<script type="text/javascript">
function sendIt(){
var f = document.myForm;
str = f.subject.value;
str = str.trim();
if(!str){
alert("\n제목을 입력하세요.");
f.subject.focus();
return;
}
f.subject.value = str;
//작성자부터 패스워드까지 위의 내용으로 입력하면 되기에 생략
f.action = "<%=cp%>/board/created_ok.jsp";
f.submit();
}
</script>같은 파일 내 상단에서 함수를 입력해주었다.
f.subject.value에서 가운데의 f와 value사이의 값은 지정한 name을 넣어주면 된다.
trim은 미리 js파일을 통해 만들어서 호출한 것이다.
값을 입력하지 않으면 alert로 알림창이 뜨게 하고, 해당 부분에 포커스를 갖다 댄다.
위와 마찬가지로 이는 작성자명부터 패스워드까지 같은 내용으로 주면 되기에 나머지 부분은 생략하였다.
그리고 마지막에 f.action으로 created_ok.jsp에 연결시켜 주었고 이제 그 부분을 살펴보겠다.
3. 입력 처리 <created_ok.jsp>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<jsp:useBean id="dto" class="com.board.BoardDTO" scope="page"/>
<jsp:setProperty property="*" name="dto"/>
<%
Connection conn = DBConn.getConnection();
BoardDAO dao = new BoardDAO(conn);
int maxNum = dao.getMaxNum();
dto.setNum(maxNum + 1);
dto.setIpAddr(request.getRemoteAddr());
dao.insertData(dto);
DBConn.close();
response.sendRedirect("list.jsp");
%>
한글로 글을 입력하니 인코딩을 해주어야 하며, 경로를 연결할 cp도 항상 위에 입력되어 있어야 한다.
(다른 파일들도 마찬가지)
useBean에서 dto에는 값이 5개만 넘어온다. name으로 설정한 데이터만 dto로 넘어온다.
num과 ipAddr은 created.jsp에서 따로 받지 않았다.
따라서 setNum으로 maxNum으로 받은 값에 +1해주며
setIpAddr에는 클라이언트 ip를 가져올 메소드를 입력해준다.
dao.getMaxNum과 dao.insertData는 밑의 BoardDAO에서 살펴보겠다.
4. <BoardDAO> 클래스
private Connection conn;
public BoardDAO(Connection conn) {
this.conn = conn;
}db에 연결을 해야하기 때문에 항상 입력해줘야 하며
생성자를 통해 객체를 생성함과 동시에 초기화 시킨다. 이는 스프링에서 의존성 주입이라고도 불린다.
//num의 최대값
public int getMaxNum() {
int maxNum = 0;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql;
try {
sql = "select nvl(max(num),0) from board";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
if(rs.next()) {
maxNum = rs.getInt(1);
}
rs.close();
pstmt.close();
} catch (Exception e) {
System.out.println(e.toString());
}
return maxNum;
}
created_ok에서 호출한 getMaxNum메소드이다.
게시판 만들기 글에서 보았듯이 같은 진행이다.
sql문으로 select하여 nvl로 null일 경우 0을 주어 거르게 하였다.
select이므로 결과를 받는 타입은 ResultSet이다.
if문으로 확인하여 maxNum에 값을 넣어주며
getInt 안의 괄호에 숫자를 입력한 이유는 nvl이 파생컬럼이므로 숫자를 입력하였다.
결과는 maxNum을 반환하게 되며 이는 created_ok에 호출된다.
++ insertData(BoardDTO dto) 메소드의 경우에도 위의 진행과 같으며
sql문에 insert문으로 입력해준다. (지난 성적처리글 참고)
//조회수 증가
public int updateHitCount(int num) {
int result = 0;
PreparedStatement pstmt = null;
String sql;
try {
sql = "update board set hitCount=hitCount+1 where num=?";
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, num);
result = pstmt.executeUpdate();
pstmt.close();
} catch (Exception e) {
System.out.println(e.toString());
}
return result;
}조회수를 증가시키는 메소드이다.
1씩 num의 숫자를 올리는 것이다.
try문 내에서 sql에 update로 처리한다.
4. 데이터 목록을 보여주는 <list.jsp>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
Connection conn = DBConn.getConnection();
BoardDAO dao = new BoardDAO(conn);
%>
먼저 기본적으로 상단에 입력해준다.
BoardDAO에서 메소드를 가져올 것이므로 객체 생성도 해준다.
페이징 처리는 다음 글에서 할 예정이다.
이렇게 만들 수 있는 코딩은 하단에 있다.
<body>
<div id="bbsList">
<div id="bbsList_title">
게 시 판
</div>
<div id="bbsList_header">
<div id="leftHeader">
<form action="" method="post" name="searchForm">
<select name="searchKey" class="selectField">
<option value="subject">제목</option>
<option value="name">작성자</option>
<option value="content">내용</option>
</select>
<input type="text" name="searchValue" class="textField"/>
<input type="button" value=" 검 색 " class="btn2" onclick="sendIt();"/>
</form>
</div>
<div id="rightHeader">
<input type="button" value=" 글올리기 " class="btn2"
onclick="javascript:location.href='<%=cp%>/board/created.jsp';"/>
</div>
</div>
<div id="bbsList_list">
<div id="title">
<dl>
<dt class="num">번호</dt>
<dt class="subject">제목</dt>
<dt class="name">작성자</dt>
<dt class="created">작성일</dt>
<dt class="hitCount">조회수</dt>
</dl>
</div>
<div id="lists">
<%for(BoardDTO dto : lists){ %>
<dl>
<dd class="num"><%=dto.getNum() %></dd>
<dd class="subject">
<a href="<%=articleUrl %>&num=<%=dto.getNum()%>">
<%=dto.getSubject() %> </a>
</dd>
<dd class="name"><%=dto.getName() %></dd>
<dd class="created"><%=dto.getCreated() %></dd>
<dd class="hitCount"><%=dto.getHitCount() %></dd>
</dl>
<%} %>
</div>
<div id="footer">
<%=pageIndexList %>
</div>
</div>
</div>
</body>
검색을 눌렀을 때 나오는 것은 다음 글에서 진행할 예정이다.
'글올리기' 버튼을 누르면 created.jsp로 연결시켰고
확장 for문을 통해 lists에 있는 값을 가져왔다.
제목을 누르면 본문으로 가도록 하며 이 역시 다음 글에서 진행하겠다!
2월15일
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [JSP] 방명록 만들기 (0) | 2022.02.21 |
|---|---|
| [JSP] 게시판 만들기 - 2 (페이징 처리) (0) | 2022.02.20 |
| [JSP] 입력 - 결과창 웹페이지 만들기 (성적처리 프로그램) (0) | 2022.02.19 |
| [JSP] hidden, 액션 태그 (0) | 2022.02.19 |
| [JSP] Redirect & Forward, Session (0) | 2022.02.17 |
