반응형
아래 뷰 페이지는 controller/BoardFrontController.java에서 연결된다.
📌새로운 글 작성 뷰 페이지
qna_board_write.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>게시판</title> <style type="text/css"> #registForm { width: 500px; height: 610px; border: 1px solid red; margin: auto; } h2 { text-align: center; } input{ width:300px; font-weight: bold; } table { margin: auto; width: 400px; } .td_left { width: 100px; text-align: right; font-weight: bold; background-color: #E0B0CF; } .td_right { width: 300px; background-color: #E0B0CF; } #commandCell { text-align: center; } </style> </head> <body> <!-- 새로운 글 작성 --> <section id="writeForm"> <h2>새로운 글 작성</h2> <!-- enctype="multipart/form-data" 부분이 있어야 파일업로드 기능 처리 가능하다. --> <form action="boardWritePro.bo" method="post" enctype="multipart/form-data" name="boardform"> <table> <tr> <td class="td_left"><label for="BOARD_NAME">글쓴이</label></td> <td class="td_right"><input type="text" name="BOARD_NAME" id="BOARD_NAME" required/></td> </tr> <tr> <td class="td_left"><label for="BOARD_PASS">비밀번호</label></td> <td class="td_right"><input name="BOARD_PASS" type="password" id="BOARD_PASS" required /></td> </tr> <tr> <td class="td_left"><label for="BOARD_SUBJECT">제 목</label></td> <td class="td_right"><input name="BOARD_SUBJECT" type="text" id="BOARD_SUBJECT" required /></td> </tr> <tr> <td class="td_left"><label for="BOARD_CONTENT">내 용</label></td> <td class="td_right"><textarea id="BOARD_CONTENT" name="BOARD_CONTENT" cols="40" rows="15" style="width:300px" required></textarea></td> </tr> <tr> <td class="td_left"><label for="BOARD_FILE"> 파일 첨부 </label></td> <td class="td_right"><input name="BOARD_FILE" type="file" id="BOARD_FILE" required /></td> </tr> </table> <section id="commandCell"> <input type="submit" style="width:190px" value="등록"> <input type="reset" style="width:190px" value="다시쓰기" /> </section> </form> </section> </body> </html>
enctype="multipart/form-data" 부분이 있어야 파일업로드 기능 처리 가능하다.
📌게시판 목록 List 뷰 페이지
qna_board_list.jsp
<%@page import="vo.PageInfo"%> <%@page import="vo.BoardBean"%> <%@ page language="java" contentType="text/html; charset=UTF-8"%> <%@ page import="java.util.*"%> <%@ page import="java.text.SimpleDateFormat"%> <% ArrayList<BoardBean> boardList=(ArrayList<BoardBean>)request.getAttribute("boardList"); PageInfo pageInfo = (PageInfo)request.getAttribute("pageInfo"); int listCount=pageInfo.getListCount(); int nowPage=pageInfo.getPage(); int maxPage=pageInfo.getMaxPage(); int startPage=pageInfo.getStartPage(); int endPage=pageInfo.getEndPage(); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>MVC 게시판</title> <style type="text/css"> #registForm { width: 500px; height: 600px; border: 1px solid red; margin: auto; } h2 { text-align: center; } table { margin: auto; width: 450px; } #tr_top { background-color: #E0B0CF; text-align: center; } #pageList { margin: auto; width: 500px; text-align: center; } #emptyArea { margin: auto; width: 500px; text-align: center; } </style> </head> <body> <!-- 게시판 목록 List --> <section id="listForm"> <h2> 글 목록<a href="boardWriteForm.bo">게시판글쓰기</a> </h2> <table> <% if(boardList != null && listCount > 0){ %> <tr id="tr_top"> <td>번호</td> <td>제목</td> <td>작성자</td> <td>날짜</td> <td>조회수</td> </tr> <% for(int i=0;i<boardList.size();i++){ %> <tr> <td><%=boardList.get(i).getBOARD_NUM()%></td> <td> <%if(boardList.get(i).getBOARD_RE_LEV()!=0){ %> <%for(int a=0;a<=boardList.get(i).getBOARD_RE_LEV()*2;a++){ %> <%} %> re: <%}%> <a href="boardDetail.bo?board_num= <%=boardList.get(i).getBOARD_NUM()%>&page=<%=nowPage%>"> <%=boardList.get(i).getBOARD_SUBJECT()%> </a> </td> <td><%=boardList.get(i).getBOARD_NAME() %></td> <td><%=boardList.get(i).getBOARD_DATE() %></td> <td><%=boardList.get(i).getBOARD_READCOUNT() %></td> </tr> <%} %> </table> </section> <section id="pageList"> <%if(nowPage<=1){ %> [이전] <%}else{ %> <a href="boardList.bo?page=<%=nowPage-1 %>">[이전]</a> <%} %> <%for(int a=startPage;a<=endPage;a++){ if(a==nowPage){%> [<%=a %>] <%}else{ %> <a href="boardList.bo?page=<%=a %>">[<%=a %>] </a> <%} %> <%} %> <%if(nowPage>=maxPage){ %> [다음] <%}else{ %> <a href="boardList.bo?page=<%=nowPage+1 %>">[다음]</a> <%} %> </section> <% } else { %> <section id="emptyArea">등록된 글이 없습니다.</section> <% } %> </body> </html>
📌게시글 상세보기 뷰 페이지
qna_board_view
<%@page import="vo.BoardBean"%> <%@page language="java" contentType="text/html; charset=UTF-8"%> <% BoardBean board = (BoardBean)request.getAttribute("board"); String nowPage = (String)request.getAttribute("page"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>게시글</title> <style type="text/css"> #boardForm { width: 500px; height: 500px; border: 1px solid red; margin: auto; } h2 { text-align: center; } #basicInfoArea { height: 40px; text-align: center; } #boardContentArea { background: orange; margin-top: 20px; height: 350px; text-align: center; overflow: auto; } #commandList { margin: auto; width: 500px; text-align: center; } </style> </head> <body> <!-- 게시판 수정 --> <section id="boardForm"> <h2>글 내용 상세보기</h2> <section id="basicInfoArea"> 제 목 : <%=board.getBOARD_SUBJECT()%> <br> 첨부파일 : <%if(!(board.getBOARD_FILE()==null)){ %> <a href="file_down?downFile=<%=board.getBOARD_FILE()%>"> <%=board.getBOARD_FILE() %> </a> <%} %> </section> <section id="boardContentArea"> <%=board.getBOARD_CONTENT() %> </section> </section> <section id="commandList"> <a href="boardReplyForm.bo?board_num=<%=board.getBOARD_NUM() %>&page=<%=nowPage%>">[답변]</a> <a href="boardModifyForm.bo?board_num=<%=board.getBOARD_NUM() %>">[수정]</a> <a href="boardDeleteForm.bo?board_num=<%=board.getBOARD_NUM() %>&page=<%=nowPage%>">[삭제]</a> <a href="boardList.bo?page=<%=nowPage%>">[목록]</a> </section> </body> </html>
📌 게시글 수정 뷰 페이지
qna_board_modify.jsp
<%@page import="vo.BoardBean"%> <%@ page language="java" contentType="text/html; charset=UTF-8"%> <% BoardBean board = (BoardBean)request.getAttribute("article"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>게시글 수정</title> <script type="text/javascript"> function modifyboard(){ modifyform.submit(); } </script> <style type="text/css"> #registForm{ width: 500px; height: 600px; border : 1px solid red; margin:auto; } h2{ text-align: center; } table { margin: auto; width: 400px; } .td_left { width: 100px; text-align: right; font-weight: bold; background-color: #E0B0CF; } .td_right { width: 300px; background-color: #E0B0CF; } #commandCell{ text-align: center; } </style> </head> <body> <!-- 게시판 글 수정 --> <section id = "writeForm"> <h2>게시판 글 수정</h2> <form action="boardModifyPro.bo" method="post" name = "modifyform" > <input type = "hidden" name = "BOARD_NUM" value = "<%=board.getBOARD_NUM()%>"/> <table> <tr> <td class="td_left"> <label for = "BOARD_NAME">글쓴이</label> </td> <td class="td_right"> <input type = "text" name="BOARD_NAME" id = "BOARD_NAME" value = "<%=board.getBOARD_NAME()%>"/> </td> </tr> <tr> <td class="td_left"> <label for = "BOARD_PASS">비밀번호</label> </td> <td class="td_right"> <input name="BOARD_PASS" type="password" id = "BOARD_PASS"/> </td> </tr> <tr> <td class="td_left"> <label for = "BOARD_SUBJECT">제 목</label> </td> <td class="td_right"> <input name="BOARD_SUBJECT" type="text" id = "BOARD_SUBJECT" value = "<%=board.getBOARD_SUBJECT()%>"/> </td> </tr> <tr> <td class="td_left"> <label for = "BOARD_CONTENT">내 용</label> </td> <td> <textarea id = "BOARD_CONTENT" name="BOARD_CONTENT" cols="40" rows="15"><%=board.getBOARD_CONTENT()%></textarea> </td> </tr> </table> <section id = "commandCell"> <a href="javascript:modifyboard()">[수정]</a> <a href="javascript:history.go(-1)">[뒤로]</a> </section> </form> </section> </body> </html>
📌글 삭제 시 비밀번호 입력하는 뷰 페이지
qna_board_delete.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <% int board_num=(Integer)request.getAttribute("board_num"); String nowPage = (String)request.getAttribute("page"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>글 삭제</title> <style> #passForm{ width:400px; margin:auto; border : 1px solid orange; } </style> </head> <body> <section id = "passForm"> <form name="deleteForm" action="boardDeletePro.bo?board_num=<%=board_num %>" method="post"> <input type = "hidden" name = "page" value = "<%=nowPage %>"/> <table> <tr> <td> <label>글 비밀번호 : </label> </td> <td> <input name="BOARD_PASS" type="password"> </td> </tr> <tr> <td> <input type = "submit" value = "삭제"/> <input type = "button" value = "돌아가기" onClick ="javascript:history.go(-1)"/> </td> </tr> </table> </form> </section> </body> </html>
📌게시글 답글 뷰 페이지
qna_board_reply.jsp
<%@page import="vo.BoardBean"%> <%@ page language="java" contentType="text/html; charset=UTF-8"%> <% BoardBean board = (BoardBean)request.getAttribute("board"); String nowPage = (String)request.getAttribute("page"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>게시글 답글 작성</title> <script language="javascript"> </script> <style type="text/css"> #registForm { width: 500px; height: 610px; border: 1px solid red; margin: auto; } h2 { text-align: center; } table { margin: auto; width: 400px; } .td_left { width: 100px; text-align: right; font-weight: bold; background-color: #E0B0CF; } .td_right { width: 300px; background-color: #E0B0CF; } #commandCell { text-align: center; } </style> </head> <body> <!-- 게시글 답글 --> <section id="writeForm"> <h2>게시글 답글 등록</h2> <form action="boardReplyPro.bo" method="post" name="boardform"> <input type="hidden" name="page" value="<%=nowPage %>" /> <input type="hidden" name="BOARD_NUM" value="<%=board.getBOARD_NUM() %>"> <input type="hidden" name="BOARD_RE_REF" value="<%=board.getBOARD_RE_REF() %>"> <input type="hidden" name="BOARD_RE_LEV" value="<%=board.getBOARD_RE_LEV() %>"> <input type="hidden" name="BOARD_RE_SEQ" value="<%=board.getBOARD_RE_SEQ() %>"> <table> <tr> <td class="td_left"><label for="BOARD_NAME">글쓴이</label></td> <td class="td_right"><input type="text" name="BOARD_NAME" id="BOARD_NAME" /></td> </tr> <tr> <td class="td_left"><label for="BOARD_PASS">비밀번호</label></td> <td class="td_right"><input name="BOARD_PASS" type="password" id="BOARD_PASS" /></td> </tr> <tr> <td class="td_left"><label for="BOARD_SUBJECT">제 목</label></td> <td class="td_right"><input name="BOARD_SUBJECT" type="text" id="BOARD_SUBJECT" /></td> </tr> <tr> <td class="td_left"><label for="BOARD_CONTENT">내 용</label></td> <td><textarea id="BOARD_CONTENT" name="BOARD_CONTENT" cols="40" rows="15"></textarea></td> </tr> </table> <section id="commandCell"> <input type="submit" value="답변글등록" /> <input type="reset" value="다시작성" /> </section> </form> </section> </body> </html>
반응형
'JSP & Servlet > 실습' 카테고리의 다른 글
| [JSP & Servlet] 로그인 (feat. 세션 & 쿠키) - View / DAO (0) | 2022.06.30 |
|---|---|
| [JSP & Servlet] 로그인 (feat. 세션 & 쿠키) - 테이블 생성 및 vo(Value Object) (0) | 2022.06.30 |
| [JSP & Servlet] 게시판 만들기 (feat. MySQL) - DAO(Data Access Object) (0) | 2022.06.27 |
| [JSP & Servlet] 게시판 만들기 (feat. MySQL) - Service 클래스 (0) | 2022.06.27 |
| [JSP & Servlet] 게시판 만들기 (feat. MySQL) - Action 클래스 (0) | 2022.06.26 |