mojo's Blog

회원 관리 예제 - 웹 MVC 개발 본문

Spring

회원 관리 예제 - 웹 MVC 개발

_mojo_ 2022. 1. 13. 15:50

회원 웹 기능 - 홈 화면 추가

 

1. controller 폴더 아래에 HomeController 클래스를 형성한 후에 다음과 같이 코드를 작성한다.

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";
    }
}

 

2. [resources] -> [templates] 폴더 아래에 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>

 

3. HelloSpringApplication 을 실행시킨 후 localhost:8080 을 실행시켜서 다음과 같은 화면이 나오는지 확인한다.

 

 

회원 웹 기능 - 등록

 

1. templates 폴더 아래에 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>

</body>
</html>
  • form 에서 action = "/members/new", method = "post" 이다. 즉, 컨트롤러 측에서 @PostMapping("/members/new") 애너테이션을 통해 메서드가 실행되는 것을 짐작할 수 있다.

 

2.  controller 폴더 아래에 MemberForm 클래스를 형성한 후 다음과 같이 코드를 작성한다.

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

 

3. controller 폴더 아래의 MemberController 클래스에 다음 코드를 추가해준다.

    @PostMapping("/members/new")
    public String create(MemberForm form){
        Member member = new Member();
        member.setName(form.getName());
        memberService.join(member);
        return "redirect:/";
    }
  • @PostMapping("/members/new") : createMemberForm.html 에서 이름을 입력한 후에 등록버튼을 누르면 현재 애너테이션으로 이동하는 것을 짐작할 수 있다.
  • MemberForm form : 이름을 입력하여 등록버튼을 누르면 자동으로 name 값이 세팅이 되어 MemberForm의 객체가 파라미터로 넘어오게 된다.
  • return "redirect:/" : 홈 화면으로 넘어가도록 한다.

 

MemberForm form 객체에 대한 자세한 내용

HTML 폼에 어떤 자료를 작성하고 전송하면 HTTP 헤더 혹은 바디에 폼의 이름과 사용자가 입력한 값들을 짝을 지어서 전달하게 된다. (폼 전송방식이 GET일 경우 헤더에, POST일 경우 바디에 전달) 

이 때 전달하는 양식은 name=spring&age=13 처럼 키와 값으로 이루어져 있고 &로 구분되어 있다.

웹 개발에서는 대부분의 코드가 이 사용자가 입력한 폼값에 대한 처리라고 봐도 된다. (나머지 반은 데이터베이스에 이 값을 넣거나 빼오거나 함).

거기다가 사용자가 정확한 값을 입력하였는지 일일히 검토를 해야하기 때문에 매우 반복적이고 지루한 작업이다.

 

따라서 스프링 프레임워크에서 이를 자동으로 처리해주는 기능을 제공하는 것이다.

폼에 있는 input 태그의 '이름' (name) 과 컨트롤러가 받아야 하는 객체 (여기서는 MemberForm)가 가지고 있는 필드중 이름이 일치하는 것이 있다면 자동으로 값을 할당한 후 컨트롤러의 파라미터로 전달하게 된다.

 

4. 이름을 입력하여 정상적으로 홈 화면으로 넘어가는지 확인한다.

 

새로운 이름을 입력하면 정상적으로 홈 화면으로 넘어간다.

 

기존에 있던 이름을 입력하면 예외가 발생하므로 에러 페이지가 뜬다.

 

 

회원 웹 기능 - 조회

 

 

1. controller 폴더 안의 MemberController 클래스에 다음과 같이 코드를 추가한다.

    @GetMapping("/members")
    public String list(Model model){
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }
  • @GetMapping("/members") : home.html의 회원 목록을 누르면 해당 애너테이션이 반응하게 된다.
  • Model model : localhost:8080/members/memberList 에 회원 정보들을 추가하기 위한 객체로 model.addAttribute("members", members) 와 같이 넘길 수 있다.

 

2. members 폴더 아래에 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>

</body>
</html>
  • <tr th:each="member : ${members}"> : MemberController 클래스에서 model.addAttribute("members", members) 에서 "members" 객체가 넘어왔으며 그 객체의 이름을 member 라고 정의한다.
  • <td th:text="${member.__}"></td> : member 객체는 private 한 변수를 가지고 있다. 하지만 타임리프(thymeleaf)가 동작함으로써 getter 를 통해 변수값을 자동으로 가져오게 된다. (템플릿 엔진의 장점)

 

3. localhost:8080 를 띄운 후에 회원을 여러명 등록시킨 후 회원 목록버튼을 눌러 회원 정보를 확인하도록 한다.

 

 

  • 타임리프(thymeleaf) 템플릿 엔진을 통해 for문과 동일하게 정보들을 나열해준다.

 

'Spring' 카테고리의 다른 글

JPA  (0) 2022.01.14
순수 JDBC & 스프링 JdbcTemplate  (0) 2022.01.13
스프링 빈과 의존관계  (0) 2022.01.12
회원 관리 - 백엔드 개발  (0) 2022.01.12
스프링 웹 개발 기초  (0) 2022.01.11
'Spring' Related Articles more
Comments