코드 그라데이션

웹 페이지 만들기 (7) 상품 수정 본문

Spring/MVC 1

웹 페이지 만들기 (7) 상품 수정

완벽한 장면 2023. 11. 4. 16:57

상품 수정

상품 수정 폼 컨트롤러

BasicController 에 추가

/**
 * 상품 수정 폼을 불러오는 메서드.
 *
 * @param itemId 수정할 상품의 ID
 * @param model Spring MVC 모델 객체. 뷰로 데이터를 전달하기 위해 사용됨.
 * @return 상품 수정 폼 템플릿 이름
 */
@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model) {
    // 상품 ID를 사용하여 데이터베이스에서 해당 상품 정보를 조회.
    Item item = itemRepository.findById(itemId);

    // 조회한 상품 정보를 모델에 추가하여 뷰로 전달.
    model.addAttribute("item", item);

    // 상품 수정 폼 템플릿 이름을 반환.
    return "basic/editForm";
}

수정에 필요한 정보를 조회하고, 수정용 폼 뷰를 호출한다.

 

 

 

상품 수정 폼 뷰

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

<!DOCTYPE HTML> <!-- HTML 문서 형식을 정의하는 선언 -->
<html xmlns:th="http://www.thymeleaf.org"> <!-- XML 네임스페이스(th)를 정의한 HTML 문서 시작 -->

<head>
    <meta charset="utf-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
    <link href="../css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- 부트스트랩 CSS 파일을 링크하며 Thymeleaf 템플릿 엔진 속성(th:href)을 사용하여 URL 경로를 설정 -->
    <style>
        .container {
            max-width: 560px; <!-- .container 클래스의 최대 너비를 560px로 설정하는 스타일 -->
        }
    </style>
</head>

<body>
<div class="container"> <!-- .container 클래스로 스타일링된 컨테이너를 생성 -->
    <div class="py-5 text-center"> <!-- CSS 클래스 py-5와 text-center를 가진 요소로 텍스트 가운데 정렬 -->
        <h2>상품 수정 폼</h2> <!-- 제목 텍스트 출력 -->
    </div>
    <form action="item.html" th:action method="post">
        <!-- 폼 요소 시작. action 속성은 "item.html"로 설정되어 데이터를 전송할 페이지를 지정 -->
        <div>
            <label for="id">상품 ID</label> <!-- "id" 레이블 출력 -->
            <input type="text" id="id" name="id" class="form-control" value="1"
                   th:value="${item.id}" readonly>
            <!-- 텍스트 입력 필드. id, name, class, value, th:value, readonly 속성을 가지며, 
            "1" 값을 갖고 ${item.id}로부터 동적으로 값이 설정됩니다. 읽기 전용 속성도 지정됨 -->
        </div>

        <div>
            <label for="itemName">상품명</label> <!-- "itemName" 레이블 출력 -->
            <input type="text" id="itemName" name="itemName" class="formcontrol"
                   value="상품A" th:value="${item.itemName}">
            <!-- 텍스트 입력 필드. id, name, class, value, th:value 속성을 가지며, 
            "상품A" 값을 갖고 ${item.itemName}으로부터 동적으로 값이 설정됩니다. -->
        </div>

        <div>
            <label for="price">가격</label> <!-- "price" 레이블 출력 -->
            <input type="text" id="price" name="price" class="form-control"
                   th:value="${item.price}">
            <!-- 텍스트 입력 필드. id, name, class, th:value 속성을 가지며, 
            ${item.price}로부터 동적으로 값이 설정됩니다. -->
        </div>

        <div>
            <label for="quantity">수량</label> <!-- "quantity" 레이블 출력 -->
            <input type="text" id="quantity" name="quantity" class="formcontrol"
                   th:value="${item.quantity}">
            <!-- 텍스트 입력 필드. id, name, class, th:value 속성을 가지며, 
            ${item.quantity}로부터 동적으로 값이 설정됩니다. -->
        </div>

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

        <div class="row"> <!-- 그리드 레이아웃의 행 시작 -->
            <div class="col"> <!-- 그리드 레이아웃의 열 시작 (1/2) -->
                <button class="w-100 btn btn-primary btn-lg" type="submit">저장
                </button>
                <!-- 제출 버튼. 너비 100%, 부트스트랩 스타일의 'btn btn-primary' 클래스 사용 -->
            </div>

            <div class="col"> <!-- 그리드 레이아웃의 열 시작 (2/2) -->
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='item.html'"
                        th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})}'|"
                        type="button">취소</button>
                <!-- "취소" 버튼. 너비 100%, 부트스트랩 스타일의 'btn btn-secondary' 클래스 사용. 
                클릭 시 JavaScript로 페이지를 이동하거나 Thymeleaf 템플릿 엔진을 사용하여 페이지를 이동할 수 있음 -->
            </div>
        </div> <!-- 그리드 레이아웃의 행 종료 -->
    </form> <!-- 폼 요소 종료 -->
