pring 홈페이지 - (11) 게시판 수정/삭제 페이지 작업

이번에는 수정/삭제 페이지를 만들어보겠습니다.

수정페이지 경우에는 등록페이지와 마찬가지로 화면을 보여주는 get 컨트롤러와

수정을 처리하는 post 컨트롤러, 즉 두가지 컨트롤러를 만들어야하는 것이 특징입니다.

작업순서는 아래의 순서로 진행하겠습니다.

상세페이지에서 수정/삭제 버튼 생성
Controller 생성
jsp 생성
service > serviceImpl > mapper > mapper.xml

우선 상세페이지에서 수정과 삭제 버튼을 생성합니다.

read.jsp

수정버튼에는 인덱스를 타고 가야하기때문에 주소 뒤에 인덱스를 넣어줍니다.

<a href="/board/update?board_idx=${boardContents.board_idx}" class="btn btn-success">수정</a>

그리고 삭제버튼은 '삭제하시겠습니까'라는 경고 문구가 필요하기 때문에 자바스크립트로 확인여부 알림창을 뛰운 다음 컨트롤러로 보내는 작업을 합니다. 이때 또한 인덱스 값이 필요하므로 주소 뒤에 인덱스값을 넣어줍니다.

삭제 기능 및 컨트롤러는 수정이 끝난 뒤에 만들도록 하겠습니다.

<a href="javascript:void(0);" class="btn btn-danger" onclick="deleteConfirm();">삭제</a>

<script>

function deleteConfirm(){
	
	if(!confirm("삭제 하시겠습니까?")){
		return false;
	}else{
		location.href="${pageContext.request.contextPath }/board/delete.do?board_idx=${boardContents.board_idx}";
	}
}

</script>

그리고 수정 완료했다는 메세지가 출력되야하기 때문에 스크립트에 코드를 추가합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {
	
	var msg = "${msg}";
	
	if(msg != ""){
		alert(msg);	
	}
	
});


function deleteConfirm(){
	
	if(!confirm("삭제 하시겠습니까?")){
		return false;
	}else{
		location.href="${pageContext.request.contextPath }/board/delete.do?board_idx=${boardContents.board_idx}";
	}
}

</script>

read.jsp 전체코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {

var msg = "${msg}";

if(msg != ""){
alert(msg);	
}

});


function deleteConfirm(){

if(!confirm("삭제 하시겠습니까?")){
return false;
}else{
location.href="${pageContext.request.contextPath }/board/delete.do?board_idx=${boardContents.board_idx}";
}
}

</script>



<%@include file="../includes/header.jsp"%>



<div class="row" style="margin-bottom:20px; margin-left:1px;">
<div class="col-lg-12">
<h1 class="page-header">상세 페이지</h1>
</div>
</div>

<div class="panel" style="margin-left:1px;">
<div id="contAreaBox">
<div class="panel">
<div class="panel-body">
<div class="table-responsive" style="text-align:center;">
<table id="datatable-scroller"
	class="table table-bordered tbl_Form">
	<caption></caption>
	<colgroup>
		<col width="250px" />
		<col />
	</colgroup>
	<tbody>
		<tr>
			<th class="active" >제목</th>
			<td>
				${boardContents.board_title }
			</td>
		</tr>
		<tr>
			<th class="active">작성자</th>
			<td>
				${boardContents.board_writer }
			</td>
		</tr>
		<tr>
			<th class="active" >내용</th>
			<td>
				${boardContents.board_content }
			</td>
		</tr>
	</tbody>
</table>
</div>
<div style="margin-left:1px;">
<a href="/board/list" class="btn btn-primary">목록</a>
<a href="/board/update?board_idx=${boardContents.board_idx}" class="btn btn-success">수정</a>
<a href="javascript:void(0);" class="btn btn-danger" onclick="deleteConfirm();">삭제</a>
</div>
</div>
</div>
</div>
</div>


<%@include file="../includes/footer.jsp"%>

BoardController

이 또한, 기능 만들기 전에 화면 확인을 위한 update 컨트롤러입니다.

화면 확인용이니 우선 get 컨트롤러만 만들겠습니다.

또한, board_idx값을 계속 가지고 가야 하니 requestParam도 넣어 놓겠습니다.

@RequestMapping(value = "/board/update", method = RequestMethod.GET)
public String update(@ModelAttribute("searchVO") boardVO searchVO, @RequestParam("board_idx") int board_idx, Model model) {
	
	return "/board/update";
}

update.jsp

기본적으로 수정페이지는 등록페이지와 동일하게 생성되기에 등록페이지를 복사해서 update.jsp를 만들어줍니다.

read.jsp에서 수정버튼을 누르면 아래 화면이 나올겁니다.

이젠 수정페이지에 맡게 꾸며주도록 합니다.

폼의 action주소를 update_action으로 변경해주고 onsubmit 함수를 통해 알림창이 출력될 수 있도록 합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<script>

