👓간단한 웹페이지 만들기 - 회원가입

1. webapp폴더 css폴더 생성
   style.css 생성

2. web-inf폴더
   index.jsp 생성
   
   header.jsp 생성
   footer.jsp 생성

3. webapp폴더 main폴더 생성
   main_page 생성

4. webapp폴더 member폴더 생성
   member_join.jsp 생성
   member_login.jsp 생성

5. webapp폴더 product폴더 생성
   product_list.jsp

6. webapp폴더 cart폴더 생성
   cart_list.jsp

7. webapp폴더 order폴더 생성
   order_list.jsp

8. webapp폴더 board폴더 생성
   board_list.jsp

================================================

🌈Part 1 - 테이블 만들기

◈ SQL Delope 실행

create table member(id varchar(20) primary key
    ,passwd varchar2(200),name varchar2(20),email varchar2(30)
    ,mobile varchar2(20),zipcode varchar2(10)
    ,address1 varchar(200), address2 varchar(50)
    ,join_data date,last_login date,status number(1));

🌈Part 2 - MemberDTO.java 만들기

◈ xyz.itwill.dto 패키지에 MemberDTO 클래스 생성

📃MemberDTO.java

package xyz.itwill.dto;
//
/*
이름         널?       유형            
---------- -------- ------------- 
ID         NOT NULL VARCHAR2(20)  - 아이디
PASSWD              VARCHAR2(200) - 비밀번호
NAME                VARCHAR2(20)  - 이름
EMAIL               VARCHAR2(30)  - 이메일
MOBILE              VARCHAR2(20)  - 전화번호
ZIPCODE             VARCHAR2(10)  - 우편번호
ADDRESS1            VARCHAR2(200) - 기본주소
ADDRESS2            VARCHAR2(50)  - 상세주소
JOIN_DATA           DATE          - 회원가입날짜
LAST_LOGIN          DATE          - 마지막 로그인 날짜
STATUS              NUMBER(1) 	  - 회원상태 : 0(탈퇴회원), 1(일반회원), 9(관리자)
 */
//
public class MemberDTO {
	private String id;
	private String passwd;
	private String name;
	private String email;
	private String mobile;
	private String zipcode;
	private String address1;
	private String address2;
	private String joinDate;
	private String lastLogin;
	private int status;
	//
	public MemberDTO() {
		// TODO Auto-generated constructor stub
	}
	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 getMobile() {
		return mobile;
	}
	public void setMobile(String mobile) {
		this.mobile = mobile;
	}
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getAddress1() {
		return address1;
	}
	public void setAddress1(String address1) {
		this.address1 = address1;
	}
	public String getAddress2() {
		return address2;
	}
	public void setAddress2(String address2) {
		this.address2 = address2;
	}
	public String getJoinDate() {
		return joinDate;
	}
	public void setJoinDate(String joinDate) {
		this.joinDate = joinDate;
	}
	public String getLastLogin() {
		return lastLogin;
	}
	public void setLastLogin(String lastLogin) {
		this.lastLogin = lastLogin;
	}
	public int getStatus() {
		return status;
	}
	public void setStatus(int status) {
		this.status = status;
	}
}

🌈Part 3 - MemberDTO.java 만들기

◈ xyz.itwill.dao 패키지에 MemberDAO 클래스 생성

📃MemberDAO.java

코드를 입력하세요

================================================

🌈Part 4 - MemberDTO.java 만들기

회원가입 관련
1. member_join.jsp 수정
2. member_join_action.jsp 생성 및 작성

================================================

🌈Part 5 - 비밀번호 암호화 처리

1. xyz.itwill.util 패키지 생성
2. Uitility 클래스 생성
암호화 처리 전에는 개인정보가 전부 표시됨


※truncate table member;(테이블 초기화 명령어)
암호화 처리 후

📃Uitility.java

