(1) ํ ํ๋ฉด ์ถ๊ฐ
ํ ์ปจํธ๋กค๋ฌ ์์ฑ
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";
}
}
@GetMapping : / ( ์ฒซ ๋๋ฉ์ธ ์์ฒญ )
์ปจํธ๋กค๋ฌ๊ฐ ์ฐ์ ์ ๊ฐ๊ธฐ ๋๋ฌธ์ ์ฐ์ปดํ์ด์ง ํธ์ถ X
return : home.html ํธ์ถ
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>
(2) ํ์ ๋ฑ๋ก
MemberController Class ๋งคํ ์ถ๊ฐ
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
templates/members ํด๋ ์ถ๊ฐ
ํ์ ๋ฑ๋ก ํผ HTML ( resources/templates/members/createMemberForm )
<!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>
<form action="/members/new" method="post"><form> ํ๊ทธ
post ๋ฐฉ์์ผ๋ก /members/new๋ก ๋์ด๊ฐ -> ( @PostMapping )
<input type="text" id="name" name="name" placeholder="์ด๋ฆ์
์
๋ ฅํ์ธ์">
key : value /
name : spring ์๋ฒ๋ก ์ ์ก
<form> ํ๊ทธ
<form> ํ๊ทธ๋ ์น ํ์ด์ง์์์ ์ ๋ ฅ ์์์ ์๋ฏธ
ํผ์ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๊ฒ์ ํ์ฉ
- name: ํผ์ ์ด๋ฆ
- action: ํผ ๋ฐ์ดํฐ๊ฐ ์ ์ก๋๋ ๋ฐฑ์๋ url / ์ ์ก๋๋ ์๋ฒ url ๋๋ html ๋งํฌ
- method: ํผ ์ ์ก ๋ฐฉ์ (GET / POST)
| placeholder | ํํธ ํ์(ํ๋ ํด๋ฆญ์ ๋ด์ฉ ์ฌ๋ผ์ง) |
<form> ํ๊ทธ๋ ์ ์ฒด ์์์ ์๋ฏธํ๋ฉฐ, ํ๋ฉด์ ๋ณด์ด์ง ์๋ ์ถ์์ ์ธ ํ๊ทธ์
๋๋ค.
<input>
์ค์ ๋ก ์ฌ์ฉ์๊ฐ ์์์ ์ ๋ ฅํ๊ธฐ ์ํ ํ๊ทธ๋ <input> ํ๊ทธ ๋ฑ์ด ์ฌ์ฉ
์ฌ์ฉ์๊ฐ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ ๋ถ๋ถ์ ๋ง๋ค์ด์ผ ํ ๋ ์ฌ์ฉ
type
- text: ์ผ๋ฐ ๋ฌธ์
- password: ๋น๋ฐ๋ฒํธ
- button: ๋ฒํผ
- submit: ์์ ์ ์ถ์ฉ ๋ฒํผ
- reset: ์์ ์ด๊ธฐํ์ฉ ๋ฒํผ
- radio: ํ๊ฐ๋ง ์ ํํ ์ ์๋ ์ปดํฌ๋ํธ
- checkbox: ๋ค์๋ฅผ ์ ํํ ์ ์๋ ์ปดํฌ๋ํธ
- file: ํ์ผ ์ ๋ก๋
- hidden: ์ฌ์ฉ์์๊ฒ ๋ณด์ด์ง ์๋ ์จ์ ์์
https://www.nextree.co.kr/p8428/
https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC
์น ๋ฑ๋ก ํ๋ฉด์์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌ๋ฐ์ ํผ ๊ฐ์ฒด
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
ํ์ ์ปจํธ๋กค๋ฌ์์ ํ์์ ์ค์ ๋ฑ๋กํ๋ ๊ธฐ๋ฅ
MemberController
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}create ํธ์ถํ๊ณ ๊ฐ(MemberForm์ name)์ด ๋ค์ด์ด.
( Spring ์ด setName์ ํธ์ถํด์ ๊ฐ์ด ๋ค์ด๊ฐ , private name ์ด๊ธฐ ๋๋ฌธ )
method ์์ฑ
method ์์ฑ์ ํตํด ๋ช ์ํ ์ ์๋ form ์์์ ์ ๋ฌ ๋ฐฉ์์ GET๋ฐฉ์๊ณผ POST๋ฐฉ์์ผ๋ก ๋๋ฉ๋๋ค.
GET ๋ฐฉ์
์ฃผ์์ ๋ฐ์ดํฐ(data)๋ฅผ ์ถ๊ฐํ์ฌ ์ ๋ฌํ๋ ๋ฐฉ์
๋ฐ์ดํฐ๊ฐ ์ฃผ์ ์
๋ ฅ์ฐฝ์ ๊ทธ๋๋ก ๋ํ๋จ
์ ์กํ ์ ์๋ ํฌ๊ธฐ ๋ํ ์ ํ์ ์
๋ฐ๋ผ์ ๊ฒ์ ์์ง์ ์ฟผ๋ฆฌ(query)์ ๊ฐ์ด ํฌ๊ธฐ๊ฐ ์๊ณ ์ค์๋๊ฐ ๋ฎ์ ์ ๋ณด๋ฅผ ๋ณด๋ผ ๋ ์ฃผ๋ก ์ฌ์ฉ
POST ๋ฐฉ์
๋ฐ์ดํฐ(data)๋ฅผ ๋ณ๋๋ก ์ฒจ๋ถํ์ฌ ์ ๋ฌํ๋ ๋ฐฉ์
๋ฐ์ดํฐ๊ฐ ์ธ๋ถ์ ๋๋ฌ๋์ง ์์
์ ์กํ ์ ์๋ ๋ฐ์ดํฐ์ ํฌ๊ธฐ ๋ํ ์ ํ์ด ์์
๋ณด์์ฑ ๋ฐ ํ์ฉ์ฑ์ด GET ๋ฐฉ์๋ณด๋ค ์ข์
(3) ํ์ ์กฐํ
ํ์ ์ปจํธ๋กค๋ฌ์์ ์กฐํ ๊ธฐ๋ฅ
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
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> <!-- /container -->
</body>
</html>${members} : model ์์ ์๋ ๊ฐ์ ๊บผ๋ด์จ๋ค
model.addAttribute("members", members);model์ key = members
members : members(๋ฆฌ์คํธ๋ก ๋ชจ๋ ํ์์ ๋ค ์กฐํํด์ ๋ด์๋์)
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>๋ฃจํ๋ฅผ ๋๊ธฐ
members์์ ์ฒซ ๋ฒ์งธ ๊ฐ์ฒด๋ฅผ ๊บผ๋ด์ด member์ ๋ด๊ธฐ
member.id / member.name ์ถ๋ ฅ
model
model.addAttribute("name",name);Model ๊ฐ์ฒด๋ Controller ์์ ์์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ๋ด์ View๋ก ์ ๋ฌํ ๋ ์ฌ์ฉํ๋ ๊ฐ์ฒด์ด๋ค.
addAttribute("key", "value") ๋ฉ์๋๋ฅผ ์ด์ฉํด view์ ์ ๋ฌํ ๋ฐ์ดํฐ๋ฅผ key, valueํ์์ผ๋ก ์ ๋ฌํ ์ ์๋ค.
Model ๊ฐ์ฒด๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ๋๋ค.
model.addAttribute("๋ณ์์ด๋ฆ", "๋ณ์์ ๋ฃ์ ๋ฐ์ดํฐ๊ฐ");model.addAttribute๋ฅผ ์ด์ฉํด์, ๋๊ธธ ๋ฐ์ดํฐ์ ์ด๋ฆ๊ณผ ๊ฐ์ ๋ฃ๋๋ค.
๊ทธ๋ฌ๋ฉด, ์คํ๋ง์ ๊ทธ ๊ฐ์ ๋ทฐ ์ชฝ์ผ๋ก ๋๊ฒจ์ค๋ค.
๋ฉ๋ชจ๋ฆฌ์ ์๊ธฐ ๋๋ฌธ์ ์๋ฒ๋ฅผ ๋ค์ ๊ป๋ค ์ผ๋ฉด ๋ฐ์ดํฐ๊ฐ ์ง์์ง๋ค
๋ฐ์ดํฐ๋ค์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ฅํด์ผ ํ๋ค
'Spring > Spring ์ ๋ฌธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์คํ๋ง ์ ๋ฌธ - (15) ์คํ๋ง ํตํฉ ํ ์คํธ (0) | 2023.01.27 |
|---|---|
| ์คํ๋ง ์ ๋ฌธ - (14) ์คํ๋ง DB ์ ๊ทผ ๊ธฐ์ / ์์ Jdbc (0) | 2023.01.26 |
| ์คํ๋ง ์ ๋ฌธ - (12) ์ปดํฌ๋ํธ ์ค์บ๊ณผ ์๋ ์์กด๊ด๊ณ ์ค์ (0) | 2023.01.21 |
| ์คํ๋ง ์ ๋ฌธ - (11) ํ์ ์๋น์ค ํ ์คํธ (0) | 2023.01.20 |
| ์คํ๋ง ์ ๋ฌธ - (10) ํ์ ์๋น์ค ๊ฐ๋ฐ (0) | 2023.01.20 |