function _onSubmit(){

if(!confirm("수정하시겠습니까?")){
return false;
}
}

</script>



<%@include file="../includes/header.jsp"%>

<div class="row" style="margin-bottom:20px; margin-left:1px;">
<div class="col-lg-12">
<h1 class="page-header">수정 페이지</h1>
</div>
</div>

<div class="panel" style="margin-left:1px;">
<div id="contAreaBox">
<div class="panel">
<div class="panel-body">
<form role="form" action="/board/update_action" method="post" onsubmit="return _onSubmit();" >
<input type="hidden" id="board_idx" name="board_idx" value="${boardContents.board_idx }"/>
<div class="table-responsive" style="text-align:center;">
<table id="datatable-scroller"
	class="table table-bordered tbl_Form">
	<caption></caption>
	<colgroup>
		<col width="250px" />
		<col />
	</colgroup>
	<tbody>
		<tr> 
			<th class="active">제목</th>
			<td class="form-inline"><input type="text" id="board_title"
				name="board_title" class="form-control" style="width: 840px" />
			</td>
		</tr>
		<tr>
			<th class="active" >작성자</th>
			<td class="form-inline"><input type="text" id="board_writer"
				name="board_writer" class="form-control" style="width: 200px" />
			</td>
		</tr>
		<tr>
			<th class="active" >내용</th>
			<td class="form-inline"><textarea 
					id="board_content" name="board_content" cols="100" rows="10"
					class="form-control"></textarea></td>
		</tr>
	</tbody>
</table>
</div>
<div style="margin-left:1px;">
<button type="submit" class="btn btn-success">수정</button>
<a href="/board/read?board_idx=${boardContents.board_idx}" class="btn btn-danger">취소</a>
</div>
</form>
</div>
</div>
</div>
</div>

<%@include file="../includes/footer.jsp"%>

하지만 수정 페이지에 게시물 글이 없습니다.

글을 불러오기 위해서 read에서 사용했던 서비스 객체를 사용합니다.

BoardController

@RequestMapping(value = "/board/update", method = RequestMethod.GET)
public String update(@ModelAttribute("searchVO") boardVO searchVO, @RequestParam("board_idx") int board_idx, Model model) {
	
	boardVO boardContents = boardService.getBoardContents(board_idx);
	model.addAttribute("boardContents", boardContents);
	
	return "/board/update";
}

update.jsp

그리고 read.jsp와 같이 update.jsp에 model로 빼낸 boardContents를 사용하여 게시물 값을 넣어줍니다.

특이점은 input안에는 value에 값을 넣어주고 textarea는 태그 사이에 값을 넣어줍니다.

그리고 취소를 눌렀을 경우 해당 게시물 상세페이지로 돌아갈 수 있도록 주소 뒤에 인덱스 값을 넣어줍니다.

form태그 밑에 히든으로 board_idx값을 넣어 컨트롤러로 가지고갈 수 있도록 합니다.

<form role="form" action="/board/update_action" method="post" onsubmit="return _onSubmit();" >
<input type="hidden" id="board_idx" name="board_idx" value="${boardContents.board_idx }"/>
<div class="table-responsive" style="text-align:center;">
<table id="datatable-scroller"
	class="table table-bordered tbl_Form">
	<caption></caption>
	<colgroup>
		<col width="250px" />
		<col />
	</colgroup>
	<tbody>
		<tr> 
			<th class="active">제목</th>
			<td class="form-inline"><input type="text" id="board_title"
				name="board_title" class="form-control" style="width: 840px" value="${boardContents.board_title }"/>
			</td>
		</tr>
		<tr>
			<th class="active" >작성자</th>
			<td class="form-inline"><input type="text" id="board_writer"
				name="board_writer" class="form-control" style="width: 200px" value="${boardContents.board_writer }"/>
			</td>
		</tr>
		<tr>
			<th class="active" >내용</th>
			<td class="form-inline"><textarea 
					id="board_content" name="board_content" cols="100" rows="10"
					class="form-control">${boardContents.board_content }</textarea></td>
		</tr>
	</tbody>
</table>
</div>
<div style="margin-left:1px;">
<button type="submit" class="btn btn-success">수정</button>
<a href="/board/read?board_idx=${boardContents.board_idx}" class="btn btn-danger">취소</a>

그러면 대충 화면이 완성되었네요

이젠 수정페이지에 대해 코드를 작성해보겠습니다.

post 컨트롤러를 만들어 기능 처리를 하는 단계입니다.

Controller > service > serviceimpl > mapper > xml 순으로 작성하겠습니다.

BoardController.java

등록 처리 컨트롤러와 동일합니다. redirect하는 부분도 동일하구요.

여기서는 리다이렉트 페이지를 상세페이지로 가기위해 인덱스값을 뒤에 붙여줍니다.

