코드 그라데이션

웹 페이지 만들기 (5) 상품 등록 폼 본문

Spring/MVC 1

웹 페이지 만들기 (5) 상품 등록 폼

완벽한 장면 2023. 11. 2. 13:53

상품 등록 폼

상품 등록 폼
BasicItemController에 추가

@GetMapping("/add")
public String addForm() {
	return "basic/addForm";
}

 

 

상품 등록 폼 뷰

정적 HTML을 뷰 템플릿(templates) 영역으로 복사하고 다음과 같이 수정.
/resources/static/addForm.html => /resources/templates/basic/addForm.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>
    <h4 class="mb-3">상품 입력</h4> <!-- 제목 텍스트 출력 -->

    <form action="item.html" th:action method="post">
      <!-- 폼 요소 시작. action 속성은 "item.html"로 설정되어 데이터를 전송할 페이지를 지정 -->
      <div>
        <label for="itemName">상품명</label> <!-- "itemName" 레이블 출력 -->
        <input type="text" id="itemName" name="itemName" class="form-control"
          placeholder="이름을 입력하세요">
        <!-- 텍스트 입력 필드. id, name, class, placeholder 속성을 가지며, "이름을 입력하세요"를 플레이스홀더로 표시 -->
      </div>

      <div>
        <label for="price">가격</label> <!-- "price" 레이블 출력 -->
        <input type="text" id="price" name="price" class="form-control"
          placeholder="가격을 입력하세요">
        <!-- 텍스트 입력 필드. id, name, class, placeholder 속성을 가지며, "가격을 입력하세요"를 플레이스홀더로 표시 -->
      </div>

      <div>
        <label for="quantity">수량</label> <!-- "quantity" 레이블 출력 -->
        <input type="text" id="quantity" name="quantity" class="form-control"
          placeholder="수량을 입력하세요">
        <!-- 텍스트 입력 필드. id, name, class, placeholder 속성을 가지며, "수량을 입력하세요"를 플레이스홀더로 표시 -->
      </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='items.html'"
            th:onclick="|location.href='@{/basic/items}'|"
            type="button">취소</button>
          <!-- "취소" 버튼. 너비 100%, 부트스트랩 스타일의 'btn btn-secondary' 클래스 사용.
               클릭 시 JavaScript로 페이지를 이동하거나 Thymeleaf 템플릿 엔진을 사용하여 페이지를 이동할 수 있음 -->
        </div>
      </div> <!-- 그리드 레이아웃의 행 종료 -->

    </form> <!-- 폼 요소 종료 -->
  </div> <!-- .container 클래스로 스타일링된 컨테이너 종료 -->
</body>

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

 <form action="item.html" th:action method="post"> 이 부분 보면

th:action = "/basic/items/addForm" method = "post 이렇게 쓴다 보통

 

 

속성 변경 - th:action

 

취소

 

 

728x90

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

웹 페이지 만들기 (7) 상품 수정  (0) 2023.11.04
웹 페이지 만들기 (6) 상품 등록 처리 - @ModelAttribute  (1) 2023.11.03
웹 페이지 만들기 (4) 상품 상세  (0) 2023.11.01
웹 페이지 만들기 (3) 상품 목록 - Thymeleaf  (1) 2023.10.31
웹 페이지 만들기 (2) 상품 서비스 HTML  (1) 2023.10.30
'Spring/MVC 1' Related Articles more
Comments