홈 화면 추가

HomeController.java와 home.html을 각각 생성한다.

HomeController.java 
...
@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home";
    }
}
home.html 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <div class="container">
    <h1>Hello Spring</h1>
    <p>회원 기능</p>
    <p>
      <a href="/members/new">회원 가입</a>
      <a href="/members">회원 목록</a>
    </p>
  </div>
</body>
</html>

빌드하고 localhost:8080 접속하면 위 화면이 나온다. 지난 번에 static/index.html 파일을 만들어서 Controller에 루트 컨텍스트("/")가 없으면 해당 파일을 보여주도록 했으나, 이번에는 Controller에 루트 컨텍스트를 지정하여 template/home.html 파일을 보여준다. 두 버튼에 대해서는 아직 화면이 없어서 오류 화면으로 넘어간다.

등록 화면 추가

MemberController.java 
...
    @GetMapping("members/new")
    public String createForm() {
        return "members/createMemberForm";
    }

    @PostMapping("members/new")
    public String create(MemberForm form) {
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";
    }
...
createMemberForm.html 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <div class="container">
    <form action="/members/new" method="post">
      <div class="form-group">
        <label for="name">이름</label>
        <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
      </div>
      <button type="submit">등록</button>
    </form>
  </div>
</body>
</html>
MemberForm.java 
...
public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

홈 화면에서 회원 가입을 클릭하면 방금 만든 등록 화면(template/createMemberForm.html)으로 이동한다. 이동하면 위와 같이 이름을 입력하고 등록할 수 있는 버튼이 생긴다. 여기서 form을 활용하게 되는데, form 태그에 명시한대로 등록(submit) 버튼을 클릭하면 POST 메소드를 사용해 /members/new를 호출한다. MemberController에서 @PostMapping 어노테이션을 달고 있는 메소드를 찾고, 실행한다. MemberForm에 private로 생성한 name에 input 태그에 명시한 name 프로퍼티의 값이 name으로 같을 때 해당 MemberForm 데이터로 들어가고, 이 name으로 member를 생성, 홈 화면으로 돌아간다.

조회 화면 추가

MemberController.java 
...
   @GetMapping("/members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }
memberList.html 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <div class="container">
    <table>
      <thead>
      <tr>
        <th>#</th>
        <th>이름</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="member : ${members}">
        <td th:text="${member.id}"></td>
        <td th:text="${member.name}"></td>
      </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

메모리에 저장하다보니 재시작 하면 목록에 아무것도 안 나온다.

등록 화면에서 회원을 등록하면 위 처럼 id와 name이 나온다. 조회 화면에 들어오면 findMembers() 메소드로 회원 목록을 조회하고, List를 Model에 추가하여 memberList.html로 전달한다. 그럼 thymeleaf가 th:each로 members List를 순회하며 member의 id와 name을 반복하여 출력하는 형태이다.

'스터디 > Spring' 카테고리의 다른 글

Spring 스터디 - 7  (1) 2025.03.09
Spring 스터디 - 6  (0) 2025.02.18
Spring 스터디 - 4  (0) 2025.02.16
Spring 스터디 - 3  (0) 2025.02.12
Spring 스터디 - 2  (0) 2025.02.10

+ Recent posts

티스토리툴바