home MVC

강한친구·2022년 3월 29일

Spring 입문

목록 보기

6/10

Home 화면 구성

유저가 보는 home 화면을 구성하고, 화면에서 필요한 기능들을 구현해보겠다.

homeController

우선 home 화면을 관리해주는 컨트롤러 파일을 만들어야한다.

package com.example.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
    @GetMapping("/")
    public String Home() {
        return "home"; // call home.html
    }
}

index.html이 아닌 이유

앞선 글에서도 설명했지만 스프링은 클라이언트로부터 요청이 오면
1. 컨트롤러 찾고
2. 컨트롤러에 없다면 스테틱을 찾음

index.html은 스테틱이다. 따라서 homeController에 home.html이 mapping 되어 있기때문에 index.html보다 우선순위에 온다.

home.html

html 코드는 김영한 복붙하여 사용하였다. 링크

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<div class="container">
    <div>
        <h1>Hello Spring</h1>
        <p>회원 기능</p>
        <p>
            <a href="members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p>
    </div>
</div>

</body>
</html>

이렇게 생긴 아주 간단한 화면이다.

이제 회원가입을 누르면 가입화면으로, 목록을 누르면 목록으로 연결해주는 기능을 구현하면 된다.

회원가입

회원가입은 members/new, members/createMemberForm html에서 처리한다. 따라서 memberController에서 이를 관리한다.

members/new는 위에 작성한 home태그에서 이미 구현된 항목이다.

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

getmapping을 통해서 members/new에서 createMemberForm으로 이동을 하도록 설정한것이다.

이처럼 members/new에서 createMemberForm.html을 호출하는것을 알 수 잇다.

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> <!-- /container -->
</body>
</html>

form 태그를 이용해서 값(name)을 입력받고, post method로 넘겨주는 방식이다.

이 post method는 컨트롤러의 postmapping을 감지하고 작동한다.

postmapping을 가진 create method는 다음과 같다.

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

        memberService.join(member); // service function

        return "redirect:/";
    }

package com.example.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

여기서 MemberForm form은 getter setter를 가진 MemberForm 클래스이다. controller로 부터 name을 받아서 이를 처리한다.

Member form에 넘어온 name값을 넘겨준다.
member 객체를 새로 만들고, form에서 name을 받아서 저장한다.
service에 join기능으로 가입을 한다.
home으로 리다이렉트한다.

회원 조회

조회는 home에서 members/에서 memberslist.html을 받아서 사용한다.

    @GetMapping("/members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";

List형태로 service의 findMembers() 값들은 받는다. 그 후, model.addAttribute를 통해서 members attribute를 members variable에 넣는다.

그 후, memberList.html을 통해 이를 처리하고 출력해주면 된다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <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>
</div> <!-- /container -->
</body>
</html>