๐Ÿ”ฅ #15 ๊ธ€ ์ˆ˜์ • ๊ธฐ๋Šฅ

๐Ÿ’ก board.js ์—์„œ ์ฐจ์ด์ 

  • delete ๊ธฐ๋Šฅ : let id = $("#id").text();
    • ๊ธ€ ๋ฒˆํ˜ธ : <span id="id"><i>${board.id} </i></span> ์—์„  ${board.id}๊ฐ€ ํƒœ๊ทธ ์‚ฌ์ด์— ์žˆ์œผ๋ฏ€๋กœ html ํ˜น์€ text ํ•จ์ˆ˜๋ฅผ ์“ด๋‹ค.
  • update ๊ธฐ๋Šฅ : let id = $("#id").val();
    • <input type="hidden" id="id" value="${board.id}"/> ์—์„  input ํƒœ๊ทธ ์•ˆ์˜ value ๊ฐ’์— ์žˆ์œผ๋ฏ€๋กœ val ํ•จ์ˆ˜๋ฅผ ์“ด๋‹ค.

  1. detail.jsp ์—์„œ ์ˆ˜์ • ๋ฒ„ํŠผ ๋ˆ„๋ฅด๊ธฐ

  2. ํ•ด๋‹น url ์ด ๋งคํ•‘๋œ BoardController ์˜ updateForm ๋ฉ”์„œ๋“œ๋กœ ๊ฐ€์„œ updateForm.jsp ์„ ๋ฆฌํ„ดํ•จ

  3. updateForm.jsp ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์ˆ˜์ •ํ•  ๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜๊ณ  (title, content)

  4. ๊ธ€ ์ˆ˜์ • ์™„๋ฃŒ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด board.js ๊ฐ€ ์ž‘๋™ํ•จ

  5. board.js ์—์„œ update ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ณ  ํ•ด๋‹น url ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ์ „์†ก๋จ -> json ๋ฐ์ดํ„ฐ ํ˜•ํƒœ๋กœ..

  6. BoardApiController ์˜ update ๋ฉ”์„œ๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ณ  boardService ๋ฅผ ํ˜ธ์ถœํ•จ

โญ 7. BoardSerivce ์—์„œ ๊ธ€์ˆ˜์ •ํ•˜๊ธฐ ๋ฉ”์„œ๋“œ๊ฐ€ ์‹คํ–‰๋˜๋Š”๋ฐ ์ด๋•Œ ํŠธ๋žœ์žญ์…˜ ์–ด๋…ธํ…Œ์ด์…˜์„ ๋ถ™์—ฌ์„œ ๋ ˆํผ์ง€ํ† ๋ฆฌ์˜ save ํ•จ์ˆ˜ ์—†์ด select ๋งŒ์œผ๋กœ ๊ธ€์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Œ


< detail.jsp >

.
.
.
<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>
.
.
.

์ˆ˜์ • ๋ฒ„ํŠผ์„ a ํƒœ๊ทธ๋กœ url ์„ ๊ฑธ์–ด์ค€๋‹ค!

< BoardController >

	// ๊ธ€ ์ˆ˜์ •ํ•˜๊ธฐ
    @GetMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id, Model model) {
        model.addAttribute("board", boardService.๊ธ€์ƒ์„ธ๋ณด๊ธฐ(id));
        return "board/updateForm";
    }

์ปจํŠธ๋กค๋Ÿฌ์—์„œ ํ•ด๋‹น url์„ ์ฐพ์•„ ์˜จ๋‹ค.
GetMapping ์œผ๋กœ, ์ˆ˜์ •ํ•  ํŽ˜์ด์ง€๋กœ ์ด๋™์‹œ์ผœ์ฃผ๋Š” ๊ณณ์ด๋‹ค.
๊ธฐ์กด์— ์ž‘์„ฑํ–ˆ๋˜ title๊ณผ content๋„ model๋กœ ๋„˜๊ฒจ์ค€๋‹ค.

< 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 value="${board.title}" type="text" class="form-control" 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"%>

