쌓고 쌓다
회원 웹 기능 - 홈 화면 추가, 등록 본문
MemberController도 만들고, 의존 관계도 설정했다.
MemberController를 통해 멤버를 등록하고 조회하는 걸 만들어보자.
우선 controller에 HomeController를 만든다.
package hello.hellospring.controller;
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}도메인을 접속하면
매핑 URL을 따라 "/"를 통해 템플릿에 home.html을 가져온다.
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="/members/new">회원 가입</a>
<a href="/members">회원 목록</a>
</body>
</html>단순히 링크 두개만 작성했다.
MemberController.java
@Controller
public class MemberController {
...
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
}MemberController에 "/members/new"를 매핑시켜
템플릿 폴더에 members 폴더 내 createMemberForm.html으로 이동하게 작성한다.
createMemberForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<form action="/members/new" method="post">
<label for="name">이름</label>
<input type="text" id="name" name="name" placeholder="이름을 입력하세요.">
<button type="submit">등록</button>
</form>
</div>
</body>
</html>
action 속성: 폼 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시한다.
method 속성: 폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시한다. (GET과 POST 존재)
label 태그는 폼의 양식에 이름을 붙이는 태그이다.
for 속성: label의 for 값과 양식의 id 값이 일치하면 연결된다. (label을 클릭하면 연결된 양식이 클릭됨)
name 속성: 폼(Form)이 제출된 후 서버에서 폼 데이터를 참조하기 위해 사용되거나, 자바 스크립트에서 요소를 참조하기 위해 사용함.
=> name="name" : "name"이 서버로 넘어올 때 키(Key)가 된다. (setName(Setter)을 통해 값을 넣는다.)
입력한 폼의 데이터를 받은 클래스를 작성한다.
MemberForm.java
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}클래스의 필드 name은
<input type="text" id="name" name="name" placeholder="이름을 입력하세요.">
input 태그에 작성되어있는 name="name"에 의해 매핑되어 값이 들어올 것이다.
*인텔리제이의 GetterSetter 단축키 : Alt + Insert
MemberController.java
package hello.hellospring.controller;
@Controller
public class MemberController {
...
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}@PostMapping과 함께 등록하는 메소드를 작성한다.
똑같은 URL이라도 Get과 Post 방식으로 나뉘기에 요구에 맞춰 메소드가 실행된다.
createMemberForm.html를 다시 보면
<form action="/members/new" method="post">Post를 보내면 여기에 매핑되어 메소드가 실행될 것이다.
MemberForm 클래스말고 Member 클래스로 받아도 될까?
된다. 그러나 실무에서는 클래스에 필요로 하는 멤버 말고도 추가적으로 다양한 값을 함께 사용하기에
따로 클래스를 만들어 작성하는것이 더 좋은 코드이다.
'프로그래밍 > spring' 카테고리의 다른 글
| [스프링 부트] 인텔리제이 프로젝트 세팅 및 실행 (0) | 2023.06.21 |
|---|---|
| 회원 웹 기능 - 조회 (0) | 2023.06.21 |
| 자바 코드로 직접 스프링 빈 등록하기 (0) | 2023.05.14 |
| 컴포넌트 스캔과 자동 의존관계 설정 (0) | 2023.05.08 |
| 회원 서비스 테스트 ( 의존성 주입, 예외 테스트 코드 ) (0) | 2023.05.07 |