</div> <!-- .container 클래스로 스타일링된 컨테이너 종료 -->
</body>

</html> <!-- HTML 문서 종료 -->

 

 

상품 수정 메서드

    /**
     * 상품을 수정하는 메서드.
     *
     * @param itemId 수정할 상품의 ID
     * @param item 수정된 상품 정보를 나타내는 객체
     * @return 상품 수정 후 해당 상품 상세 정보 페이지로 리다이렉트
     */
    @PostMapping("/{itemId}/edit")
    public String edit(@PathVariable Long itemId, @ModelAttribute Item item) {
        // 상품 수정 메서드를 호출하여 상품 정보를 업데이트 (itemRepository.update 메서드 사용)
        itemRepository.update(itemId, item);

        // 수정된 상품 정보를 포함하는 해당 상품의 상세 정보 페이지로 리다이렉트.
        return "redirect:/basic/items/{itemId}";
    }

 

상품 수정은 상품 등록과 전체 프로세스가 유사하다.

 

리다이렉트

상품 수정은 마지막에 뷰 템플릿을 호출하는 대신에 상품 상세 화면으로 이동하도록 리다이렉트를 호출한다.

 

 

 

헷갈려서 적어놓은 파라미터 설명

@PathVariable Long itemId:

@PathVariable 어노테이션은 URL 경로 변수를 파라미터로 받을 때 사용됩니다.
Long itemId는 메서드 파라미터로, {itemId}와 같은 경로 변수 값을 받아올 때 사용됩니다.
이 경우, HTTP 요청의 URL에 포함된 {itemId} 값을 itemId라는 파라미터로 받아옵니다.
이렇게 받아온 itemId 변수는 메서드 내에서 사용되어 수정할 상품의 ID를 나타냅니다.
@ModelAttribute Item item:

@ModelAttribute 어노테이션은 HTTP 요청의 데이터를 객체로 바인딩할 때 사용됩니다.
Item item은 메서드 파라미터로, HTTP POST 요청에서 전송된 데이터를 Item 클래스의 객체로 변환하여 받아옵니다.
이렇게 받아온 item 객체는 HTTP 요청에서 전송된 수정된 상품 정보를 담고 있습니다.
예를 들어, HTML 폼에서 입력한 상품명, 가격, 수량 등의 정보가 item 객체로 자동으로 매핑됩니다.

728x90

'Spring > MVC 1' 카테고리의 다른 글

웹 페이지 만들기 (9) RedirectAttributes  (0) 2023.11.05
웹 페이지 만들기 (8) PRG (Post/Redirect/Get)  (0) 2023.11.04
웹 페이지 만들기 (6) 상품 등록 처리 - @ModelAttribute  (1) 2023.11.03
웹 페이지 만들기 (5) 상품 등록 폼  (1) 2023.11.02
웹 페이지 만들기 (4) 상품 상세  (0) 2023.11.01
'Spring/MVC 1' Related Articles more
Comments