model๋กœ ๋„˜๊ฒจ๋ฐ›์€ title๊ณผ content๋ฅผ ์ถœ๋ ฅํ•˜๊ณ ,
์ƒˆ๋กœ ์ˆ˜์ •ํ•  title๊ณผ content๋ฅผ ๋„˜๊ฒจ์ค˜์•ผ ํ•œ๋‹ค.
๊ธ€์ˆ˜์ • ์™„๋ฃŒ ๋ฒ„ํŠผ์€ id="btn-update" ๋ฅผ ๊ฐ–๊ณ , board.js๋ฅผ ์ž‘๋™์‹œํ‚จ๋‹ค.

< board.js >

.
.
.
	$("#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) {
            // ๊ฒฐ๊ณผ๊ฐ€ ์ •์ƒ์ด๋ฉด done ์‹คํ–‰
            alert("๊ธ€์ˆ˜์ •์ด ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.");
            location.href = "/";
        }).fail(function (error) {
            // ์‹คํŒจํ•˜๋ฉด fail ์‹คํ–‰
            alert("๊ธ€์ˆ˜์ •์„ ์‹คํŒจํ•˜์˜€์Šต๋‹ˆ๋‹ค.");
            alert(JSON.stringify(error));
        });
    },
.
.
.

์ˆ˜์ •์ด๊ธฐ ๋•Œ๋ฌธ์— type="PUT" ์ด๊ณ , ๋ฐ์ดํ„ฐ๋ฅผ json ํ˜•ํƒœ๋กœ "/api/board/"+id url์— ๋ณด๋‚ธ๋‹ค.

< 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);
    }

json ํƒ€์ž…์˜ ๋ฐ์ดํ„ฐ์ด๋ฏ€๋กœ ๋งค๊ฐœ๋ณ€์ˆ˜์—์„œ @RequestBody๋กœ ๋ฐ›๋Š”๋‹ค.

< BoardService >

@Transactional
public void ๊ธ€์ˆ˜์ •ํ•˜๊ธฐ(int id, Board requestBoard) {
	Board board = boardRepository.findById(id) // ์˜์†ํ™” (์˜์†์„ฑ ์ปจํ…์ŠคํŠธ์— ๋„ฃ๋Š” ๊ฒƒ)
            .orElseThrow(()->{
                return new IllegalArgumentException("๊ธ€ ์ฐพ๊ธฐ ์‹คํŒจ : ์•„์ด๋””๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค." + id);
            });
    board.setTitle(requestBoard.getTitle());
    board.setContent(requestBoard.getContent());
        // ํ•ด๋‹น ํ•จ์ˆ˜ ์ข…๋ฃŒ์‹œ(Service๊ฐ€ ์ข…๋ฃŒ๋  ๋•Œ) ํŠธ๋žœ์žญ์…˜ ์ข…๋ฃŒ -> ์˜์†ํ™” ๋˜์–ด์žˆ๋Š” board ๋ฐ์ดํ„ฐ๊ฐ€ ๋‹ฌ๋ผ์กŒ๊ธฐ ๋•Œ๋ฌธ์— ๋”ํ‹ฐ์ฒดํ‚น ์ผ์–ด๋‚จ -> ๋ณ€๊ฒฝ ๊ฐ์ง€ -> DB์— ์ž๋™ flush
    }

์ˆ˜์ •์€ CRUD ์ค‘์—์„œ U์ด๋‹ค.
์ฆ‰, ํŠธ๋žœ์žญ์…˜์„ ๊ฑธ์–ด์ค˜์•ผ ํ•œ๋‹ค.
update ์ด์ง€๋งŒ ๋ ˆํผ์ง€ํ† ๋ฆฌ์˜ save ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ,
DB์—์„œ select ํ•˜์—ฌ ์˜์†์„ฑ ์ปจํ…์ŠคํŠธ์— ๋‹ด๋Š”๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ˆ˜์ •ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ set ํ•˜๋ฉด, ์˜์†์„ฑ ์ปจํ…์ŠคํŠธ์— ์žˆ๋Š” Board๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋˜๋ฉด ํŠธ๋žœ์žญ์…˜๋„ ์ข…๋ฃŒ๋˜๋ฉด์„œ ์˜์†์„ฑ ์ปจํ…์ŠคํŠธ์— ์žˆ๋Š” Board๊ฐ€ ๋ณ€๊ฒฝ์ด ๊ฐ์ง€๋˜๊ณ , DB์— ์ž๋™์œผ๋กœ flush ๋œ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