[LMS 만들기] 카테고리 수정, 삭제, 정렬

| 개요

- 벌써 12시..

- 새롭게 배운 내용만 정리했다..

| 오늘 새롭게 배운 내용

1. Form에 hidden type의 input으로 update 데이터 전송하기

- 사실 수업을 들으면서, 현장에서도 이렇게 쓸까, 의아했던 부분이다.

- 아래의 내용을 보면 수정할 사항들을 제이쿼리를 통해서 하위 input이 모두 hidden타입인 폼안에 ~~때려박~~ 넣어줬다.

// 상단 생략
<head>
// 상단 생략
    <script>
        $(document).ready(function(){

            $('form[name=deleteForm]').on('submit', function(){
                if(!confirm('카테고리를 삭제하시겠습니까?')){
                    return false;
                }
            });

            $('button.update-button').on('click', function(){

                if (!confirm('카테고리를 수정하시겠습니까?')) {
                    return false;
                }

                let $this = $(this);
                let $tr = $this.closest('tr');

                let id = $tr.find('input[name=id]').val();
                let categoryName = $tr.find('input[name=categoryName]').val();
                let sortValue = $tr.find('input[name=sortValue]').val();
                let usingYn = $tr.find('input[type=checkbox]')[0].checked;

                let $updateForm = $('form[name=updateForm]');
                $updateForm.find('input[name=id]').val(id);
                $updateForm.find('input[name=categoryName]').val(categoryName);
                $updateForm.find('input[name=sortValue]').val(sortValue);
                $updateForm.find('input[name=usingYn]').val(usingYn);
                $updateForm.submit();

            });
        });
    </script>
</head>
<body>
    <h1>카테고리</h1>
    <div th:replace="/fragments/layout.html::fragment-admin-body-menu"></div>
    <div class = "list">
        <form method = "post" action = "/admin/category/add.do">
            <div>
                <input type="text" name ="categoryName" required placeholder="카테고리명 입력">
                <button type ="submit">추가</button>
            </div>
        </form>
        <table>
            <thead>
                <tr>
                    <th> ID </th>
                    <th>카테고리명</th>
                    <th>순서</th>
                    <th>사용여부</th>
                    <th>비고</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="x : ${list}">
                    <td>
                        <input th:value="${x.id}" name = "id" type = "hidden">
                        <p th:text="${x.id}"></p>
                    </td>
                    <td>
                        <input th:value = "${x.categoryName}" type="text" name="categoryName">
                    </td>
                    <td>
                        <input th:value="${x.sortValue}" type="text" name="sortValue">
                    </td>
                    <td>
                        <input th:id="'usingYn_'+${x.id}" th:name="'usingYn_'+${x.id}" th:checked="${x.usingYn}" type = "checkbox">
                        <label th:for="'usingYn_'+${x.id}">사용</label>
                    </td>
                    <td>
                        <div class="inline-div">
                            <button class = "update-button" type="button">수정</button>
                        </div>
                        <div class="inline-div">
                            <form name = "deleteForm" method = "post" action = "/admin/category/delete.do">
                                <input th:value="${x.id}" type = "hidden" name = "id">
                                <button type="submit">삭제</button>
                            </form>
                        </div>
                    </td>
                </tr>
                <tr th:if="${#lists.size(list) < 1}">
                    <td colspan = "5">
                        <p class = "nothing">내용이 없습니다.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

<form name = "updateForm" method = "post" action = "/admin/category/update.do">
    <input type = "hidden" name ="id">
    <input type = "hidden" name ="categoryName">
    <input type = "hidden" name ="sortValue">
    <input type = "hidden" name ="usingYn">
</form>

</html>

- 그런데 [F12]를 눌러면 아래와 같이 숨겨진 폼이 다 보인다.

- [F12]는 기획자로 근무했던 잠시동안 그렇기에 매우매우 애용했던 키이기도 한데(무슨 데이터를 쓰나 보려고),

생각해보면 그때, 보이는 데이터들도 있고, 안 보이는 데이터들도 있었더랬다.

- 아마도 이 부분은 나중에 다시 보완을 할 내용일 것 같은데,

유추하기를, 실무에서는 별도의 script에서 ajax를 사용해서 데이터를 json 타입으로 던지지 않을까 싶다.

이 부분은 좀 더 진도가 나간 후에 보완을 해야할 것 같다.

2. Sort (domain 패키지 하위)라는 클래스를 사용해 findAll(Sort sort)로 정렬하기

- 수업에서 findAllOrderBySortValueDesc() 라는 메소드를 JPA repository 안에서 사용했는데, 잘 안 되어 아래의 코드로 변경했다.

- 왜 안 됐을까...? 뭔가 JPA의 구조에 대해 이해하게 되면 쉽게 풀릴 수도 있을 부분 같다.

- 다만, 만약 정렬이 안되는 때가 있다면 아래의 방식을 고려해 문제를 해결해 볼 수 있을 것 같아 노트했다.

@Service
@RequiredArgsConstructor
public class CategoryServiceImpl implements CategoryService {

    private final CategoryRepository categoryRepository;

    private Sort getSortBySortValueDesc() {
        return Sort.by(Sort.Direction.DESC, "sortValue");
    }

    /**
     * 카테고리 조회
     */
    @Override
    public List<CategoryDto> list() {

        List<Category> categories = categoryRepository.findAll(getSortBySortValueDesc());

        return CategoryDto.of(categories);

    }
}

[ 출처 및 참조 ]

부트캠프 수업을 들은 후 정리

'Framework > 프로젝트로 스프링 이해하기' 카테고리의 다른 글

[LMS 만들기] @Controller 와 @RestController 정확히 알기, AJAX로 Json 데이터 전송하기, Principle(로그인 정보) (0)	2022.10.08
[LSM 만들기] 강좌 목록 구현하기 - 스마트에디터, 등록/수정 동시 처리 (1)	2022.10.07
[LMS만들기] 회원 상태 변경 및 비밀번호 초기화 (0)	2022.10.05
[LMS만들기] 페이징 처리하기 (with MyBatis) (0)	2022.10.05
[LMS만들기] 회원 검색 기능 구현 (0)	2022.10.04

| 개요

| 오늘 새롭게 배운 내용

1. Form에 hidden type의 input으로 update 데이터 전송하기

2. Sort (domain 패키지 하위)라는 클래스를 사용해 findAll(Sort sort)로 정렬하기

'Framework > 프로젝트로 스프링 이해하기' 카테고리의 다른 글

티스토리툴바