글 상세보기, 글 삭제하기, 글 수정하기 구현하기

🤍글 상세보기 구현하기

 

1. Index.jsp 글 상세보기 버튼에 <a>태그 추가

 

2. BoardController 작성

//글 상세보기
	@GetMapping("/board/{id}")
	public String findById(@PathVariable int id, Model model) {
		model.addAttribute("board", boardService.글상세보기(id));
		return "board/detail";
	}

 

3. BoardService 작성

public Board 글상세보기(int id) {
    return boardRepository.findById(id)
        .orElseThrow(()->{
            return new IllegalArgumentException("글 상세보기 실패: 아이디를 찾을 수 없습니다.");
        });
}

 

4. detail.jsp 작성

• 작성자 본인만 수정, 삭제가 가능하도록(작성자와 로그인한 사용자 아이디가 같을 때) <c:if> 조건문을 넣었다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

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

<div class="container">
		<button class="btn btn-secondary" onclick="history.back()">돌아가기</button>
		
		<c:if test="${board.user.id == principal.user.id }">
			<a  href="/board/${board.id }/updateForm" class="btn btn-warning">수정</a>
			<button id="btn-delete" class="btn btn-danger">삭제</button>
		</c:if>
		<br>
		
		<div>
			글번호: <span id="id"><i>${board.id } </i></span>
			작성자: <span><i>${board.user.username} </i></span>
		</div>
		
		<div class="form-group">
			<h3>${board.title }</h3>
		</div>
		
		<hr/>
		
		<div class="form-group">
			<div>${board.content }</div>
		</div>
		<hr/>
</div>

<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp"%>

 

5. 글 상세보기 구현 완료

---

🤍글 삭제하기 구현하기

 

1. 글 삭제버튼 클릭 시 삭제되도록 코드 추가

let index = {
	init: function() {
		$("#btn-save").on("click", () => {
			this.save();
		});

		$("#btn-delete").on("click", () => {
			this.deleteById();
		});

	},

	deleteById: function() {

		let id = $("#id").text();

		$.ajax({
			type: "DELETE",
			url: "/api/board/" + id,
			dataType: "json"

		}).done(function(resp) {
			alert("삭제가 완료되었습니다.");
			//console.log(resp);
			location.href = "/";

		}).fail(function(error) {
			alert(JSON.stringify(error));
		});

	}
 }

 

2. BoardApiController 작성

	@DeleteMapping("/api/board/{id}")
	public ResponseDto<Integer> deleteById(@PathVariable int id){
		boardService.글삭제하기(id);
		
		return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
	}

 

3. BoardService 작성

	@Transactional
	public void 글삭제하기(int id) {
		boardRepository.deleteById(id);
	}

 

4. 삭제 완료

---

🤍글 수정하기 구현하기

 

1. BoardController 작성

//글 수정하기
	@GetMapping("/board/{id}/updateForm")
	public String updateForm(@PathVariable int id, Model model) {
		model.addAttribute("board",boardService.글상세보기(id));
		return "board/updateForm";
	}

 

2. 수정하기는 버튼 대신 <a>링크를 걸어둔다.

 

3. update 자바스크립트 코드 작성

let index = {
	init: function() {
		$("#btn-save").on("click", () => {
			this.save();
		});

		$("#btn-delete").on("click", () => {
			this.deleteById();
		});

		$("#btn-update").on("click", () => {
			this.update();
		});
	},

	update: function() {

		let id = $("#id").val();

		let data = {
			title: $("#title").val(),
			content: $("#content").val()
		};

		$.ajax({
			type: "PUT",
			url: "/api/board/"+id,
			data: JSON.stringify(data),
			contentType: "application/json; charset=utf-8",
			dataType: "json"

		}).done(function(resp) {
			alert("글 수정이 완료되었습니다.");
			location.href = "/";

		}).fail(function(error) {
			alert(JSON.stringify(error));
		});

	}
}

 

4. updateForm.jsp 작성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

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

<div class="container">
	<form>
	<input type="hidden" id="id" value="${board.id }">
		<div class="form-group">
			<input type="text" class="form-control"  value="${board.title }" placeholder="Enter title" id="title">
		</div>
		<div class="form-group">
			<textarea class="form-control summernote" rows="5" id="content">${board.content }</textarea>
		</div>
	</form>
	<button id="btn-update" class="btn btn-primary">글수정 완료</button>
</div>

<script>
      $('.summernote').summernote({
        tabsize: 2,
        height: 300
      });
</script>
<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp"%>

 

5. BoardApiController 작성

	@PutMapping("/api/board/{id}")
	public ResponseDto<Integer> update(@PathVariable int id, @RequestBody Board board){
		boardService.글수정하기(id, board);
		return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
	}

 

6. 글 수정 구현 완료