![[LMS 만들기] 카테고리 수정, 삭제, 정렬](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRBOIH%2FbtrNSBTwawF%2FQmJaKagStPApSnswZqQcdk%2Fimg.png)
| 개요
- 벌써 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 만들기] 강좌 목록 구현하기 - 스마트에디터, 등록/수정 동시 처리 (0) | 2022.10.07 |
| [LMS만들기] 회원 상태 변경 및 비밀번호 초기화 (0) | 2022.10.05 |
| [LMS만들기] 페이징 처리하기 (with MyBatis) (0) | 2022.10.05 |
| [LMS만들기] 회원 검색 기능 구현 (0) | 2022.10.04 |