회원가입(서블릿) - 회원가입, 로그인, 비밀번호 찾기, 로그아웃

0. 파일 작성 위치

○ created.jsp : 회원가입

○ login.jsp : 로그인

○ searchPwd.jsp : 비밀번호 찾기

○ updated.jsp : 회원정보 수정

○ 외부 css파일과 javascript파일 사용 방법

○ css파일

<link rel="stylesheet" href="css파일 경로" type="text/css" />

○ javascript 사용

<script type="text/javascript" src="javascript파일 경로"></script>

○ CustomInfo.java / MemberServlet.java 위치

1. 회원가입

index.jsp(초기화면) → created.do → created.jsp → creatd_ok.do → index.jsp

① created.do(MemberServlet.java)

○ 회원가입 화면으로 이동

○ forward로 보내기 때문에 주소 숨김 가능

if(uri.indexOf("created.do")!=-1){

url = "/member/created.jsp";

forward(req, resp, url);

}

② created.jsp

○ body부분

- form양식으로 데이터 전송 → sendIt();

<body>

회원가입

</div>

<form action="" method="post" name="myForm">

<dl>

</dl>

</div>

<dl>

</dl>

</div>

<dl>

</dl>

</div>

<dl>

</dl>

</div>

<dl>

</dl>

</div>

</div>

</form>

</div>

</body>

○ sendIt() 함수

- 작성 정보 검사 → 해당 값을 입력하지 않으면 커서 이동

- str.trim() : str의 앞 뒤 공백 제거

- created_ok.do로 이동

function sendIt(){

var f = document.myForm;

str = f.userId.value;

str = str.trim();

if(!str){

alert("아이디를 입력해주세요");

f.userId.focus();

return;

}

f.userId.value = str;

str = f.userPwd.value;

str = str.trim();

if(!str){

alert("비밀번호를 입력해주세요");

f.userPwd.focus();

return;

}

f.userPwd.value = str;

str = f.userName.value;

str = str.trim();

if(!str){

alert("이름을 입력해주세요");

f.userName.focus();

return;

}

f.userName.value = str;

str = f.userBirth.value;

str = str.trim();

if(!str){

alert("생일을 입력해주세요");

f.userBirth.focus();

return;

}

f.userBirth.value = str;

str = f.userTel.value;

str = str.trim();

if(!str){

alert("전화번호를 입력해주세요");

f.userTel.focus();

return;

}

f.userTel.value = str;

f.action = "<%=cp%>/join/created_ok.do";

f.submit();

}

</script>

③ created_ok.do(MemberServlet.java)

○ created.jsp에서 form양식으로 보낸 데이터를 받음

→ request.getParameter사용

→ 받은 값은 dto에 setter를 사용하여 넣음

○ 회원가입을 하면 초기화면(index)으로 이동

else if(uri.indexOf("created_ok.do")!=-1){

MemberDTO dto = new MemberDTO();

dto.setUserId(req.getParameter("userId"));

dto.setUserPwd(req.getParameter("userPwd"));

dto.setUserName(req.getParameter("userName"));

dto.setUserBirth(req.getParameter("userBirth"));

dto.setUserTel(req.getParameter("userTel"));

dao.insertData(dto);

url = cp+"/index.jsp";

resp.sendRedirect(url);

}

결과

○ index.jsp에서 회원가입 클릭 → created.do → created.jsp로 이동

주소는 숨겨서 이동 → created.do에서 forward로 보내주기 때문

○ 정보 입력

○ 가입하기 클릭 → sendIt() → action : created_ok.do → index.jsp로 이동

created_ok.do에서 정보를 DB에 넣는 작업 수행

2. 로그인

index.jsp → login.do → login.jsp → login_ok.do → 로그인 성공시 : index,jsp

→ 로그인 실패시 : login.jsp (밑에 로그인 실패 메시기 출력)

① CustomInfo.java

○ 로그인 성공시 userId와 userName을 session에 올림

→ CustomInfo 클래스를 사용

package com.join;

