회원 등록/조회 제작

guswls·2023년 1월 19일

스프링 입문

목록 보기

7/13

이 포스트는 김영한 이사님의 스프링 입문 강의를 듣고 작성하였습니다.

1. 홈

1-1. HomeController 제작

package memberpractice.memberpractice.controller;

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

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

전에 다뤄봤던 내용이기 때문에 자세한 설명은 생략하고 GetMapping의 주소로 /를 하면 주소의 루트 도메인으로 연결된다.

1-2. 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>

html파일에 대한 자세한 설명은 생략한다. thymeleaf를 통해서 웹페이지를 만들었다.
실행하면 localhost:8080에 다음과 같은 페이지가 나타나게 된다.

참고

웰컴 페이지에 대한 우선순위는 컨트롤러가 가지고 있다. 스프링은 홈화면을 띄울 때 먼저 컨트롤러를 탐색한 다음에 없으면 /static의 index.html을 탐색한다. 따라서, 컨트롤러에서 홈화면을 지정하면 index.html은 무시된다.

2. 회원 등록

2-1. memberController (GET 맵핑)

@Controller
public class memberController {
    private final MemberService memberService;

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

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

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

화면을 이와 같이 구성하고 memberController에서 주소와 매핑해주고 접속하면 다음과 같은 화면이 뜰 것이다.
form에서 POST요청으로 클라이언트에서 서버로 데이터를 보내도록 구성을 해주었다.

2-3. MemberForm

package memberpractice.memberpractice.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

이렇게 클래스로 만들어주면 createMemberForm.html의 input의 name과 값이 매칭되어 넘어온다.

2-4. memberController (POST 맵핑)

package memberpractice.memberpractice.controller;

import memberpractice.memberpractice.domain.Member;
import memberpractice.memberpractice.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class memberController {
    private final MemberService memberService;

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

    @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:/";
    }
}

members/new에서 POST요청도 처리할 수 있도록 만들었다.

간단하게 프린트를 통해 값을 찍어봤을 때 우리가 폼에서 임력한 데이터인 "spring"이 올바르게 넘어왔음을 확인할 수 있다.

2-5. 폼 데이터를 입력받는 과정

/members/new에 있는 폼을 통해서 자바의 메모리에 값이 저장되는 일련의 과정을 살펴보았다. 이를 간단히 정리하면 다음과 같다.

클라이언트가 /members/new에 대해 GET요청으로 접속하면 우리가 구현한 Form화면이 뜬다.

Form에 name을 입력하고 제출하면 /members/new에 대해 POST요청으로 서버에 값이 전달된다.

전달된 값은 MemberForm의 객체로 저장된다.

MemberController에서 /members/new에 대해 PostMapping된 create메소드가 동작한다.

create에서는 MemberForm을 파라미터로 받아 name값을 가져오고 우리가 구현한 join()메소드를 통해 메모리에 저장된다.

3. 회원 조회

3-1. memberController (GET 맵핑)

package memberpractice.memberpractice.controller;

import memberpractice.memberpractice.domain.Member;
import memberpractice.memberpractice.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@Controller
public class memberController {
    private final MemberService memberService;

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

    @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);

        System.out.println("member = " + member.getName());

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

우리가 memberService에 구현한 findMembers()를 통해서 멤버 리스트를 가져와서 thymeleaf를 통해 구현된 웹페이지에 뿌려주도록 구현을 하였다.

3-2. 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>