회원가입, 로그인, 게시판 백엔드 실습( login 화면 )

로그인화면 구성하기

 - 우선은 Spring을 활용해서, 회원가입을 하면 유저의 데이터를 데이터베이스에 저장하고

login 할 때 데이터베이스에 일치하는 데이터가 있다면, session에 로그인 정보를 저장하고

일치하는 데이터가 없다면, 다시 login화면으로 돌아오는 기능을 구현할 것이다.

 

 - 유효성 검사는 차후에 진행할 예정

 

** 로그인 기능은

MemberController -> LoginService -> LoginServiceImpl -> LoginMapper -> LoginMapper.xml 과정으로 데이터베이스와 연동할 것이다.

 

 1) 로그인 화면에 template 구성하기

 - codePen에서 깔끔한 로그인 css를 가져왔고, 회원가입 페이지는 로그인 페이지의 양식을 변경했다.

 

 2) 회원가입 기능 구현하기

 - jsp 작성

 - 회원가입 페이지의 html을 다음과 같이 작성했다.

form 태그 내부의 input 요소들에 각각 id, password, name, phone, email 의 name attribute를 부여했다.

form 태그의 methode에 따라 해당 name 요소들과 값들이 전달되게 만들 것이다.

 

 - MemberController 작성

 : 로그인과 회원가입 등 user 계정과 관련되는 controller들을 이용하기 위해 membercontroller를 작성했다.

 - memberController에 작성한 회원가입 기능이다.

 - LoginVO medel을 생성해서 form 태그의 post 방식으로 보낸 데이터들을 저장한다.

코드를 세부적으로 확인하면 다음과 같다

@Autowired
LoginService ls;

@RequestMapping(value = "/memberin", method = RequestMethod.POST)
		public String memberIn(LoginVO member) {
			ls.memIn(member);
			return "member/login";
		}
-> form 태그로 부터 받은 데이터를 LoginVO 객체 형태를 가진 member 변수에 저장한다.
그리고 LoginService 클래스 내부의 memIn() 함수에 member 변수를 넣어서 실행한다.
작업들이 끝나면, member 경로에 있는 login.jsp 파일을 브라우저에 나타낸다.

 

 - LoginService , LoginServiceImpl 작성

 - 각각 public void memIn() 함수를 LoginVO member 변수를 가지고 실행한다.

LoginServer 는 인터페이스로서, LoginServiceImpl 내부의 함수를 실행하는 역할을 한다.

 

이번에 사용할 memIn()  데이터베이스에 데이터를 저장하는 것이 목표이기 때문에 리턴 값이 없다.

 - LoginMapper , LoginMapper.xml

 - Mapper도 interface를 거쳐서 memIn()을 실행한다.

Mapper.xml에서는 다음과 같은 형태로 mySql에 명령어를 전달한다.

Mapper에서 MySQL에 전달하는 명령어는 크게 4가지가 있다.
insert , update , select , delete

<명령어 id="함수명">
	MySQL 명령어
</명령어>

이 때, MySQL에서 명령어를 끝마치는 ; 를 꼭 적을 필요는 없으며,
함수를 실행하기위해 form으로 부터 가져온 매개변수는 
#{ 변수이름 } 으로 불러올 수 있다

 

 - 데이터베이스 확인 ( mySQL )

 - 회원가입 정보를 저장하기위한 테이블 port_member 는 다음과 같은 형태로 작성했다.

id를 primary key로 가진다.

 

 - 회원가입 하기

 1) 회원정보 입력하기

 - 유저 정보를 입력하고 완료를 누르면

 2) MySQL 확인하기

 - 4번째 행에 해당 정보가 저장됬음을 확인할 수 있다.