Spring Projcect/학습 관리 시스템 & 백오피스 구축

Chapter 12. 카테고리 화면

계란💕 2022. 8. 22. 17:04

12.1 강좌 카테고리 목록 구현 및 추가

  Ex)

    - admin 아래에 새로운 패키지를 만든다.category아래 리스트 파일 만든다.

   - 새로운 카테고리 컨트롤러

java
열기

 

    - 레이아웃에 관리자 메인 페이지도 추가한다.

html
열기
html
열기

  Note) 실행 결과

 

 

 

  Ex) 카테고리 클래스 만들고 데이터베이스에 들어갔는지 확인하기

 

     - 카테고리 창에 입력창 추가한다.

 

     - 컨트롤러에 add.do 추가한다.

java
열기

 

    - CategoryInput() 클래스를 만든다.

 

    - Category 클래스 만들기 => @Entity를 붙이면 빨간 줄 생긴다.  

      ->자동 증가?

 

      -> 그럼 다음과 같이 키가 만들어진다.

java
열기

 

    - 레포지토리

      ->  yml 파일에 자동으로 DDL 만들어주는 부분이 세팅되어 있기 때문에 이렇게 하면 테이블이 만들어질 것이다.

java
열기

  Note) 실행 결과

 

 

  Ex) 카테고리 리스트 구현하기

    - 카테고리 서비스 인터페이스

java
열기

 

    - Dto 클래스

java
열기

 

    - 카테고리 서비스 임플

java
열기

 

    - 카테고리 Dto 클래스

java
열기

 

    -  Impl의 list() 메서드 => 카테고리를 카테고리 DTO형태로 바꿔준다.

java
열기

 

    - 컨트롤러 

      -> 모델에 add해주면 클라이언트(뷰) 페이지까지 내려간다.

java
열기
java
열기

 

    - 카테고리 리스트

html
열기

 

  Note) 실행 결과 - 데이터베이스에 행 추가

 

    - aaaaa를 입력한 결과

 

 

html
열기

 

    ====================== 오류 ======================

  - 오류: 추가 버튼을 누르면 데이터베이스에는 들어가는데 표에는 보이지가 않는다.

  - 원인: 임플 클래스 구현에 문제가 있었다.

  Note) 실행 결과

 

 

 

12.2 강좌 카테고리 수정, 삭제, 정렬

  Ex) 삭제 버튼 만들기

    - 리스트 파일

      -> 테스트 목적으로 alert(1)

html
열기

 

    - 1번 삭제 눌렀을 때

    - 삭제 css

html
열기

    - > 확인 누르면 아직까지는 화이트라벨

 

    - 삭제 버튼 확인 누르고 난 다음 화면 만들기위해 컨트롤러에 내용 추가

java
열기

 

    - 임플에 del 구현

java
열기

  Note) 실행 결과 - 1번 카테고리가 삭제되었다.

 

 

 

  Ex) 카테고리 리스트에 데이터가 없는 경우 보여줄 화면 구성하기

     - colspan

html
열기

  Note) 실행 결과

 

 

  Ex) 카테고리 창에서 바로 수정하기

    - 체크 박스는 두 가지 옵션 중 선택해야하는 상황이라면 두 개에 대해 같은 이름의 변수를 줘야한다.

    - name을 왜 복잡하게 주나 했는데 아이디 별로 usingYn 이 다르므로 각각 변수 이름을 다르게 줘서 구분이 가능하다

html
열기

  Note) 실행 결과

 

  Ex) 사용 여부 y/n 선택 기능

html
열기

  Note) 실행 결과

 

 

  Ex)  체크 박스

html
열기

  Note) 실행 결과

 

 

  Ex) 수정 삭제 버튼에 대해 같은 클래스 이름을 적용

    - CSS에서 display에 inline-block으로 지정하면 나란히 옆으로 배치된다.

html
열기

  Note) 실행 결과 - 성공

 

 

  Ex) 자바스크립트

javascript
열기

  Note) 실행 결과

 

 

  Ex) 수정하기

 

    - 컨트롤러 수정 메서드

java
열기

    - 자바스크립트

      -> 수정은 on('click') / 삭제는 on('submit') => 뭐가 다를까???

 

 

    cf) val와 var의 차이는?

      - val: 데이터를 바꿀 수 없는 읽기 전용 변수 (자바의 final과 같다.)

      - var: 값을 변경 가능한 변수

 

javascript
열기

 

    - 임플에서 update()  메서드 구현

java
열기

  Note) 실행 결과 - 정상

 

 

========================오류 =========================

   - 오류: 삭제할 때, 알림창이 나와야하는데 갑자기 안 나온다. 삭제는 정상으로 실행된다.

   - 원인: 정확한 이유는 모르겠으나 다시 돌려보니까 정상 실행된다.

 

 

 

  Ex) 리스트에서 순서에 맞춰 카테고리를 가져오기

    - 카테고리 리포지토리

java
열기

 

    - 카테고리 임플 클래스

java
열기

  Note) 실행 결과

 

====================== 오류 ======================

java
열기

 

  - 오류: 서버가 안뜬다. 

    -> UnsatisfiedDependencyException: 빈을 생성하는데 해당 빈이 충돌이 된 것이다.

  - 원인: 카테고리 리포지토리 인터페이스에 구현된 함수를 잠시 주석 처리 하니까 해결 (이유는 잘 모르겠으나 아직 사용중인 메서드가 아니라 주석 처리)

    -> findBy... ()와 같은 메서드를 만들 때는 반드시 엔티티 안에 있는 변수명, 매개변수의 타입을 맞춰서 만들어야한다. 

    -> 따라서, 엔티티 안에 변수명이 없는 경우는 에러가 난다.

 

 

 

=========================== 오류 -===========================

  - 오류: 수정 버튼을 누르고 나면 name부분이 null로 초기화 되버린다.

  - 원인: 카테고리 리스트에 updateForm부분에 name="categoryName"이라고 써야하는데 오타가 나서 값이 안 들어갔다.

    -> HTML에서는 카테고리 엔티티에 대한 필드값을 잘못 적더라도 빨간줄이 그인다거나 하지 않아서 주의해야한다.

    -> 자바스크립트에서는 중괄호나 괄호가 짝이 맞지 않는 경우도 주의해야한다.