[일정 관리 앱] 일정을 생성하고 조회하기 - html view 반환

 

 

요구사항

• 일정 생성 (할일, 작성자명, 비밀번호, 작성/수정일)
  • 고유 식별자를 자동 생성하여 관리
• 일정 조회
  • [수정일 | 작성자명] 기준으로 정렬
  • 하나만 충족하거나, 모두 충족 가능
  • 수정일 기준 내림차순 정렬
• 선택 일정 조회
  • 식별자를 사용해 단건 일정 조회

 

 

* 취소선 체크된 것은 아직 개발x

 

 

---

 

 

1. Schedule Entity 작성

일정에 관련된 내용을 저장할 Entity를 먼저 생성

@Setter
@Getter
@AllArgsConstructor
public class Schedule {
    private long id;
    private static long nextId = 0;

    private String title;
    private String user;
    private String content;
    private String password;

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate date;
}

id 식별자, title 제목, user 작성자, content 내용, password 비밀번호, date 작성/수정일
date의 경우 DateTimeFormat을 이용해 형식을 지정해주었다.

 

 

id 자동 지정

    public Schedule(){
        this.id = nextId++;
    }

생성자를 이용해 식별자 역할을 위한 id 값을 자동으로 증가시키며 저장하였다.
새로운 일정이 생기면 id가 1씩 증가하여 저장하였다.

 

 

date 자동 지정

    public LocalDate getDate(){
        return LocalDate.now();
    }

@Getter 어노테이션을 사용했지만 다른 것과 달리 작성/수정일은 작성한 날짜를 기준으로 자동 지정되기 때문에 getDate작성

 

 

commit code: fff7b8e, ce7d584

 

 

---

 

 

2. 생성한 일정 List로 관리해서 조회

 

 - 일정을 서버에 등록

<form action="/schedule/add" th:object="${schedule}" method="post">
    <div>
        <label th:for="user">작성자</label>
        <label th:for="password">비밀번호</label>
        <label th:for="title">제목</label>
        <label th:for="content">내용</label>
    </div>

    <div>
        <input type="text" th:field="*{user}" placeholder="작성자를 입력하세요"/>
        <input type="text" th:field="*{password}" placeholder="비밀번호를 입력하세요"/>
        <input type="text" th:field="*{title}" placeholder="제목을 입력하세요"/>
        <textarea th:field="*{content}" placeholder="내용을 입력하세요"></textarea>

        <button type="submit">확인</button>
    </div>

</form>

 

th:object="${}"를 form 태그에 넣어 하위 태그에는 th:filed="\*{}"로 작성하였다.
th:filed="${schedule.id}" 와 동일하며 좀 더 간결하게 작성하는 방식을 선택

 

th:filed를 이용해 th:id, th:name, th:value를 자동으로 처리해주었다.
각 input에 입력한 내용이 해당 filed로 넘어가고, submit으로 입력을 서버로 전송한다.

 

    private final List<Schedule> scheduleList = new ArrayList<>();

    @GetMapping("/add")
    public String getInputPage(Model model) {
        model.addAttribute("schedule", schedule);
        return "add-schedule";
    }
    @PostMapping("/add")
    public String addSchedule(@ModelAttribute Schedule schedule) {
        scheduleList.add(schedule);
        return "redirect:/schedule";
    }

 

입력을 위한 기능을 위와 같이 작성하였다.

입력 페이지를 GET으로 받아오고, 해당 페이지에서 POST로 작성 후 redirect로 넘겨주기
전체 일정 관리를 위해 List에 추가한 일정을 add() 하는 것도 잊지 않았다.

 

 

💡 일정 POST하기 위한 페이지를 GET

 

가장 많은 시간이 들었던 것은 POST였다.
create는 단순히 POST라고 알고 있었고, 사용자가 정보를 작성=새로 생성하니 POST라고 생각했다.

 

입력을 위해 @PostMapping만 사용해 페이지에 접근하려고 했지만 계속 405에러가 발생했다.
405에러는 잘못된 method로 접근했을 때 발생하는 에러였고, method를 GET으로 변경하니 페이지에 접근할 수 있었다.

하지만 원하는 것은 정보를 '생성'하는 것. GET이 아닌 POST여야 했다.

 

 

