상품테이블 만들기, File Upload 테스트

-파일업로드 방식의 종류-

1. 일반적인 방식

    (여기서는 일반적인 방식으로 테스트)

2. 비동기적인 방식 (ajax)

1. 상품 정보를 저장할 테이블 만들기

create table product(
product_id number,
product_name varchar2(50),
price number default 0,   
description clob,
picture_url varchar2(500), //varchar2는 4000바이트 까지밖에 들어가지 않는다.
primary key(product_id)
);

clob : 사이즈가 큰 데이터를 외부 파일로 저장하기 위한 데이터 타입

default : 기본값 설정 (예를들어 default 0 이면 기본값이 0부터 시작한다. 기본 번호가 0부터 시작하고 증가하는 식으로 생각하면 편함)

만든 테이블에 자료를 삽입한다.

insert into product values (1,'레몬',1500,'레몬에 포함된 구연산은 피로회복에 좋습니다. 비타민 C도 풍부합니다,','lemon.jpg');
insert into product values (2,'오렌지',2000,'비타민 C가 풍부합니다. 생과일 주스로 마시면 좋습니다.','orange.jpg');
insert into product values (3,'키위',3000,'비타민 C가 매우 풍부합니다. 다이어트나 미용에 좋습니다.','kiwi.jpg');
insert into product values (4,'포도',5000,'폴리페놀을 다량 함유하고 있어 항산화 작용을 합니다.','grape.jpg');
insert into product values (5,'딸기',8000,'비타민 C나 플라보노이드를 다량 함유하고 있습니다.','strawberry.jpg');
insert into product values (6,'귤',7000,'시네피린을 함유하고 있어 감기 예방에 좋다고 합니다.','tangerine.jpg');

자료를 삽입한후 삽입한 자료가 반영되도록 커밋을 실시한다.

commit;

상품이 등록될때마다 넘버를 증가시키기위해 시퀀스를 생성

(처음 시작은 10부터 하고, 1씩 증가시키는 시퀀스를 생성한다.)

create sequence seq_product
start with 10
increment by 1;

insert로 아래 값을 삽입한다. seq_product.nextval은 아까 10번부터 시작한다고 설정해 놓았으므로 10으로 설정됨

다음에 다시 사용한다면 11이 된다.

insert into product values
(seq_product.nextval, '사과',1500,'맛있는 사과...','apple.jpg');

