서강덕

코린이의 개발 성장기📝

홈 컨트롤러 추가

웹에서 회원을 등록하고 조회하는 버튼이 들어있는 사이트를 만들기 위해서는 우선 controller 패키지안에 MemberConroller java 클래스를 생성하자.

package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

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

return 값이 home.html이므로 templete 패키지 안에 home.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> <!-- /container -->
</body>
</html>

앞선 포스팅에서 indext.html이 제일 먼저 보여진다고 설명했다. 그러나 HomeController에서 GetMapping의 URL을 보면 “/”으로 매핑이 되어서 home.html을 반환한다.

회원 등록 컨트롤러 추가

MemberCotroller 생성

@Controller
public class MemberController {
    private final MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

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

members 디렉토리 밑에 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>

웹 등록 화면에서 데이터를 전달 받을 객체를 정의해야한다. controller 아래에 MemberForm java 클래스를 만들자.

package hello.hellospring.controller;

public class MemberForm {
    private String name;

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

    public String getName() {
        return name;
    }
}

컨트롤러에서 회원 객체를 받아 등록하는 기능

@PostMapping(value = "/members/new")
public String create(MemberForm form) {
    Member member = new Member();
    member.setName(form.getName());
    memberService.join(member);
    return "redirect:/"; //home으로 이동
}

createMemberForm.html을 보자.

<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>

메소드를 POST방식으로 선언했기때문에 등록 button을 누르는 순간 PostMapping으로 이동하게 된다. 그때 input 태그에서 스프링은 name=”name”을 보고 MemberForm 객체의 setName을 호출해 text 값을 name에 넣어주고 create 함수가 수행된다.

회원 조회 컨트롤러 추가

memberController에 코드를 추가하자.

@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">
    <div>
        <table>
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${members}"> <!-- each: loop를 돈다-->
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

컨트롤러에서 회원들의 목록을 담은 members가 memberList.html로 넘어가게되고 <tr th:each="member : ${members}">에서 member 객체를 하나씩 루프문을 돌면서 테이블에 id와 name을 출력해준다. 여기서 model의 key 값이 “memebers”이기 때문에 html 코드에서도 memebers를 써준다.
그러나 회원 리스트를 메모리에 저장하여 서버가 꺼지면 저장된 메모리도 날아가기 때문에 보통 Database에 저장을 한다. 다음 포스팅에서 스프링 DB 접근 기술을 쓰겠다.

참고

조회를 할 때는 Get 방식, 등록할 때는 Post 방식을 주로 사용한다고 한다.

카테고리:

업데이트:


Comments