JSP - 미니 프로젝트(6. 공지사항 글수정, 글삭제, 목록 검색)

오늘은 공지사항 글수정, 글삭제, 목록 검색을 진행하였다.

post방식으로 value값 보내는방식을 주로사용하였다.

1. 게시글 수정

로직

게시글 상세페이지에서 수정버튼을 누르면 스크립트로 "nno" (글번호) 의 값을 post방식으로 보낸다.

서블릿에서 nno의 파라미터값받아서 조작하여수행한다.

우선 글수정 페이지로이동하게한다 .

여기서는 전에 게시글 상세 메소드에있는 기능을 조금 떼와서 사용하였다.

글수정 페이지로 이동하면 글번호, 작성일, 제목, 내용은 기존데이터 불러와 보여진상태에서 진행하기때문이다 .

NoticeUpdateViewServlet.java

package notice.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import notice.model.vo.Notice;
import notice.service.NoticeService;

@WebServlet("/notice/updateView")
public class NoticeUpdateViewServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public NoticeUpdateViewServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		int nno = Integer.parseInt(request.getParameter("nno"));
		
		Notice notice = new NoticeService().detailNoticeView(nno);
		
		String page = "";
		if(notice != null) {
			request.setAttribute("notice", notice);
			page = "/WEB-INF/views/notice/noticeUpdateView.jsp";
			
		}else {
			request.setAttribute("msg", "공지사항 수정 하기를 진행할수 없습니다.");
			page ="/WEB-INF/views/common/errorpage.jsp";
		}
		
		request.getRequestDispatcher(page).forward(request, response);;
		
	}

}

NoticeService.java

public Notice detailNoticeView(int nno) {
		
		Connection conn = getConnection();
		
		Notice n = n = nd.detailNotice(conn, nno);;
		
		close(conn);
		
		return n;
	}

noticeUpdateView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공지사항 수정</title>
<style>
.outer {
	width: 800px;
	margin: auto;
}

.wrap {
	width: 780px;
	margin: 100px auto;
}

.notice_title {
	border-bottom: 1px solid #282A35;
}

.notice_content {
	padding: 0px 20px;
}

.notice_content .subject {
	height: 55px;
	line-height: 55px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f3f5f7;
}

.notice_content .content {
	margin-bottom: 30px;
}

.input_area {
	border: solid 1px #dadada;
	padding: 10px 10px 14px 10px;
	background: white;
}

.input_area input {
	width: 700px;
	height: 30px;
	border: 0px;
}

.input_area input:focus {
	outline: none;
}

.textarea {
	resize: none;
	border: solid 1px #dadada;
}

.textarea:focus {
	outline: none;
}

.title_span {
	background-color: #282A35;
}

.notice_area button {
	width: 100px;
	height: 35px;
	border: 0px;
	color: white;
	background: #282A35;
	margin: 5px;
}

.btn_area {
	text-align: center;
	border-top: 1px solid #282A35;
	padding: 30px;
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/views/common/header.jsp" />
	<div class="outer">
		<div class="wrap">
			<div class="notice_area">
				<div class="notice_title">
					<h1>공지사항 수정</h1>
				</div>
				<div class="notice_content">
					<div class="subject">
						<span> 글번호 : ${ notice.nno } </span>
						<span> 작성일 : ${ notice.nDate }</span>
					</div>
					<form method="post" action="${ contextPath }/notice/update">
					<input type="hidden" name="nno" value="${ notice.nno }">
						<div class="content">
							<h4>
								<span class="title_span">&nbsp;</span> 제목
							</h4>
							<span class="input_area"> <input type="text" name="title" value="${ notice.nTitle }"
								required>
							</span>

							<h4>
								<span class="title_span">&nbsp;</span> 내용
							</h4>
							<textarea class="textarea" rows="20" cols="100" name="content"
								required>${ notice.nContent }</textarea>
						</div>
						<div class="btn_area">
							<button type="button" onclick="location.href='${contextPath}/notice/list'">목록으로</button>
							<button type="submit">수정하기</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

결과

2. 공지사항 게시글 수정하기

수정하기버튼을누르면 글번호, 제목, 내용의 값이 파라미터로 넘어가게된다.

글번호값은 post방식의 input:hidden 으로 넘길 예정이다.

3가지의 파라미터로 글수정후

글 수정 성공하였으면 공지사항 목록페이지로

글 실패 하였으면 에러페이지로 이동시킬것이다.

NoticeUpdateServlet.java

package notice.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import notice.model.vo.Notice;
import notice.service.NoticeService;

@WebServlet("/notice/update")
public class NoticeUpdateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public NoticeUpdateServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		int nno = Integer.parseInt(request.getParameter("nno"));
		String title = request.getParameter("title");
		String content = request.getParameter("content");
		
		Notice notice = new Notice(nno, title, content);
		
		int result = new NoticeService().updateNotice(notice);
		
		if(result > 0) {
			request.getSession().setAttribute("msg", "게시글이 수정되었습니다.");
			response.sendRedirect(request.getContextPath() + "/notice/list");
		}else {
			request.setAttribute("msg", "게시글 수정이 실패하였습니다.");
			request.getRequestDispatcher("/WEB-INF/views/common/errorpage/jsp").forward(request, response);
		}
		
	}

}

NoticeService.java

// 공지사항 수정하기
	public int updateNotice(Notice notice) {
		Connection conn = getConnection();
		
		int result = nd.updateNotice(conn, notice);
		
		if(result > 0) {
			commit(conn);
		}else {
			rollback(conn);
		}
		
		close(conn);
		
		return result;
	}

NoticeDAO.java

// 공지사항 수정하기
	public int updateNotice(Connection conn, Notice notice) {
		PreparedStatement pstmt = null;
		int result = 0;
		String sql = query.getProperty("updateNotice");
		
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, notice.getnTitle());
			pstmt.setString(2, notice.getnContent());
			pstmt.setInt(3, notice.getNno());
			
			result = pstmt.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(pstmt);
		}
		
		return result;
	}

noticeUpdateView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공지사항 수정</title>
<style>
.outer {
	width: 800px;
	margin: auto;
}

.wrap {
	width: 780px;
	margin: 100px auto;
}

.notice_title {
	border-bottom: 1px solid #282A35;
}

.notice_content {
	padding: 0px 20px;
}

.notice_content .subject {
	height: 55px;
	line-height: 55px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f3f5f7;
}

.notice_content .content {
	margin-bottom: 30px;
}

.input_area {
	border: solid 1px #dadada;
	padding: 10px 10px 14px 10px;
	background: white;
}

.input_area input {
	width: 700px;
	height: 30px;
	border: 0px;
}

.input_area input:focus {
	outline: none;
}

.textarea {
	resize: none;
	border: solid 1px #dadada;
}

.textarea:focus {
	outline: none;
}

.title_span {
	background-color: #282A35;
}

.notice_area button {
	width: 100px;
	height: 35px;
	border: 0px;
	color: white;
	background: #282A35;
	margin: 5px;
}

