정신과 시간의 방

내용이 많고 자칫하면 헷갈려서 코딩한 시간 경과대로 작성 및 분석 하겠음.

1.코드분석

(0) 어제 자 만든 것 까지 코드 - 유저의 이동경로를 유심히 보기

// a. Home Controller
@Controller
public class HomeController {

    @GetMapping("/")
    public String home(){
        return "home"; // resource/template에 있는 home.html을 반환해서 viewResolver에게 가져다 줌.
    }
}

<!--b. 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> <!--회원 가입 누르면 해당 URL을 조회하도록-->
            <a href="/members">회원 목록</a> <!--회원 목록 누르면 해당 URL을 조회하도록-->
        </p>
    </div>
</div> <!-- /container -->
</body>
</html>

우리는 여기서 유저가 회원 가입을 클릭했다치고 그 다음 회원 가입을 할 수 있게, 절차를 만들어야 한다.

(1) 유저가 회원가입 클릭해서 /members/new를 조회할 경우를 대비

// MemberController에 대응책 마련
@GetMapping("/members/new") // 해당 URL 조회한 경우
public String createForm(){
    return "members/createMemberForm"; // 작성폼 html을 반환하여 viewResolver에 띄운다.
}

(2)회원가입 Form 프론트엔드 만들기.

<!--members/createMemberForm.html-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<!--form tag는 값을 입력할 수 있는 양식을 제공-->
    <form action="/members/new" method="post"> <!--입력을 누르면 해당 URL로 밑에 적은 값들이 post(등록)방식으로 넘어온다.-->
        <div class="form-group">
            <label for="name">이름</label>
            <input type="text" id="name" name="name" placeholder="이름을
입력하세요"> 
<!--text = 입력할 수 있는 네모칸을 만들고, text형태로 입력, name ="name" = 입력한 값은 name이란 key의 value로 저장-->
<!--placeholder = 아무 입력 안하고 있을 때, 뜨는 말-->
        </div>
        <button type="submit">등록</button>
    </form>
</div> <!-- /container -->
</body>
</html>

껍데기는 만들었고, 해당 껍데기 값들이 데이터 베이스 들어가는 검사 전, 임시저장될 공간을 만들자.

(3)Member Form

(> 유저가 타이핑한 값들을 임시 저장할 목적으로 만들었다.)

(> 컨트롤러를 통해 사용자가 html에 친 값이 해당 클래스의 객체로 mapping이 일어날 것이다.)

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

(4)memberController에 /members/new에서 post 요청이 들어올 경우 들어온 값을 Form Class 객체에 넣는 기능 필요

@PostMapping("/members/new") //post -> 등록 위해 입력된 값들 전달
public String create(MemberForm form){ 
// 인수인 객체 Form의 필드값 "name"에 Html의 key가 "name"였던 것의 value 값이 들어감.(by using SetName)
    Member member = new Member();
    member.setName(form.getName()); // form의 getName이 member에 필드 값으로 들어감
    memberService.join(member); // 이름 중복체크, 없으면 저장소에 입력

    return "redirect:/"; //다시 맨 처음 페이지로 복귀
}

회원 웹 기능 등록

1.코드분석

티스토리툴바