Controller 구성하기 이어서

• container-fluid : 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너에 .container-fluid를 사용한다.
• table-hover = 열에 마우스 올리면 하이라이트
  table-striped = 열마다 색을 다르게 해줄 수 있다.

컨트롤러 동작하는지 확인하기

• 컨트롤러가 잘 동작하는지 확인하기 위해서는 DB를 만들어야 된다.
• Docker을 이용해서 MySQL DB를 만들기로 하자.

Docker 셋팅하기

• 도커를 켜준다.

• DB생성을 위해 터미널도 켜준다. 반드시! 관리자 권한으로 실행해주자.
• 도커 참조
  이 글을 참고하자.
• 다음은 도커 DB를 생성하기 위한 명령어를 짜서 터미널에 입력해준다. 난 개인적으로 메모장에 작성하고 이후 터미널에 복사 붙여넣기 하는 방법을 선호한다.

docker run --name kdt-mysql -e MYSQL_PORT_HOST=% -e MYSQL_ROOT_PASSWORD=root1234! -p3306:3306 -d mysql:8

• 도커 이름 설정 : --name kdt-mysql
• 도커 환경변수 설정 : -e MYSQL_PORT_HOST=%
  도커 패스워드 설정 : MYSQL_ROOT_PASSWORD=root1234!
  포트 설정 : -p3306:3306
  버전 설정 : -d mysql:8

• 도커 콘솔에서 확인해 본 결과 잘 생성되었다.
• 다음은 인텔리제이에서 도커 DB를 기반으로 MySQL DB를 생성해보자.
  여기도 역시 위 도커 참조 링크를 참고한다.

• User와 Password에 맞는 값을 써넣고 Test Connection을 해보자.

• 연결 완료 구문이 출력되면 잘 된 것이다.

• 잘 생성됐다.
  그럼 실제 사용할 DB와 테이블을 만들어보자.

CREATE DATABASE order_mgmt;

CREATE TABLE products
(
    ~
    ~
    ~
)

• 위와 같이 쿼리를 넣자 아래와 같은 오류가 발생했다. 찾아보니, 사용할 DB를 선택하지 않아서 발생한 오류라고 한다.

• use (데이터베이스 이름) 쿼리를 넣어서 해결해주자.

• 테이블이 제대로 생성되었다.

• .yaml파일을 main resources 폴더로 옮기고 설정해서 연결해준다.

• 애플리케이션을 실행시키고 호스트로 들어가면 만들어진 웹페이지가 로드되는 것을 확인할 수 있다.

입력페이지 생성

• 제품을 추가할 수 있는 입력페이지를 만들어보자.
• @GetMapping("new-product")으로 랜더링 연결을 해주자.
  new-product.html파일을 만들어 new-product 요청에 대한 랜더링 형식을 만들자.

• 전체적인 틀은 product-list.html에서 따온다.

• 만들어진 폼이 상호작용을 해야하기 때문에, th:action을 처리하고 링크를 products, 메서드는 post로 전달한다. post메서드를 처리할 컨트롤러가 필요.

• bootstrap에서 form을 따온다.

• 맨 윗부분에는 name을 넣어주자.

• category는 선택할 수 있게 select를 사용하고,
  price는 name과 같은 형식으로 하고 type을 number로 바꿔준다.
  description은 form controller 카테고리에서 description전용 폼을 찾는다.

product post 메서드를 처리할 컨트롤러 추가

• @PostMapping("/products")
  포스트 매핑으로 products를 링크한다.
• products 요청을 처리하는 DTO 클래스를 생성하자.

DTO 클래스란?

• 참고 - DTO 클래스
• DTO (Data Transfer Object)
  직역하면 데이터 전송 객체로 데이터의 전송을 담당하는 클래스.
• DTO는 웹 서비스의 클라이언트와 서버, 더 자세히는 클라이언트와 서버의 서비스 계층 사이에서 교환되는 데이터를 담는 그릇이다.
• 데이터를 주고 받을 때 서버→클라이언트, 클라이언트→서버 과정에서 데이터를 전달해주는 클래스.

• 위와 같이 productName category price description 등을 받아 전달해준다.

• productService에 요청을 할 때 createProduct로 처리를 할 수 있다.
• view이기 때문에 redirect처리를 해주자.
• 서버를 시작하고 로컬 호스트에 접속하자.

• 이제 Add Product가 동작한다.

• Name Category Price Description에 값을 넣고 submit을 누르면

• 새로운 제품이 생성됐다.
• 아무 값도 넣지 않으면 에러가 난다.