본문 바로가기

[스프링 부트 + JPA + MySQL] 간단한 회원 관리 예제로 알아보는 스프링 부트 -4탄 Controller와 웹화면 만들기

ironwhale 2022. 11. 16.

마지막으로 실제 웹 화면을 보여주는 Controller부분입니다. 이 부분은 자바 뿐아니라 HTML도 어느 정도 알고 있어야되는 부분입니다. 처음 스프링을 공부하기로 마음 먹고서 패스트캠퍼스의 남궁성님의 강의과 인프런의 김영한님의 강의 중에 고민을 많이 했는데 저는 김영한 님의 강의를 선택하였습니다.

그 이유는
1. 무료로 스프링부트가 어떤거구나 알려주는 강의여서
2. 배달의 민족과 같이 대규모 서비스를 구축해본 경험과 실제로 사용하는 것만 가르쳐준다
이 두가지 이유로 김영한님의 강의를 선택하였고, 유료 강의도 두개 이미 결제하였습니다.

아무튼 스프링 부트를 시작하시려는 분들께 저의 포스팅이 조그이나마 도움이 되실기 빕니다.
그럼 마지막 컨트롤러 부분을 시작해보겠습니다.

HomeController 만들기

스프링 부트를 빌드하고 제일 처음 만나는 화면입니다. 여기서 리턴값으로 home이라는 스트링을 반환하는데 스프링에서는 이것으로 "home.html"을 찾습니다. 127.0.0.1:8080으로 접속하면 아래와 같은 화면이 나옵니다.

스프링 부트 홈화면
스프링 부트 홈 화면

HomeController.java

  • @Controller라고 쓰면 자동으로 스프링에서 컨트롤러를 인식합니다.
  • GetMapping: 겟 방식 사용할 때 사용합니다.
  • return "home" 스프링에서 home.html 파일을 받아 화면에 보여줍니다. 
package com.example.demo.controller;

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

@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와 MemberForm이 필요합니다.

회원가입 화면
회원목록 조회

MemberController

  • @Controller를 사용하였기 때문에 스프링에 등록이 되어 있기 때문에 MemberService가 자동으로 주입이 됩니다.
  • "members/createMemberForm" 이렇게 하면 스프링에서 members 폴더에 createMemberForm.html을 찾습니다.
  • PostMapping을 통해 post로 서버에 데이터를 보낼수 있습니다.
    • MemberForm을 통해 HTML에서 받은 name과 매칭되어 받아올 수 있습니다.  
package com.example.demo.controller;

import com.example.demo.domain.Member;
import com.example.demo.service.MemberService;
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;

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

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

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

        memberService.join(member);

        return "redirect:/";
    }

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

    }

}

MemberForm

스프링에서 html의 name="name" 과 MemberForm의 name을 자동으로 매칭 시켜줍니다. 

package com.example.demo.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

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

회원 조회

model.addAttribute("키", "값")을 이용해서 html로 회원 목록을 보냅니다. 이렇게 하면 ${member.name}처럼 데이터에 접근할 수 있습니다. 

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

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

마치며

이렇게 김영한님의 무료 강의에서는 H2 데이터베이스를 사용했는데 저는 이것을 MySQL로 바꿔 보았습니다. 그리고 JPA라는 ORM을 이용하여 간단한 회원 가입 조회 예제를 만들어 보았습니다. 이 무료 강의도 4강이 남았지만 무료 강의를 보고 더 배워보고 싶어 김영한님이 추천하신 야생루트 순서인 스프링 핵심원리-기본편과 실전 스프링 부트와 JPA활용1을 바로 결제하였습니다.

무료지만 많은 스프링의 전반적인 내용을 한 번 훝고 이번 4번의 포스팅을 통해 제 머릿속에 한번 더 정리해보는 시간을 가져 보았습니다.

이전 편

2022.11.14 - [스프링 부트 + JPA + MySQL] 간단한 예제로 알아보는 스프링부트 -1탄 DB 설정편
2022.11.14 - [스프링 부트 + JPA + MySQL] 간단한 예제로 알아보는 스프링부트 -2탄 Repository 만들기
2022.11.15 - [스프링 부트 + JPA + MySQL] 간단한 예제로 알아보는 스프링 부트 -3탄 Service 만들기

저작자표시 비영리 동일조건

'프로그래밍사업 > 사이드 프로젝트' 카테고리의 다른 글

[spring] application.properties 여러개 만들어서 편하게 설정 변경하기  (0) 2023.02.11
[자바] 날짜를 요일로 바꾸기  (0) 2022.12.09
[스프링 부트 + JPA + MySQL] 간단한 회원관리 예제로 알아보는 스프링 부트 -3탄 Service 만들기  (0) 2022.11.15
윈도우에서 스프링 빌드(build) 하는 방법  (0) 2022.11.14
[스프링 부트 + JPA + MySQL] 간단한 회원 관리 예제로 알아보는 스프링부트 -2탄 Repository 만들기  (0) 2022.11.14

관련글

댓글

티스토리툴바