Skip to content

2. 블로그 CRUD 구현 #12

Open
Open
2. 블로그 CRUD 구현#12
Labels
Sprint 1

Description

@d11210920
d11210920
opened on Aug 19, 2024

블로그 CRUD 구현

  • 블로그 리스트 / 생성 / 수정 / 삭제 구현
  • 블로그는 게시물의 개념으로 이해하시면 됩니다.

1. 블로그 리스트

  • Path: /blogs
  • Query parameter: creatorId
    • DB에 creatorId 가 없으면 에러 throw
  • 블로그 리스트
    • creatorId 가 생성한 글들을 리스트 업
  • 생성 버튼
    • 블로그 생성 페이지 (blogs/new?creatorId=${creatorId}) 로 이동
blogList.html 
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <h1><span th:text="${name}"/>의 블로그</h1>
        <p>
            <a th:href="@{/blogs/new(creatorId=${creatorId})}">생성</a>
        </p>
        <table>
            <thead>
            <tr>
                <th>#</th>
                <th>제목</th>
                <th>내용</th>
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="blog : ${blogs}">
                <td th:text="${blog.id}"></td>
                <td th:text="${blog.title}"></td>
                <td th:text="${blog.contents}"></td>
                <td><a th:href="@{/blogs/update(blogId=${blog.id},creatorId=${creatorId})}">수정</a></td>
                <td>
                    <form th:action="@{/blogs/delete(blogId=${blog.id},creatorId=${creatorId})}" th:method="delete">
                        <button type="submit">삭제</button>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>
image

2. 블로그 생성

  • Path: /blogs/new
  • Query parameter: creatorId
    • DB에 creatorId 가 없으면 에러 throw
  • 등록 버튼
    • DB에 creatorId 가 없으면 에러 throw
    • 성공: 블로그 리스트 페이지
    • 실패: 에러 throw
createBlogForm.html 
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <h1><span th:text="${name}"/>의 블로그</h1>
    <form action="/blogs/new" method="post">
        <input type="hidden" id="creatorId" name="creatorId" th:value="${creatorId}">
        <div class="form-group">
            <label for="title">제목</label>
            <input type="text" id="title" name="title" placeholder="제목을 입력하세요">
        </div>
        <div class="form-group">
            <label for="contents">내용</label>
            <textarea id="contents" name="contents" placeholder="내용을 입력하세요"></textarea>
        </div>
        <button type="submit">등록</button>
    </form>
</div> <!-- /container -->
</body>
</html>
image

3. 블로그 수정

  • Path: /blogs/�update
  • Query parameter
    • creatorId
      • creatorId 가 없으면 에러 throw
    • blogId
      • blogId 가 없으면 에러 throw
  • 등록 버튼
    • creatorId 가 없으면 에러 throw
    • 성공: 블로그 리스트 페이지
    • 실패: 에러 throw
updateBlogForm.html 
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <h1><span th:text="${name}"/>의 블로그</h1>
    <form action="/blogs/update" method="post">
        <input type="hidden" id="creatorId" name="creatorId" th:value="${creatorId}">
        <input type="hidden" id="id" name="id" th:value="${blog.id}">
        <div class="form-group">
            <label for="title">제목</label>
            <input type="text" id="title" name="title" placeholder="제목을 입력하세요" th:value="${blog.title}">
        </div>
        <div class="form-group">
            <label for="contents">내용</label>
            <textarea id="contents" name="contents" placeholder="내용을 입력하세요" th:text="${blog.contents}"></textarea>
        </div>
        <button type="submit">등록</button>
    </form>
</div> <!-- /container -->
</body>
</html>
image

4. 블로그 삭제

  • 삭제 버튼
    • creatorId 가 없으면 에러 throw
    • 성공: 블로그 리스트 페이지
    • 실패: 에러 throw
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Sprint 1

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions