본문 바로가기
IT/JSP Practice

[JSP Practice] - JSP 로그인, 회원가입(CRUD) Model1 방식

by 차이나는 개발자 2020. 7. 30.
728x90
반응형

#JSP 로그인, 회원가입(CRUD) Model1 방식

 

 

※JSP Model 1 방식

-data => application

 

 

1. 로그인 화면입니다.

 

 

2. 회원가입 화면입니다.

 

 

3. 로그인 성공 화면입니다.

 

 

4. 상세보기(수정, 삭제) 화면 입니다.

 

 

#Member.java - 자바빈

public class Member {
	private String u_id; // 아이디
	private String u_pw; // 비밀번호
	private String u_name; // 이름
	private String u_nick; // 닉네임
	
	public Member() {
	}
	
	// 식별자
	public Member(String u_id) {
		setU_id(u_id);
	}

	public String getU_id() {
		return u_id;
	}
	

	public void setU_id(String u_id) {
		this.u_id = u_id;
	}

	public String getU_pw() {
		return u_pw;
	}

	public void setU_pw(String u_pw) {
		this.u_pw = u_pw;
	}

	public String getU_name() {
		return u_name;
	}

	public void setU_name(String u_name) {
		this.u_name = u_name;
	}

	
	public String getU_nick() {
		return u_nick;
	}

	public void setU_nick(String u_nick) {
		this.u_nick = u_nick;
	}

	// 식별자 
	@Override
	public boolean equals(Object o) {
		if(o == null || !(o instanceof Member)){
			return false;
		}
		Member other = (Member)o;
		return u_id.equals(other.getU_id());
	}
	
	// 객체 출력
	@Override
	public String toString(){
		return "Member [u_id=" + u_id + ", u_pw=" + u_pw +", u_name=" + u_name + ", u_nick=" + u_nick + "]"; 
	}
	
}

 

#MemberManager.java - 기능모음

import java.util.Vector;

import javax.servlet.ServletContext;

public class MemberManager {
	
	// 모든 필드에 기본값으로 공백지정
	public static Member getBlankMember(){
		Member member = new Member();
		member.setU_id("");
		member.setU_name("");
		member.setU_nick("");
		member.setU_pw("");
		
		return member;
	}
	
	// application영역에 저장되어있는 유저리스트 조회
	public static Vector<Member> getMemberList(ServletContext application){
		Vector<Member> memberList = (Vector<Member>)application.getAttribute("memberList");
		
		// 만약 리스트에 값이 없다면
		if(memberList == null){
			// 새로운 객체 생성
			memberList = new Vector<Member>();
			// application영역에 저장
			application.setAttribute("memberList", memberList);
		}
		return memberList;
	}
	
	// id와 일치하는 객체 찾기(ServletContext = application 영역)
	public static Member findMember(ServletContext application, String u_id){
		//
		Vector<Member> memberList = getMemberList(application);
		Member member = null;
		int idx = memberList.lastIndexOf(new Member(u_id));
		// id와 일치하는 객체가 존재 한다면
		if(idx != -1){
			// 가져온다.
			member = memberList.get(idx);
		}
		return member;
	}
	
	// 유저 추가
	public static boolean addMember(ServletContext application, Member member){
		Vector<Member> memberList = getMemberList(application);
		// 기본값 false
		boolean flag = false;
		// 가입시 내가 적은 id와 일치하는 id가 없다면 정상적으로 추가
		if(findMember(application, member.getU_id()) == null){
			memberList.add(member);
			flag = true;
		}
		return flag;
	} 
	
	// 유저 삭제
	public static boolean deleteMember(ServletContext application, String u_id){
		Vector<Member> memberList = getMemberList(application);
		// id와 일치하는 유저삭제
		return memberList.remove(findMember(application, u_id));
	}
	
