[Zero-base] 7-9. 강좌 카테고리 수정, 삭제, 정렬

강좌 카테고리 삭제 - 화면 구현

 

list.html

• 테이블에 '비고'란 추가
• 비고란에 '삭제' 버튼 추가

 

 

 

• 삭제 버튼 추가 확인

 

 

 

list.html

• 삭제 버튼 동작 지정

 

 

 

• 각 id에 따라서 삭제 버튼이 동작하도록 지정

 

 

 

https://releases.jquery.com/

jQuery CDN

• javaScript 사용을 위하여 jQuery CDN 다운로드

 

 

 

• jQuery Core 3.6.0 - minified 선택
• <script> 복사

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>
<script>

 

 

 

list.html

• 카테고리 관리 페이지 헤더에 붙여넣기

 

 

 

limit.html

• alert() 기능 테스트

 

 

 

• 페이지 새로고침
• alert()에 입력한 내용 출력

 

 

 

list.html

• deleteForm 지정

 

 

 

• deleteForm에서 'submit'이 들어오면 alert() 출력

 

 

 

• 삭제 버튼을 눌러서 alert() 출력

 

 

 

list.html

• 문구 변경 - 카테고리를 삭제하시겠습니까?
• 취소한 경우 return false로 서버에 저장하지 않음

 

 

 

• 웹페이지 반영 확인

 

 

 

• 카테고리 삭제 - '확인' 경우 서버(delete.do)로 전송

 

 

---

카테고리 삭제 - 기능 구현

 

CategoryInput.java

 

 

 

 

AdminCategoryController.java

• 삭제에 대한 컨트롤러 생성 및 맵핑

 

 

 

CategoryServiceImpl.java

• del() 서비스 선언

 

 

 

• 삭제 - 확인

 

 

 

• 삭제 처리 완료

 

 

 

• 전체 삭제된 상태

 

 

 

list.html

• 카테고리 목록이 빈 경우 알림 내용 추가

 

 

 

• 알림 내용 출력

 

 

 

list.html

• 스타일 지정

 

 

 

• 적용된 모습

 

 

 

• 카테고리가 추가되어도 지속 시현

 

 

 

list.html

• 카테고리가 있는 경우 시현되지 않도록 설정

 

 

 

• 적용된 모습

 

 

 

---

강좌 카테고리 수정 - 화면 구현

 

list.html

• 카테고리 수정을 위한 입력창 및 사용여부 추가

 

 

 

• 화면에 적용된 모습

 

 

 

list.html

• 사용여부 체크박스로 수정

 

 

 

• 체크박스가 적용된 모습

 

 

 

list.html

• 수정 버튼 추가
• 삭제 버튼과 inline-block 설정을 위한 클래스 지정

 

 

 

• 수정, 삭제 버튼의 inline 지정을 위한 클래스의 스타일 지정

 

 

 

• inline-block 적용된 모습

 

 

---

강좌 카테고리 수정 - 기능 구현

 

list.html

• 수정을 위한 입력값 hidden으로 form 지정
• 화면에 출력되지 않음

 

 

 

list.html

• 수정 버튼의 클래스 지정

 

 

 

• 수정버튼 동작 테스트

 

 

• 정상 작동 확인

 

 

 

list.html

• 해당 값들을 받아서 콘솔로 출력 테스트

 

 

 

• 브라우저 디버깅 모드
• 수정 버튼을 통하여 해당 값이 콘솔로 출력 확인

 

 

 

list.html

• 입력받은 값을 updateForm에 넣어서 submit

 

 

 

• 수정 기능 테스트

 

 

 

• /admin/category/update.do로 전달되는 것을 확인

 

 

 

AdminCategoryController.java

• update 컨트롤러 생성 및 맵핑

 

 

 

CategoryInput.java

• 모델에서 카테고리 입력값 지정 

 

 

 

CategoryService.java

• 서비스에서 카테고리 수정 입력값 지정

 

 

 

CategoryServiceImpl.java

• 입력값 저장 구현

 

 

 

• 카테고리 수정 기능 테스트

 

 

 

• 입력값으로 변경됨을 확인

 

 

 

• 추가 입력 및 수정 기능 확인

 

 

---

강좌 카테고리 정렬 

 

CategoryServiceImpl.java

• 순서(sortValue)에 따라 정렬하는 기능(getSortBySortValueDesc()) 추가

 

 

 

• 새로고침을 통한 정렬 확인

 

 

 

• 현재 값보다 큰 값으로 수정

 

 

 

• 테이블 최상단에 위치함을 확인

 

 

---