7.회원관리예제_웹 화면 꾸미기

이제는 회원관리예제를 이쁘게 만들어 볼 시간입니다.

웹 화면은 "웹 MVC 개발"을 통해 화면을 만들 것이며 아래와 같이 구성할 것입니다.

홈 화면
회원 등록
회원 조회

1. 홈 화면

1. HomeController를 만든다.
2. "home" 템플릿을 만든다. (구성: '회원가입' '회원 목록'으로 가는 페이지의 카테고리가 있다.)

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";
    }
}

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

Q.실행을 해봅니다.

정적페이지 경우 index.html를 만들어서 별 다른 설정이 없다면 'wellcomepage'로 가도록 만들었다.

(resources>static> index.html)

<!DOCTYPE HTML>
<html>
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>

Q. 어떻게 wellcomepage가 아니라 Hello state가 실행되었을까?

"정적 컨텐츠"를 실행할 때 요청이 들어오면

spring Controller에서 관련된 컨트롤러를 먼저 찾고
Controller에 관련 요청사항을 못 찾으면, 그 다음에 static파일에서 찾는다.

→HomeControllerr경우에는 'home.html'이 있기 때문에 'localhost:8080'로 들어갔을 때 mvc화면이 되었습니다.

2. 회원 등록

1. MemberController에 @GetMapping추가

2. 회원 등록 mvc 템플릿 만들기

package hello.hellospring.controller;

import hello.hellospring.Service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MemberController {

    private final MemberService memberService;


    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @GetMapping("/members/new")
    public String createForm() {
        return "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>

회원가입 페이지는 MemberController에 'GetMappting'을 통해 첫화면에서 '회원가입'을 클릭하면

"templates/members/createMemberForm"으로 화면이동이 되어 다음과 같이 name을 입력해서 가입할 수 있게 된다.

이렇게 하면 회원등록하는 껍데기를 만들었으며, 이름을 입력하여 "등록"을 눌렀을 때 기능을 만들어야 합니다.

3. MemberForm을 만듭니다. ( name, name의 Getter&Setter)

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

회원 등록 mvc 템플릿(껍데기)에 입력된 name을 연결하여 저장되도록 합니다.

4. 회원가입 후 "어떻게 처리할 지?"를 만들어야 합니다.

우선 MemberController에 "@PostMapping"을 추가합니다.

package hello.hellospring.controller;

import hello.hellospring.Service.MemberService;
import hello.hellospring.domain.Member;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class MemberController {

    private final MemberService memberService;


    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @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:/";
    }

}

Q. 동작원리

1. 홈화면에서 '회원가입'을 누르면 "http://localhost:8080/members/new"으로 이동되어 회원가입 페이지로 들어갑니다.

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

@GetMapping방식(:url 검색으로 이동)으로 url에 딱 "http://localhost:8080/members/new"을 검색하여 이동할 수 있는 것을 말합니다.

그리고 createForm()을 실행시켜 "members/createMemberForm"(회원가입 페이지)화면이 바뀝니다.

2. createMemberForm(화면)에서 "이름을 입력하세요"칸에 이름을 입력(input)하면

이름(value)가 post방식으로 "member/new"(@PostMapping)로 이동합니다.

Q. 참고

※@PostMapping> 데이터를 Form에 감싸서 전달할 때 사용한다.

※@GetMapping > 조회할 때 주로 사용한다.

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

        memberService.join(member);

        return "redirect:/";
    }

@PostMapping에 들어와서 create()메소드가 호출되어 값이 들어오는데 MemberForm에 스프링이 setName을 통해서 이름(value)을 넣어준다. 그래서 join을 해서 가입을 성공시켜 홈화면으로 반환한다.

3. 회원 조회

1.MemberController에 @GetMapping 추가

2. 회원 조회 페이지 템플릿 만들기

package hello.hellospring.controller;

import hello.hellospring.Service.MemberService;
import hello.hellospring.domain.Member;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@Controller
public class MemberController {

    private final MemberService memberService;


    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @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:/";
    }

    @GetMapping(value = "/members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }

}

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

Q. 동작원리

1.MemberService에서 findMember로 멤버를 조회한다.

2.members(조회한 멤버)를 List로 모델에 담아 화면에 넘긴다.

3.화면 넘기는 방식: template 작성 중에서

<tbody>
            <tr th:each="member : ${members}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
            </tr>
            </tbody>

<th> 타임루프 안에서 '$'로 모델 안에 있는 값을 꺼냅니다.
td로 '첫 번째 가입자, 두 번째 가입자.....'들을 id(이름)을 뽑아 나열합니다.

마무리

Q. 만약 코드 실행을 끊다면?

가입한 정보데이터가 지워집니다.

코드실행을 종료시키면 서버가 끊겨 버리는 상황이니까 회원가입한 정보(데이터)가 모두 지워집니다.

Q. 왜 지워지죠?

데이터는 메모리에 저장된 것이지 '저장소(DB)'에 넣어둔게 아니라 날라가 버립니다.

그러면, 다음 시간에 "DB"에 대해 알아봅시다.

'spring' 카테고리의 다른 글

6. DI_ 자바코드로 직접 스프링 빈 등록하기 (0)	2021.03.27
5. DI_ 컴포넌트 스캔과 자동 의존관계 설정 (0)	2021.03.27
4.회원 서비스 개발 (0)	2021.03.26
3. 서비스 개발 (0)	2021.03.26
2. 테스트케이스 작성 (0)	2021.03.26

덤퍼의 Code Window

7.회원관리예제_웹 화면 꾸미기

1. 홈 화면

2. 회원 등록

3. 회원 조회

마무리

'spring' 카테고리의 다른 글

댓글

티스토리툴바

7.회원관리예제_웹 화면 꾸미기

1. 홈 화면

2. 회원 등록

3. 회원 조회

마무리

'spring' 카테고리의 다른 글

관련글

댓글

티스토리툴바