2. 상품 이미지를 다운로드하여 views/images 디렉토리에 복사

   ( http://mannaedu.com/bbs/board.php?bo_table=pds&wr_id=37&page=3 )

3. pom.xml (라이브러리 추가)

   ( https://mvnrepository.com )

   groupID와  artifactID를 이용해서 파일업로드와 이미지 썸네일 관련 라이브러리를 검색해서 추가한다.

pom.xml (라이브러리들 추가)

    <!-- 파일업로드 관련 라이브러리 -->
    <dependency>
        <groupld>commons-fileupload</groupld>
        <artifactld>commons-fileupload</artifactld>
        <version>1.3.3</version>
    </dependency>
    
    <!-- 이미지 썸네일을 만들어주는 라이브러리 -->
    <dependency>
        <groupld>org.imgscalr</groupld>
        <artifactId>imgscalr-lib</artifactId>
        <version>4.2</version>
    </dependency>

4. views 하위에 images 폴더를 만들고 아까 다운받은 상품 이미지를 폴더에 넣기

5.servlet-context에서 images파일의 리소스를 맵핑 할수 있도록 코드를 추가한다.

<resources location="/WEB-INF/views/images/" mapping= "images/**" />

6. servlet-context.xml (파일업로드 관련 설정) 코드 추가

<!-- 파일업로드에 필요한 bean -->
<beans:bean id = "multipartResolver" //스프링 프레임 워크에 내장된 빈을 추가함
class = "org.springframework.web.multipart.commons.CommonsMultipartResolver">

 
<!-- 파일 업로드 최대 용량(byte단위로) -->
    <beans:property name = "maxUploadSize" value = "10485760" /> //value에 최대 용량 설정함
    </beans:bean>


<!-- 파일 업로드를 위한 디렉토리 설정 -->
<!-- String uploadPath = new String("d:/upload"); -->
<beans:bean id = "uploadPath" class = "java.lang.String">
    <beans:constructor-arg value = "d:/upload" /> //파일이 업로드 되는 디렉토리는 d:/upload 이다.
    </beans:bean>

7. menu.jsp 업로드 테스트 링크를 추가함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!-- 다른페이지에 include되는 페이지 -->
<a href = "${path }/memo/list.do">한줄메모장</a> ㅣ
<a href = "${path }/upload/uploadForm">업로드 테스트</a> ㅣ //업로드 테스트 링크를 추가

8. controller 패키지 하위에 upload 패키지를 만들고 UploadController.java 클래스를 추가함

package com.example.spring02.controller.upload;
 
import java.io.File;
import java.util.UUID;
 
import javax.annotation.Resource;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
 
@Controller
public class UploadController {
    private static final Logger logger = LoggerFactory.getLogger(UploadController.class);
    //이 클래스의 로그를 출력하기 위한 코드, 로그저장소에서 getLogger 메소드를 사용해서 호출
    // xml에 설정된 리소스를 참조
    // bean의 id가 uploadPath인 태그를 참조
    
    @Resource(name = "uploadPath") //servlet-conetext에 저장한 빈인 uploadPath를 호출한다.
    String uploadPath; //@Resource에서 받은 리소스 값인 uploadPath가 들어오게 된다.
    
    // menu 페이지에서 이 메소드를 거치고, 맵핑할때 "/upload/uploadForm"페이지로 포워딩 된다.
    // method방식을 정하지 않으면 get방식이다. (즉 get방식일때는 이 메소드를 거친다. post방식일때는 아님)
    @RequestMapping(value = "/upload/uploadForm", method = RequestMethod.GET)
    public void uploadForm() {
        //         upload / uploadForm.jsp 로 포워딩    
    }
    //그냥 화면을 바꿀때는 get 방식을 사용하고 파일을 업로드 할때는 POST방식을 사용한다.
    
    
    //업로드 버튼 => 임시 디렉토리에 업로드
    // => 파일정보가 file에 저장
    // => 지정된 디렉토리에 저장 =>
    
    // 파일을 업로드(내용을 채울때는) 할때는 POST방식을 사용하므로 이 메소드를 거친다.
    // 메소드 이름을 다르게 할 수도 있지만 method 방식을 POST와 GET방식으로 각각 지정해서 할 수도 있다.
    @RequestMapping(value = "/upload/uploadForm", method = RequestMethod.POST)
        public ModelAndView uploadForm (MultipartFile file, ModelAndView mav) throws Exception {
        
        logger.info("파일이름 : " + file.getOriginalFilename());
        String savedName = file.getOriginalFilename();
        logger.info("파일크기:" +file.getSize());
        logger.info("컨텐츠 타입:" +file.getContentType()); //파일이름과 크기와 파일의 종류를 로그로 출력함
        
        
        
        savedName = uploadFile(savedName, file.getBytes());
        //파일을 올리고 파일의 바이트를 올리고, 저장된 파일이름 가져와서 결과페이로 보낼예정
        
        mav.setViewName("upload/uploadResult");
        mav.addObject("savedName", savedName);
        return mav; //uploadResult.jsp로 포워딩
    }
    
    //파일 이름이 중복되지 않도록 처리
        private String uploadFile(String originalName, byte[] fileData) throws Exception{
            // uuid 생성 (Universal Unique IDentifier, 범용 고유 식별자)
            // uuid를 만드는 이유는 파일을 2개 올리게 되면 이름이 중복되는데 그러다 1개가 삭제 될 수 있기 때문에
            // uuid라는 고유한 식별자를 주어서 (랜덤으로 코드를 만들어냄) 이름이 중복되지 않게 해서 삭제되지 않게끔 하려는 것이다.
            // uuid를 생성해서 그것을 파일의 이름 앞에다 붙여서 중복을 방지한다.
            
            UUID uid = UUID.randomUUID();
            String savedName = uid.toString() + "_" +originalName;
            File targer = new File(uploadPath, savedName); //파일을 실제로 저장함
            // 임시 디렉토리에 저장된 업로드된 파일을
            // 지정된 디렉토리로 복사
            // FileCopyUtils.copy (바이트배열, 파일객체)
            FileCopyUtils.copy(fileData, targer); //파일을 복사
            return savedName; //복사한 파일이름을 되돌려 준다.
        }
}

9. views에 upload폴더를 만들고, uploadForm.jsp 파일을 만든다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file = "../include/header.jsp" %>
<style>
iframe{
width : 400px;
height : 200px;
border : 1px;
border-style : solid;
}
</style>
</head>
<body>
<%@ include file = "../include/menu.jsp" %>
<!-- enctype = "multipart/form-data" 파일 업로드 필수 옵션 
enctype = "application/x-www-form-urlencoded" 기본 옵션-->
 
 
<!-- target = "iframe" 의 name => iframe으로 전송함 -->
<form id = "form1" action = "${path }/upload/uploadForm" method = "post"
enctype = "multipart/form-data"

target = "iframe1" > //파일을 업로드 하게 되면 원래 ${path }/upload/uploadForm 경로로 가게 되는데 현재 화면에서
                     //화면이 넘어가지 않게 해준다. (즉, iframe1페이지에 고정됨)

<input type = "file" name = "file"> //name의 파일이름 file와 UploadController에서 이 페이지를 맵핑받은 메소드의 
                                    //MultipartFile 타입의 변수 이름이 같아야 저장이 된다.

<input type = "submit" value = "업로드">
</form>
 
<iframe name="iframe1"></iframe>
 
</body>
</html>

10. views폴더 하위에 upload 폴더 안에 uploadResult.jsp 파일을 추가한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file = "../include/header.jsp" %>
</head>
<body>
<%@ include file = "../include/menu.jsp" %>
<!-- uploadResult.jsp -->
파일이 업로드 되었습니다. <br>
파일명 : ${savedName } //그리고 이 파일이 uploadForm의 iframe로 들어간다.
</body>
</html>

11. D드라이브에 업로드된 파일이 들어갈 upload 폴더 만들기