웹 계층 개발 - 상품 등록, 목록 조회

JPA/JPA 활용

웹 계층 개발 - 상품 등록, 목록 조회

chanhee01 2023. 7. 11. 18:12

상품을 등록하고 조회할 수 있는 기능을 만들어 볼 것이다. (예제 단순화를 위해 상품은 책 하나)

BookForm

@Getter @Setter
public class BookForm {

    private Long id;

    private String name;
    private int price;
    private int stockQuantity;

    private String author;
    private String isbn;
}

Item의 정보들을 닮을 수 있는 form인 BookForm이다.

상품 등록

ItemController

@Controller
@RequiredArgsConstructor
public class ItemController {

    private final ItemService itemService;

    @GetMapping("/items/new")
    public String createForm(Model model) {
        model.addAttribute("form", new BookForm());
        return "items/createItemForm";
    }


    @PostMapping("/items/new")
    public String create(BookForm form) {
        // Valid 등 스프링 기능은 스프링 블로그에 있으니 여기서는 JPA 외의 것들은 최소화

        Book book = new Book();
        book.setName(form.getName());
        book.setPrice(form.getPrice());
        book.setStockQuantity(form.getStockQuantity());
        book.setAuthor(form.getAuthor());
        book.setIsbn(form.getIsbn());
        // setter 사용을 안하고 생성자등으로 값을 넣어야함

        itemService.saveItem(book);
        return "redirect:/items"; // 저장된 책 목록으로 리다이렉트
    }

ItemController에 있는 상품을 등록하는 기능이다. @GetMapping으로 접근한 /items/new url은 BookForm을 model로 넘겨주고 createItemForm.html을 보여주는 기능을 한다.

@PostMapping으로 접근할 때에는 BookForm에 이름, 가격, 수량, 저자, isbn을 set으로 값을 넣어주고 그것들을 db에 저장해주는 기능을 한다. 저장을 하고 submit을 누르면 상품 목록으로 자동으로 리다이렉트 해준다.

createItemForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
  <div th:replace="fragments/bodyHeader :: bodyHeader"/>
  <form th:action="@{/items/new}" th:object="${form}" method="post">
    <div class="form-group">
      <label th:for="name">상품명</label>
      <input type="text" th:field="*{name}" class="form-control"
             placeholder="이름을 입력하세요">
    </div>
    <div class="form-group">
      <label th:for="price">가격</label>
      <input type="number" th:field="*{price}" class="form-control"
             placeholder="가격을 입력하세요">
    </div>
    <div class="form-group">
      <label th:for="stockQuantity">수량</label>
      <input type="number" th:field="*{stockQuantity}" class="form-control" placeholder="수량을 입력하세요">
    </div>
    <div class="form-group">
      <label th:for="author">저자</label>
      <input type="text" th:field="*{author}" class="form-control"
             placeholder="저자를 입력하세요">
    </div>
    <div class="form-group">
      <label th:for="isbn">ISBN</label>
      <input type="text" th:field="*{isbn}" class="form-control"
             placeholder="ISBN을 입력하세요">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  <br/>
  <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

상품 목록 조회

@GetMapping("/items")
public String list(Model model) {
    List<Item> items = itemService.findItems();
    model.addAttribute("items", items);
    return "items/itemList";
}

상품목록을 조회할 수 있는 기능이다. itemService에서 findItems라는 기능을 가져와서 모델에 넘겨주면 itmeService.findItems가 자동으로 상품 목록들을 받아와서 html에 모델로 넘겨준다.

itemList.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
  <div th:replace="fragments/bodyHeader :: bodyHeader"/>
  <div>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>#</th>
        <th>상품명</th>
        <th>가격</th>
        <th>재고수량</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="item : ${items}">
        <td th:text="${item.id}"></td>
        <td th:text="${item.name}"></td>
        <td th:text="${item.price}"></td>
        <td th:text="${item.stockQuantity}"></td>
        <td>
          <a href="#" th:href="@{/items/{id}/edit (id=${item.id})}"
             class="btn btn-primary" role="button">수정</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
</html>