체크박스 - 단일 1

1. single checkbox

---

• addform.html에 추가
• 일단 순수  html로 작성.
• check box의 경우  name이 open이다. ->Item의 Boolean open에 참/거짓 값을 넘겨줌.

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

• controller에서 open 값이 잘 넘어오는지 확인하기 위해 log를 추가.

    @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}";
    }

 

 

 

2. 결과 확인

---

• 상품 등록 form에 판매여부 check box가 추가되었고, check에 따라 true/false 값이 전달 된 것을 확인 가능.

2021-09-23 00:25:39.819  INFO 21032 --- [nio-8080-exec-7] h.i.web.form.FormItemController
: item.open=true

• form  data를 확인해 보자.
  • open은 on으로 넘어간다???

• 체크 박스를 체크하면 HTML Form에서 open=on 이라는 값이 넘어간다. 
• 스프링은 on 이라는 문자를true 타입으로 변환해준다. 

 

 

3. 주의사항 - 체크를 안할 경우

---

• HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open 이라는 필드 자체가 서버로 전송되지 않는다.
• 판매 오픈을 체크를 하지 않으면 어떻게 될까?
• open 값이 뭐로 넘어갈까???

• form data를 보면  open에 대한 data가 넘어가지 않는다.

• log를 확인해 보면 open= null로 넘어온다.

2021-09-23 00:30:50.714  INFO 21032 --- [nio-8080-exec-6] h.i.web.form.FormItemController
: item.open=null

 

 

3. HTTP 요청 메시지 로깅

---

• application.properties

  • logging.level.org.apache.coyote.http11=debug

• 체크를 하고 보내면?

  • itemName=dd&price=222&quantity=111&open=on]

  • open=on 으로 넘어온다.
• 체크를 하지 않고 보내면?

  • itemName=itemddd&price=123&quantity=123]

  • message body에 open값이 없다. open이름도 전송이 안된다.

 

 

4. HTML Checkbox 특징

---

• HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다. 
• 수정의 경우에는상황에 따라서 이 방식이 문제가 될 수 있다. 
• 만약 사용자가 의도적으로 체크되어 있던 값을 체크를 해제해도 저장시 아무 값도 넘어가지 않기 때문에, 
• 서버 구현에 따라서 값이 오지 않은 것으로 판단해서 값을 변경하지 않을 수도 있다.

 

 

 

5. 해결 방법

---

• 이런 문제를 해결하기 위해서 스프링 MVC는 약간의 트릭을 사용한다.
• 히든 필드를 하나 만들어서, _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 
• 체크를 해제했다고 인식할 수 있다. 
• 히든 필드는 항상 전송된다. 
• 따라서 체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만 전송된다.
• 이 경우 스프링 MVC는 체크를 해제했다고 판단한다.

        <!-- single checkbox -->
        <div>판매 여부</div>
        <div>
            <div class="form-check">
                <input type="checkbox" id="open" name="open" class="form-check-input">
                <input type="hidden" name="_open" value="on"/> <!--히든 필드 추가 -->
                <label for="open" class="form-check-label">판매 오픈</label>
            </div>
        </div>

• 히든 필드
  • <input type=“hidden”>은 사용자에게는 보이지 않는 숨겨진 입력 필드를 정의함.
  • 사용자에게 보이지는 않으나 값은 전달함. default 값 = value 로 지정.
  • 지금 예제의 경우 hidden 필드(_open)은 항상 on을 전송함.

• 체크를 하고 보내는 경우

• 체크를 하지 않고 보내는 경우
  • open은 전송되지 않고, _open만 전송된다.

    • 

  • Message Body에는 _open=on으로 넘어왔다.

    • itemName=dd&price=222&quantity=111&_open=on]

  • Log를 살펴보자.

    • 2021-09-23 00:50:41.069  INFO 6884 --- [nio-8080-exec-5] h.i.web.form.FormItemController 
      : item.open=false

    • open=fale로 처리되었다???????
  • 위와같은 기능은 스프링이 트릭을 제공하는 것.

 

6. 정리 

---

• 체크 박스 체크
  
  • open=on&_open=on
  • 체크 박스를 체크하면 스프링 MVC가 open 에 값이 있는 것을 확인하고 사용한다. 
  • 이때 _open 은 무시한다.
• 체크 박스 미체크
  
  • _open=on
  • 체크 박스를 체크하지 않으면 스프링 MVC가 _open 만 있는 것을 확인하고, 
  • open 의 값이 체크되지  않았다고 인식한다.
  • 이 경우 서버에서 Boolean 타입을 찍어보면 결과가 null 이 아니라 false 인 것을 확인할 수 있다.
  • log.info("item.open={}", item.getOpen());

 

7. GitHub: 

---

GitHub - bsh6463/Thymeleaf_Spring2