<스프링입문>05. 회원 관리 예제 - 웹 MVC 개발

박서연·2023년 3월 27일
Spring스프링
0

Spring

목록 보기
5/10

📌 단축키

단축키 alt+insert 사용해 getter와 setter 작성
단축키 ctrl+alt+v 입력해 변수 생성

📌 회원 웹 기능 - 홈 화면 추가

1. HomeController.java

main/.../controller/HomeController.java

1) @Controller

2) @GetMapping("/")

🔸 첫번째 domain을 나타내며 localhost:8080 입력시 아래 코드가 실행되도록 함

3) public String home

🔸 return "home"; => home.html으로 이동

public String home()	{
	return"home";
}

🏅 최종 코드_HomeController.java

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

}

2. home.html

main/.../templates/home.html

🔸 HomeController.java 생성 전에는 요청(localhost:8080)이 오면 welcome page로 index.html이 나타났지만, 이제는 home.html 나타남.
❓ Why = 우선순위 존재
🔹 요청이 오면 1) 스프링 컨테이너에 관련 컨트롤러가 있는지 확인 후 2) 없을 경우 static 파일 찾는 순서
🔹 지금의 경우 스프링 컨테이너에 GetMapping("/")가 존재하므로 controller 호출. index.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>

📌 회원 웹 기능 - 등록

1. MemberController.java

main/.../resources/templates/MemberController.java

1) @GetMapping("/members/new")

🔸 main/.../templates/home.html에서 회원가입 버튼을 누르면 /members/new로 이동하기 때문에 members/new 생성

2) public String createForm

🔸 return "members/createMemberForm"; => createMemberForm.html로 이동

🏅 최종 코드_MemberController.java

package hello.hellospring.controller;

import hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;
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";
    }
}

2. createMemberForm.html

main/.../templates/members/createMemberForm

main/.../templates 아래에 members 이름의 directory 생성
members 아래에 createMemberForm.html 생성

🔸 form: 입력을 받을 수 있는 태그
🔸 input type="text" :text를 입력할 수 있는 박스 생김
🔸 name: server로 들어왔을 때 key값이 됨
🔸 placeholder: 아무것도 입력되지 않았을 때 나타나는 문자

🏅 최종 코드_createMemberForm.html

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

3. MemberForm.java

main/.../hello.hellospring/controller/MemberForm
main/.../hello.hellospring/controller 아래에 MemberForm.java 생성

private String name; + getter and setter

🔸 private String name; 작성 후 단축키 alt+insert 사용해 getter와 setter 작성
🔸 createMemberForm 코드 속의 name과 해당 파일의 name이 매치됨

🏅 최종 코드_MemberForm.java

    private String name;

    public String getName() {
        return name;
    }

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

4. MemberController.java

main/.../resources/templates/MemberController.java
🔸 위 코드 수정

1) @PostMapping("/members/new")

2) public String create(MemberForm form)

🔸 member 생성

public String create(MemberForm form)	{
	Member member = new Member();
    member.setName(form.getName());
}

3) memberService.join(member);

🔸 member join

memberService.join(member);

4) return "redirect:/";

🔸 return으로 홈화면 설정

return "redirect:/";

🏅 최종 코드_MemberController.java

package hello.hellospring.controller;

import hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;
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("/members")
    public String list(Model model)   {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }
}

5. 동작

1) HomeController.java + home.html

🔸 회원 가입 선택 -> members/new로 이동

2) MemberController.java

🔸 @GetMapping("/members/new")로 들어와 createForm 함수 실행 => members/createMemberForm.html 실행

3) createMemberForm.html

🔸 이름으로 spring 작성 후 등록 버튼 클릭 => 입력한 데이터가 action URL인 members/new로 post 방식으로 들어옴

4) MemberController.java

🔸 @PostMapping("/members/new")로 들어와 create 함수 실행

  • => (MemberForm.java)에서 MemberForm의 name에 spring이라는 값이 들어옴. setName으로 spring 가져오고 getName으로 밖(MemberController.java)에서 사용 (name은 private값)
  • => MemberService.join(member)으로 member등록

💡 URL로 쳐서 들어오는것은 GET방식 조회할 떄 주로 사용, data를 form 같은 곳에 넣어서 등록 및 전달할 때에는 POST 방식 사용
💡 같은 URL이어도 GetMapping인지 PostMapping인지에 따라 다르게 보여짐. ex. @GetMapping("/members/new")와 @PostMapping("/members/new")

💎 HTTP Get,Post, form은 공부해볼 것

📌 회원 웹 기능 - 조회

1. MemberController.java

1) @GetMapping("/members")

🔸 home.html에 회원목록을 누르면 members로 이동

2) memberService.findMembers();

🔸 memberService.findMember() 작성 후 단축키 ctrl+alt+v 입력해 변수 생성
🔸 members 모두 가져오기

3) model.addAttribute("members",members);

🔸앞에서 가져온 members를 model에 담아 화면(view template)에 넘김

4) return "members/memberList";

🏅 최종 코드_MemberController.java

package hello.hellospring.controller;

import hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;
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("/members")
    public String list(Model model)   {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }
}

2. memberList.html 생성

main/.../templates/members/memberList

thymeleaf가 동작

🔸 memberList.html에서는 <tr th:each="member: ${members}">...</tr> 가 하나지만 실제 동작한 페이지의 소스 코드를 보면 입력한 개수만큼 나타남 => template언어가 rendering한것
🔸 th:each는 loop 돌면서 로직 실행. thymeleaf 문법
🔸 $는 model 안의 값을 꺼내는 것

🏅 최종 코드_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>

📌 실행 화면



💡 memory 안에 존재하기 때문에 실행 중지 후 재시작하면 데이터 사라짐 => 따라서 파일이나 데이터베이스에 저장해야함

profile
박서연
이전 포스트

<스프링입문>04. 스프링 빈과 의존관계

다음 포스트

<스프링입문>06. 스프링 DB 접근 기술

0개의 댓글