갈림길 이정표

[JSP] (최종 - Model Ⅰ방식) 회원 로그인 및 관리 (feat. session, 팝업창, Openet) 본문

Programming Language/Servlet & JSP

[JSP] (최종 - Model Ⅰ방식) 회원 로그인 및 관리 (feat. session, 팝업창, Openet)

이몽뇽 2020. 9. 7. 09:17

 

▽ web_myshop 사이드 바 목록

▽구현을 위한 기본 java source 파일들

더보기

▼ 이제 Bean.java는 INSERT 용 & DTO.java는 SELECT, UPDATE, DELETE용 이라는 것은 기본이다.

[MemberBean.java]

package kr.shop.member;

public class MemberBean {	//formBean으로 사용 목적 (INSERT 용)
	private String id, passwd, name, email, phone, zipcode, address, job;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	public String getZipcode() {
		return zipcode;
	}

	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	public String getJob() {
		return job;
	}

	public void setJob(String job) {
		this.job = job;
	}
}

[MemberDTO.java]

package kr.shop.member;

public class MemberDTO {	//DB에서 SELECT, UPDATE, DELETE 용
	private String id, passwd, name, email, phone, zipcode, address, job;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	public String getZipcode() {
		return zipcode;
	}

	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	public String getJob() {
		return job;
	}

	public void setJob(String job) {
		this.job = job;
	}
}

▼ DB에 저장된 주소의 정보를 받아오는 Zipcode 파일은 (세부주소 제외) 사용자로부터 새로 입력된 값을 입력하는 것이 아닌 정해진 주소들 중 사용자가 찾게끔 하는 목적이기 때문에 DTO.java만 필요하다. (INSERT 필요없음)

[ZipcodeDTO.java]

package kr.shop.member;

public class ZipcodeDTO {
	private String zipcode, area1, area2, area3, area4;

	public String getZipcode() {
		return zipcode;
	}

	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}

	public String getArea1() {
		return area1;
	}

	public void setArea1(String area1) {
		this.area1 = area1;
	}

	public String getArea2() {
		return area2;
	}

	public void setArea2(String area2) {
		this.area2 = area2;
	}

	public String getArea3() {
		return area3;
	}

	public void setArea3(String area3) {
		this.area3 = area3;
	}

	public String getArea4() {
		return area4;
	}

	public void setArea4(String area4) {
		this.area4 = area4;
	}

}

▽DAO(Data Access Object)를 위한 자바 클래스 파일 (ing...)

더보기 
[MemberMgr.java]