아주 단순하게 생각하면 금방 풀리는 문제 POST로 입력을 할 때도 결국엔 입력을 위한 페이지를 가져와야 하는 것

 

지정한 url이 동일해도 요청하는 method에 따라 해당하는 기능을 호출한다.
위에 작성한 자바 코드도 @GetMapping("/add")와 @PostMapping("/add")가 같아도 요청에 따라 달라지기 때문에 가능하다.

 

 

.

 

 

- List의 각 요소를 가져와 화면에 출력

 

<table>
    <tr>
        <th>번호</th>
        <th>제목</th>
        <th>날짜</th>
    </tr>
    <tbody>
    <tr th:each="schedule : ${schedules}">
        <td th:text="${schedule.id}"></td>
        <td id="s_title_list">
            <a th:href="@{/schedule/{id}(id=${schedule.id})}" th:text="${schedule.title}"></a>
        </td>
        <td th:text="${schedule.date}"></td>
    </tr>
    </tbody>
</table>

 

table을 이용해 출력화면 구성

 

첫번째 행은 화면에 출력할 기준을 작성
두번째 행부터 List의 값을 가져와 하나씩 출력한다.

 

 

조회된 일정의 제목이 있는 부분에 링크를 걸어 /schedule/{id} 로 이동하도록 작성
해당 id는 ${schedule.id}로 선택한 일정의 id로 가져온다.

 

 

    @GetMapping()
    public String getScheduleList(Model model) {
        model.addAttribute("schedules", scheduleList);
        return "schedule-list";
    }

 

List를 schedules라는 이름으로 넘겨주고, html에서 schedules를 받아 사용했다. → <tr th:each"schedule : ${schedules}">

 

 

---

 

 

3. 선택 일정 조회

 

<p><strong>작성자</strong>　<span th:text="${schedule.user}"/> </p>
<hr>
<p><strong>제목</strong>　<span th:text="${schedule.title}"/></p>
<br>
<p th:text="${schedule.content}"/> </div>
<hr>
<p th:text="${schedule.date}"/>

<br><br>
<a href="/schedule">
    <button type="button">목록</button></a>

 

선택한 schedule에서 작성자, 제목, 내용, 작성일을 출력

 

    @GetMapping("/{id}")
    public String getSchedule(Model model, @PathVariable Long id) {
        schedule = scheduleList.stream().filter(s -> s.getId() == id).findFirst().orElse(null);
        model.addAttribute("schedule", schedule);
        return "check-schedule";
    }

.

@PathVariable로 특정 값을 기준으로 Mapping
전체 일정에서 선택한 내용을 가져오기 위해 id를 이용하였다.

 

List.stream().filter()를 통해 id를 확인해서 가져왔다.

 

 

🛠️

여기서 해결 못한 문제는 null을 반환하고 있는 것.
생성된 일정에서 직접 선택해 조회하니 null이 나올 일은 없지만 null을 직접 사용하는 걸 어떻게 없앨까 고민을 해야 했다.

 

 

 

commit code: 8b0f6e3, b9463a6

 

 

---

 

 

실행 화면

 

 

localhost:8080/schedule

 

등록을 누르면 입력 화면(/schedule/add)으로 이동

 

 

localhost:8080/schedule/add

 

입력 창에서 작성자, 비밀번호, 제목, 내용을 입력하고 확인을 누르면 입력 정보가 서버로 전송
확인을 누르면 [일정 목록]으로 이동

 

 

일정이 있는 경우 localhost:8080/schedule

 

 

보고 싶은 일정의 제목을 누르면 상세 조회로 이동

 

 

localhost:8080/schedule/{id}

 

작성자, 제목, 입력 내용과 함께 작성한 날짜를 화면에 출력

 

 

---

 

 

 

다음 계획

• 일정 수정
  • title, content, user만 수정 가능
  • 수정 요청 시 비밀번호 함께 전달
  • date는 수정한 시점으로 변경
• 일정 삭제
  • 삭제 요청 시 비밀번호 함께 전달
• 수정과 삭제는 비밀번호가 동일해야 수정/삭제 가능

 

 

수정 계획

• 수정일, 작성자명 기준으로 정렬
• 목록에서 [제목]이 아닌 해당 [행]을 누르면 조회하도록 변경