[작성일: 2023. 05. 16]

 

회원 웹 기능 - 홈 화면 추가

HomeController

  • localhost:8080을 입력하면 home.html을 보여준다.
  • 기존에 있던 static의 index.html은 무시된다.
@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">
    <div>
        <h1>Hello Spring</h1>
        <p>회원 기능</p>
        <p>
            <a href="/members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p>
    </div>
</div> <!-- /container -->
</body>
</html>

 

실행 화면

 

 

 

 

회원 웹 기능 - 등록

회원 등록 폼 개발

MemberController

  • 기존의 컨트롤러에 아래의 코드를 추가해준다.
@GetMapping("/members/new")
public String createForm() {
    return "members/createMemberForm";
}

 

 

 

createMemberForm.html

  • 경로 : resources/templates/members/createMembersForm
  • 이름을 spring이라고 입력하면 서버로 spring이라는 이름이 넘어간다.
  • name = "name"이 key가 된다.
  • 등록을 누르면 members/new의 post방식으로 넘어온다. (MemberController에 작성해둔 PostMapping.)
<!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>

 

회원가입 버튼을 누르면 나오는 화면

 

MemberForm

public class MemberForm {
 
    private String name;  // 이 name에 form에서 입력한 name이 들어온다.
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
}

 

 

MemberController

  • 맨 아래 부분에 코드를 추가한다.
  • 데이터를 form에 넣어서 전달할 때 PostMapping, GetMapping은 보통 조회할 때 사용한다.
  • 회원가입 Test를 해보면 확인 후 홈화면으로 돌아가는 것을 확인할 수 있다.
  • 혹시나 데이터가 잘 넘어오는지 확인하고 싶다면 println(member.getName());을 사용하면 인텔리제이에서 확인할 수 있다.
@PostMapping("/members/new")
public String create(MemberForm form) {
    Member member = new Member();
    member.setName(form.getName());
 
    memberService.join(member);
    return "redirect:/";  // 회원가입 후 홈 화면으로 돌려보낸다.
}

println으로도 검증

 

 

 

 

 

회원 웹 기능 - 조회

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}">
 <td th:text="${member.id}"></td>
 <td th:text="${member.name}"></td>
 </tr>
 </tbody>
 </table>
 </div>
</div> <!-- /container -->
</body>
</html>

 

  • 회원가입 후 회원 목록을 확인하면 2개가 등록된 것을 확인할 수 있다.
  • 페이지 소스를 확인하면 템플릿 언어에서 members를 읽고, 루프를 돌며 로직을 실행한다. 

회원가입 후 회원목록 조회시
소스 확인 시

 

 

 

 

 

 

 

 

 

 

🐣 출처: 인프런 김영한님 강의

 

이 글은 인프런의 김영한님 스프링 강의를 보고 작성한 글입니다.

강의를 들으면서 정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.

 

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바