웹 페이지 만들기 (4) 상품 상세

티스토리 뷰

[개발] - Spring/MVC 1

웹 페이지 만들기 (4) 상품 상세

완벽한 장면 2023. 11. 1. 09:27

상품 상세 컨트롤러와 뷰

BasicItemController - 상세 조회 메서드 추가(GET)

    @GetMapping("/{itemId}")
    public String item(@PathVariable long itemId, Model model) {
        // 경로 변수로부터 받은 itemId를 사용하여 상품을 조회합니다.
        Item item = itemRepository.findById(itemId);
        // 조회한 상품을 모델에 추가합니다. 이후 뷰 템플릿에서 사용할 수 있습니다.
        model.addAttribute("item", item);
        // "basic/item" 뷰 템플릿을 호출하여 상품 상세 정보를 화면에 표시합니다.
        return "basic/item";
    }

그래서 현재까지 최종 코드는

@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {

    private final ItemRepository itemRepository;

    @GetMapping
    public String items(Model model) {
        // 상품 목록을 조회
        List<Item> items = itemRepository.findAll();
        // 조회한 상품 목록을 모델에 추가
        model.addAttribute("items", items);
        // "basic/items" 뷰 템플릿을 호출하여 상품 목록을 화면에 표시
        return "basic/items";
    }

    @GetMapping("/{itemId}")
    public String item(@PathVariable long itemId, Model model) {
        // 경로 변수로부터 받은 itemId를 사용하여 상품을 조회합니다.
        Item item = itemRepository.findById(itemId);
        // 조회한 상품을 모델에 추가합니다. 이후 뷰 템플릿에서 사용할 수 있습니다.
        model.addAttribute("item", item);
        // "basic/item" 뷰 템플릿을 호출하여 상품 상세 정보를 화면에 표시합니다.
        return "basic/item";
    }


    /**
     * 테스트용 데이터 추가
     */
    @PostConstruct
    public void init() {
        // 애플리케이션 초기화 시, 테스트 데이터를 데이터베이스에 저장.
        itemRepository.save(new Item("testA", 10000, 10));
        itemRepository.save(new Item("testB", 20000, 20));
    }

    /*
    컨트롤러 로직은 itemRepository 에서 모든 상품을 조회한 다음에 모델에 담는다.
    그리고 뷰 템플릿을 호출한다.
     */

}

PathVariable 로 넘어온 상품ID로 상품을 조회하고, 모델에 담아둔다. 그리고 뷰 템플릿을 호출한다.

상품 상세 뷰

정적 HTML을 뷰 템플릿(templates) 영역으로 복사하고 수정.
/resources/static/item.html => /resources/templates/basic/item.html

/resources/templates/basic/item.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 화면 상단에 제목을 표시하는 부분 -->
    <div class="py-5 text-center">
        <h2>상품 상세</h2>
    </div>

    <!-- 상품 상세 정보를 입력/표시하는 부분 -->
    <div>
        <label for="itemId">상품 ID</label>
        <input type="text" id="itemId" name="itemId" class="form-control" value="1" readonly>
        <!-- 상품 ID를 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" readonly>
        <!-- 상품명을 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" name="price" class="form-control" value="10000" readonly>
        <!-- 상품 가격을 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" name="quantity" class="form-control" value="10" readonly>
        <!-- 상품 수량을 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>

    <hr class="my-4"> <!-- 수평 구분선 추가 -->

    <!-- 버튼으로 이동할 수 있는 부분 -->
    <div class="row">
        <!-- "상품 수정" 버튼. 클릭하면 'editForm.html' 페이지로 이동. -->
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" type="button">상품 수정</button>
        </div>
        <!-- "목록으로" 버튼. 클릭하면 'items.html' 페이지로 이동. -->
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg" onclick="location.href='items.html'" type="button">목록으로</button>
        </div>
    </div>

</div> <!-- /container 종료 -->
</body>
</html>

속성 변경 - th:value

상품 수정 링크

목록으로 링크

728x90

'[개발] - Spring > MVC 1' 카테고리의 다른 글

웹 페이지 만들기 (6) 상품 등록 처리 - @ModelAttribute (1)	2023.11.03
웹 페이지 만들기 (5) 상품 등록 폼 (1)	2023.11.02
웹 페이지 만들기 (3) 상품 목록 - Thymeleaf (1)	2023.10.31
웹 페이지 만들기 (2) 상품 서비스 HTML (1)	2023.10.30
웹 페이지 만들기 (1) 요구사항 분석 및 상품 도메인 개발 (0)	2023.10.30