지금까지 질문 목록 화면과 질문 상세 화면을 만들었다. 하지만 좀 더 그럴싸한 화면을 만들기 위해서는 화면에 디자인을 적용해야 한다. 디자인을 적용하기 위해서는 스타일시트(stylesheet, CSS파일)를 사용해야 한다. 이번 장에서는 SBB에 스타일시트를 적용해 보자. 스태틱(static) 디렉터리 스타일시트 파일은 스프링부트의 스태틱 디렉터리에 저장해야 한다. 스프링부트의 스태틱 디렉터리는 다음과 같다. /sbb/src/main/resources/static 스타일시트 스타일시트 파일은 스태틱 디렉터리에 저장해야 한다. 스타일시트 파일(style.css)을 다음과 같이 작성하자. [파일명:/sbb/src/main/resources/static/style.css] textarea { width:100..
앞 절에서 우리는 질문을 조회하는 기능을 만들었다. 이번에는 질문에 답변을 등록하고 보여 주는 기능을 만들어 보자. 질문 상세 화면에 답변을 입력하기 위한 텍스트 창(textarea)과 버튼을 생성하고, 이 버튼을 누르면 답변이 저장되도록 구현해 보자. MySQL 설정 및 연결 원래는 계속 h2-database를 이용하여 진행하여야 하는데, 솔직히 ui나 혹은 서버 재구동해야지만 h2-console을 들어갈 수 있고 그래서 MySQL Workbench를 활용하여 데이터베이스를 옮기려고 합니다. [파일명:/sbb/src/main/resources/application.properties] # MySQL DATABASE spring.datasource.driver-class-name=com.mysql.cj...
질문 상세 링크 추가하기 먼저 질문 목록의 제목을 클릭했을때 상세화면이 호출되도록 제목에 링크를 추가하자. 질문 목록 템플릿을 다음과 같이 수정하자. [파일명: /sbb/src/main/resources/templates/question_list.html] 제목 작성일시 제목을 엘리먼트의 텍스트로 출력하던 것에서 링크로 변경했다. 타임리프에서 링크의 주소는 th:href 속성을 사용한다. 타임리프에서 th:href 처럼 URL 주소를 나타낼때는 반드시 @{ 문자와 } 문자 사이에 입력해야 한다. 그리고 URL 주소는 문자열 /question/detail/과 ${question.id} 값이 조합되어 /question/detail/${question.id}로 만들어졌다. 이때 좌우에 | 문자없이 다음과 같이..
이전 장에서 질문 목록을 만들었다. 이제 질문 목록의 제목 링크를 누르면 질문 상세 화면이 보이게 할 것이다. 하지만 기능을 추가하기 전에 잠시 생각할 것이 있다. 우리는 QuestionController에서 QuestionRepository를 직접 사용하여 질문 목록 데이터를 조회했다. 하지만 대부분의 규모있는 스프링부트 프로젝트는 컨트롤러에서 리포지터리를 직접 호출하지 않고 중간에 서비스(Service)를 두어 데이터를 처리한다. 서비스는 스프링에서 데이터 처리를 위해 작성하는 클래스이다. 서비스가 필요한 이유 서비스가 필요한 이유는 무엇일까? 모듈화 예를들어 어떤 컨트롤러가 여러개의 레포지터리를 사용하여 데이터를 조회한후 가공하여 리턴한다고 가정해 보자. 이러한 기능을 서비스로 만들어 두면 컨트롤러..
상품 주문 1. 상품 재고 부족 Exception 상품 주문 수량보다 현재 재고의 수가 적을 때 발생시킬 Exception 정의 에러 메시지를 지정할 수 있는 RuntimeException 클래스 구현 2. 상품 재고 변경 (기존 재고 - 주문 수량 재고) 로 stockNumber 수정 만약 0 보다 작다면 재고가 부족한 것이므로 Exception 발생 3. OrderItem 객체 주문 상품과 주문 수량 정보를 가지고 있는 OrderItem Entity 에 객체 생성 메소드 추가 4. Order 객체 OrderItem 객체를 연결하고 OrderItem 객체에 자신을 연결하는 메소드 추가 OrderItem 객체를 이용하여 주문 객체를 만드는 메소드 추가 각 주문 상품의 TotalPrice 를 구한뒤 모두 ..
제품 상세 페이지 1. ItemController 추가 상품 수정 페이지에서 사용했던 ItemDtl 메소드를 그대로 사용하여 상품 조회 메소드 오버로딩은 파라미터의 순서가 달라도 적용이 됨 2. 제품 상세 페이지 View GitHub 참고 totalPrice 를 계산해서 출력하는 calculateTotalPrice() 메소드 - 처음 화면 출력할 때 수행되고, 그 후에 수량 변동 시 수행됨 3. 제품 상세 페이지 화면
메인화면 1. MainItemDto 메인화면에 출력할 데이터를 위한 DTO 객체 사용자에게 보여질 내용만 포함하고 있음 (등록날짜, 수정날짜, 등록자 등 제외) 2. @QueryProjection Entity 객체를 DTO 객체로 바로 반환하도록 지원하는 어노테이션 @QueryProjection 기능을 사용하기 위해선 QDto 파일 필요 (Maven - compile 수행) 3. 사용자 정의 인터페이스 리포지토리 생성 기존의 ItemRepositoryCustom 클래스에 조회문 추가 ItemRepositoryCustomImpl 클래스에서 getMainItemPage() 메소드 구현 // MainItemDto 객체를 반환 // 멤버변수 초기화는 조회된 결과값에서 MainItemDto 객체 생성자를 통해 지..
상품 목록 페이지 1. 상품 목록 페이지 결과 화면 상품 목록 테이블 부분, 하단 페이지 부분, 검색 조건 부분 존재 2. 상품 목록 페이지 View GitHub 참고 스크립트 부분 "검색" 버튼을 클릭하면 조회할 페이지 번호를 다시 "0"으로 설정해서 조회해야함 페이지 번호를 전달 받아 form에 설정된 검색 조건 값들을 초기화하여 QueryString으로 보내는 page() 함수 // "검색" 버튼이 눌리면 $("#searchBtn").on("click",function(e) // form 태그의 전송을 막음 (페이지 번호가 그대로 넘어갈 수 있음) e.preventDefault(); // 페이지 번호를 0으로 설정한 뒤 page 함수 수행 page(0); 상품 목록 테이블 부분 ${items} 변수..