판매 여부 체크박스

<form action="item.html" th:action th:object="${item}" method="post">

th:object="${item}"을 입력하면 thymeleaf에서 object가 item의 객체로 인식해서 이후에 item객체에 있는 변수들을 사용할 때 간략화할 수 있다.

 

<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">

th:field="${item.itemName}"으로 적어야하는 상황인데 th:field="*{itemName}으로만 적을 수 있다.

(id와 name 둘 다 지워도 됨)

 

 

 

판매 여부를 체크할 수 있는 체크박스

 

@GetMapping("/add")
public String addForm(Model model) {
    model.addAttribute("item", new Item()); // new Item이라는 빈 객체는 addForm에서 사용하기 위해서 넣어주기
    return "form/addForm";
}

우선 form/addForm에서 model을 사용할 수 있도록 GetMapping("/add")에 model.addAttribute로 빈 Item 객체를 넘겨준다.

 

 

@PostMapping("/add")
public String addItem(@ModelAttribute Item item, RedirectAttributes redirectAttributes) {
    log.info("item.open={}", item.getOpen()); // 추가
    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/form/items/{itemId}";
}

PostMapping 방식에는 로그가 찍히게 하는 코드를 추가해준다. 

(item.open을 사용하였는데 open이라는 메서드는 item객체에 open을 추가해주었다. boolean 타입으로)

 

 

 

 

addForm.html

<hr class="my-4">
<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" name="open"class="form-check-input">
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

addForm에 위의 코드를 추가해주었다. 타임리프를 사용하지 않고 일반적인 html 코드로 체크박스를 만든 것이다.

 

하지만 이렇게하면 큰 문제점이 있다. 로그에 출력을 했을 때, 체크박스에 체크를 하면 true 값이 잘 넘어오지만 체크를 하지 않았을 때에는 false가 아니라 null 값이 넘어온다는 것이다. 추후에 수정을 해야할 일이 있을 때 이러한 상황때문에 문제점이 생길 수가 있다.

 

 

<hr class="my-4">
<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" th:field="*{open}"class="form-check-input">
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

th:field="${item.open}"을 추가해주었다. th:field로 인해 히든 영역이 생기게 되며라는

<input type="hidden" name="_open" value="on"/>

라는 코드가 자동으로 들어가게 된다. 이 코드로 인해 체크가 되지 않으면 false라는 값이 자동으로 로그에 출력된다.

 

체크 하지 않았을 때

로그에 false라는 값이 넘어오게 된다. 당연히 체크박스에 체크를 하면 true가 넘어온다.

 

 

 

 

item.html

저장완료가 되었을 때 상품 상세 페이지로 넘어가는데 그 페이지에도 판매 여부를 표시하는 체크 박스를 만들어보자.

<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" th:field="${item.open}"class="form-check-input" disabled>
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

맨 뒤에 disabled라는 단어를 붙였는데 이 단어가 있어야지만 상품 상세에서 박스 수정을 하지 못한다.

 

상품 상세 페이지에서 판매 오픈이라는 박스를 체크하지 못함

 

 

 

 

editForm.html

상품 수정 페이지에는 상품 등록인 addForm.html에 추가한 코드를 그대로 추가하면 된다.

한 가지 조심해야할 것이 있는데 변경을 해주는 update인 메소드에 findItem.setOpen(updateParam.getOpen());을 넣어줘야한다. 그렇지 않으면 수정했을 때 상품 목록에서 수정된 값이 반영되지 않는다.

public void update(Long itemId, Item updateParam) {
    Item findItem = findById(itemId);
    findItem.setItemName(updateParam.getItemName());
    findItem.setPrice(updateParam.getPrice());
    findItem.setQuantity(updateParam.getQuantity());
    findItem.setOpen(updateParam.getOpen());
}