스프링 입문 - (13) 회원 웹 기능

(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

<input>

type

method 속성

'Spring > Spring 입문' 카테고리의 다른 글

티스토리툴바