스프링 부트 코딩 공작소: 애플리케이션 기능에 집중하기

readersBooks() 메서드는 결국 "readingList"를 논리적 뷰 이름으로 반환한다. 그러므로 이 뷰도 만들어야 한다. 이 프로젝트의 시작 단계에서 Thymeleaf로 애플리케이션 뷰를 정의하기로 결정했다. 따라서 src/main/resources/template 디렉터리에 코드 2-7 내용으로 readingList.html을 만들자.

코드 2-7 독서 목록을 보여 주는 Thymeleaf 템플릿(resources/template/readingList.html)

<!DOCTYPE html>
<html>
<head>
   <title>Reading List</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"></link>
</head>
<body>
    <h2>Your Reading List</h2>
     <div th:unless=" ${#lists.isEmpty(books)}">
        <dl th:each="book : ${books}">
            <dt class="bookHeadline">
                <span th:text=" ${book.title}">Title</span> by
                <span th:text=" ${book.author}">Author</span>
                (ISBN: <span th:text=" ${book.isbn}">ISBN</span>)
            </dt>
            <dd class="bookDescription">
                <span th:if=" ${book.description}"
                    th:text=" ${book.description}">Description</span>
                <span th:if=" ${book.description eq null}">
                    No description available</span>
            </dd>
        </dl>
    </div>
    <div th:if=" ${#lists.isEmpty(books)}">
        <p>You have no books in your book list</p>
    </div>
 
    <hr/>
 
    <h3>Add a book</h3>
    <form method="POST" th:action="@{/}">
        <label for="title">Title:</label>
        <input type="text" name="title" size="50"></input><br />
        <label for="author">Author:</label>
        <input type="text" name="author" size="50"></input><br />
        <label for="isbn">ISBN:</label>
        <input type="text" name="isbn" size="15"></input><br />
        <label for="description">Description:</label><br />
        <textarea name="description" cols="80" rows="5"></textarea><br />
        <input type="submit" value="Add Book" />
    </form>
</body>
</html>

이 템플릿은 개념적으로 두 부분으로 나눈 HTML 페이지를 정의한다. 페이지 위쪽은 독자의 독서 목록에 들어갈 책의 목록이다. 아래쪽은 독자가 새로운 책을 독서 목록에 추가할 때 사용하는 입력 폼이다.

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.