[Spring] thymeleaf, bootstrap을 통해 기본 상품 저장 웹 사이트 만들기

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Link

🌱 GitHub

Notice

🍀 깃허브 / 티스토리 닉네임의 의미

관리 메뉴

DevLog 😶

[Spring] thymeleaf, bootstrap을 통해 기본 상품 저장 웹 사이트 만들기 본문

Back-end/Spring

[Spring] thymeleaf, bootstrap을 통해 기본 상품 저장 웹 사이트 만들기

dolmeng2 2022. 8. 18. 12:10

김영한 님의 '스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술'을 보고 정리한 글입니다 😊

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의

웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., -

www.inflearn.com

- 지난 포스팅과 이어집니다 :D

[Spring] HTTP 요청 파라미터, 응답 데이터 생성, HttpMessageConverter와 ArgumentResolver

- 김영한 님의 '스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술'을 보고 정리한 글입니다 😊 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의 웹 애플리케이션을 개발할 때 필요한 모든 웹 기

cl8d.tistory.com

- 지난 포스팅에서는 HTTP 요청/응답 파라미터와 ArgumentResolver, 그리고 HttpMessageConverter의 동작 방식을 알아보았다.

- 이번 포스팅에서는 본격적으로 작은 웹 사이트를 만들면서 지금까지 배운 내용을 응용해보자.

- 스프링 MVC 1의 마지막 포스팅이 될 예정입니다 :D

| 간단한 웹 페이지 만들기

- dependency로 Spring Web, Thymeleaf, Lombok을 추가해주자.

- 간단한 상품 주문 웹 사이트를 만들 예정이다.

[SItem.java]

- 나의 경우 지금까지 포스팅 했던 내용의 프로젝트가 다 하나의 프로젝트여서 도메인 이름을 안 겹치게 하기 위해 이렇게 설정하였다.

@Getter
@NoArgsConstructor
public class SItem {
    private Long id;
    private String itemName;
    private Integer price;
    private Integer quantity;


    public SItem(String itemName, Integer price, Integer quantity) {
        this.itemName = itemName;
        this.price = price;
        this.quantity = quantity;
    }

    public void changeId(Long id) {
        this.id = id;
    }

    public void changeItemInfo(String itemName, Integer price, Integer quantity) {
        this.itemName = itemName;
        this.price = price;
        this.quantity = quantity;
    }
}

- setter를 안 열기 위해서 최대한 메서드 단위로 열었다.

[SItemRepository.java]

@Repository
public class SItemRepository {
    private static final Map<Long, SItem> store = new ConcurrentHashMap<>();
    private static AtomicLong sequence = new AtomicLong(0);

    public SItem save(SItem item) {
        item.changeId(sequence.incrementAndGet());
        store.put(item.getId(), item);
        return item;
    }

    public SItem findById(Long id) {
        return store.get(id);
    }

    public List<SItem> findAll() {
        return new ArrayList<>(store.values());
    }

    public void update(Long itemId, SItem updateInfo) {
        SItem findItem = store.get(itemId);
        findItem.changeItemInfo(updateInfo.getItemName(), updateInfo.getPrice(), updateInfo.getQuantity());
    }

    public void clearStore() {
        store.clear();
    }

}

- 동시성 이슈로 인해서 concurrentHashMap과 AtomicLong을 사용하였다. (사용하지 않아도 무방하다)

[SItemRepositoryTest.java]

class SItemRepositoryTest {
    SItemRepository repository = new SItemRepository();

    @AfterEach
    void afterEach() {
        repository.clearStore();
    }

    @Test
    public void save() throws Exception {
        // given
        SItem item = new SItem("itemA", 10000, 10);

        // when
        SItem savedItem = repository.save(item);

        // then
        SItem findItem = repository.findById(savedItem.getId());
        assertThat(findItem).isEqualTo(savedItem);
    }

