[84일차 - 1] CKEditor / 카테고리 목록 선택

20221122(화)

• 목차
  - 웹에디터 CKEditor
  - 1차 카테고리 목록
  - 2차 카테고리 목록

---

< 웹에디터 CKEditor >

• CKEditor란?
  콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터
  CKEditor는 오픈 소스와 상용 라이선스로 이용가능
  
  
• 위지위그 리치 텍스트 에디터?
  - 온라인 서식 있는 텍스트 편집기 는 웹 브라우저 내에서 서식 있는 텍스트를 편집하기 위한 인터페이스
  - 사용자에게 " WYSIWYG(what-you-see-is-what-you-get), 보는 대로 얻는다” 편집 영역 제공
  - 목표 : 형식을 유효한 HTML 마크업 으로 직접 표현하려는 사용자의 노력을 줄이는 것

---

• textarea태그에 적용된다.
• name부분을(pdt_detail) replace함수에 일치시켜줘야 함

---

• CKEditor 환경설정 : 자바스크립트 object 문법(아래 코드)을 사용하고 있다.

 

---

<  1차 카테고리 목록 >

 

1차 카테고리 선택에 CATE_CODE_PRT가 NULL값인 값들을 불러오고 싶어요!

---

1. 카테고리 추가(SQL)

--2. 카테고리 테이블
CREATE TABLE CATEGORY_TBL (
    CATE_CODE       			NUMBER        				    PRIMARY KEY,
    CATE_CODE_PRT     		    NUMBER,                                          
    CATE_NAME           		VARCHAR2(50)         			NOT NULL
);
 
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(1, NULL, 'TOP');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(10, 1, '맨투맨/후드티');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(11, 1, '니트');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(12, 1, '긴팔티');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(13, 1, '반팔티');
 
COMMIT;
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(2, NULL, 'SHIRTS');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(20, 2, '베이직');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(21, 2, '청남방');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(22, 2, '체크/패턴');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(23, 2, '스트라이프');
 
 
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(3, NULL, 'PANTS');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(30, 3, '슬랙스');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(31, 3, '면바지');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(32, 3, '청바지');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(33, 3, '베이직');
 
 
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(4, NULL, 'OUTER');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(40, 4, '트렌치');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(41, 4, '라이더');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(42, 4, '코트');
 
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(5, NULL, 'SHOES/BAG');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(50, 5, '신발');
INSERT INTO CATEGORY_TBL(CATE_CODE, CATE_CODE_PRT, CATE_NAME) VALUES(51, 5, '가방');
 
COMMIT;

---

2. CategoryVO.java 생성

@Data
public class CategoryVO {
	/*
	 CREATE TABLE CATEGORY_TBL (
    CATE_CODE       			NUMBER        				    PRIMARY KEY,
    CATE_CODE_PRT     		    NUMBER,                                          
    CATE_NAME           		VARCHAR2(50)         			NOT NULL
);
	 */
	// cate_code, cate_code_prt, cate_name
	
	private Integer cate_code;  // PK라서 Integer
	private Integer cate_code_prt;
	private String cate_name;
}

---

3. 컨트롤러에 주입

---

4. 매퍼

---

5. 서비스

---

6. 컨트롤러

---

7. productInsert.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 추가

 

---

< 1차 카테고리 선택 후 2차 카테고리 선택 >

 

---

1. productInsert.jsp에 코드추가

---

2. 컨트롤러

---

3. 매퍼

---

4. 서비스

---

5. 컨트롤러 호출