.btn_area {
	text-align: center;
	border-top: 1px solid #282A35;
	padding: 30px;
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/views/common/header.jsp" />
	<div class="outer">
		<div class="wrap">
			<div class="notice_area">
				<div class="notice_title">
					<h1>공지사항 수정</h1>
				</div>
				<div class="notice_content">
					<div class="subject">
						<span> 글번호 : ${ notice.nno } </span>
						<span> 작성일 : ${ notice.nDate }</span>
					</div>
					<form method="post" action="${ contextPath }/notice/update">
					<input type="hidden" name="nno" value="${ notice.nno }">
						<div class="content">
							<h4>
								<span class="title_span">&nbsp;</span> 제목
							</h4>
							<span class="input_area"> <input type="text" name="title" value="${ notice.nTitle }"
								required>
							</span>

							<h4>
								<span class="title_span">&nbsp;</span> 내용
							</h4>
							<textarea class="textarea" rows="20" cols="100" name="content"
								required>${ notice.nContent }</textarea>
						</div>
						<div class="btn_area">
							<button type="button" onclick="location.href='${contextPath}/notice/list'">목록으로</button>
							<button type="submit">수정하기</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

결과

수정 성공 메세지

3. 공지사항 게시글 삭제하기

로직

상세페이지에서 삭제하기버튼을 누르게되면

파라미터 값으로 글번호의 값을 보내고,

데이터베이스 컬럼의 상태 의값이 N으로변경된다.

목록은 상태값이 Y 인게시물만 보여지게하였다.

NoticeDeleteServlet.java

package notice.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import notice.service.NoticeService;

@WebServlet("/notice/delete")
public class NoticeDeleteServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public NoticeDeleteServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		int nno = Integer.parseInt(request.getParameter("nno"));
		
		int result = new NoticeService().deleteNotice(nno);
		
		if(result > 0) {
			request.getSession().setAttribute("msg", "게시글 삭제 성공하였습니다.");
			response.sendRedirect(request.getContextPath() + "/notice/list");
		}else {
			request.setAttribute("msg", "게시글 삭제 실패하였습니다.");
			request.getRequestDispatcher("/WEB-INF/views/common/errorpage.jsp");
		}
		
	}

}

NoticeService.java

// 공지사항 게시글 삭제하기
	public int deleteNotice(int nno) {
		Connection conn = getConnection();
		
		int result = nd.deleteNotice(conn, nno);
		
		close(conn);
		
		return result;
	}

NoticeDAO.java

// 공지사항 게시글 삭제
	public int deleteNotice(Connection conn, int nno) {
		PreparedStatement pstmt = null;
		int result = 0;
		String sql = query.getProperty("deleteNotice");
		
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setInt(1, nno);
			
			result = pstmt.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(pstmt);
		}
		
		return result;
	}

jsp는 상세페이지 사용중이다.

결과

4. 공지사항 목록 제목, 내용으로 검색하기

기존 공지사항 목록에 몇가지 조건을 추가하는 방식이다.

select의 value값이 title 이면 제목검색하고 content이면 내용을검색하는방식이다.

db에서 검색할때는 LIKE 사용하여 진행한다.

NoticeListServlet.java

package notice.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import notice.model.vo.Notice;
import notice.service.NoticeService;

@WebServlet("/notice/list")
public class NoticeListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public NoticeListServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Notice> listNotice;
		String searchCondition = request.getParameter("searchCondition");
		String searchValue = request.getParameter("searchValue");
		
		listNotice = new NoticeService().selectNotice();
		if(searchCondition != null && searchValue != null) {
			// 검색 한결과
			listNotice = new NoticeService().selectNotice(searchCondition, searchValue);
		}else {
			// 검색 안한결과
			listNotice = new NoticeService().selectNotice();
		}
		
		if(listNotice != null) {
			request.setAttribute("listNotice", listNotice);
			request.getRequestDispatcher("/WEB-INF/views/notice/noticeListView.jsp").forward(request, response);
		}
		
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

NoticeService.java

public List<Notice> selectNotice(String searchCondition, String searchValue) {
		Connection conn = getConnection();
		
		List<Notice> listNotice = nd.selectNotice(conn, searchCondition, searchValue);
				
		close(conn);
		
		return listNotice;
	}