    @Test
    public void findAll() throws Exception {
        // given
        SItem item1 = new SItem("itemA", 10000, 10);
        SItem item2 = new SItem("itemB", 20000, 20);

        repository.save(item1);
        repository.save(item2);

        // when
        List<SItem> findItems = repository.findAll();

        // then
        assertThat(findItems.size()).isEqualTo(2);
        assertThat(findItems).contains(item1, item2);
    }

    @Test
    public void updateItem() throws Exception {
        // given
        SItem item1 = new SItem("itemA", 10000, 10);
        SItem savedItem = repository.save(item1);
        Long itemId = savedItem.getId();

        // when
        SItem updateItem = new SItem("itemB", 20000, 20);
        repository.update(itemId, updateItem);
        SItem findItem = repository.findById(itemId);

        // then
        assertThat(findItem.getItemName()).isEqualTo(updateItem.getItemName());
        assertThat(findItem.getPrice()).isEqualTo(updateItem.getPrice());
        assertThat(findItem.getQuantity()).isEqualTo(updateItem.getQuantity());

    }
}

- 각 기능에 대한 간단한 테스트 코드이다. 모두 잘 돌아가는 것을 확인할 수 있다.

- 이제, html을 설정하기 위해 간단한 부트스트랩을 다운로드 받아두자.

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

- 압축 해제 후 bootstrap.min.css를 복사해서 resources/static/css 밑에 추가해주었다.

- 이후 파일들은 resources/static/basic 폴더 밑에다 추가하였다.

