상품 등록의 전반적인 흐름은 아래와 같습니다.

1. list.html 에서 [상품등록] 버튼을 누르면 http://localhost/write 주소를 요청합니다.

2. ProductController의 write() method가 호출됩니다.

3. write.html 페이지로 이동합니다.

4. write.html 페이지에서 내용을 작성한 후 다시 Controller로 보냅니다.

5. Controller에서 받은 입력값을 Repository에 보냅니다.

6. Repository는 insert sql 명령어를 생성하여 실행합니다.  테이블의 레코드가 추가됩니다.

7. Controller에서 다시 http://localhost/ 로 이동하여 상품목록 화면에 반영됩니다.

[해설]

list.html에서 상품등록 버튼을 누릅니다.

버튼을 누르면 http://localhost/write 으로 이동하게 됩니다.  onclick은 버튼을 누를 때 실행한다는 뜻입니다.  

ProductController.java의 write() 함수가 실행됩니다.

여기서의 return은 값 자체를 리턴하는 것이 아니고 write.html 페이지로 이동하는 것입니다.

write.html의 form은 파일 첨부가 가능한 form입니다.
action="insert"이므로 http://localhost/insert 로 데이터가 전달되게 됩니다.

@PostMapping("insert")

 

public String insert(ProductDTO dto, @RequestParam MultipartFile file1) {

html 페이지에서 Controller로, Controller에서 Repository로 자료가 어떻게 전달되는지 잘 살펴보시기 바랍니다.

html 페이지에서 입력한 값들은 아래와 같습니다. 여기서 name에 지정한 변수명을 잘 확인하시기 바랍니다.  이 변수명을 테이블의 필드명과 동일하게 지정해야 정확히 매핑이 됩니다.

productName, price, description 변수는 Controller에 전달이 되어 저장됩니다.

@PostMapping("insert")

post 방식으로 전달한 경우 @PostMapping으로 전달됩니다.

get 방식으로 전달할 경우 @GetMapping 입니다.

get, post 를 가리지 않고 전달하려면 @RequestMapping 을 사용하면 됩니다.

public String insert(ProductDTO dto, @RequestParam MultipartFile file1) {

html form에 입력한 값들이 dto 객체에 저장되는 과정이 내부적으로 자동으로 처리됩니다.  

첨부파일은 MultipartFile에 전달되고 파일은 디렉토리에 저장되고 파일이름만 dto에 추가됩니다.

첨부 파일을 dto에 함께 저장할 수도 있으나 여기서는 별도로 저장했습니다.

write.html 에서 file 태그의 name을 file1 이라고 했으므로 Controller에서도 file1 이라고 같은 이름으로 지정해야 정확이 전달이 됩니다.  

이름은 중요하지 않습니다.  양쪽 변수명이 같은 것이 중요합니다.

첨부파일이 없는 경우도 있으므로 – 으로 빈값임을 표시했습니다.

첨부파일이 null이 아니고 빈값이 아니면

파일 이름을 가져옵니다.

Java에서 파일 입출력은 반드시 예외처리를 해야 하므로 try ~ catch 로 처리를 했습니다.

String upload_path = "c:/work_spring/jpa/src/main/resources/static/images/";

upload_path 경로는 프로젝트 경로에 맞게 수정하셔야 합니다.

Product p = modelMapper.map(dto, Product.class);
 

form에서  전달받은 데이터를 dto에 저장했습니다.  여기서 dto와 테이블은 일치하지 않으므로 dto를 entity 객체로 변환해서 repository 에 전달해야 합니다.

dto를 entity로 변환하는 작업을 편리하게 처리하는 기능이 model mapper 입니다.

 productRepository.save(p);

repository에 자료를 보내서 저장합니다.  

http://localhost/로 이동하면서 화면에 반영이 됩니다.

[실행 결과]

상품목록 화면에서 [상품등록] 버튼을 누르면 상품등록 페이지가 출력됩니다.

상품 정보를 입력하고 [등록] 버튼을 누르면 테이블에 저장되고 화면에 상품 목록이 출력됩니다.

상품목록은 한 줄에 5개씩 출력됩니다.