[Thymeleaf][HTML] 간단한 메모장 구현하기 2 (메모 리스트 페이지 만들기)

PersesTitan·2022년 6월 26일
0

Spring

목록 보기
26/48
post-thumbnail

이제 메모리스트를 보여줄 페이지를 제작할 차례입니다.

  1. 메인 페이지 (index.html)

2. 메모 리스트 페이지 (memo_list.html)

  1. 메모 생성 페이지 (new_memo.html)
  2. 메모 상세정보 페이지 (memo.html)
  3. 메모 편집 페이지 (edit_memo.html)

이름이 재멋대로 인데... 무지성으로 코드를 짜서 html이름이 이상합니다... 바꾸기 귀찮아서 이대로 쓰긴했는데 여러분들은 파일이름 재대로 지어주세요...

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>메모 생성</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
        table, td, th {
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
        td, th {
            padding: 10px;
        }
    </style>
</head>
<body>

<p>
    <form action="./memos" method="get">
        <input type="text" name="search">
        <input type="submit" value="검색">
    </form>
</p>

<button onclick="location.href='new_memo.html'"
        th:onclick="|location.href='memo'|"
        type="button">생성</button>

<h1>메모 리스트</h1>
<label th:if="${searchParam}" th:text="|검색 결과: ${search}|"></label>
<p>
    자세히 보실려면 글짜를 클릭해주세요.
</p>
    <table>
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성일</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="memo:${memos}">
            <td th:text="${memo.id}"
                onclick="location.href='item/memo.html'"
                th:onclick="|location.href='@{/memo/{id}(id=${memo.id})}'|"></td>
            <td th:text="${memo.title}"
                onclick="location.href='item/memo.html'"
                th:onclick="|location.href='@{/memo/{id}(id=${memo.id})}'|"></td>
            <td th:text="${#temporals.format(memo.createDate, 'yyyy-MM-dd HH:mm:ss')}"
                onclick="location.href='item/memo.html'"
                th:onclick="|location.href='@{/memo/{id}(id=${memo.id})}'|"></td>
        </tr>
        </tbody>
    </table>
</body>
</html>

동작


Groovy 버전 코드
Java 버전 코드
Kotlin 버전 코드

profile
안녕하세요 페르세스 티탄입니다! 부족한 부분이 많이 있겠지만 잘부탁드립니다.

0개의 댓글