th:selected / modal

9.11 (수)

1. BoardController.java 분석

package org.demo.springdemo.board.controller;

@Controller
@RequestMapping("/board")
@Log4j2
@RequiredArgsConstructor
public class BoardController {

    private final UploadUtil uploadUtil;

    @GetMapping("/register")
    public void register(){

    }

    @PostMapping("/register")
    public String register(BoardRegisterDTO boardRegisterDTO, RedirectAttributes rttr){

        log.info("register: "+ boardRegisterDTO);

        List<String> uploadedFileNames = uploadUtil.upload(boardRegisterDTO.getImges());
        //uuid와 기존파일이 결합된 파일이 uploadedFileNames에 담김
        boardRegisterDTO.setFileNames(uploadedFileNames);
        // Service에서 DTO에 FileNames를 사용하기 위해 상태변화시킴

        rttr.addFlashAttribute("bno", boardRegisterDTO.getBno());
        // 게시글이 등록된 이후 bno가 생성되는데, 해당 bno를 DTO의 에 주입시켜 상태를 변화시키고, addFlashAttribute에 저장된다.

        return "redirect:/board/list";
    }

    @GetMapping("/list")
    public void list(Model model){

    }

}

👉 우선, PostMapping은 게시글을 등록한 이후에 발생이 되는데 첨부파일을 넣어 게시글에 등록하게 되면 해당 DTO에 결합된 Imges를 uploadUtil의 upload메소드에 매개변수로 들어가서, List<.String>데이터타입인 uploadedFileNames변수에 담기게된다. 이 값은 UUID가 포함되어 만들어진 새로운 FileName이고, 이 FileName들이 DTO에 있는 setFileNames에 넣어져 DTO의 상태가 변화된다. 이 변화는 현재 DTO의 FileNames가 변경되어 나중에 Service에서 사용이 된다.

👉 Serivce에서 메소드가 호출되어, 게시글이 등록이 된 이후에 bno가 생성이 되고 해당 bno를 이용하여 addFlashAttribute를 통해 일회성으로 저장이 되어 modal에서 사용된다.

---

2. list에서 type값의 전달과정

2-1. list.html

<form id="actionForm" action="/board/list" method="get" >
            <select name="type"> <!--아래에서 선택된 타입이 해당 select Type으로 연결되어 xml파일의 type값과 이어진다 -->
                <option value="">---</option>
                <option value="T" th:selected="${pageRequest.type == 'T'}">제목</option>
                <option value="C" th:selected="${pageRequest.type == 'C'}">내용</option>
                <option value="W" th:selected="${pageRequest.type == 'W'}">작성자</option>
                <option value="TC" th:selected="${pageRequest.type == 'TC'}">제목 / 내용</option>
                <option value="TW" th:selected="${pageRequest.type == 'TW'}">제목 / 작성자</option>
                <option value="TCW" th:selected="${pageRequest.type == 'TCW'}">제목 / 내용 / 작성자</option>
            </select>
            <input type="text" name="keyword" th:value="${pageRequest.keyword}">
            <input type="hidden" name="page" value="1"> <!--검색조건을 누르면 무조건 1페이지 이므로-->

                <button class="btn btn-secondary searchBtn">Search</button>
                <button class="btn btn-primary clearBtn">Clear</button>



            </form>

👉 Option에서 선택된 value값으로인해 name="type"이 변경되어 type="T" 상태로 action인 /board/list의 경로로 전달이 된다.

---

2-2. Controller

package org.zerock.b2.board.controller;

@Controller
@RequestMapping("/board")
@Log4j2
@RequiredArgsConstructor
public class BoardController {

    private final UploadUtil uploadUtil;

    private final BoardService boardService;

    @GetMapping("/register")
    public void register(){

    }