[items.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <title>item List</title>
</head>
<body>
    <div class="container" style="max-width: 600px">
        <div class="py-5 text-center">
            <h2 class="font-monospace fw-bold">Item List</h2>
            <button class="btn btn-warning float-end text-white"
            onclick="location.href='addForm.html'"
            type="button">
            ➕
            </button>
        </div>
        <div class="mt-4 font-monospace">
            <table class="table table-hover table-bordered">
            <thead>
                <tr class="text-center">
                    <th>ID</th>
                    <th>상품명</th>
                    <th>가격</th>
                    <th>수량</th>
                </tr>
            </thead>
            <tbody class="text-center">
                <tr>
                    <td><a href="item.html">1</a></td>
                    <td><a href="item.html">테스트 상품1</a></td>
                    <td>10000</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td><a href="item.html">2</a></td>
                    <td><a href="item.html">테스트 상품2</a></td>
                    <td>20000</td>
                    <td>20</td>
                </tr>
            </tbody>
            </table>
        </div>
    </div>
</body>
</html>

- 대충 이런 느낌으로 아이템 리스트를 나타낼 수 있게 만들었다.

[item.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <title>item Detail</title>
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item Detail</h2>
  </div>

  <div class="row fw-bold font-monospace">
    <div class="col text-center">
      <label for="itemId">ID</label>
      <input type="text" id="itemId" name="itemId"
             class="form-control text-center"
             value="1" readonly>
    </div>
    <div class="col text-center">
      <label for="itemName">Name</label>
      <input type="text" id="itemName" name="itemName"
             class="form-control text-center"
             value="상품A" readonly>
    </div>
  </div>

  <div class="row mt-2 fw-bold font-monospace">
    <div class="col text-center">
      <label for="price">Price</label>
      <input type="text" id="price" name="price"
             class="form-control text-center"
             value="10000" readonly>
    </div>
    <div class="col text-center">
      <label for="quantity">Quantity</label>
      <input type="text" id="quantity" name="quantity"
             class="form-control text-center"
             value="10" readonly>
    </div>
  </div>

  <hr class="my-4">

  <div class="row">
    <div class="col">
      <button class="w-100 btn btn-warning btn-lg"
              onclick="location.href='editForm.html'" type="button">
        ✍🏻
      </button>
    </div>
    <div class="col">
      <button class="w-100 btn btn-info btn-lg"
              onclick="location.href='items.html'" type="button">
        📑
      </button>
    </div>
  </div>
</div>

</body>
</html>

- 각 item에 대한 세부 정보를 나타내는 화면이다.

- 아래 노란색 버튼은 수정, 하늘색 버튼은 목록으로 돌아가는 버튼이다.

[addForm.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <title>Item Save Form</title>
  <style>

  </style>
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item Save Form</h2>
  </div>

  <form action="item.html" method="post">
    <div class="row fw-bold font-monospace">
      <div class="col text-center">
        <label for="itemName">Name</label>
        <input type="text" id="itemName" name="itemName"
               class="form-control text-center"
               placeholder="Please Enter an Item Name.">
      </div>
    </div>

    <div class="row mt-2 fw-bold font-monospace">
      <div class="col text-center">
        <label for="price">Price</label>
        <input type="text" id="price" name="price"
               class="form-control text-center"
               placeholder="Please Enter an Item Price.">
      </div>
      <div class="col text-center">
        <label for="quantity">Quantity</label>
        <input type="text" id="quantity" name="quantity"
               class="form-control text-center"
               placeholder="Please Enter an Item Quantity.">
      </div>
    </div>

    <hr class="my-4">

    <div class="row">
      <div class="col">
        <button class="w-100 btn btn-warning btn-lg"
                type="submit">
          ⭕
        </button>
      </div>
      <div class="col">
        <button class="w-100 btn btn-danger btn-lg"
                onclick="location.href='items.html'" type="button">
          ❌
        </button>
      </div>
    </div>
  </form>
</div>
</body>
</html>

- 아이템 저장 form이다. 상품 이름, 가격, 수량을 등록할 수 있다.

[editForm.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <title>Item Edit Form</title>
  <style>

  </style>
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item Edit Form</h2>
  </div>

  <form action="item.html" method="post">
    <div class="row fw-bold font-monospace">
      <div class="col text-center">
        <label for="id">Id</label>
        <input type="text" id="id" name="id"
               class="form-control text-center"
               value="1" readonly>
      </div>
      <div class="col text-center">
        <label for="itemName">Name</label>
        <input type="text" id="itemName" name="itemName"
               class="form-control text-center"
               value="상품A">
      </div>
    </div>

    <div class="row mt-2 fw-bold font-monospace">
      <div class="col text-center">
        <label for="price">Price</label>
        <input type="text" id="price" name="price"
               class="form-control text-center"
               value="10000">
      </div>
      <div class="col text-center">
        <label for="quantity">Quantity</label>
        <input type="text" id="quantity" name="quantity"
               class="form-control text-center"
               value="10">
      </div>
    </div>

    <hr class="my-4">

    <div class="row">
      <div class="col">
        <button class="w-100 btn btn-warning btn-lg"
                type="submit">
          ⭕
        </button>
      </div>
      <div class="col">
        <button class="w-100 btn btn-danger btn-lg"
                onclick="location.href='items.html'" type="button">
          ❌
        </button>
      </div>
    </div>
  </form>
</div>
</body>
</html>

- 상품 수정폼도 동일하게 만들어주었다.

| 컨트롤러와 뷰 템플릿 만들기

- 동적으로 값을 수정할 수 있도록 하기 위해서. html 경로를 resources/templates/basic 밑으로 옮겨주었다.

[SItemController.java]

@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class SItemController {
    private final SItemRepository repository;

    @GetMapping
    public String items(Model model) {
        List<SItem> items = repository.findAll();
        model.addAttribute("items", items);
        return "basic/items";
    }

    // 테스트 데이터 추가 (의존관계 주입 이후 실행)
    @PostConstruct
    public void init() {
        repository.save(new SItem("itemA", 10000, 10));
        repository.save(new SItem("itemB", 20000, 20));
    }
}

- DB를 사용하지 않기 때문에 서버 재시작마다 데이터를 추가할 수 없으니까 @PostConstruct를 사용해서 데이터를 넣어주었다.

- 전체 상품 목록을 조회할 수 있는 컨트롤러 메서드만 생성하였다.

- 우리가 만든 html에 타임리프를 적용해보자.

[items.html] - 수정

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link href="../css/bootstrap.min.css"
        th:href="@{/css/bootstrap.min.css}"
        rel="stylesheet">
  <title>item List</title>
</head>
<body>
<div class="container" style="max-width: 600px">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item List</h2>
    <button class="btn btn-warning float-end text-white"
            onclick="location.href='addForm.html'"
            th:onclick="|location.href='@{/basic/items/add}'|"
            type="button">
      ➕
    </button>
  </div>
  <div class="mt-4 font-monospace">
    <table class="table table-hover table-bordered">
      <thead>
      <tr class="text-center">
        <th>ID</th>
        <th>상품명</th>
        <th>가격</th>
        <th>수량</th>
      </tr>
      </thead>
      <tbody class="text-center">
      <tr th:each="item : ${items}">
        <td><a href="item.html"
               th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
               th:text="${item.id}">Id</a></td>
        <td><a href="item.html"
               th:href="@{|/basic/items/${item.id}|}"
               th:text="${item.itemName}">ItemName</a></td>
        <td th:text="${item.price}">Price</td>
        <td th:text="${item.quantity}">Quantity</td>
      </tr>
      </tbody>
    </table>
  </div>

</div>

</body>
</html>

✔ th:href

- 기존의 href 값을 th:href 값으로 변경한다. 값이 없다면 새로 생성한다.

- HTML을 그대로 사용할 때는 href 속성이, 뷰 템플릿을 거치면 th:href 값이 동적으로 대체된다.

- 대부분의 HTML 속성은 타임리프를 통해 th:로 변경이 가능하다.

- HTML을 파일로 열었을 때는 th:가 있어도 웹 브라우저는 알 수 없기 때문에, HTML 파일 보기 + 템플릿 기능을 함께 할 수 있다.

✔ URL 링크 표현 @{...}

- URL 링크를 @{...}로 표현할 수 있다. 서블릿 컨텍스트를 자동으로 포함시킨다.

(옛날에 경로 이름을 지정했어야 했는데, 지금은 잘 안 써서 크게 신경쓰지 않아도 된다.)

th:href="@{/basic/items/{itemId}(itemId=${item.id})}"

- itemId가 item.id의 값으로 치환이 되고, 결과적으로 경로 변수의 {itemId}에 들어간다.

- 추가적으로, 쿼리 파라미터도 생성할 수 있다.

th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"

--> /basic/items/1?query=test

- 리터럴 대체 문법을 사용하면 더 간단하게 표현할 수 있다.

th:href="@{|/basic/items/${item.id}|}"

✔ 속성 변경 th:onclick

- 여기서, 리터럴 대체 문법이 사용되었다.

th:onclick="|location.href='@{/basic/items/add}'|"

|...| : 타임리프에서 기존에는 문자, 표현식이 분리되어 있어서 +를 통해 더해서 사용했어야 했는데, ||를 사용하면 그럴 필요가 없다.

ex) th:text="'hi' + ${item.name} + '!'" -> th:text="|hi ${item.name}!|"

- 우리는 기존이라면 경로에 대해서 / 라는 문자를 더해줬어야 했는데, 리터럴 대체 문법으로 편하게 지정해주었다.

✔ 반복 출력 th:each

th:each="item : ${items}

- 'items'라는 컬렉션에 있는 데이터를 하나씩 꺼내서 item에 담아준다. item.name 이런 식으로 접근이 가능하다.

✔ 변수 표현식 ${...}, 내용 변경 th:text

th:text="${item.itemName}">ItemName</a></td>

- 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 ${...}을 통해 조회할 수 있다.

- 내용의 값을 th:text를 통해 변경이 가능하다.

- 자, 이제 이어서 나머지 부분도 만들어보자.

[SItemController.java] - 추가

@GetMapping("/{itemId}")
public String item(@PathVariable Long itemId, Model model) {
    SItem item = repository.findById(itemId);
    model.addAttribute("item", item);
    return "basic/item";
}

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

- 상품 상세와 상품 등록에 관한 폼을 추가하였다.

[item.html] - 수정

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link href="../css/bootstrap.min.css"
        th:href="@{/css/bootstrap.min.css}"
        rel="stylesheet">
  <title>item Detail</title>
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item Detail</h2>
  </div>

  <div class="row fw-bold font-monospace">
    <div class="col text-center">
      <label for="itemId">ID</label>
      <input type="text" id="itemId" name="itemId"
             class="form-control text-center"
             value="1" th:value="${item.id}" readonly>
    </div>
    <div class="col text-center">
      <label for="itemName">Name</label>
      <input type="text" id="itemName" name="itemName"
             class="form-control text-center"
             value="상품A" th:value="${item.itemName}" readonly>
    </div>
  </div>

  <div class="row mt-2 fw-bold font-monospace">
    <div class="col text-center">
      <label for="price">Price</label>
      <input type="text" id="price" name="price"
             class="form-control text-center"
             value="10000" th:value="${item.price}" readonly>
    </div>
    <div class="col text-center">
      <label for="quantity">Quantity</label>
      <input type="text" id="quantity" name="quantity"
             class="form-control text-center"
             value="10" th:value="${item.quantity}" readonly>
    </div>
  </div>

  <hr class="my-4">

  <div class="row">
    <div class="col">
      <button class="w-100 btn btn-warning btn-lg"
              onclick="location.href='editForm.html'"
              th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
              type="button">
        ✍🏻
      </button>
    </div>
    <div class="col">
      <button class="w-100 btn btn-info btn-lg"
              onclick="location.href='items.html'"
              th:onclick="|location.href='@{/basic/items}'|"
              type="button">
        📑
      </button>
    </div>
  </div>
</div>

</body>
</html>

✔ 속성 변경 th:value

value="10" th:value="${item.quantity}"

- th:value를 통해 item에 있는 quantity 정보를 value에 담아준다. (변수 표현식 사용)

[addForm.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link href="../css/bootstrap.min.css"
        th:href="@{/css/bootstrap.min.css}"
        rel="stylesheet">
  <title>Item Save Form</title>
  <style>

  </style>
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item Save Form</h2>
  </div>

  <form action="item.html" th:action method="post">
    <div class="row fw-bold font-monospace">
      <div class="col text-center">
        <label for="itemName">Name</label>
        <input type="text" id="itemName" name="itemName"
               class="form-control text-center"
               placeholder="Please Enter an Item Name.">
      </div>
    </div>

    <div class="row mt-2 fw-bold font-monospace">
      <div class="col text-center">
        <label for="price">Price</label>
        <input type="text" id="price" name="price"
               class="form-control text-center"
               placeholder="Please Enter an Item Price.">
      </div>
      <div class="col text-center">
        <label for="quantity">Quantity</label>
        <input type="text" id="quantity" name="quantity"
               class="form-control text-center"
               placeholder="Please Enter an Item Quantity.">
      </div>
    </div>

    <hr class="my-4">

    <div class="row">
      <div class="col">
        <button class="w-100 btn btn-warning btn-lg"
                type="submit">
          ⭕
        </button>
      </div>
      <div class="col">
        <button class="w-100 btn btn-danger btn-lg"
                onclick="location.href='items.html'"
                th:onclick="|location.href='@{/basic/items}'|"
                type="button">
          ❌
        </button>
      </div>
    </div>
  </form>
</div>
</body>
</html>

✔ 속성 변경 th:action

- HTML form에서 action에 값이 없으면 현재 URL에 데이터를 전송해준다.

- 즉, 여기서 현재 url이 /basic/item/add이기 때문에 이 URL로 POST 방식으로 데이터를 전송하게 된다.

- 우리는 상품 등록 폼은 /basic/item/add에서 GET으로, 실제 등록은 /basic/item/add에 POST 처리를 하였다.

- 같은 URL이지만 HTTP 메서드만 다르게 한 것이다. (하나의 폼에서 등록 처리까지 진행)

| 상품 등록/수정 진행하기

- 상품 등록은 메시지 바디에 쿼리 파라미터 형식으로 전달하는 방식으로 진행한다.

- content-type: application/x-www-form-urlencoded

[SItemController.java] - 추가

@PostMapping("/add")
public String addItemV1 (@RequestParam String itemName,
                         @RequestParam Integer price,
                         @RequestParam Integer quantity,
                         Model model) {
    SItem item = new SItem(itemName, price, quantity);
    repository.save(item);
    model.addAttribute("item", item);
    return "basic/item";
}

이 방법은 잘 동작하지만... 이렇게 모든 파라미터를 @RequestParam을 통해 받는 건 불편하다.

@PostMapping("/add")
public String addItemV2 (@ModelAttribute SItem item, Model model) {
    repository.save(item);
    model.addAttribute("item", item);
    return "basic/item";
}

간단하게 줄인 버전이다.

@ModelAttribute의 경우 SItem 객체 생성 및 요청 파라미터의 값을 프로퍼티 접근법(setter 이용)으로 입력해준다.

이 경우에는 SItem에 @Setter가 있어야 한다!! (혹은 setXXX라는 이름을 가진 메서드를 만들어주자)

⭐ 객체를 생성할 때 기본 생성자가 아닌 다른 생성자가 있으면 그 생성자로 파라미터 바인딩을, 기본 생성자만 있으면 setter를 통해 바인딩을 시도한다.

또한, model에다가 @ModelAttribute가 지정한 객체를 넣어주는 역할도 한다!

model에 넣을 때 이름은 @ModelAttribute에 지정한 name(value) 속성을 사용한다.

@PostMapping("/add")
public String addItemV3 (SItem item) {
    repository.save(sItem);
    return "basic/item";
}

- 더 간단하게 줄인 버전이다.

- @ModelAttribute를 생략하고, model.addAttribute() 부분을 제거하였다.

- 생략했어도 SItem 객체를 생성하고, 요청된 파라미터의 값(itemName, price, quantity)를 setXXX 메서드를 통해 주입한다.

- ⭐ 모델에 저장될 때 '클래스명'을 사용한다. 이때, 클래스의 첫글자만 소문자로 변경한다.

- 그래서, 위 코드의 경우 model.addAttribute('sItem', item')이 된다고 볼 수 있다.

- 그렇기 때문에, 이 코드가 동작하려면 html에서 item 부분을 sItem으로 바꾸어 줘야 한다.

- 마찬가지로 수정도 바꾸어주자.

[SItemController.java] - 추가

@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model) {
    SItem item = repository.findById(itemId);
    model.addAttribute("item", item);
    return "basic/editForm";
}

@PostMapping("/{itemId}/edit")
public String edit(@PathVariable Long itemId, SItem item, Model model) {
    repository.update(itemId, item);
    model.addAttribute("item", item);
    return "redirect:/basic/items/{itemId}"
}

- 수정 폼과 실제 수정을 처리하는 edit 기능이다.

- 수정 후에는 상품 상세를 볼 수 있도록 리다이렉트를 진행하였다.

[editForm.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link href="../css/bootstrap.min.css"
        th:href="@{/css/bootstrap.min.css}"
        rel="stylesheet">
  <title>Item Edit Form</title>
  <style>

  </style>
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item Edit Form</h2>
  </div>

  <form action="item.html" th:action method="post">
    <div class="row fw-bold font-monospace">
      <div class="col text-center">
        <label for="id">Id</label>
        <input type="text" id="id" name="id"
               class="form-control text-center"
               value="1" th:value="${item.id}" readonly>
      </div>
      <div class="col text-center">
        <label for="itemName">Name</label>
        <input type="text" id="itemName" name="itemName"
               class="form-control text-center"
               value="상품A" th:value="${item.itemName}">
      </div>
    </div>

    <div class="row mt-2 fw-bold font-monospace">
      <div class="col text-center">
        <label for="price">Price</label>
        <input type="text" id="price" name="price"
               class="form-control text-center"
               value="10000" th:value="${item.price}">
      </div>
      <div class="col text-center">
        <label for="quantity">Quantity</label>
        <input type="text" id="quantity" name="quantity"
               class="form-control text-center"
               value="10" th:value="${item.quantity}">
      </div>
    </div>

    <hr class="my-4">

    <div class="row">
      <div class="col">
        <button class="w-100 btn btn-warning btn-lg"
                type="submit">
          ⭕
        </button>
      </div>
      <div class="col">
        <button class="w-100 btn btn-danger btn-lg"
                onclick="location.href='items.html'"
                th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})}'|"
                type="button">
          ❌
        </button>
      </div>
    </div>
  </form>
</div>
</body>
</html>

- 정말 잘 동작하는 걸 볼 수 있다!

| RPG, Redirect

- 현재 우리가 만든 사이트는 상품 등록 후 새로고침을 하면 상품이 계속 중복해서 쌓인다.

- 새로고침 : 마지막으로 서버에 전송한 데이터를 재전송

- 상품 등록 폼의 POST /add가 계속 재전송되기 때문에 동일한 상품이 계속 추가되는 것.

-> 이를 방지하기 위해서, 상품 저장 후에 뷰 템플릿이 아닌 상품 상세 화면으로 redirect를 시켜주자.

--> 이러면 새로고침을 해도 상품 상세 화면에 계속 머물게 된다.

[SItemController.java] - 수정

@PostMapping("/add")
public String addItemV2 (SItem item, Model model) {
    repository.save(item);
    model.addAttribute("item", item);
    return "redirect:/basic/items/" + item.getId();
}

- 이런 문제 해결 방법이 RPG - POST/REDIRECT/GET 방식이다.

- 그러나, 위처럼 redirect문을 작성하는 건 URL 인코딩이 안 되기 때문에 좋지 않다. 다음의 방법을 사용하자.

[SItemController.java] - 수정

@PostMapping("/add")
public String addItemV2 (SItem item, Model model, RedirectAttributes redirectAttributes) {
    SItem savedItem = repository.save(item);
    model.addAttribute("item", item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/basic/items/{itemId};
}

- 상품 저장 후 잘 저장되었다는 메시지를 출력해주기 위해서 status라는 변수를 추가해주었다.

- 또한 +를 통한 redirect문 대신, addAttribute로 추가해준 itemId를 사용하였다. ( {itemId} )

- redirectAttributes를 사용하면 경로 변수 + 나머지는 쿼리 파라미터로 처리해준다.

위 URL) basic/items/3?status=true

[item.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  ...
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 class="font-monospace fw-bold">Item Detail</h2>
  </div>
  <h2 class="font-monospace fw-bold text-center text-danger"
      th:if="${param.status}" th:text="'Save Success!'"></h2>

  ...

</body>
</html>

✔ th:if

- 태그에 대한 조건을 걸 수 있다.

- ${param.status} -> 타임리프에서 쿼리 파라미터를 조회할 때 사용할 수 있는 기능이다! param.~으로 조회하면 된다.

- 예쁘지는 않지만 잘 뜬다.

- 이렇게 스프링 MVC1 강의를 완강하였다. 코드 레벨에서 까보면서 공부했던 게 복습할 때 제일 좋았던 것 같다.

- 빨리 스프링 MVC2도 복습해야겠다... 아자아자...!

'Back-end > Spring' 카테고리의 다른 글

[Spring] Thymeleaf를 사용해서 상품 등록/수정/조회 구현하기 (0)	2022.08.19
[Spring] Thymeleaf 기본 문법 정리 (0)	2022.08.18
[Spring] HTTP 요청 파라미터, 응답 데이터 생성, HttpMessageConverter와 ArgumentResolver (0)	2022.08.17
[Spring] DispatcherServlet의 동작 과정과 HanderMapping, HandlerAdapter, @RequestMapping (0)	2022.08.16
[Spring] MVC 패턴이란, V1~V5로 MVC 프레임워크 만들기 (0)	2022.08.16

'Back-end/Spring' Related Articles

Comments

DevLog 😶

[Spring] thymeleaf, bootstrap을 통해 기본 상품 저장 웹 사이트 만들기 본문

[Spring] thymeleaf, bootstrap을 통해 기본 상품 저장 웹 사이트 만들기

| 간단한 웹 페이지 만들기

| 상품 등록/수정 진행하기

| RPG, Redirect

'Back-end > Spring' 카테고리의 다른 글

티스토리툴바