[인프런_스프링입문]섹션 5. 회원 관리 예제 - 웹 MVC 개발

이도은·2021년 11월 16일
0

스프링입문

목록 보기
3/4
post-thumbnail

회원 웹 기능 - 홈 화면 추가


홈 컨트롤러 추가

package hello.hellospring.controller;

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

@Controller
public class HomeController {

    @GetMapping("/")    //localhost:8080으로 바로 들어옴
    public String home() {
        return "home";  //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>

</body>
</html>

ㆍ전에는 localhost:8080으로 접속하면 index.html로 반환되었다. 하지만 이번 강의에서는 HomeController에서 GetMapping("/")으로 home.html을 반환값으로 만들었기 때문에 home.html이 화면창에 뜨게 된다.

ㆍlocalhost:8080/으로 접속하면 스프링 부트 안에 내장되어있는 스프링 컨테이너에서 관련 컨트롤러를 찾고, 찾지 못했다면 웰컴페이지인 index.html로 넘어가게된다.
ㆍ하지만 이번 수업에서는 HelloController 안에 home.html을 반환값으로 두었기 때문에 웰컴페이지인 index.html로 넘어가지 않고 스프링 컨테이너 안에 있는 home.html을 화면창에 호출하게 된다.




회원 웹 기능 - 등록


회원 등록 폼 개발


회원 등록 폼 컨트롤러

@Controller
public class MemberController {

    private final MemberService memberService;

    @Autowired  //memberCotroller와 memberService 자동 연결 기능
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @GetMapping("/members/new")	//이 주소로 입력하면
    public String createForm() {
        return "members/createMemberForm";	//createMemberForm으로 이동.
    }

}

회원 등록 폼 HTML(resources/templates/members/createMemberForm)

<!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="이름을 입력하세요">   //name="name" : 키 값
        </div>
        <button type="submit">등록</button>
    </form>

</div>

</body>
</html>

ㆍmembers/new 주소를 입력하면 createMemberForm.html이 화면창에 뜬다.



회원 등록 컨트롤러


웹 등록 화면에서 데이터를 전달 받을 폼 객체

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

회원 컨트롤러에서 회원을 실제 등록하는 기능

@PostMapping("/members/new")    //GET:가져오는것. POST:수행하는것.
    public String create(MemberForm form) {
        Member member = new Member();
        member.setName(form.getName()); //createMemberForm.html에 입력된 이름을 member 클래스 내에 저장.

        memberService.join(member); //멤버서비스 내에 있는 회원가입 시키기

        return "redirect:/";    //원래 창("/members/new")으로 돌아가기
    }



회원 웹 기능 - 조회


회원 컨트롤러에서 조회 기능

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

회원 리스트 HTML(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}">	//members 리스트
                <td th:text="${member.id}"></td>	//members 리스트 내 member 클래스 내 id 
                <td th:text="${member.name}"></td>	//members 리스트 내 member 클래스 내 name
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>

</html>



참고자료: 인프런 스프링입문 김영한님 강의노트

0개의 댓글