회원제 프로젝트(1)

기존에 만들었던 게시판 프로젝트를 회원제 게시판으로 기능을 추가하려고 한다. 

 

기존에 있는 index.html 파일에 회원가입 관련된 메뉴를 넣고 회원가입 화면으로 이동까지 구현하였다. 

 

1. index.html 

 

 

기존 index.html 파일에 a태그 3개 추가하였다. 

 

1-1. 결과 화면 

index 화면이다. 

 

2. saveMember.html 

회원가입 화면 html 파일이다. 

 

form 태그에 3가지 요소 (이메일, 아이디, 비밀번호)가 감싸져있다. 

form 태그에 감싸져있기에 마지막 input 태그인 회원가입 버튼을 클릭하였을 때, 3가지 요소가 서버에게 넘어간다. 

 

form 태그의 action 속성에 의해서 해당 주소에 ( member/save ) post 방식으로 서버에게 데이터가 넘어간다. 

post 방식을 사용하는 이유는 url 주소에 데이터를 보이지 않게 하기 위해서이다. 

 

* 해당 비교 화면은 다음 블로그 참고

 

 

비밀번호의 type은 password로 설정하였다. 이로서 사용자가 입력한 문자를 눈으로 확인할 수 없다. 

자세한 화면은 2-1 사진 참고 

 

2-1. 결과화면

회원가입 화면이다.

 

비밀번호의 속성에 따라 사용자가 작성한 문자가 보이지 않는다. 

 

3. MemberController.java

3-1. 전체 코드 

package com.example.board.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/member")
public class MemberController {
    @GetMapping("/save")
    public String saveForm() {
        return "saveMember";
    }
    @PostMapping("/save")
    public String save() {
        return "index";
    }
}

 

회원가입과 관련된 요청을 위해 MemberController.java 클래스를 만들었다. 

RequestMapping 어노테이션을 통해서 member로 시작하는 URL 주소 요청은 해당 클래스로 모이게 된다. 

 

3-2. saveForm()

해당 함수는 index.html 화면에서 회원가입 버튼을 클릭할 경우 작동한다. 

 

Get 방식을 통해서 saveMember.html(2번화면)를 불러온다. 

 

3-3. save()

해당 함수는 saveMemer.html 화면에서 회원가입 버튼을 클릭를 경우 작동한다. 

 

saveMemer.html에서 form 태그의 속성 중 method 을 post로 지정하였다. 

따라서 post 방식으로 요청하기에 postMapping 어노테이션을 사용한다. 

 

회원가입이 완료되었을 경우, 메인 화면으로 넘어가기 위해 index를 반환한다. 

 

4. 유튜브 영상

https://www.youtube.com/watch?v=MOViwHCjPDY&list=PLV9zd3otBRt5ANIjawvd-el3QU594wyx7&index=5