Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

회원가입 개발 본문

Project/블로그 게시판 만들기

회원가입 개발

Seung__ 2021. 10. 4. 18:15

1.MemberForm

  • 회원 가입 form을 통해 받을 정보.
  • 회원 가입시 받을 정보와 DB에 저장하는 정보에는 차이가 있다.
@Getter
public class MemberForm {

    private String userId;
    private String name;
    private String password;
    private String email;

    public MemberForm(String userId, String name, String password, String email) {
        this.userId = userId;
        this.name = name;
        this.password = password;
        this.email = email;
    }
}

 

 

 

2. MemberConroller

  • controller에서 model로 MemberForm 객체를 넘긴다. 이 때 이름을 "member"로 지정.
  • MemberDto객체를 넘겨서 불필요한 정보를 외부에 노출하지 않음.(pw 등) 
@Controller
@RequiredArgsConstructor
@Slf4j
@RequestMapping("/members")
public class MemberController {

    private final MemberService memberService;

    @GetMapping
    public String members(Model model){
        List<Member> members = memberService.findAll();
        List<MemberDto> memberDtos = members.stream()
                .map(member -> new MemberDto(member.getId(), member.getUserId(), member.getName()
                        , member.getEmail())).collect(Collectors.toList());
        model.addAttribute("members", memberDtos);
        return "member/members";
    }

    @GetMapping("/{id}")
    public String member(@PathVariable("id") Long id, Model model){
        Member memberById = memberService.findMemberById(id);
        MemberDto memberDto = memberToDto(memberById);
        model.addAttribute("member", memberDto);
        return "member/member";

    }

    @GetMapping("/new/form")
    public String addForm(@ModelAttribute("member") MemberForm memberForm){
        return "member/addMemberForm";
    }

    @PostMapping("/new/form")
    public String save(@ModelAttribute("member") MemberForm memberForm){
        Member member = memberService.joinMember(formToMember(memberForm));
        log.info("new member.name = {}", member.getName());
        log.info("new member.userId = {}", member.getUserId());

        return "redirect:/";
    }
    public Member formToMember(MemberForm memberForm){
        return new Member(memberForm.getName(), memberForm.getUserId(), memberForm.getPassword(),memberForm.getEmail());
    }

    public MemberDto memberToDto(Member member){
        return new MemberDto(member.getId(), member.getUserId(), member.getName(), member.getEmail());
    }
}

 

 

3.addMemberform.html

  • Model로 "member"객체를 전달 받는다.
  • submit을 누르면 "model"객체에 정보를 담아서 POST 방식으로 동일 url 접속
  • th:field를 적용하면 지정한 객체의 필드명으로 name, id 지정해줌.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <link th:href="@{/css/bootstrap.min.css}"
        href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2>회원 가입</h2>
  </div>
  <h4 class="mb-3">회원 정보 입력</h4>
  <form action="" th:action th:object="${member}" method="post">

    <div>
      <label for="loginId">로그인 ID</label>
      <input type="text" id="loginId" th:field="*{userId}" class="form-control">
    </div>
    <div>
      <label for="password">비밀번호</label>
      <input type="password" id="password" th:field="*{password}" class="form-control">
    </div>
    <div>
      <label for="name">이름</label>
      <input type="text" id="name" th:field="*{name}" class="form-control">
    </div>
    <div>
      <label for="name">email</label>
      <input type="text" id="email" th:field="*{email}" class="form-control">
    </div>
    <hr class="my-4">
    <div class="row">
      <div class="col">
        <button class="w-100 btn btn-primary btn-lg" type="submit">회원가입</button>
      </div>
      <div class="col">
        <button class="w-100 btn btn-secondary btn-lg"
                onclick="location.href='members.html'"
                th:onclick="|location.href='@{/}'|"
                type="button">취소</button>
      </div>
    </div>
  </form>
</div> <!-- /container -->
</body>
</html>

 

4. members.html

  • 회원 목록을 보여줌
  • th:each 활용하여 model로 넘어온 models에서 model을 하나씩 꺼내서 처리.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <link th:href="@{/css/bootstrap.min.css}"
        href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
  <div class="py-5 text-center">
    <h2>회원 목록</h2>
  </div>

  <div class="row">
    <div class="col">
      <button class="btn btn-primary float-end"
              onclick="location.href='addMemberForm.html'"
              th:onclick="|location.href='@{/members/new/form}'|"
              type="button" >회원 등록</button>
    </div>
  </div>

  <hr class="my-4">
  <div>
    <table class="table">
      <thead>
      <tr>
        <th>id</th>
        <th>회원 id</th>
        <th>이름</th>
        <th>email</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="member : ${members}">
        <td><a href="member.html" th:href="@{/members/{memberId}(memberId=${member.id})}" th:text="${member.id}">순서</a></td>
        <td><a href="member.html" th:href="@{/members/{memberId}(memberId=${member.id})}" th:text="${member.userId}">userId</a></td>
        <td><a href="member.html" th:href="@{|/members/${member.id}|}" th:text="${member.name}">이름</a></td>
        <td><a href="member.html" th:href="@{|/members/${member.id}|}" th:text="${member.email}">이메일</a></td>
      </tr>
      </tbody>
    </table>
  </div>

</div> <!-- /container -->


</body>
</html>

 

 

5. member.html

  • 회원의 상세 정보를 보여줌
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <link th:href="@{/css/bootstrap.min.css}"
        href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div>
  <table class="table">
    <thead>
    <tr>
      <th>id</th>
      <th>userId</th>
      <th>이름</th>
      <th>email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td th:text="${member.id}">id</td>
      <td th:text="${member.userId}">userId</td>
      <td th:text="${member.name}">name</td>
      <td th:text="${member.email}">email</td>
    </tr>
    </tbody>
  </table>
</div>

</body>
</html>

 

 

 

6. 결과 화면

welcome 페이지
회원 가입 화면

 

회원 목록
회원 상세

 

흠 그런데 부트스트랩이 적용이 안된다...

intelliJ에서 바로 html을 보면 적용이 되는데...

이 문제는 기능 구현 다 마치고 다시 수정해주자.

 

7. GitHub : 211004 join Member

 

GitHub - bsh6463/blog

Contribute to bsh6463/blog development by creating an account on GitHub.

github.com

 

'Project > 블로그 게시판 만들기' 카테고리의 다른 글

로그아웃  (0) 2021.10.05
로그인 처리  (0) 2021.10.04
도메인 모델, 연관관계  (0) 2021.10.03
댓글 도메인 개발  (0) 2021.10.03
댓글 도메인 설계  (0) 2021.10.03
'Project/블로그 게시판 만들기' Related Articles more
Comments