	// 유저 수정
	public static boolean updateMember(ServletContext application, Member member){
		Vector<Member> memberList = getMemberList(application);
		int idx = memberList.indexOf(member);
		boolean flag = false;
		// 일치하는게 존재한다면 
		if(idx != -1){
			// 수정
			memberList.set(idx, member);
			flag = true;
		}
		return flag;
	}
}

 

#loginForm - 로그인 뷰

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	// url 별로 메시지 전달(리다이렉트로는 쓸수 없어서 세션으로 전달)
	String msg = (String)session.getAttribute("msg");

	if(msg == null){
		msg = "어서오세요";
	}
%>    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
	// 회원가입 창으로 이동
	function goJoin(){
		location.href="join.jsp";
	}
	
	// 로그인 처리 페이지로 이동
	function checkLogin(){
		var obj = document.loginForm;
		obj.action = "checkLogin.jsp";
		obj.method = "post";
		obj.submit();
	}
</script>
</head>
<body>
	<p class="titleStr">
		Login
	</p>
	<form name="loginForm">
		<div class="centerBox">
			<label for="u_id">ID :</label><input type="text" name="u_id" /><br/>
			<label for="u_pw">PW :</label><input type="password" name="u_pw" /><br/>
			<div class="btns">
				<input type="button" value="로그인" onclick="checkLogin()" />
				<input type="button" value="회원가입" onclick="goJoin()" />
			</div>
		</div>
		<div class="msgBox">
			<%= msg %>
		</div>
	</form>
</body>
</html>
<!-- 메시지는 현재페이지에서 사용되야하기때문에 다른페이지를 가면 삭제가 되어야한다. -->
<%@ include file="removeMessage.jspf" %>

 

#join - 회원가입 뷰

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="org.doo.*"%>
<%
	// 세션에 저장된 msg
	String msg = (String)session.getAttribute("msg");
	if(msg == null){
		msg = "모든 항목은 필수입력입니다.";
	}
	
	// 세션에 저장되어있는 member의 정보가 담긴 객체
	Member member = (Member)session.getAttribute("tempMember");
	// 처음에 로그인 폼에서 넘어올 때는 비어있어야하기 때문에 getBlankMember()메서드를 사용
	if(member == null){
		// 만약 빈 값이라면 getBlacnkMember()를 호출하여 ""값을 부여
		member = MemberManager.getBlankMember();
	}
	// 세션 사용후 삭제
	session.removeAttribute("tempMember");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
	// 회원가입
	function checkAndMove(){
		// joinForm은 form의 name값(문서상의 joinForm)
		var obj = document.joinForm;
		// 시작값 true
		var flag = true;
		// 조건 : true, obj안에 유효한 값
		for(var i = 0; flag && i<obj.length; i++){
			// joinForm안의 타입 값을 소문자로 변경 -> 타입값이 button아닐 경우
			if(obj[i].type.toLowerCase() != "button"){
				// button제외한 타입들의 값이 공백일 경우
				if(obj[i].value.trim().length == 0){
					// id가 msg인 태그에  알림말 + 공백이 있는 태그 이름을 출력
					// innerHTML -> 
					document.getElementById("msg").innerHTML =
						"필수입력항목 누락 : " + obj[i].title;
					// 공백이 있으니 다시 공백검사하러 순환
					flag = false;
				}
			}
		}
		// 공백이 없을시 
		if(flag){
			// form에 입력된 비밀번호와 재입력 값을 비교
			if(obj.u_pw.value != obj.u_re.value){
				// 일치하지 않으면 알림 출력
				document.getElementById("msg").innerHTML = "비밀번호가 일치하지 않습니다.";
				// 다시 순환
				flag = false;
			}
		}
		
		// 유효성 검사 종료후 전송
		if(flag){
			obj.method = "post";
			obj.action = "doJoin.jsp";
			obj.submit();
		}
	}
	 
	// 회원가입 취소
	function cancelJoin(){
		// 취소 메시지 전달후 이동
		location.href="cancelJoin.jsp";
	}
