본문 바로가기
💻 뚝딱뚝딱/북북클럽

[개발일지#004] 전체 타임라인 HTML 만들기

by 뚜루리 2024. 1. 15.
728x90
320x100
[참고]
김영한님 스프링 강의를 바탕으로 진행되는 토이프로젝트의 과정을 기록하는 글입니다. 
둥근 피드백은 언제나 환영입니다.
[오늘의 개발내용]
1. 전체 타임라인 HTML 생성 (TimelineController, allTimeline.html)

 

 

1. 전체 타임라인 HTML 생성 (TimelineController)

package toyproject.bookbookclub.web.timeline;

import jakarta.annotation.PostConstruct;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import toyproject.bookbookclub.domain.Timeline.TimeLineRepository;
import toyproject.bookbookclub.domain.Timeline.Timeline;

import java.util.List;

@Controller
@RequiredArgsConstructor
@RequestMapping("/timeline")
public class TimelineController {


    private final TimeLineRepository timeLineRepository;

    @GetMapping("/allTimeline")
    public String allTimeline(Model model){
        List<Timeline> timelines = timeLineRepository.findAll();
        model.addAttribute("timelines", timelines);
        return "timeline/allTimeline";
    }

    @PostConstruct
    public void init(){
        timeLineRepository.save(new Timeline("1", "bookId1", "bookImg1", "memberId1", "content1", "2024-01-15"));
        timeLineRepository.save(new Timeline("2", "bookId2", "bookImg2", "memberId2", "content2", "2024-01-16"));
    }
}

 

 

1. 전체 타임라인 HTML 생성 (allTimeline.html)

 

<!DOCTYPE HTML>
<html 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">
</head>
<body>
<div class="container" style="max-width: 600px">
    <div class="py-5 text-center">
        <h2>타임라인</h2>
    </div>
    <div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    onclick="location.href='writeTimeline.html'"
                    th:onclick="|location.href='@{/timeline/writeTimeline}'|" type="button">타임라인 등록</button>
        </div>
    </div>
    <hr class="my-4">
    <div>
        <table th:each="timeline : ${timelines}">
            <tr>
                <th>타임라인ID</th>
                <td th:text="${timeline.timelimeId}">2</td>
                <th>회원ID</th>
                <td><a href="member.html" th:href="@{/basic/members/{memberId} (memberId=${timeline.memberId})}" th:text="${timeline.memberId}">회원id</a></td>
            </tr>
            <tr>
                <th>책ID</th>
                <td><a th:text="${timeline.bookId}">책아이디</a></td>
                <th>책이미지</th>
                <td><a th:text="${timeline.bookImg}">책이미지</a></td>
            </tr>
            <tr>
                <td colspan="4"><a th:text="${timeline.content}">내용</a></td>
            </tr>
            <tr>
                <td colspan="4"><a th:text="${timeline.lastUpdateDate}">2024-01-01</a></td>
            </tr>
        </table>
        <table class="table">
            <thead>
            <tr>
                <th>타임라인ID</th>
                <th>회원ID</th>
                <th>책ID</th>
                <th>책이미지</th>
                <th>내용</th>
                <th>작성일</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="timeline : ${timelines}">
                <td><a th:text="${timeline.timelimeId}">타임라인아이디</a></td>
                <td><a href="member.html" th:href="@{/basic/members/{memberId} (memberId=${timeline.memberId})}" th:text="${timeline.memberId}">회원id</a></td>
                <td><a th:text="${timeline.bookId}">책아이디</a></td>
                <td><a th:text="${timeline.bookImg}">책이미지</a></td>
                <td><a th:text="${timeline.content}">내용</a></td>
                <td><a th:text="${timeline.lastUpdateDate}">2024-01-01</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

 

 

일단 이런 형태로 띄우게끔 만들어 둠. 

728x90
320x100
저작자표시 비영리 변경금지

'💻 뚝딱뚝딱 > 북북클럽' 카테고리의 다른 글

[개발일지#006] 회원가입 폼 HTML 만들기  (0) 2024.01.17
[개발일지#005] 회원 상세 HTML 만들기  (0) 2024.01.16
[개발일지#003] 타임라인(TimeLIne) 도메인 생성 및 테스트  (0) 2024.01.12
[개발일지#002] 회원(Member) 목록 만들기(feat. 부트스트랩, 타임리프)  (0) 2024.01.11
[개발일지#001] 프로젝트 생성, User 도메인 생성 및 테스트  (0) 2024.01.10

관련글

티스토리툴바