    @PostMapping("/register")
    public String register(BoardRegisterDTO boardRegisterDTO, RedirectAttributes rttr){

        log.info("Register board: " + boardRegisterDTO);

        List<String> uploadedFileNames = uploadUtil.upload(boardRegisterDTO.getImages());

        boardRegisterDTO.setFileNames(uploadedFileNames);

        boardService.register(boardRegisterDTO);

        rttr.addFlashAttribute("bno", boardRegisterDTO.getBno());
        // 몇번게시물이 등록/삭제되었다는 모달을 위해

        return "redirect:/board/list";
    }


    @GetMapping("/list")
    public void list(PageRequest pageRequest, Model model){

        model.addAttribute("result", boardService.list(pageRequest));

    }

}

👉 폼데이터로 전달받은 type=T값이 쿼리스트링의 형태로 action의 controller로 전달되고, "/list"에서 PageRequest를 통해 boardService.list에 type=T값을 전달한다.

---

2-3. Service

package org.zerock.b2.board.service;

@Service
@Log4j2
@Transactional
@RequiredArgsConstructor
public class BoardService {

    private final BoardMapper boardMapper;

    public void register(BoardRegisterDTO boardRegisterDTO) {

        boardMapper.insert(boardRegisterDTO);

        List<String> fileNames = boardRegisterDTO.getFileNames();

        for (int i = 0; i < fileNames.size(); i++) {
            boardMapper.insertAttach(boardRegisterDTO.getBno(), fileNames.get(i), i);
        }

    }

    @Transactional(readOnly = true)
    public PageResponse<BoardListDTO> list(PageRequest pageRequest) {

        List<BoardListDTO> dtoList = boardMapper.listImage(pageRequest);

        int total = boardMapper.count(pageRequest);

        return PageResponse.<BoardListDTO>with()
                .list(dtoList)
                .total(total)
                .pageRequest(pageRequest)
                .build();
    }

}

👉 service의 list에서 PageRequest로 받은 값을 Mapper.listImage로 전달하는데,

---

2-4. xml

 <sql id="search">
        <foreach item="type" collection="arr" open="AND (" close=")" separator="OR">
            <if test='type.equals("T")'>
                title like concat('%', #{keyword}, '%')
            </if>
            <if test='type.equals("C")'>
                content like concat('%', #{keyword}, '%')
            </if>
            <if test='type.equals("W")'>
                writer like concat('%', #{keyword}, '%')
            </if>
        </foreach>
    </sql>


    <select id="listImage" resultType="BoardListDTO">
        select
        board.bno, title, writer, regDate, modDate,
        replyCnt, fileName
        from
        tbl_board board left join tbl_board_attach attach on attach.bno = board.bno
        where (attach.ord = 0 or attach.ord is null)

        <include refid="search"></include>

        order by board.bno desc
        limit #{skip}, #{size}
    </select>

👉 xml에서는 매개변수로 받은 PageRequest인

private int page = 1;
	
	private int size = 10;

	private String type;
	private String keyword;

이러한 정보들을 사용하게된다. 그 이후 list.html의
th:selected="${pageRequest.type == 'T'}" 값을 만나게 되는것이다.

---

3. th:block

<div class="float-end">
                <ul class="pagination flex-wrap">

                    <li class="page-item"><a class="page-link" href="#">PREV</a></li>

                    <th:block th:each="i : ${#numbers.sequence(result.startPage,result.endPage)}"> <!--th:block을 사용하여 li태그의 반복에 대해 쉽게 표현가능 / startPage부터 endPage까지의 숫자생성 -->
                        <li class="page-item" th:if="${i > 0}"><a class="page-link" th:href="${i}">[[${i}]]</a></li>
                    </th:block>

                    <li class="page-item"><a class="page-link" href="#">NEXT</a></li>
                </ul>
            </div>

👉 th:block을 이용하게 되면 li태그의 반복을 보기좋게 만들수있다.

👉 해당 코드는 th:each를 사용하여, result.startPage부터 endPage까지의 값을 숫자로 표현하는것.