본문 바로가기
자바의 봄(Spring)/프로젝트

SpringBoot-Movie-Thymeleaf-Project - 11 영화 디테일 페이지 만들기 ( 2 )

by 종안이 2024. 5. 1.

라섹 수술하고 일주일 정도 쉬었다. 

 

시력이 올라오기는 했는데 아직 잘 보이는 상태는 아니다. 

 

타이틀을 클릭했을때 details 페이지로 넘어갈 수 있도록 해준다. 하이퍼링크를 걸어준다. 

 

링크를 걸어줬다.

 

그리고 반복문을 돌기 때문에 다른 코드들에도 ID 값을 추가해줘야 한다. 그래서 모든 값을 추가해주게 되면 

아래와 같이 나오게 된다. 

 

오펜하이머를 클릭해준다.

 

이런 식으로 나오는 것을 알 수 있다.

 

다음 번에는 디테일 페이지를 조금 더 많이 꾸며보도록 하겠다.

## details

<!DOCTYPE html>

<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{Part/header :: header}">
</head>
<nav th:replace="~{Part/navbar :: navigation}"></nav>
<body>
<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">제목(상세보기)</th>
        <th scope="col">평점</th>
        <th scope="col">투표수</th>
        <th scope="col">출시일</th>
        <th scope="col">줄거리</th>
    </tr>
    </thead>


    <tbody th:each="index : ${#numbers.sequence(0,popularMovieList.getMovieList().size()-1,4)}">
    <tr th:if="${popularMovieList.getMovieList()[index].overview!=''}">
        <td>
            <img th:src="${address +popularMovieList.getMovieList()[index].poster_path}" width="300" height="300">
        </td>
        <td width="120px"><a th:href="@{'/v1/details/' + ${popularMovieList.getMovieList()[index].id}}">[[${popularMovieList.getMovieList()[index].title}]]</a></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index].vote_average}"></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index].vote_count}"></td>
        <td th:text="${popularMovieList.getMovieList()[index].release_date}"></td>
        <td th:text="${popularMovieList.getMovieList()[index].overview}"></td>
    </tr>

    <tr th:if="${popularMovieList.getMovieList()[index+1].overview!=''}">
        <td>
            <img th:src="${address +popularMovieList.getMovieList()[index+1].poster_path}" width="300" height="300">
        </td>
        <td width="120px"><a th:href="@{'/v1/details/' + ${popularMovieList.getMovieList()[index+1].id}}">[[${popularMovieList.getMovieList()[index+1].title}]]</a></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index+1].vote_average}"></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index+1].vote_count}"></td>
        <td th:text="${popularMovieList.getMovieList()[index+1].release_date}"></td>
        <td th:text="${popularMovieList.getMovieList()[index+1].overview}"></td>
    </tr>

    <tr th:if="${popularMovieList.getMovieList()[index+2].overview!=''}">
        <td>
            <img th:src="${address +popularMovieList.getMovieList()[index+2].poster_path}" width="300" height="300">
        </td>
        <td width="120px"><a th:href="@{'/v1/details/' + ${popularMovieList.getMovieList()[index+2].id}}">[[${popularMovieList.getMovieList()[index+2].title}]]</a></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index+2].vote_average}"></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index+2].vote_count}"></td>
        <td th:text="${popularMovieList.getMovieList()[index+2].release_date}"></td>
        <td th:text="${popularMovieList.getMovieList()[index+2].overview}"></td>
    </tr>
    <tr th:if="${popularMovieList.getMovieList()[index+3].overview!=''}">
        <td>
            <img th:src="${address +popularMovieList.getMovieList()[index+3].poster_path}" width="300" height="300">
        </td>
        <td width="120px"><a th:href="@{'/v1/details/' + ${popularMovieList.getMovieList()[index+3].id}}">[[${popularMovieList.getMovieList()[index+3].title}]]</a></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index+3].vote_average}"></td>
        <td width="120px" th:text="${popularMovieList.getMovieList()[index+3].vote_count}"></td>
        <td th:text="${popularMovieList.getMovieList()[index+3].release_date}"></td>
        <td th:text="${popularMovieList.getMovieList()[index+3].overview}"></td>
    </tr>

    </tbody>
</table>

<th:block th:if="${totalPages>0}">
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
            </li>
            <li class="page-item" th:each="index : ${#numbers.sequence(1,10)}">
                <a class="page-link"  th:href="@{'/v1/popular/' + ${index}}">[[${index}]]</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>
</th:block>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>


</html>

'자바의 봄(Spring) > 프로젝트' 카테고리의 다른 글

SpringBoot-Movie-Thymeleaf-Project - 11 영화 디테일 페이지 만들기  (0) 2024.04.24
SpringBoot-Movie-Thymeleaf-Project - 10 Thymeleaf에서 javascript 함수 사용하기  (0) 2024.04.14
SpringBoot-Movie-Thymeleaf-Project - 8 api로 받아온 데이터 페이징 처리 해주기  (0) 2024.04.07
SpringBoot-Movie-Thymeleaf-Project - LocalDateTime 으로 시간 포맷 변경하기  (0) 2024.04.06
SpringBoot-Movie-Thymeleaf-Project - 7 게시글 작성하기  (0) 2024.04.05

관련글

댓글

티스토리툴바