package xyz.itwill.util;
//
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
//
//웹프로그램 작성에 필요한 부가적인 기능을 제공하기 위한 클래스
public class Utility {
	//문자열을 전달받아 암호화 처리하여 반환하는 메소드
	public static String encrypt(String source) {
		//암호화 처리된 문자열을 저장하기 위한 변수 선언
		String password="";
		try {
			//MessageDigest 객체 : 암호화 처리 기능을 제공하는 객체
			//MessageDigest.getInstance(String algorithm) : 매개변수에 저장된 암호화 알고리즘이 저장된 MessageDigest 객체를 생성하여 반환하는 메소드
			//→ 매개변수에 잘못된 암호화 알고리즘을 전달할 경우 NoSuchAlgorithmException 발생
			//단방향 암호화 알고리즘 : MD5, SHA-1, SHA-256(권장), SHA-512 등
			//양방향 암호화 알고리즘 : AES-123, RSA 등
			MessageDigest messageDigest=MessageDigest.getInstance("SHA-256");
			//
			//MessageDigest.update(byte[] input) : MessageDigest 객체에 암호화 처리하기 위한 값(byte 배열)을 전달받아 저장하기 위한 메소드
			//String.getBytes() : String 객체에 저장된 문자열을 원시데이터(byte 배열)로 변환하여 반환하는 메소드
			messageDigest.update(source.getBytes());
			//
			//MessageDigest.digest() : MessageDigest 객체에 저장된 암호화 알고리즘으로 원시데이터를 암호화 처리하여 byte 배열로 반환하는 메소드
			byte[] digest=messageDigest.digest();
			//
			//암호화 처리된 byte 배열을 문자열(String 객체)로 변환하여 저장
			for(int i=0;i<digest.length;i++) {
				//Integer.toHexString(int i) : 정수값을 전달받아 16진수의 문자열로 변환하여 반환하느 메소드
				password+=Integer.toHexString(digest[i]&0xff);
			}
		} catch (NoSuchAlgorithmException e) {
			System.out.println("[에러]잘못된 암호화 알고리즘을 사용하였습니다.");
		}
		return password;
	}
}

================================================

🌈Part 6 - 아이디 중복 검사 기능

1. member_join.jsp의 주석문 주석 해제 및 코드 작성


2. member 폴더에 id_check.jsp 파일 생성 및 작성

📃id_check.jsp

<%@page import="xyz.itwill.dao.MemberDAO"%>
<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 아이디 전달받아 MEMBER 테이블에 저장된 기존 회원정보의 아이디와 비교하여 중복 유무를 클라이언트에게 전달하는 JSP 문서 --%>
<%-- → 아이디 미중복 : 아이디 사용 가능 메세지 - [아이디 사용]을 클릭한 경우 부모창의 입력태그의 입력값 변경 --%>
<%-- → 아이디 중복 : 아이디 사용 불가능 메세지 - 아이디를 입력받아 현재 JSP 문서를 재요청 --%>
<%
	//비정상적인 요청에 대한 응답 처리
	if(request.getParameter("id")==null) {
		response.sendError(HttpServletResponse.SC_BAD_REQUEST);
		return;
	}
	//전달값을 반환받아 저장
	String id=request.getParameter("id");
	//
	//아이디를 전달받아 MEMBER 테이블에 저장된 해당 아이디의 회원정보를 검색하여 반환하는 DAO 클래스의 메소드 호출
	//→ null 반환 : 전달받은 아이디의 회원정보가 미검색 - 아이디 미중복(아이디 사용 가능)
	//→ MemberDTO 객체 반환 : 전달받은 아이디의 회원정보 검색 - 아이디 중복(아이디 사용 불가능)
	MemberDTO member=MemberDAO.getDAO().selectMember(id);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	text-align: center;
	margin: 10px
}
.id {
	font-weight: bold;
	color: red;
}
</style>
</head>
<body>
<% if(member==null) {//전달받은 아이디가 중복되지 않은 경우 %>
	<div>입력된 <span class="id">[<%=id %>]</span>는 사용 가능한 아이디입니다.</div>
	<div>
		<button type="button" onclick="selectId();">아이디 사용</button>
	</div>
	//
	<script type="text/javascript">
	function selectId() {
		//opener : 팝업창을 실행한 부모창을 표현하는 자바스크립트 객체
		opener.join.id.value="<%=id%>";//입력태그(아이디)의 입력값 변경
		opener.join.idCheckResult.value="1";//입력태그(검사결과)의 입력값 변경
		window.close();//창닫기 - 팝업창 종료
	}
	</script>
<% } else {//전달받은 아이디가 중복된 경우 %>
	<div>입력된 <span class="id">[<%=id %>]</span>는 이미 사용중인 아이디입니다.
	<br>다른 아이디를 입력하고 [확인] 버튼을 눌러주세요.</div>
	<div>
		<%-- form 태그의 action 속성이 생략된 경우 현재 요청 JSP 문서를 재요청 --%>
		<%-- form 태그의 method 속성이 생략된 경우 [GET] 방식으로 요청 --%>
		<form name="checkForm">
			<input type="text" name="id">
			<button type="button" onclick="idCheck();">확인</button>
		</form>
	</div>
	<div id="message" style="color: red;"></div>
	<script type="text/javascript">
	function idCheck() {
		var id=checkForm.id.value;
		if(id=="") {
			document.getElementById("message").innerHTML="아이디를 입력해 주세요.";
			return;
		}
		//
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(!idReg.test(id)) {
			document.getElementById("message").innerHTML="아이디를 형식에 맞게 입력해 주세요.";
			return;
		}
		//
		checkForm.submit();
	}
	</script>
<% } %>
</body>
</html>