</script>
</head>
<body>
	<p class="titleStr">
		Join Member
	</p>
	<form name="joinForm">
		<div class="centerBox">
			<label for="u_id">ID :</label>
			<!-- value에 값 : 입력 실패시 기존의 값을 유지하기위해서 세션에서 받아옴 -->
			<input type="text" name="u_id" title="ID" value="<%=member.getU_id() %>" /><br/>
			<label for="u_pw">PW :</label>
			<input type="text" name="u_pw" title="PASSWORD" /><br/>
			<label for="u_re">RETRY :</label>
			<input type="text" name="u_re" title="RETRY" /><br/>
			<label for="u_name">NAME :</label>
			<input type="text" name="u_name" title="NAME" value="<%=member.getU_name() %>" /><br/>
			<label for="u_nick">NICK :</label>
			<input type="text" name="u_nick" title="NICKNAME" value="<%=member.getU_nick() %>" /><br/>
			<div class="btns">
				<input type="button" value="회원가입" onclick="checkAndMove()" />
				<input type="button" value="취소" onclick="cancelJoin()" />
			</div>
		</div>
		<div class="msgBox" id="msg">
			<%= msg %>
		</div>
	</form>
</body>
</html>
<%-- 세션에 담긴 모든 msg 삭제 --%>
<%@ include file="removeMessage.jspf" %>

 

#doJoin - 회원가입 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="org.doo.*" %>
<%@ page import="java.util.*" %>
<%
	request.setCharacterEncoding("euc_kr");