@RequestMapping(value = "/board/update_action", method = RequestMethod.POST)
public String update_action(@ModelAttribute("searchVO") boardVO searchVO, HttpServletRequest request, RedirectAttributes redirect , Model model){
	
	
	try {
	
	boardService.updateBoard(searchVO);
	redirect.addFlashAttribute("redirect", searchVO.getBoard_idx());
	
	redirect.addFlashAttribute("msg", "수정이 완료되었습니다.");
		
	} catch (Exception e) {
	
	redirect.addFlashAttribute("msg", "오류가 발생되었습니다.");
	
	}
	
	return "redirect:/board/read?board_idx=" + searchVO.getBoard_idx();
}

BoardService.java

void updateBoard(boardVO searchVO);

BoardServiceimpl.java

@Override
public void updateBoard(boardVO searchVO) {
	mapper.updateBoard(searchVO);
}

BoardMapper.java

public void updateBoard(boardVO searchVO);

BoardMapper.xml

<update id="updateBoard" parameterType="com.spring.web.vo.boardVO" >
	UPDATE tbl_board SET 
	board_title=#{board_title},
	board_content=#{board_content},
	board_writer=#{board_writer},
	board_updatedate=now()
	WHERE board_idx=#{board_idx}
</update>

수정을해보면

인덱스를 타고 상세페이지로 이동하였고....잘되는것을 알 수 있습니다.

이젠 삭제페이지에 대해 코드를 작성해보겠습니다.

생각보다 간단한 작업입니다. 삭제 또한 등록/수정과 마찬가지로

리다이렉트를 사용하기때문에 위와 동일하므로 특별히 언급은 안하겠습니다.

Controller > service > serviceimpl > mapper > xml 순으로 작성하겠습니다.

BoardController.java

@RequestMapping(value = "/board/delete", method = RequestMethod.GET)
public String delete(@ModelAttribute("searchVO") boardVO searchVO, @RequestParam("board_idx") int board_idx, RedirectAttributes redirect , Model model) {
	
	try {
		
		boardService.getBoardDelete(board_idx);
		redirect.addFlashAttribute("msg", "삭제가 완료되었습니다.");
		
	} catch (Exception e) {
		redirect.addFlashAttribute("msg", "오류가 발생되었습니다.");
		
	}
	
	return "redirect:/board/list";
}

BoardService.java

void getBoardDelete(int board_idx);

BoardServiceimpl.java

@Override
	public void getBoardDelete(int board_idx) {
		mapper.getBoardDelete(board_idx);
	}}

BoardMapper.java

public void getBoardDelete(int board_idx);

BoardMapper.xml

<delete id="getBoardDelete" parameterType="java.lang.Integer" >
    <![CDATA[
        delete 
        	from 
        tbl_board
        where
        board_idx =#{board_idx}            
    ]]>    
	</delete>

삭제 또한 잘 되네요!

항목을 클릭하시면 해당 페이지로 이동합니다.
Spring 웹 홈페이지 개발 과정 리스트	(1) 자바설치 및 환경변수 설정
	(2) 이클립스 및 스프링 설치
	(3) 톰캣설치 방법
	(4) 이클립스 자바 환경설정 및 인코딩 설정방법
	(5) 데이터베이스(Mysql) 설치
	(6) 프로젝트 환경설정
	(7) 홈페이지 디자인 적용
	(8) 게시판 목록 페이지 작업
	(9) 게시판 등록 페이지 작업
	(10) 게시판 상세보기 페이지 작업
	(11) 게시판 수정/삭제 페이지 작업
	(12) 게시판 검색 페이지 작업
	(13) 게시판 페이징 작업
	(14) 게시판 페이징 쿼리스트링 작업
	(15) 회원가입 작업 (feat.아이디 중복체크/비밀번호 암호화)
	(16) 로그인/로그아웃 작업 (feat.아이디 기억하기)
	(17) 아이디&비밀번호 찾기
	(18) 마이페이지 정보&비밀번호 수정

저작자표시

'Website Production' 카테고리의 다른 글

Spring 홈페이지 - (13) 게시판 페이징 작업 (5)	2021.03.01
Spring 홈페이지 - (12) 게시판 검색 페이지 작업 (0)	2021.02.03
Spring 홈페이지 - (10) 게시판 상세보기 페이지 작업 (0)	2021.01.31
Spring 홈페이지 - (9) 게시판 등록 페이지 작업 (0)	2021.01.29
Spring 홈페이지 - (8) 게시판 목록 페이지 작업 (0)	2021.01.16

Beginner Developer Playground

pring 홈페이지 - (11) 게시판 수정/삭제 페이지 작업

'Website Production' 카테고리의 다른 글

댓글

티스토리툴바

pring 홈페이지 - (11) 게시판 수정/삭제 페이지 작업

'Website Production' 카테고리의 다른 글

관련글

댓글

티스토리툴바