뷰 구현
· 클라이언트 요청(request)을 처리하는 서버의 컨트롤러, 서비스, DAO를 모두 구현했다.
· 이제 서버에서 클라이언트로 응답(response)하는데 필요한 뷰(View)를 구현한다.
· 뷰는 JSP파일로 webapp\WEB-INF\views\에 sign_up_ok.jsp로 만든다.
■ sign_up_ok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
This page is SIGN_UP_OK.
</body>
</html>이제 MemberController에 signUpConfirm()을 반환하는 코드로 sign_up_ok.jsp로 설정해준다.
@RequestMapping("/signUpConfirm")
public String signUpConfirm(MemberVo memberVo) {
System.out.println("[MemberController] signUpConfirm()");
System.out.println("m_id: " + memberVo.getM_id());
System.out.println("m_pw: " + memberVo.getM_pw());
System.out.println("m_mail: " + memberVo.getM_mail());
System.out.println("m_phone: " + memberVo.getM_phone());
memberService.signUpConfirm(memberVo);
return "sign_up_ok";
}| sign_up.jsp | 서버 로그(log) | sign_up_ok.jsp |
 |
 |
 |
로그인 기능 구현
1. sign_in.jsp에 <form>을 이용해서 로그인에 필요한 양식을 만든다.
<form>의 action 속성에는 /hello/signInConfirm으로 명시한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>This page is SIGN_IN.</h3>
<form action="/hello/signInConfirm">
ID : <input type="text" name="m_id"> <br/>
PW : <input type="password" name="m_pw"> <br/>
<input type="submit" value="SIGN IN">
<input type="reset" value="CANCEL">
</form>
</body>
</html>2. MemberController에 사용자의 요청(/signInConfirm)을 처리할 수 있는 메서드(signInConfirm())를 만들고 @RequestMapping을 이용해서 /signInConfirm을 signInConrfirm()에 매핑한다.
@RequestMapping("/signInConfirm")
public String signInConfirm(MemberVo memberVo) {
System.out.println("[MemberController] signInConfirm()");
return null;
}3. MemberController의 signInConfirm()에서 MemberService의 로그인 관련 메서드를 호출하기 위해 MemberService의 signInConfirm()을 선언한다.
public MemberVo signInConfirm(MemberVo memberVo) {
System.out.println("[MemberService] signInConfirm()");
return null;
}4. MemberService에 signInConfirm()을 선언했다면 MemberController의 signInConfirm()에서 MemberService의 signInConfirm()을 호출하는 코드를 추가한다.
@RequestMapping("/signInConfirm")
public String signInConfirm(MemberVo memberVo) {
System.out.println("[MemberController] signInConfirm()");
MemberVo signInedMember = memberService.signInConfirm(memberVo);
return null;
}5. signInConfirm()에서 MemberDao의 로그인 관련 메서드를 호출하기 위해 MemberDao에서 selectMember()을 선언한다.
public MemberVo selectMember(MemberVo memberVo) {
System.out.println("[MemberDao] selectMember()");
MemberVo signInedMember = memberDB.get(memberVo.getM_id());
if (signInedMember != null && memberVo.getM_pw().equals(signInedMember.getM_pw()))
return signInedMember;
else
return null;
}6. MemberService의 signInConfirm에서 MemberDao의 selectMember()를 호출하는 코드를 작성한다.
public MemberVo signInConfirm(MemberVo memberVo) {
System.out.println("[MemberService] signInConfirm()");
MemberVo signInedMember = memberDao.selectMember(memberVo);
return signInedMember;
}7. MemberController의 signInConfirm()에서 클라이언트에 응답하기 위해 return 구문을 수정한다.
@RequestMapping("/signInConfirm")
public String signInConfirm(MemberVo memberVo) {
System.out.println("[MemberController] signInConfirm()");
MemberVo signInedMember = memberService.signInConfirm(memberVo);
if (signInedMember != null)
return "sign_in_ok";
else
return "sign_in_ng";
}8. [views] 폴더에 로그인이 성공한 경우(sign_in_ok.jsp)와 실패한 경우(sign_in_ng.jsp)에 해당하는 JSP파일을 생성한다.
■ sign_in_ok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
This page is SIGN_IN_OK.
</body>
</html>■ sign_in_ng.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
This page is SIGN_IN_NG.
</body>
</html>9. 로그인 기능이 제대로 작동하는지 확인한다.
http://localhost:8090/hello/signUp 경로에 들어가서 사용자 정보를 입력하고 <SIGN UP>버튼을 클릭하여 회원가입을 한다.
| 사이트 접속 | 사용자 정보 입력 | 결과 |
 |
 |
 |
http://localhost:8090/hello/signIn 경로에 들어가서 로그인 페이지로 이동한 후 사용자 정보를 입력하여 <SIGN IN>버튼을 클릭하여 결과를 확인한다.
■ 로그인 성공한 경우
 |
 |
■ 로그인 실패한 경우
 |
 |
'Spring & Springboot > 올인원 스프링 프레임워크' 카테고리의 다른 글
| 전자 도서관 프로젝트 - 관리자 회원가입 기능 구현 (0) | 2023.10.06 |
|---|---|
| 전자 도서관 프로젝트 - 설계 및 생성하기 (0) | 2023.10.05 |
| 빈 객체 구현 (0) | 2023.09.22 |
| 웹 애플리케이션 생성 및 서버로 데이터 전송 (0) | 2023.09.22 |
| 회원 관리 페이지 만들기 (0) | 2023.09.21 |