%>
<!-- 자바빈에서 Member객체 등록 -->
<jsp:useBean id="member" class="org.doo.Member" />
<!-- * -> 모든 값을 setter(입력한 폼의 name 값 = 멤버변수 값 -->
<jsp:setProperty property="*" name="member"/> 

<%
	// 가입 성공
	String msg ="회원가입 성공";
	String nextPage = "loginForm.jsp";
	// 가입 실패 (addMember()에서 중복된 아이디가 있으면 false를 반환 !false
	if(!MemberManager.addMember(application, member)){
		msg = "이미 존재하는 아이디 입니다.";
		// 중복이 있을시 이전의 값들을 다시 원상복귀 시킨다.(submit()시 초기화 되기때문)
		session.setAttribute("tempMember", member);
		// 실패시 다시 Join창으로 이동
		nextPage = "join.jsp";
	}
	session.setAttribute("msg", msg);
	response.sendRedirect(nextPage);
%>

 

#checkLogin - 로그인 체크 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="org.doo.*" %>
<%
	String u_id = request.getParameter("u_id");
	String u_pw = request.getParameter("u_pw");
	// findMember() -> id와 일치하는 객체를 찾는다.
	Member member = MemberManager.findMember(application, u_id);
	String msg;
	String nextPage = "loginForm.jsp";
	// 아이디가 application영역상에 존재 하지 않을때
	if(member == null){
		msg = "가입 후 이용해 주세요";
	}else{
		// 존재하지만 비밀번호가 다를때
		if(!member.getU_pw().equals(u_pw)){
			msg = "비밀번호가 일치하지 않습니다.";
		}else{
			// 모든 조건에 만족할때
			msg = member.getU_nick() + "님 환영합니다.";
			nextPage = "loginSuccess.jsp";
			// 세션에 로그인 정보(아이디, 비밀번호) 저장
			session.setAttribute("member", member);
		}
	}
	session.setAttribute("msg", msg);
%>
<jsp:forward page="<%= nextPage %>" />

 

#loginSuccess - 로그인 성공 뷰

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!-- 로그인을 한 사람만 볼 수 있는 페이지라서 설정  -->
<%@ include file="checkSession.jspf" %>    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
	// 로그아웃 페이지로 이동
	function goLogout(){
		location.href="logout.jsp";
	}
	
	// 정보보기 페이지로 이동
	function goInfo(){
		var obj = document.successForm;
		obj.action = "goInfo.jsp";
		obj.method = "post";
		obj.submit();
	}
</script>
</head>
<body>
	<p class="titleStr">
		Success!!
	</p>
	<form name="successForm">
		<div class="centerBox">
			<div class="btns">
				<input type="button" value="정보보기" onclick="goInfo()" />
				<input type="button" value="로그아웃" onclick="goLogout()" />
			</div>
		</div>
		<div class="msgBox">
		<%= session.getAttribute("msg") %>
		 </div>
	</form>
</body>
</html>
<%@ include file="removeMessage.jspf" %>

 

#info - 정보보기 뷰

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ include file="checkSession.jspf" %>    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
	// 회원정보 수정
	function doUpdate(){
		var obj = document.infoForm;
		
		var flag = true;
		for(var i = 0; flag && i<obj.length; i++){
			if(obj[i].type.toLowerCase() != "button"){
				if(obj[i].value.trim().length == 0){
					document.getElementById("msg").innerHTML =
						"필수입력항목 누락 : " + obj[i].title;
					flag = false;
				}
			}
		}
		
		if(flag){
			if(obj.u_pw.value != obj.u_re.value){
				document.getElementById("msg").innerHTML ="비밀번호가 일치하지 않습니다.";
				flag = false;
			}
		}
		
		if(flag){
			obj.method = "post";
			obj.action = "doUpdate.jsp";
			obj.submit();
		}
	}
	
	// 정보보기 취소
	function cancelInfo(){
		location.href="cancelInfo.jsp";
	}
	
	// 회원탈퇴
	function deleteMember(){
		/*
			### 자바크스크립트에서 false로 처리되는 갑 ###
			null
			undefined(자바스크립트에서 선언만 하고 값이 없음)
			+0, -0 (0을 제외한 숫자는 다 true)
			Nan (숫자가 아니다.)
			false 
		*/
		if(window.confirm("정말 탈퇴하시겠습니까?")){
			location.href="doDelete.jsp";
		}
	}
</script>
</head>
<body>
	<p class="titleStr">
		Info
	</p>
	<form name="infoForm">
		<div class="centerBox">
			<label for="u_id">ID :</label> <input type="text" name="u_id" value="<%=member.getU_id()%>" readonly /><br/>
			<label for="u_pw">PW :</label> <input type="password" name="u_pw" title="Password" /><br/>
			<label for="u_re">Retry :</label> <input type="password" name="u_re" title="Retry" /><br/>
			<label for="u_name">Name :</label> <input type="text" name="u_name" title="Name" value="<%=member.getU_name()%>" readonly /><br/>
			<label for="u_nick">Nick :</label> <input type="text" name="u_nick" title="Nickname" value="<%=member.getU_nick()%>" /><br/>				
			<div class="btns"> 
				<input type="button" value="수정" onclick="doUpdate()" />
				<input type="button" value="취소" onclick="cancelInfo()"/> 
				<input type="button" value="회원탈퇴" onclick="deleteMember()"/>
			</div>
		</div>
		<div class="msgBox" id="msg">
			<%= session.getAttribute("msg") %>
		</div>		 
	</form>
</body>
</html>
<%@ include file="removeMessage.jspf" %>

 

#goInfo - 정보보기 이동 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	session.setAttribute("msg", "비밀번호와 닉네임이 변경가능합니다.");
%>
<jsp:forward page="info.jsp" />

 

#cancelJoin - 가입취소 이동 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	session.setAttribute("msg", "가입이 취소되었습니다.");
%>
<jsp:forward page="loginForm.jsp" />

 

#cancelInfo - 정보보기 취소 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<% 
	session.setAttribute("msg", "정보보기가 취소되었습니다.");
%>
<jsp:forward page="loginSuccess.jsp" />

 

#doDelete - 회원탈퇴 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="org.doo.*" %>
<%@ include file="checkSession.jspf" %>    
<%	
	// deleteMember() -> application <-> session(u_id)일치하는 것이 있다면 정상적으로 삭제
	if(MemberManager.deleteMember(application, member.getU_id())){
		session.invalidate();
		session = request.getSession();
		session.setAttribute("msg", "회원탈퇴가 완료되었습니다.");
		response.sendRedirect("loginForm.jsp");
	}else{
		// 없으면 오류 알림 후 값 들고 info로 다시 이동
		session.setAttribute("msg", "회원탈퇴중 오류가 발생했습니다.");
%>
	<jsp:forward page="info.jsp" />
<%
	}
%>

 

#doUpdate - 회원수정 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="org.doo.*" %>
<%@ include file="checkSession.jspf" %>    

<%
	request.setCharacterEncoding("euc_kr");
	//세션에서 비밀번호와 닉네임을 가져와서 setter로 수정
	member.setU_pw(request.getParameter("u_pw"));
	member.setU_nick(request.getParameter("u_nick"));
	
	// updateMember() -> application <-> session 일치하는게 있다면(true) 정상적으로 수정 
	MemberManager.updateMember(application, member);
	session.setAttribute("msg", "회원정보가 수정되었습니다.");
	response.sendRedirect("loginSuccess.jsp");
%>

 

#logout - 로그아웃 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	// 로그아웃시 세션의 모든 데이터 삭제
	session.invalidate();
	
	// 위에서 기존의 세션은 삭제했기 때문에 새로운 세션을 생성(로그인 폼에 보낼 메시지 때문에 미리 받아옴)
	session = request.getSession();
	session.setAttribute("msg", "로그아웃 되었습니다.");
%>
<jsp:forward page="loginForm.jsp" />


#checkSession.jspf - 세션 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="org.doo.*" %>
<%
	// Member타입으로 저장된 세션값을 들고온다.
	Member member = (Member)session.getAttribute("member");
	
	// 없으면 되돌려 보낸다.(다른방식 forward)
	// Web-INF는 외부에서 요청이 안된다.
	if(member == null){
		session.setAttribute("msg", "잘못된 접근입니다.");
		
%>		
	<jsp:forward page="loginForm.jsp" />

<%
	}
%>


#removeMessage.jspf - 메시지 세션 삭제 처리

<%@ page language="java" contentType="text/html; charset=EUC-KR" 
    pageEncoding="EUC-KR"%> 
<% 
session.removeAttribute("msg"); 
%>

 

#main.css

@CHARSET "EUC-KR";

.titleStr {
		text-align : center;
		font-size : 2em;
		font-weight : bold;
}
.btns {
			margin-top : 1em;
			text-align : center;
}
.msgBox {
		margin-top : 1em;
		text-align : center;
		color : blue;
		font-size : 0.8em;
		font-weight : bold;
}
label {			
		position: absolute;			
		width : 3.5em;
		text-align : right;
}
input[type="text"], input[type="password"] {
		width : 10em;
		height : 1.2em; 
		margin-left : 5.5em;
		margin-bottom : 0.5em;
}
input[type="button"] {
		width : 5.5em;
}

.centerBox {
	margin : 0 auto;
	padding : 2em;
	width : 15em;
	border : 2px solid gray;			
}

 

 

 

728x90
반응형
저작자표시

'IT > JSP Practice' 카테고리의 다른 글

[JSP Practice] - JSP MODEL 2 PreparedStatement  (0) 2020.08.04
[JSP Practice] - JSP Model 2 Statement  (0) 2020.08.04
[JSP Practice] - JSP 게시판 CRUD + 페이징(Paging)처리 Model 1 방식  (0) 2020.07.27
[JSP Practice] - JSP 게시판 CRUD(글쓰기, 읽기, 수정, 삭제) Model 1 방식  (0) 2020.07.24
[JSP Practice] - JSP 게시판 글쓰기, 목록 보기(객체 직렬화) Model1 방식  (0) 2020.07.24

관련글

댓글

티스토리툴바