close
프로필 배경
프로필 로고

INTP 개발자

JSP & Servlet/실습 · 2022. 6. 29. fullscreen 넓게보기

[JSP & Servlet] 게시판 만들기 (feat. MySQL) - View

 

 

아래 뷰 페이지는 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="등록">&nbsp;&nbsp; 
				<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++){ %> &nbsp; 
					<%} %> 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){ %>
		[이전]&nbsp;
		<%}else{ %>
		<a href="boardList.bo?page=<%=nowPage-1 %>">[이전]</a>&nbsp;
		<%} %>

		<%for(int a=startPage;a<=endPage;a++){
				if(a==nowPage){%>
		[<%=a %>]
		<%}else{ %>
		<a href="boardList.bo?page=<%=a %>">[<%=a %>]
		</a>&nbsp;
		<%} %>
		<%} %>

		<%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>&nbsp;&nbsp;
	</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>&nbsp;&nbsp;
			<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 = "삭제"/>
		&nbsp;&nbsp;
		<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="답변글등록" />&nbsp;&nbsp; 
				<input type="reset" value="다시작성" />
			</section>
		</form>
	</section>
</body>
</html>

 

 

저작자표시 (새창열림)
JSP & Servlet/실습 관련 글
더 보기

티스토리툴바