<< 학습 목표 >>
1. 로그인 서비스를 구현할 수 있다.
전 글 ( https://codingaja.tistory.com/44 ) 에서 프로젝트에 회원 가입 서비스를 구현했음
CRUD 중 C(Create) 를 구현했으므로 이제 R(Read) 을 구현하자
로그인이 대표적인 R 서비스임
사용자가 아이디, 비밀번호를 입력하고 [ 로그인 ] 버튼을 누르면 서버는 사용자가 입력한 아이디, 비밀번호를 받아 DB에서 회원 정보를 조회(Read) 함
우선 기능에 대한 정의, 스토리보드, 인터페이스를 작성하자
| << 기능에 대한 정의 >> |
| 로그인 하지 않은 사용자가 사용할 수 있는 기능으로 아이디, 비밀번호를 입력한 후 로그인을 함 아이디와 비밀번호를 정확하게 입력했다면 로그인 성공 페이지로 이동 아이디 또는 비밀번호를 부정확하게 입력했다면 로그인 실패 알림이 뜸 |
| << 스토리 보드 >> |
1. 로그인 시 2. 로그인 실패 시  |
| << 인터페이스 >> |
 |
먼저 화면부터 만들자
webapp -> member -> login.html 을 추가하고 아래 코드를 추가하자
<< 로그인 HTML >>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습 프로젝트</title>
<link rel="stylesheet" type="text/css" href="/studyProject/css/public/common.css">
<link rel="stylesheet" type="text/css" href="/studyProject/css/member/login.css">
</head>
<body>
<header><< 로그인 >></header>
<main>
<form action="/studyProject/member/login" method="POST">
<fieldset>
<label for="id">아이디</label>
<input type="text" name="id" id="id" required="required" dp-name="아이디">
</fieldset>
<fieldset>
<div>
<label for="pw">비밀번호</label>
<input type="password" name="pw" id="pw" required="required" dp-name="비밀번호">
</div>
</fieldset>
<fieldset>
<button type="button" role="submit">로그인</button>
</fieldset>
</form>
</main>
</body>
</html>
<< 로그인 CSS >>
webapp -> css -> member -> login.css 를 추가하고 아래 코드를 추가하자
더보기
@charset "UTF-8";
fieldset {
margin-bottom: 10px;
}
body > main > form > fieldset:nth-child(3) {
display: flex;
justify-content: end;
}
label {
display: inline-block;
width: 102px;
text-align: right;
}
<< 메인 HTML >>
webapp -> member -> index.html 을 추가하고 아래 코드를 추가하자
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습 프로젝트</title>
<link rel="stylesheet" type="text/css" href="/studyProject/css/public/common.css">
<link rel="stylesheet" type="text/css" href="/studyProject/css/index.css">
</head>
<body>
<header><< 메인 >></header>
<main>
<ul>
<li><a href="/studyProject/member/join.html">회원가입</a></li>
<li><a href="/studyProject/member/login.html">로그인</a></li>
<li><a href="#">회원 정보 수정</a></li>
<li><a href="#">회원 탈퇴</a></li>
</ul>
</main>
</body>
</html>
<< 메인 CSS >>
webapp -> css -> index.css 를 추가하고 아래 코드를 추가하자
더보기
@charset "UTF-8";
li {
margin-bottom: 5px;
}
추가한 페이지들을 확인해보자
이제 인터페이스를 보며 서블릿을 만들자
서블릿에서는 요청을 받아 파라미터를 꺼낸 후 검증을 함
검증에 통과했다면 서비스를 호출해 아이디, 비밀번호를 정확하게 입력했는지 확인할 것
서비스는 DAO 를 생성한 다음 회원 가입 때 선언해뒀던 selectById 메서드를 호출해 사용자가 입력한 아이디로 회원 정보를 조회할 것
조회된 회원 정보가 있다면 비밀번호 일치 여부를 확인함
비밀번호까지 일치한다면 로그인 성공
사용자가 입력한 아이디로 조회된 회원 정보가 없거나 조회된 회원 정보는 있지만 회원 정보의 비밀번호와 사용자가 입력한 비밀번호가 다르다면 로그인 실패
<< MemberService 클래스 >>
더보기
package member;
public class MemberService {
public boolean correctIdNPw(MemberDto member) {
MemberDao dao = new MemberDao();
MemberDto selectedMember = dao.selectOneById(member.getId());
if(selectedMember == null) {
return false;
}
// 사용자가 입력한 비밀번호
String userInputPw = member.getPw();
// 사용자가 입력한 아이디로 조회한 회원 정보의 비밀번호
String storedUserPw = selectedMember.getPw();
if(!userInputPw.equals(storedUserPw)) {
return false;
} else {
return true;
}
}
...
}
chapter04 -> MemberLogin 서블릿을 추가하고 아래 코드를 입력하자
<< MemberLogin 서블릿 >>
더보기
package member;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import utility.ParameterUtil;
@WebServlet("/member/login")
public class MemberLogin extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 파라미터 검증
String id = ParameterUtil.getString(request, "id");
String pw = ParameterUtil.getString(request, "pw");
if(!ParameterUtil.isId(id)) {
response.setStatus(400);
return ;
} else if(!ParameterUtil.isPw(pw)) {
response.setStatus(400);
return ;
}
MemberDto member = new MemberDto(id, pw, null, null);
MemberService service = new MemberService();
boolean result = service.correctIdNPw(member);
if(!result) {
response.setStatus(400);
}
}
}로그인 페이지에 [ 로그인 ] 버튼을 구현하자
login.html에 script 만 넣으면 됨
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습 프로젝트</title>
<link rel="stylesheet" type="text/css" href="/studyProject/css/public/common.css">
<link rel="stylesheet" type="text/css" href="/studyProject/css/member/login.css">
</head>
<body>
<header><< 로그인 >></header>
<main>
<form action="/studyProject/member/login" method="POST">
<fieldset>
<label for="id">아이디</label>
<input type="text" name="id" id="id" required="required" dp-name="아이디">
</fieldset>
<fieldset>
<div>
<label for="pw">비밀번호</label>
<input type="password" name="pw" id="pw" required="required" dp-name="비밀번호">
</div>
</fieldset>
<fieldset>
<button type="button" role="submit">회원가입</button>
</fieldset>
</form>
</main>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script>
$("button[role='submit']").on("click", function() {
let id = $("#id").val();
let pw = $("#pw").val();
$.ajax({
url: $("form").attr("action"),
type: $("form").attr("method"),
data: {"id": id, "pw": pw},
success: function() {
location.href = "/studyProject/member/index.html";
},
error: function() {
alert("아이디 또는 비밀번호를 확인해주세요.");
}
});
});
</script>
</body>
</html>이제 서버를 시작하고 아이디, 비밀번호를 올바르게 입력도 해보고 잘못 입력도 해보면서 결과를 확인하자
728x90
LIST
'Servlet + JSP > Serlvet-Chapter04' 카테고리의 다른 글
| Chapter04. CRUD 프로젝트 / 회원 탈퇴 (0) | 2023.03.09 |
|---|---|
| Chapter04. CRUD 프로젝트 / 회원 정보 수정 (2) | 2023.03.09 |
| Chapter04. Connection Pool 을 사용한 DB 연동 (0) | 2023.03.08 |
| Chapter04. CRUD 프로젝트 / 회원가입 (0) | 2023.03.07 |
| Chapter04. 자바의 DB와 관련된 자원은 close 를 해줘야한다. (2) | 2023.03.06 |