package kr.shop.member;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class MemberMgr {
	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	private DataSource ds;
	
	public MemberMgr() {
		try {
			Context context = new InitialContext();
			ds = (DataSource)context.lookup("java:comp/env/jdbc_maria");	//JDBC Pooling(JNDI)
		} catch (Exception e) {
			System.out.println("MemberMgr err: " + e);
		}
	}
	
	//우편번호 검색
	public ArrayList<ZipcodeDTO> zipcodeRead(String dongName){
		ArrayList<ZipcodeDTO> list = new ArrayList<ZipcodeDTO>();
		String sql = "SELECT * FROM ziptab WHERE area3 LIKE ?";
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, dongName + "%");
			rs = pstmt.executeQuery();
			while(rs.next()) {
				//System.out.println(rs.getString("area3")); → 연습용
				ZipcodeDTO dto = new ZipcodeDTO();
				dto.setZipcode(rs.getString("zipcode"));
				dto.setArea1(rs.getString("area1"));
				dto.setArea2(rs.getString("area2"));
				dto.setArea3(rs.getString("area3"));
				dto.setArea4(rs.getString("area4"));
				list.add(dto);
			}
		} catch (Exception e) {
			System.out.println("zipcodeRead() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
		return list;
	}
	
	public boolean checkId(String id) {
		boolean b = false;
		String sql = "SELECT id FROM member WHERE id = ?";
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);
			rs = pstmt.executeQuery();
			//if(!rs.next()) b = true; 이렇게 복잡하게 안써도 rs.next()자체가 boolean 타입이라서 바로 b에 치환 해도 됨
			b = rs.next();	//자료가 있으면  true
		} catch (Exception e) {
			System.out.println("checkId() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
		return b;
	}
	
	public boolean memberInsert(MemberBean memberBean) {
		boolean b = false;
		String sql = "INSERT INTO member VALUES(?,?,?,?,?,?,?,?)";
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, memberBean.getId());
			pstmt.setString(2, memberBean.getPasswd());
			pstmt.setString(3, memberBean.getName());
			pstmt.setString(4, memberBean.getEmail());
			pstmt.setString(5, memberBean.getPhone());
			pstmt.setString(6, memberBean.getZipcode());
			pstmt.setString(7, memberBean.getAddress());
			pstmt.setString(8, memberBean.getJob());
			
			if(pstmt.executeUpdate() > 0) b = true;
		} catch (Exception e) {
			System.out.println("memberInsert() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
		
		return b;
	}
	
	public boolean loginCheck(String id, String passwd) {
		boolean b = false;
		String sql = "SELECT id, passwd FROM member WHERE id = ? AND passwd = ?";
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);
			pstmt.setString(2, passwd);
			rs = pstmt.executeQuery();
			
			b = rs.next();	//자료가 있으면  true
		} catch (Exception e) {
			System.out.println("loginCheck() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
		return b;
	}
	
	public MemberDTO getMember(String id) {
		MemberDTO dto = null;	//결과가 있을 때만 받아오기 위함
		String sql ="SELECT * FROM member WHERE id=?";
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);
			rs = pstmt.executeQuery();
			if(rs.next()) {
				dto = new MemberDTO();
				dto.setId(rs.getString("id"));
				dto.setPasswd(rs.getString("passwd"));
				dto.setName(rs.getString("name"));
				dto.setEmail(rs.getString("email"));
				dto.setPhone(rs.getString("phone"));
				dto.setZipcode(rs.getString("zipcode"));
				dto.setAddress(rs.getString("address"));
				dto.setJob(rs.getString("job"));
			}
		} catch (Exception e) {
			System.out.println("getMember() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
		
		return dto;
	}
	
	public boolean memberUpdate(MemberBean bean, String id) {
		boolean b = false;
		String sql ="UPDATE member SET passwd=?, name=?, email=?, phone=?, zipcode=?, address=?, job=? WHERE id=?";
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, bean.getPasswd());
			pstmt.setString(2, bean.getName());
			pstmt.setString(3, bean.getEmail());
			pstmt.setString(4, bean.getPhone());
			pstmt.setString(5, bean.getZipcode());
			pstmt.setString(6, bean.getAddress());
			pstmt.setString(7, bean.getJob());
			pstmt.setString(8, id);
			if(pstmt.executeUpdate() > 0) b = true;
		} catch (Exception e) {
			System.out.println("memberUpdate() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
		
		return b;
	}
	
	//관리자 로그인 관련
	public boolean adminLoginCheck(String adminid, String adminpasswd) {
		boolean b = false;
		String sql = "SELECT * FROM admin WHERE admin_id=? and admin_passwd=?";
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, adminid);
			pstmt.setString(2, adminpasswd);
			rs = pstmt.executeQuery();
			b = rs.next();
		} catch (Exception e) {
			System.out.println("memberUpdate() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
	
		return b;
	}
	
	public ArrayList<MemberDTO> getMemberAll(){
		ArrayList<MemberDTO> list = new ArrayList<MemberDTO>();
		String sql ="SELECT * FROM member ORDER BY id ASC";	//ASC 생략 가능 (순서 기본값)
		
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				MemberDTO dto = new MemberDTO();
				dto.setId(rs.getString("id"));
				dto.setPasswd(rs.getString("passwd"));
				dto.setName(rs.getString("name"));
				dto.setEmail(rs.getString("email"));
				dto.setPhone(rs.getString("phone"));
				dto.setZipcode(rs.getString("zipcode"));
				dto.setAddress(rs.getString("address"));
				dto.setJob(rs.getString("job"));
				
				list.add(dto);
			}
			
		} catch (Exception e) {
			System.out.println("getMemberAll() err: " + e);
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (Exception e2) {
		
			}
		}
		
		return list;
	}
}

