STS3 쇼핑몰 프로젝트[27] 업로드 이미지 정보 등록 - 1

순서

1. IMAGE 테이블 생성

2. SwanVO.java

3. <input> 태그 추가

1. IMAGE 테이블 생성

이미지 업로드로 생성된 이미지에 대한 정보를 DB에 등록할 수 있도록 테이블을 생성했습니다.

 

해당 테이블에 저장될 이미지 정보는 상품 정보에 대한 이미지 정보이기 때문에 product_id라는 칼럼을 추가하여 오직 상품 테이블의 상품 아이디가 존재하는 데이터만 등록할 수 있도록 외래 키를 통해 제약 사항을 추가했습니다.

 

DB에 아래의 명령을 통해 상품 이미지 테이블(IMAGE)을 생성합니다.

기본 키는 UUID, PRODUCT_ID 칼럼은 PRODUCT테이블에 존재하는 PRODUCT_ID 값만 등록할 수 있도록 외래 키로 지정했습니다.

--------------------------------------------------------
--------------- PRODUCT 이미지 관련 --------------------
--------------------------------------------------------
create table image(
        product_id NUMBER,
        fileName varchar2(100) not null,
        uploadPath varchar2(200) not null,
        uuid varchar2(100) PRIMARY KEY,
        foreign key (PRODUCT_ID) references PRODUCT(PRODUCT_ID)
    );
COMMIT;

2. SwanVO.java

서버의 URL 매핑 메서드에서 뷰에 전송하는 이미지에 대한 정보를 전달받을 수 있도록 상품 이미지에 대한 정보를 SwanVO 객체에 포함시켜 전달받을 수 있도록 SwanVO 클래스를 일부 수정했습니다.

 

서버 단계에서 여러 개의 이미지를 처리할 수 있는 메서드를 작성했기 때문에 List 자료구조를 활용했습니다.

 

List 요소로 AttachImageVO 타입만 가질 수 있는 List 타입의 변수를 선언합니다.

/* 이미지 정보 */
private List<AttachImageVO> imageList;

추가한 imageList 변수의 getter/setter 메서드를 작성하고, toString() 메서드에 imageList 변수를 추가해줍니다.

3. <input> 태그 추가

위의 과정으로 서버에서 이미지에 대한 정보를 전달받을 준비가 되었습니다.

 

이후 뷰(VIEW)에서 이미지에 대한 정보를 전송할 수 있도록 <input> 태그를 추가해줍니다.

 

<input> 태그를 추가할 때 주의할 점 3 가지가 있습니다.

1. 이미지 정보에 대한 <input> 태그는 JavaScript를 통해 동적으로 추가 → 이미지가 등록되었을 때만 서버에 이미지에 대한 정보를 전달해야 하기 때문
2. 동적으로 <input> 태그를 추가했을 때, 어느 시점에 추가해야 하는지 설정 → 여러 개의 이미지 정보를 전달해야 하는 경우, 상품 등록 페이지 버튼을 눌렀을 때 <input> 태그를 추가하는 것이 용이함.
3. <input> 태그의 name 속성 값을 어떻게 작성할 것인지 → 이미지 정보의 경우, 객체의 주소 값을 가지는 참조 변수이기 때문에, Java에서 특정 클래스의 멤버 변수에 접근할 때 작성하는 방식인 '참조 변수 명.멤버 변수 명'으로 작성
   • 예를 들어 SwanVO에 private AttachImageVO imageVO; 변수를 선언했다고 가정하면, 파일 이름(fileName)을 전달하기 위해 <input> 태그의 name 속성 값은 imageVO.fileName으로 작성
   • List 타입의 참조 변수에 이미지 정보를 전달해야 하기 때문에 인덱스(index)를 활용하여 전달. (예) attachList[0].fileName
     • 등록된 이미지 개수만큼 for문을 통해 인덱스를 지정해주면, 이미지 등록 시점에서 인덱스를 지정하는 것보다 용이.

---

상품 등록 페이지(insertProduct.jsp) 즉 뷰에선 하나의 이미지만 등록할 수 있도록 구현했기 때문에 이미지가 등록된 시점에 이미지 정보를 담는 <input> 태그가 추가되도록 했습니다.

str += "<input type='hidden' name='imageList[0].fileName' value='"+ obj.fileName +"'>";
str += "<input type='hidden' name='imageList[0].uuid' value='"+ obj.uuid +"'>";
str += "<input type='hidden' name='imageList[0].uploadPath' value='"+ obj.uploadPath +"'>";