반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
11-07 20:22
관리 메뉴

ImJay

[Java Spring] 1-16. 화면 웹 기능 - 등록 본문

Java Spring/스프링 입문

[Java Spring] 1-16. 화면 웹 기능 - 등록

ImJay 2023. 1. 30. 13:06
반응형

[Java Spring] 1-16. 화면 웹 기능 - 등록


1. 이번엔 컨트롤러에 등록 기능을 추가해보자.

 

2. MemberController.java 에 코드 추가

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

 

3. main > resources > templates > 경로 추가 > members

 

4. members 에 createMemberForm.html 생성

 

5. 코드 추가

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

 

6. 빌드 후 결과 확인

 

7. 만약 input text 태그에 "spring" 을 입력하게 되면 key="name", value="spring"이 서버로 넘어가게 된다.

 

8. 이제 틀을 생성했으니 회원을 생성하는 컨트롤러를 제작해보자.

 

9. src > main > java > hello.hellospring > controller > 클래스 추가 > MemberForm

 

10. 코드 작성 ( getter setter 단축키 : ALT + INSERT )

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

 

11. MemberController.java 에 코드 추가

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

        return "redirect:/";
    }

 

12. 빌드 후 결과 확인 ( spring 입력 후 등록 버튼 누르기 )

입력
등록 버튼 클릭 후

 

13. 작동 과정

13-1. 회원 가입을 누르면 MemberController 의 GetMapping 된 /members/new 로 이동

13-2. createForm() 메서드는 members/createMemberForm 으로 이동

13-3. createMemberForm.html 의 input 태그에 값을 입력하고 form 태그의 action 옵션을 통해 "/members/new" 로 post 방식으로 값이 전송됨.(name 이 key, 입력된 값이 value로)

13-4. MemberController 의 PostMapping 된 /members/new 로 이동

13-5. create 메소드가 호출

13-6. create 메소드의 파라미터인 form 을 통해 name 값을 가져오고 join을 통해 등록

13-7. "redirect:/" 를 통해 main(home)으로 이동

반응형
Comments