▽사용자 로그인 시도를 위한 로그인 메인

더보기

▼ ※ [login.jsp]는 다음 글에서 쇼핑몰과의 연결을 위해 [login2.jsp]로 사본을 만들 예정

[login.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String id = (String)session.getAttribute("idKey"); //세션 읽기
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 사용자 로그인 시도 (별도용) </title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script src="../js/script.js"></script>
<script type="text/javascript">
window.onload = function(){
	document.getElementById("btnLogin").addEventListener("click", funcLogin, false); // false 의미?
	document.getElementById("btnNewMember").addEventListener("click", funcNew, false);
}

function funcLogin(){
	//alert("a");
	if(loginForm.id.value === ""){
		alert("아이디를 입력하시오.")
		loginForm.id.focus();
		//return; 필요없음
	}else if(loginForm.passwd.value === ""){
		alert("비밀번호를 입력하시오.")
		loginForm.passwd.focus();
	}else{
		loginForm.action = "loginproc.jsp";
		loginForm.method = "post";
		loginForm.submit();
	}
}

function funcNew(){
	//alert("b");
	location.href="register.jsp";
}
</script>
</head>
<body>
<br>
<%
if(id != null){
%>
	<b><%=id %>님 환영합니다</b>
	준비된 기능을 사용할 수 있어요<br>
	<a href="logout.jsp">로그아웃</a>
<% }else{%>
	<form name="loginForm">
	<table>
	  <tr>
	  	<td>** 로그인 **</td>
	  </tr>
	  <tr>
	  	<td>아이디 : <input type="text" name="id"></td>
	  </tr>
	  <tr>
	  	<td>비밀번호 : <input type="password" name="passwd"></td>
	  </tr>
	  <tr>
	  	<td>
	  		<input type="button" value="로 그 인" id="btnLogin">&nbsp;
	  		<input type="button" value="회원가입" id="btnNewMember">
	  	</td>
	  </tr>
	</table>
	</form>
<%	
}
%>
</body>
</html>

▲(String)session.getAttribute("idKey"); & if (id != null) 의 조건문으로 세션이 유효한 동안 보여지는 화면을 꾸밀 수 있음. (※ [Casting]필수) 
▼ session.setAttribute("idKey", id); 이것으로 로그인 성공 시 세션을 부여.

[loginproc.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- Business Logic --%>
<jsp:useBean id="memberMgr" class="kr.shop.member.MemberMgr"/>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");

boolean b = memberMgr.loginCheck(id, passwd);

if(b){
	session.setAttribute("idKey", id);	//철자(대소문자) 구분 ※ idkey X
	response.sendRedirect("login.jsp");
}else{
	response.sendRedirect("loginfail.html");
}
%>

▼session.removeAttribute("idKey"); 이것으로 (유효시간이 지나기 전) 세션 강제 종료 할 수 있음.

[logout.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
session.removeAttribute("idKey");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
alert("로그아웃 성공");
location.href="login.jsp";
</script>
</body>
</html>

회원가입 페이지

▽회원 가입을 위해선 유효성 검사, 중복 검사 등 여러가지 검사를 진행해야 하므로 따로 별도의 javascript js 파일을 만들었다.

더보기

▼회원가입 메인 (Opener)

[register.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 (Opener)</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script src="../js/script.js"></script>	<%-- 요것 때문에 function 여기로 넘어감--%>
<script type="text/javascript">
window.onload = function(){
	regForm.id.focus();
	document.getElementById("btnZip").onclick = zipCheck;
	document.getElementById("btnId").onclick = idCheck;
	document.getElementById("btnSubmit").onclick = inputCheck;
}
</script>
</head>
<body>
<br>
<table>
<tr>
	<td align="center">
		<form name="regForm" method="post" action="registerproc.jsp">
			<table border="1">
				<tr align="center" style="background-color: #556677">
					<td colspan="2">
					<b style="color: #FFFFFF">회원 가입</b>
					</td>
				</tr>
				<tr>
					<td width="16%">아이디</td>
					<td width="57%"><input type="text" name="id" size="15">
						<input type="button" value="ID중복확인" id="btnId"></td>
				</tr>
				<tr>
					<td>패스워드</td>
					<td><input type="password" name="passwd" size="15"></td>
				</tr>
				<tr>
					<td>패스워드 확인</td>
					<td><input type="password" name="repasswd" size="15"></td>
				</tr>
				<tr>
					<td>이름</td>
					<td><input type="text" name="name" size="15"></td>
				</tr>
				<tr>
					<td>이메일</td>
					<td><input type="text" name="email" size="27"></td>
				</tr>
				<tr>
					<td>전화번호</td>
					<td><input type="text" name="phone" size="20"></td>
				</tr>
				<tr>
					<td>우편번호</td>
					<td>
						<input type="text" name="zipcode" size="7"> 
						<input type="button" value="우편번호찾기" id="btnZip">
					</td>
				</tr>
				<tr>
					<td>주소</td>
					<td><input type="text" name="address" size="60"></td>
				</tr>
				<tr>
					<td>직업</td>
					<td>
						<select name="job">
							<option value="0">선택하세요
							<option value="회사원">회사원
							<option value="학생">학생
							<option value="자영업">자영업
							<option value="주부">주부
							<option value="기타">기타
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="회원가입" id="btnSubmit">&nbsp;&nbsp;&nbsp;
						<input type="reset" value="다시쓰기">
					</td>
				</tr>
			</table>
		</form>
	</td>
</tr>
</table>
</body>
</html>

▼ 각종 검사 js 파일 - zipCheck & idCheck 은 팝업창으로 이어짐(window.open( ))

[script.js]

function zipCheck(){
	url = "zipcheck.jsp?check=y"; 
	window.open(url,"post",
		"toolbar=no,width=350,height=300,top=200,left=300,status=yes,scrollbars=yes,menubar=no");
}

function idCheck(){
	if(regForm.id.value === ""){
		alert("id를 입력하시오");
		regForm.id.focus();
	}else{
		url = "idcheck.jsp?id=" + regForm.id.value;
		window.open(url,"post","width=300,height=150,left=150,top=150");
	}
}

function inputCheck(){
	if(regForm.id.value == ""){
		alert("아이디 입력!");
		regForm.id.focus();
		return;
	}
	
	if(regForm.passwd.value == ""){
		alert("비밀번호 입력!");
		regForm.passwd.focus();
		return;
	}
	if(regForm.passwd.value !== regForm.repasswd.value){
		alert("비밀번호 불일치!");
		regForm.passwd.focus();
		return;
	}
	
	//...
	
	if(regForm.job.value === "0"){
		alert("직업을 선택하시오");
		regForm.job.focus();
		return;
	}
	
	regForm.submit();
}

 

다음은 팝업 창을 열고 닫는 방법이다. (Ex. 도로명 주소 찾기)

//<script type="text/javascript">

function Check(){
  //String url = "주소"
  window.open(url, "get/post방식", "그 외 속성");	→ 팝업창 열기
  window.close();	→ 팝업창 닫기
}

또는

<!-- in HTML -->

<a href="javascript:window.open(url,'get/post','그 외')"/>

※ 참고로 팝업창을 열은 주체 페이지는 Opener라고 불린다.

 

Q. Opener의 구분이 왜 필요하냐구?

A. opener.document.regForm.zipcode.value = zipcode 처럼 Opener에 값을 줄 때 필요하다.

 

아이디 중복 확인 팝업
우편번호 검색 팝업 - DB를 미리 넣어 놓았음

▽ 유효성 검사를 마친 사용자의 정보들이 js 파일을 거쳐 각각의 팝업 jsp파일로 보내짐.

더보기 
[zipcheck.jsp]

<%@page import="kr.shop.member.MemberMgr"%>
<%@page import="kr.shop.member.ZipcodeDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- js에서 함수 호출 하지만 최종적으로 부르는 곳이 동일한 member폴더안에 있으므로 그냥 zipcheck.jsp불러도 됨 --%>
<jsp:useBean id="memberMgr" class="kr.shop.member.MemberMgr"/>	<%--scope 안써주면 기본 : page--%>
<%
request.setCharacterEncoding("utf-8");
String check = request.getParameter("check");
String p_area3 = request.getParameter("area3");	//검색 동이름 

ArrayList<ZipcodeDTO> list = memberMgr.zipcodeRead(p_area3);	//처음은 null, 없는 동이름 써도 null 
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>우편 번호 검색</title>
<link type="text/css" rel="stylesheet" href="../css/style.css">
<%--<script>태그 시 javascript만큼은 .../>으로 종결 짓지 말아라 --%>
<script type="text/javascript" src="../js/script.js"></script>
<script type="text/javascript">
window.onload = function(){
	document.getElementById("btnZipFind").onclick = dongCheck;
	document.getElementById("btnZipClose").onclick =function(){
		window.close();	//function() 안에 없으면 팝업창 그냥 닫혀버림
	}
	
}

function dongCheck(){
	//alert("c");
	if(zipForm.area3.value === ""){
		alert("동 이름을 입력하시오.");
		zipForm.area3.focus();
		return;
	}
	zipForm.submit();
}

function send(zipcode, area1, area2, area3, area4){	//검색된 자료를 회원가입 창에 입력되게 하기
	//alert(zipcode + " " + area4);
	opener.document.regForm.zipcode.value = zipcode;	//register.jsp 로 부터 호출 당했으므로 주려면 호출했던 opener의 요소들을 적으면 됨
	var addr = area1 + " " + area2  + " " + area3 + " " + area4
	opener.document.regForm.address.value = addr;
	window.close();
}
</script>
</head>
<body>
<b>** 우편번호 찾기 **</b><br>
<form action="zipcheck.jsp" name="zipForm" method="post">
<table>
	<tr>
		<td>
		동 이름 입력: <input type="text" name="area3">
		<input type="button" value="검색" id="btnZipFind">
		<input type="button" value="닫기" id="btnZipClose">
		<input type="hidden" value="n" name="check">
		<!-- ※ script.js > url = "zipcheck.jsp?check=y"에서 검색이 시작되면 check 에 n을 주기 위해(검색 후 페이지) -->
		</td>
	</tr>
</table>
</form>

<%
if(check.equals("n")){
	if(list.isEmpty()){	//검색 결과 null일 경우 (가장 처음 또는 보여줄 검색 결과가 없을 때)
%>
		<b>검색 결과가 없습니다!</b>
<%
	}else{
%>
		<table>
			<tr>
				<td style="text-align: center; color: lime;">
					검색자료를 클립하면 자동으로 주소가 입력됩니다.
				</td>
			</tr>		
			<tr>
				<td>
<%
					for(int i = 0; i < list.size(); i++){
						ZipcodeDTO dto = list.get(i);
						String zipcode = dto.getZipcode();
						String area1 = dto.getArea1();
						String area2 = dto.getArea2();
						String area3 = dto.getArea3();
						String area4 = dto.getArea4();
						if(area4 == null) area4 = "";
%>					<%-- 출력 --%>
					<a href="javascript:send('<%=zipcode %>','<%=area1 %>','<%=area2 %>','<%=area3 %>','<%=area4 %>')">
					<%=zipcode %> <%=area1 %> <%=area2 %> <%=area3 %> <%=area4 %></a>
					<br>
<%
					}
%>
				</td>
			</tr>		
		</table>
<%
	}
}
%>
</body>
</html>
[idcheck.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="memberMgr" class="kr.shop.member.MemberMgr"/>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
boolean b = memberMgr.checkId(id);

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script src="../js/script.js"></script>
</head>
<body style="text-align: center; margin-top: 30px;"><!-- 모든 데이터가 가운데로 모아짐 -->
<b><%=id %>: </b>
<%
if(b){	//true일 경우 (중복된 아이디가 있을 경우)
%>	
	이미 사용 중인 id 입니다.<br>
	<a href="#" onclick="opener.document.regForm.id.focus(); window.close();">닫기</a>
	<%-- opener.document & 두개 한꺼번에 호출 실행 가능 --%>
<%
}else{
%>
	사용 가능한 id 입니다.<br>
	<a href="#" onclick="opener.document.regForm.passwd.focus(); window.close();">닫기</a>
<%
}
%>

</body>
</html>

▽팝업 jsp파일을 거쳐 중복 되지 않은 회원 정보가 입력 되면 회원등록 성공 여부를 결정

더보기 
[registerproc.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");	//html 태그에 활용하던, DB에 저장하던 영어 외 글자를 받아오려면 필수!
%>
<jsp:useBean id="memberBean" class="kr.shop.member.MemberBean"/>
<jsp:setProperty property="*" name="memberBean"/>
<jsp:useBean id="memberMgr" class="kr.shop.member.MemberMgr"/>
<%
boolean b = memberMgr.memberInsert(memberBean);
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 성공 여부</title>
</head>
<body>
<%
if(b){
	out.println("<b>회원가입을 축하드립니다.</b>");
	out.println("<a href='login.jsp'>로그인</a>");
}else{
	out.println("<b>회원가입 실패. 다시 시도 해주세요</b>");
	out.println("<a href='register.jsp'>회원가입 재시도</a>");
}
%>
</body>
</html>

▽ 그 외 부수적인 코딩 자료들

더보기 
[loginfail.html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<br>
<b style="font-size: 30px">로그인 실패</b>
아이디와 비밀번호를 확인하세요
<br>
<a href="login.jsp">로그인 하기</a>
</body>
</html>

▼ DB TABLE을 만들고

CREATE TABLE member(id varchar(20) primary key, passwd varchar(20), name varchar(20), 
email varchar(40), phone varchar(30), zipcode varchar(20), address varchar(100), job varchar(20))CHARSET=utf8;

 

CREATE TABLE ziptab(zipcode char(7), area1 varchar(10), area2 varchar(20), 
area3 varchar(30), area4 varchar(50))CHARSET=utf8;
INSERT INTO ZIPTAB  VALUES ('135-806', '서울', '강남구', '개포1동 경남아파트', NULL);
INSERT INTO ZIPTAB  VALUES ('135-807', '서울', '강남구', '개포1동 우성3차아파트', '(1∼6동)');
...
..
.

MariaDB [TEST]> SELECT COUNT(*) FROM ZIPTAB;
+----------+
| COUNT(*) |
+----------+
|     7637 |
+----------+

∴ 총 7637개의 데이터를 집어 넣음. (서울만 포함)

※ 관리자 모드로 수행 가능한 memberupdate.jsp 및 memberupdateproc.jsp 파일은 그 다음 글에서 다룰 예정.

'Programming Language > Servlet & JSP' 카테고리의 다른 글

[JSP] *연구* jsp 로 alert창 띄우고 이동시키기  (0) 2020.09.05
[JSP] (최종 - Model Ⅰ방식) 간단한 쇼핑몰 게시판 만들어 보기 *갱신 필*  (0) 2020.09.02
[JSP] 로그아웃, 로그인 화면 다르게 하기 (feat. session, include지시어)  (0) 2020.09.02
[JSP] beans + dbcp[connection pooling]  (0) 2020.09.02
[JSP] (problem)  (0) 2020.08.26
'Programming Language/Servlet & JSP' Related Articles more
Comments