================================================

🌈Part 6 - 우편번호 검색 기능

1. member_join.jsp 코드 수정

2. member 폴더에 post_search.jsp 생성 및 작성

📃post_search.jsp

<%@page import="java.util.ArrayList"%>
<%@page import="xyz.itwill.dao.ZipDAO"%>
<%@page import="xyz.itwill.dto.ZipDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 사용자로부터 동이름을 입력받아 ZIP 테이블에 저장된 해당 동이름이 포함된 우편번호 관련 정보를 검색하여 클라이언트에게 전달하는 JSP 문서 --%>
<%-- → [기본주소]를 클릭한 경우 부모창의 입력태그(우편번호,기본주소)의 입력값 변경 --%>
<%
	//전달값을 반환받아 저장
	String dong=request.getParameter("dong");
	//
	//동이름을 전달받아 ZIP 테이블에서 해당 동이름으로 시작되는 우편번호 관련 정보를 검색하여 반환하는 DAO 클래스의 메소드 호출
	List<ZipDTO> zipList=new ArrayList<ZipDTO>();
	if(dong!=null) {//전달값이 있는 경우
		zipList=ZipDAO.getDAO().selectZipList(dong);
	} 
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<style type="text/css">
#search {
	width: 550px;
	margin: 0 auto;
	text-align: center;	
}
table {
	border: 1px solid black;
	border-collapse: collapse;
	margin: 10px;
	font-size: 14px;
}
td {
	border: 1px solid black;
	text-align: center;
}
.zipcode {
	width: 100px;
}
.address {
	width: 400px;
	text-align: left;
	padding: 2px;
}
</style>
</head>
<body>
	<div id="search">
		<form name="postForm">
			동이름 : <input type="text" name="dong">
			<button type="button" id="searchBtn">주소검색</button>
		</form>
	</div>
	<%-- 검색된 우편번호 관련 정보를 클라이언트에게 전달 --%>
	<% if(!zipList.isEmpty()) { //검색된 우편번호 관련 정보가 있는 경우%>
	<table>
		<tr>
			<td class="zipcode">우편번호</td>
			<td class="address" style="text-align: center;">기본주소</td>
		</tr>
		<% for(ZipDTO zip:zipList) { %>
		<tr>
			<td class="zipcode"><%=zip.getZipcode() %></td>
			<%-- a 태그를 이용하여 자바스크립트 명령을 작성할 경우 반드시 javascript 접두사를 사용해야만 실행 가능 --%>
			<td class="address">
				<a href="javascript:searchPost('<%=zip.getZipcode()%>','<%=zip.getAddress()%>');"><%=zip.getAddress() %>
			</td>
		</tr>
		<% } %>
	</table>
	<% } %>
	<script type="text/javascript">
	postForm.dong.focus();
	//
	document.getElementById("searchBtn").onclick=function() {
		if(postForm.dong.value=="") {
			postForm.dong.focus();
			return;
		}
		//
		postForm.submit();
	}
	function searchPost(code, addr) {
		opener.join.zipcode.value=code;
		opener.join.address1.value=addr;
		window.close();
	}
	</script>
