반응형
아래 뷰 페이지는 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 |