NoticeDAO.java

	public List<Notice> selectNotice(Connection conn, String searchCondition, String searchValue) {
		PreparedStatement pstmt = null;
		ResultSet rset = null;
		List<Notice> noticeList = new ArrayList<>();
		String sql = query.getProperty("selectNotice");
		
		if(searchCondition.equals("title")) {
			// 검색조건이 제목인 경우
			sql = query.getProperty("selectTtitleNotice");
			
		}else if(searchCondition.equals("content")) {
			// 검색 조건이 내용인 경우
			sql = query.getProperty("selectContentNotice");
		}
		
		try {
			pstmt = conn.prepareStatement(sql);
			if(searchCondition.equals("title") || searchCondition.equals("content")) {
				pstmt.setString(1, searchValue);
			}
			
			rset = pstmt.executeQuery();
			
			while(rset.next()) {
				noticeList.add(new Notice(
											rset.getInt("NNO")
										  , rset.getString("NTITLE")
										  , rset.getString("NCONTENT")
										  , rset.getString("NWRITER")
										  , rset.getInt("NCOUNT")
										  , rset.getDate("NDATE")
										  , rset.getString("STATUS")
										  ));
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(rset);
			close(pstmt);
		}
		
		return noticeList;
	}

NoticeListView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공지사항</title>
<style>
.outer {
	width: 800px;
	margin: auto;
}

.wrap {
	width: 780px;
	margin: 100px auto;
}

ul, li {
	margin: 0;
	padding: 0;
}

.notice_title {
	border-bottom: 1px solid #282A35;
}

.notice_list {
	margin: 20px 30px;
	min-height: 540px;
}

.notice_list>ul {
	border-bottom: 1px solid #f3f5f7;
	height: 50px;
	line-height: 50px;
	display: flex;
	justify-content: space-around;
	list-style: none;
}

.notice_list>ul.last {
	border: 0;
}

.notice_list>ul>li {
	text-align: center;
}

.notice_list .no {
	width: 100px;
}

.notice_list .title {
	width: 520px;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.notice_list .date {
	width: 100px;
}

.onmouseover {
	background: #f3f5f7;
	cursor: pointer;
}

.search_area {
	text-align: center;
	padding: 30px;
}

.search_area select {
	width: 150px;
	height: 30px;
	border: 0px;
}

.input_area {
	border: solid 1px #dadada;
	padding: 10px 10px 14px 10px;
	margin-right: 20px;
	background: white;
}

.input_area input {
	width: 250px;
	height: 30px;
	border: 0px;
}

.input_area input:focus, .search_area select:focus {
	outline: none;
}

.search_area button {
	width: 100px;
	height: 35px;
	border: 0px;
	color: white;
	background: #282A35;
	margin: 5px;
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/views/common/header.jsp" />
	<div class="outer">
		<div class="wrap">
			<div class="notice_area">
				<div class="notice_title">
					<h1>공지사항</h1>
				</div>
				<div class="notice_list">
					<c:forEach var="list" items="${ listNotice }">
						<ul class="notice_ul" onclick="detailView(${list.nno});">
							<li class="no">${ list.nno }</li>
							<li class="title">${ list.nTitle }</li>
							<li class="date">${ list.nDate }</li>
						</ul>
					</c:forEach>
				</div>
			</div>
			<div class="search_area">
				<form method="get" action="${contextPath }/notice/list">
					<select id="searchCondition" name="searchCondition">
						<option value="title">제목</option>
						<option value="content">내용</option>
					</select> <span class="input_area"> <input type="search"
						name="searchValue">
					</span>
					<button type="submit">검색하기</button>
					<c:if test="${ userLogin.userId eq 'admin' }">
						<button type="button" onclick='location.href="${ contextPath }/notice/insert"'>작성하기</button>
					</c:if>
				</form>
			</div>
		</div>
	</div>
	<script>
		function detailView(nno){
			location.href = '${contextPath}/notice/detail?nno=' + nno;
		}
	
	</script>
</body>
</html>

결과

기존 공지사항 목록 화면

제목 검색했을시

내용 검색했을시

저작자표시

'프로그래밍 > JSP' 카테고리의 다른 글

JSP - 미니 프로젝트(7. 자유게시판 목록, 페이징 ) (3)	2021.09.03
JSP - 미니프로젝트(5. 공지사항 목록, 글쓰기,글 상세, ) (0)	2021.08.30
JSP - EL/JSTL (0)	2021.08.27
JSP - 미니 프로젝트(5. 정보수정) (0)	2021.08.23
JSP - 미니 프로젝트(4. 회원가입) (1)	2021.08.23