</body>
</html>

🎨방법1)

◈ 공공데이터 적용법 테이블에 삽입,저장하는법
1.csv 파일 다운로드(강사님 파일 참고)

2. SQL Delope에 테이블 생성

create table zipcode(zipcode varchar2(40),sido varchar2(46)
	,gugun varchar2(40),dong varchar2(40),ri varchar2(45)
	,bldg varchar2(70),bunji varchar2(20),seq varchar2(15));

3. 다운로드 받은 csv 파일 데이터 임포트





4. SQL Develope 아래코드 작성

create table zip(zipcode, dong, address) 
as select zipcode,DONG,SIDO||' '||GUGUN||' '||DONG||' '||RI||' '||BLDG||' '||BUNJI from zipcode;

5. SQL Develop 아래코드 작성

drop table zipcode purge;

6. 동작확인

7. DTO 만들기
1. xyz.itwill.dto 패키지에 ZipDTO 클래스 생성

📃ZipDTO.java

package xyz.itwill.dto;
//
public class ZipDTO {
	private String zipcode;
	private String dong;
	private String address;
	//
	public ZipDTO() {
		// TODO Auto-generated constructor stub
	}
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getDong() {
		return dong;
	}
	public void setDong(String dong) {
		this.dong = dong;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
}

8. DAO 만들기
1. xyz.itwill.dao 패키지에 ZipDAO 클래스 생성

📃ZipDAO.java

package xyz.itwill.dao;
//
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
//
import xyz.itwill.dto.ZipDTO;
//
public class ZipDAO extends JdbcDAO {
	private static ZipDAO _dao;
	//
	private ZipDAO() {
		// TODO Auto-generated constructor stub
	}
	//
	static {
		_dao=new ZipDAO();
	}
	//
	public static ZipDAO getDAO() {
		return _dao;
	}
	//
	//동이름을 전달받아 ZIP 테이블에서 해당 동이름으로 시작되는 우편번호 관련 정보를 검색하여 반환하는 메소드
	public List<ZipDTO> selectZipList(String dong) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		List<ZipDTO> zipList=new ArrayList<>();
		try {
			con=getConnection();
			//
			String sql="select * from zip where dong like ?||'%' order by zipcode";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, dong);
			//
			rs=pstmt.executeQuery();
			//
			while(rs.next()) {
				ZipDTO zip=new ZipDTO();
				zip.setZipcode(rs.getString("zipcode"));
				zip.setDong(rs.getString("dong"));
				zip.setAddress(rs.getString("address"));
				zipList.add(zip);
			}
		} catch (SQLException e) {
			System.out.println("[에러]selectZipList() 메소드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt, rs);
		}
		return zipList;
	}
}

🎨방법2)

다음에서 제공하는 우편번호 검색 기능(권장)
1. 사이트 접속

2. 아래코드 Member_join.jsp에 복사 붙여넣기

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
$("#postSearch").click(function() {
	new daum.Postcode({
	    oncomplete: function(data) {
	        $("#zipcode").val(data.zonecode);
	        $("#address1").val(data.address);
	    }
	}).open();
});
</script>