[Spring] 등록 페이지와 등록 처리

in Study on Spring, Web
[Spring] 등록 페이지와 등록 처리

등록 처리 기능을 구현해봅시다.


등록의 처리는 GuestbookService까지 완성했기 때문에 GuestbookController에 약간의 코드를 추가하는 것으로 처리가 가능합니다.


1. GuestbookController 코드 추가


1

등록 작업을 처리할 때 @GetMapping과 @PostMapping 방식을 이용합니다. GET에서 화면을 보여주고 POST에서 처리 후에 목록 페이지로 이동합니다.
이때 RedirectAttributes를 이용해 일회성으로 데이터를 전달할 msg라는 이름의 변수를 사용합니다. msg를 사용해 화면 상에 모달 창을 보여주도록 합니다.

2. register.html 작성


2

등록을 위한 화면인 register.html을 작성합니다.
form 태그를 사용해 action의 속성을 ‘/guestbook/register’로 지정하고 POST 방식으로 전송하게 합니다. 각각의 input 태그에 적절한 name값을 지정해 GuestbookDTO에 수집되게 합니다.

3. register.html 확인


3

작성한 register.html을 ‘/guestbook/register’를 통해 들어가 살펴보면 정상적으로 제목, 글, 작성자를 입력할 수 있고 Submit버튼이 존재하는 것을 확인할 수 있습니다.

4. 등록 처리 결과 확인


4

register 페이지에서 submit 버튼을 누른 뒤 목록창을 확인하면 정상적으로 데이터가 추가된 것을 확인할 수 있습니다.

5. 등록처리와 목록 페이지의 모달창


5

등록 처리는 Post 방식으로 수행된 뒤 ‘/guestbook/list’로 이동하도록 처리 되어 있습니다. 처리가 완료된 후 목록으로 이동할 때 모달창을 통해 결과를 알려주도록 처리합니다.
list.html의 하단에 JavaScript를 이용해 만약 msg값이 null이 아닐 경우 모달창이 나오도록 코드를 작성합니다.

6. 모달창 확인


6

등록을 마친 후 목록으로 돌아가면 모달창이 나오는 것을 확인할 수 있습니다.

7. 등록 페이지 링크와 조회 페이지 링크 처리


7

목록 페이지에서 글을 작성하는 register로 이동하기 위한 링크를 생성합니다. 위 그림의 첫 빨간 상자와 같이 버튼을 만듭니다.
다음으로 목록 페이지에서 글을 조회하는 read로 이동하기 위한 링크를 생성합니다. 두 번째 빨간 상자와 같이 gno에 링크를 달아 조회 페이지로 넘어갈 수 있도록 합니다.
조회 페이지로 이동하는 링크를 Thymeleaf를 통해 (키 = 값)의 형태로 처리해 가독성 높은 코드를 작성할 수 있습니다.

8. 조회 페이지 링크 확인


8

브라우저를 통해 목록 페이지를 살펴본 결과 gno에 링크가 정상적으로 달려있는 것을 확인할 수 있습니다.

9. 등록 페이지 링크 확인


9

목록 페이지의 REGISTER 버튼을 누른 결과 정상적으로 Register 페이지로 이동하는 것을 확인할 수 있습니다.

© 2022. All rights reserved.