public class CustomInfo {

private String userId;

private String userName;

public String getUserId() {

return userId;

}

public void setUserId(String userId) {

this.userId = userId;

}

public String getUserName() {

return userName;

}

public void setUserName(String userName) {

this.userName = userName;

}

② login.do(MemberServlet.java)

○ 로그인 화면으로 이동

○ forward로 보내기 때문에 주소 숨김 가능

○ 주소 : http://192.168.16.8:8080/study/join/login.do

else if(uri.indexOf("login.do")!=-1){

url = "/member/login.jsp";

forward(req, resp, url);

}

③ login.jsp

○ body 부분

- form양식으로 데이터 전송 → login()

- 로그인 : login() → login_ok.do

- 취소 : index.jsp

- 회원가입 : created.do → created.jsp

- 로그인 실패시 ${message }에 "아이디와 비밀번호를 확인해주세요" 출력

비밀번호 찾기 가능 → JSTL을 사용하여 message에 값이 있을때만 보이도록 설정

- 비밀번호 찾기 : searchPwd.do → searchPwd.jsp

<body>

<form action="" method="post" name="myForm">

</tr>

</td>

</tr>

</td>

</tr>

<input type="button" value="회원가입" class="btn2" onclick="javascript:location.href='<%=cp%>/join/created.do';">

</td>

</tr>

<font color="red"><b>${message }</b></font>

</td>

</tr>

<c:if test="${!empty message }">

<a href="<%=cp%>/join/searchPwd.do">비밀번호 찾기</a>

<td>

</tr>

</c:if>

</table>

</form>

</body>

○ login() 함수

- 작성 정보 검사

- login_ok.do로 이동

function login(){

var f = document.myForm;

if(!f.userId.value){

alert("아이디를 입력하세요");

f.userId.focus();

return;

}

if(!f.userPwd.value){

alert("비밀번호를 입력하세요");

f.userPwd.focus();

return;

}

f.action = "<%=cp%>/join/login_ok.do";

f.submit();

}

</script>

④ login_ok.do(MemberServlet.java)

○ login.jsp에서 form양식으로 보낸 데이터를 받음

→ request.getParameter사용

○ dto에 userId를 사용하여 해당 정보를 받음

- 해당 정보가 있으면 dto값이, 없으면 null값이 들어온다

○ dto값이 null이거나 입력한 비밀번호와 DB의 비밀번호가 일치하지 않으면

message를 넘겨준다

○ 회원정보 일치

- CustomInfo에 로그인에서 성공한 아이디와 이름을 넣는다

○ session에 custimInfo값을 올린다

- session.setAttribute("session에 보낼 변수명", session에 올리는 변수);

○ 회원가입을 하면 초기화면(index)으로 이동

else if(uri.indexOf("login_ok.do")!=-1){

String userId = req.getParameter("userId");

String userPwd = req.getParameter("userPwd");

MemberDTO dto = dao.getReadData(userId);

if(dto==null || !dto.getUserPwd().equals(userPwd)){

req.setAttribute("message","아이디와 비밀번호를 확인해주세요");

url = "/member/login.jsp";

forward(req, resp, url);

return; //로그인에 실패하면 이 밑으로는 실행되지 않도록 return 실행

}

//CustomInfo에 로그인에서 성공한 아이디와 이름을 넣음

CustomInfo info = new CustomInfo();

info.setUserId(dto.getUserId());

info.setUserName(dto.getUserName());

//session을 가지고 있지않아, session 객체를 달라고 요청해야한다

HttpSession session = req.getSession();

session.setAttribute("customInfo", info);

//session의 값이 바뀌면 redirect해야한다

url = cp;

resp.sendRedirect(url);

}

결과

○ index.jsp에서 로그인 클릭 → login.do → login.jsp

message값이 null이기 때문에 비밀번호 찾기 출력X

○ 로그인 정보 입력

○ 로그인 성공

login_ok.do에서 로그인 확인

○ 로그인 실패

login_ok.do에서 로그인 실패시 message값을 가지고 이동

"아이디와 비밀번호를 확인해주세요" 출력

message값이 null이 아니기 때문에 비밀번호 찾기 출력

3. 비밀번호 찾기

→ 비밀번호 찾기 실패시 : searchPwd.jsp

① searchPwd.do(MemberServlet.java)

else if(uri.indexOf("searchPwd.do")!=-1){

url = "/member/searchPwd.jsp";

forward(req, resp, url);

}

② searchPwd.jsp

○ body부분

- form양식으로 데이터 전송 → search()

- 비밀번호 찾기 : search() → login_ok.do

- 취소 : login.do → login.jsp

- 비밀번호 찾기 실패시 ${message }에 "회원정보가 존재하지 않습니다" 출력

성공시 login.do → login.jsp에 ${message }에 "비밀번호는 000 입니다." 출력

<body>

</tr>

</td>

</tr>

<input type="text" name="userTel" placeholder="010-1234-1234"

style="width: 150px; height: 20px; " maxlength="13" size="15">

</td>

</tr>

<input type="button" value="취소" class="btn2" onclick="javascript:location.href='<%=cp%>/join/login.do';">

</td>

</tr>

<font color="red"><b>${message }</b></font>

</td>

</tr>

</table>

</form>

</body>

○ search()함수 부분

- 작성 정보 검사

- searchPwd_ok.do로 이동

function search(){

var f = document.myForm;

if(!f.userId.value){

alert("아이디를 입력하세요");

f.userId.focus();

return;

}

if(!f.userTel.value){

alert("전화번호를 입력하세요");

f.userTel.focus();

return

}

f.action = "<%=cp%>/join/searchPwd_ok.do";

f.submit();

}

</script>

③ searchPwd_ok.do(MemberServlet.java)

○ searchPwd.jsp에서 form양식으로 보낸 데이터를 받음

→ request.getParameter사용

○ dto에 userId를 사용하여 해당 정보를 받음

- 해당 정보가 있으면 dto값이, 없으면 null값이 들어온다

○ dto값이 null이거나 입력한 전화번호와 DB의 전화번호가 일치하지 않으면

message를 넘겨준다 → searchPwd.jsp로 이동

○ 회원정보 일치

- message에 비밀번호를 넣어서 login.jsp로 이동

else if(uri.indexOf("searchPwd_ok.do")!=-1){

String userId = req.getParameter("userId");

String userTel = req.getParameter("userTel");

MemberDTO dto = dao.getReadData(userId);

if(dto==null || !dto.getUserTel().equals(userTel)){

req.setAttribute("message","회원정보가 존재하지 않습니다.");

url = "/member/searchPwd.jsp";

forward(req, resp, url);

return; //로그인에 실패하면 이 밑으로는 실행되지 않도록

}

req.setAttribute("message","비밀번호는 "+dto.getUserPwd()+" 입니다.");

url = "/member/login.jsp";

forward(req, resp, url);

}

결과

○ login.jsp에서 비밀번호 찾기 클릭시 → searchPwd.do → searchPwd.jsp

○ search.do → search.jsp

아이디와 전화번호 작성

○ 찾기 실패시 searchPwd.jsp페이지에

"회원정보가 존재하지 않습니다" 출력

searchPwd.jsp → searchPwd_ok.do → searchPwd.jsp

searchPwd_ok.do에서 forward로 보내기 때문에 주소는 searchPwd_ok.do

○ 찾기 성공시 login.jsp페이지에

"비밀번호는 000 입니다." 출력

searchPwd.jsp → searchPwd_ok.do → login.jsp

searchPwd_ok.do에서 forward로 보내기 때문에 주소는 searchPwd_ok.do

4. 로그아웃

index.jsp → logout.do → index.jsp

① logout.do(MemberServlet.java)

else if(uri.indexOf("logout.do")!=-1){

HttpSession session = req.getSession();

session.removeAttribute("customInfo");

session.invalidate(); //변수도 삭제

url = cp;

resp.sendRedirect(url);

}

'STUDY > JSP' 카테고리의 다른 글

회원가입(서블릿) - 정보수정, 게시판 (0)	2019.02.27
회원가입(서블릿) - index.jsp (0)	2019.02.26
회원가입(서블릿) - DB, DAO, DTO (0)	2019.02.26
게시판(서블릿) - 코드 (0)	2019.02.26
게시판(서블릿) - web.xml / jsp (0)	2019.02.26

빨간머리앤

회원가입(서블릿) - 회원가입, 로그인, 비밀번호 찾기, 로그아웃

'STUDY > JSP' 카테고리의 다른 글

댓글

티스토리툴바

회원가입(서블릿) - 회원가입, 로그인, 비밀번호 찾기, 로그아웃

'STUDY > JSP' 카테고리의 다른 글

관련글

댓글

티스토리툴바