65Day - AjaxMemberDAO & member_join_input & search_id_one & search_id_two // books & books & books_ajax // AjaxCommentDTO & AjaxCommentDAO &Utility & comment & comment_add&comment_get &comment_list & comment_modify

이름과, 이메일로 아이디검색

main> java >xyz.itwill.dao )
AjaxMemberDAO .java (수정)

package xyz.itwill.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import xyz.itwill.dto.AjaxMemberDTO;

public class AjaxMemberDAO extends JdbcDAO {
	private static AjaxMemberDAO _dao;
	
	private AjaxMemberDAO() {
		// TODO Auto-generated constructor stub
	}
	
	static {
		_dao=new AjaxMemberDAO();
	}
	
	public static AjaxMemberDAO getDAO() {
		return _dao;
	}
	
	//회원정보를 전달받아 AJAX_MEMBER 테이블의 회원정보로 삽입하고 삽입행의 갯수를 반환하는 메소드
	public int insertAjaxMember(AjaxMemberDTO ajaxMember) {
		Connection con=null;
		PreparedStatement pstmt=null;
		int rows=0;
		try {
			con=getConnection();
			
			String sql="insert into ajax_member values(?,?,?,?)";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, ajaxMember.getId());
			pstmt.setString(2, ajaxMember.getPasswd());
			pstmt.setString(3, ajaxMember.getName());
			pstmt.setString(4, ajaxMember.getEmail());
			
			rows=pstmt.executeUpdate();
		} catch (SQLException e) {
			System.out.println("[에러]insertAjaxMember() 메서드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt);
		}
		return rows;
	}
	
	//아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 회원정보를 검색하여 DTO 객체로 반환하는 메소드
	public AjaxMemberDTO selectAjaxMember(String id) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		AjaxMemberDTO ajaxMember=null;
		try {
			con=getConnection();
			
			String sql="select * from ajax_member where id=?";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, id);
			
			rs=pstmt.executeQuery();
			
			if(rs.next()) {
				ajaxMember=new AjaxMemberDTO();
				ajaxMember.setId(rs.getString("id"));
				ajaxMember.setPasswd(rs.getString("passwd"));
				ajaxMember.setName(rs.getString("name"));
				ajaxMember.setEmail(rs.getString("email"));
			}
 		} catch (SQLException e) {
			System.out.println("[에러]selectAjaxMember() 메서드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt);
		}
		return ajaxMember;
	}
	
	//이름과 이메일을 전달받아 AJAX_MEMBER 테이블에 저장된 회원정보의 아이디를 검색하여 반환하는 메소드
	public String selectAjaxMemberId(String name, String email) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		String id=null;
		try {
			con=getConnection();
			
			String sql="select id from ajax_member where name=? and email=?";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, name);
			pstmt.setString(2, email);
			
			rs=pstmt.executeQuery();
			
			if(rs.next()) {
				//id=rs.getString("id");
				id=rs.getString(1);
			}
		} catch (SQLException e) {
			System.out.println("[에러]selectAjaxMemberId() 메서드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt);
		}
		return id;
	}
	
	//회원정보(이름과 이메일)를 전달받아 AJAX_MEMBER 테이블에 저장된 회원정보의 아이디를 검색하여 반환하는 메소드
	public String selectAjaxMemberId(AjaxMemberDTO ajaxMember) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		String id=null;
		try {
			con=getConnection();
			
			String sql="select id from ajax_member where name=? and email=?";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, ajaxMember.getName());
			pstmt.setString(2, ajaxMember.getEmail());
			
			rs=pstmt.executeQuery();
			
			if(rs.next()) {
				//id=rs.getString("id");
				id=rs.getString(1);
			}
		} catch (SQLException e) {
			System.out.println("[에러]selectAjaxMemberId() 메서드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt);
		}
		return id;
	}
}

src> main>webapp >jdbc)
member_join_input .jsp (수정)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 회원정보를 입력받기 위한 JSP 문서 --%>
<%-- => [회원가입] 태그를 클릭한 경우 form 태그를 사용하여 [member_join_action.jsp] 문서를 
POST 방식으로 요청 - 사용자 입력값(회원정보) 전달 --%>
<%-- form 태그를 사용하여 [member_join_action.jsp] 문서를 요청하기 전에 사용자 입력값에
대한 검증 - 입력검증, 형식검증, 중복검증(AJAX) 등 --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
.title {
	width: 100px;
	padding-right: 10px;
	text-align: center;
	font-weight: bold;
}

.input {
	width: 200px;
}

.message {
	width: 500px;
	color: red;
}

.msg {
	display: none;
}

#btn {
	text-align: center;
}
</style>
</head>
<body>
	<h1>회원가입</h1>
	<hr>
	<form action="member_join_action.jsp" method="post" id="joinForm">
	<table>
		<tr>
			<td class="title">아이디</td>
			<td class="input"><input type="text" name="id" id="id"></td>
			<td class="message">
				<span id="idNullMsg" class="msg idMsg">아이디를 입력해 주세요.</span>
				<span id="idValidMsg" class="msg idMsg">아이디를 형식에 맞게 입력해 주세요.</span>
				<span id="idDuplMsg" class="msg idMsg">이미 사용중인 아이디입니다.</span>
			</td>
		</tr>
		<tr>
			<td class="title">비밀번호</td>
			<td class="input"><input type="password" name="passwd" id="passwd"></td>
			<td class="message">
				<span id="passwdNullMsg" class="msg">비밀번호를 입력해 주세요.</span>
				<span id="passwdValidMsg" class="msg">비밀번호를 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td class="title">이름</td>
			<td class="input"><input type="text" name="name" id="name"></td>
			<td class="message">
				<span id="nameNullMsg" class="msg">이름을 입력해 주세요.</span>
				<span id="nameValidMsg" class="msg">이름을 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td class="title">이메일</td>
			<td class="input"><input type="text" name="email" id="email"></td>
			<td class="message">
				<span id="emailNullMsg" class="msg">이메일을 입력해 주세요.</span>
				<span id="emailValidMsg" class="msg">이메일을 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td colspan="2" id="btn"><button type="submit">회원가입</button></td> 
		</tr>
	</table>	
	</form>
	
	<script type="text/javascript">
	/*
	//아이디 중복 검증에 대한 결과값을 저장하기 위한 전역변수 선언
	// => false : 아이디 사용 불가능, true : 아이디 사용 가능
	var idCheckResult=false;

	$("#id").focus();
	
	$("#joinForm").submit(function() {
		//모든 메세지 관련 엘리먼트를 출력되지 않도록 숨김 처리
		$(".msg").hide();
		
		//입력값 검증 결과를 저장하기 위한 변수
		// => false : 검증 실패(form 태그 실행 취소), true : 검증 성공(form 태그 실행) 
		var validResult=true;
		
		var id=$("#id").val();
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(id=="") {
			$("#idNullMsg").show();
			validResult=false;
		} else if(!idReg.test(id)) {
			$("#idValidMsg").show();
			validResult=false;
		} else if(!idCheckResult) {//아이디가 중복된 경우
			$("#idDuplMsg").show();
			validResult=false;
		}
		
		var passwd=$("#passwd").val();
		var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{6,20}$/g;
		if(passwd=="") {
			$("#passwdNullMsg").show();
			validResult=false;
		} else if(!passwdReg.test(passwd)) {
			$("#passwdValidMsg").show();
			validResult=false;
		}
		
		var name=$("#name").val();
		var nameReg=/^[가-힣]{2,10}$/g;
		if(name=="") {
			$("#nameNullMsg").show();
			validResult=false;
		} else if(!nameReg.test(name)) {
			$("#nameValidMsg").show();
			validResult=false;
		}
		
		var email=$("#email").val();
		var emailReg=/^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+(\.[-a-zA-Z0-9]+)+)*$/g;
		if(email=="") {
			$("#emailNullMsg").show();
			validResult=false;
		} else if(!emailReg.test(email)) {
			$("#emailValidMsg").show();
			validResult=false;
		}
		
		return validResult;
	});
	
	$("#id").keyup(function() {
		idCheckResult=false;
		
		var id=$("#id").val();
		if(id.length<6) return;
		
		$.ajax({
			type: "get",
			url: "member_id_check.jsp",
			data: "id="+id,
			dataType: "xml",
			success: function(xmlDoc) {
				var code=$(xmlDoc).find("code").text();
				if(code=="possible") {
					idCheckResult=true;
				}
			}, 
			error: function(xhr) {
				alert("에러코드 = "+xhr.status);
			}
		});
	});
	
	$("#id").blur(function() {
		var id=$("#id").val();
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(id=="") {
			$("#idNullMsg").show();
		} else if(!idReg.test(id)) {
			$("#idValidMsg").show();
		} else if(!idCheckResult) {//아이디가 중복된 경우
			$("#idDuplMsg").show();
		}
	});
	*/
	
	$("#id").focus();
	$("#joinForm").submit(function() {
		$(".msg").hide();
		
		var validResult=true;
		
		var id=$("#id").val();
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(id=="") {
			$("#idNullMsg").show();
			validResult=false;
		} else if(!idReg.test(id)) {
			$("#idValidMsg").show();
			validResult=false;
		} else {//형식에 맞는 아이디가 입력된 경우 - 중복 검사
			//문제점)비동기식 방식으로 아이디를 검사하는 웹프로그램을 요청한 경우 실행결과를
			//응답받기 전에 form 태그가 실행 가능 - 정상적인 아이디 중복 검사 실행 불가능
			//해결법)아이디를 검사하는 웹프로그램을 동기식 방식으로 요청하여 실행결과를 응답받아 처리
			$.ajax({
				type: "get",
				url: "member_id_check.jsp",
				data: "id="+id,
				//async : 동기식 통신 또는 비동기식 통신을 구분하기 위한 속성
				// => false : 동기식 통신, true : 비동기식 통신 - 기본
				async: false,
				dataType: "xml",
				success: function(xmlDoc) {
					var code=$(xmlDoc).find("code").text();
					if(code=="impossible") {//아이디가 중복된 경우
						$("#idDuplMsg").show();
						validResult=false;
					}
				}, 
				error: function(xhr) {
					alert("에러코드 = "+xhr.status);
				}
			});
		}
		
		var passwd=$("#passwd").val();
		var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{6,20}$/g;
		if(passwd=="") {
			$("#passwdNullMsg").show();
			validResult=false;
		} else if(!passwdReg.test(passwd)) {
			$("#passwdValidMsg").show();
			validResult=false;
		}
		
		var name=$("#name").val();
		var nameReg=/^[가-힣]{2,10}$/g;
		if(name=="") {
			$("#nameNullMsg").show();
			validResult=false;
		} else if(!nameReg.test(name)) {
			$("#nameValidMsg").show();
			validResult=false;
		}
		
		var email=$("#email").val();
		var emailReg=/^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+(\.[-a-zA-Z0-9]+)+)*$/g;
		if(email=="") {
			$("#emailNullMsg").show();
			validResult=false;
		} else if(!emailReg.test(email)) {
			$("#emailValidMsg").show();
			validResult=false;
		}
		
		return validResult;
	});
	</script>
</body>
</html>

search_id_one .jsp - 실행문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 사용자로부터 이름과 이메일을 입력받아 아이디를 검색하여 클라이언트에게 전달하여 응답하는 JSP 문서 --%>
<%-- => 아이디는 [search_id_two.jsp] 문서를 AJAX 기능으로 요청(이름과 이메일 전달)하여 
실행결과를 XML 데이타로 응답받아 출력 처리 --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>아이디 찾기</h1>
	<hr>
	<table>
		<tr>
			<td>이름</td>
			<td><input type="text" id="name"></td>
		</tr>
		<tr>
			<td>이메일</td>
			<td><input type="text" id="email"></td>
		</tr>
		<tr>
			<td colspan="2"><button type="button" id="btn">아이디 찾기</button></td>
		</tr>
	</table>
	<hr>
	<div id="result"><%-- 홍길동님의 아이디는 [abc123]입니다.--%></div>
	
	<script type="text/javascript">
	$("#btn").click(function() {
		var name=$("#name").val();
		if(name=="") {
			$("#result").html("이름을 입력해 주세요.");
			$("#name").focus();
			return;
		}
		
		var email=$("#email").val();
		if(email=="") {
			$("#result").html("이메일을 입력해 주세요.");
			$("#email").focus();
			return;
		}
		
		$("#name").val("");
		$("#email").val("");
		
		//AJAX 기능을 사용하여 [search_id_two.jsp] 문서를 요청하여 실행결과를 XML 데이타로
		//응답받아 출력 처리
		$.ajax({
			type: "post",
			url: "search_id_two.jsp",
			//data: "name="+name+"&email="+email,
			//값을 Object 객체의 속성값으로 표현하여 전달 가능
			data: {"name":name,"email":email},
			dateType: "xml",
			success: function(xmlDoc) {
				var code=$(xmlDoc).find("code").text();
				if(code=="success") {
					var id=$(xmlDoc).find("id").text();
					$("#result").html(name+"님의 아이디는 ["+id+"]입니다.");
				} else {
					$("#result").html(name+"님의 아이디를 찾을 수 없습니다.");
				}
			}, 
			error: function(xhr) {
				alert("에러코드 = "+xhr.status);
			}
		});
	});
	</script>
</body>
</html>

 

search_id_two .jsp

<?xml version="1.0" encoding="utf-8"?>
<%@page import="xyz.itwill.dto.AjaxMemberDTO"%>
<%@page import="xyz.itwill.dao.AjaxMemberDAO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 이름과 이메일을 전달받아 AJAX_MEMBER 테이블에 저장된 회원정보의 아이디를 검색하여 XML 
데이타로 응답하는 JSP 문서 --%>
<%
	if(request.getMethod().equals("GET")) {
		response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED);
		return;
	}

	request.setCharacterEncoding("utf-8");
	String name=request.getParameter("name");
	String email=request.getParameter("email");
	
	//String id=AjaxMemberDAO.getDAO().selectAjaxMemberId(name, email);
	
	AjaxMemberDTO ajaxMember=new AjaxMemberDTO();
	ajaxMember.setName(name);
	ajaxMember.setEmail(email);
	String id=AjaxMemberDAO.getDAO().selectAjaxMemberId(ajaxMember);
%>
<result>
	<% if(id!=null) {//검색된 아이디가 있는 경우 %>
	<code>success</code>
	<id><%=id%></id>
	<% } else {//검색된 아이디가 없는 경우 %>
	<code>empty</code>
	<% } %>
</result>

 

---

 

 

---

---

webapp > books )
books .xsl

<?xml version="1.0" encoding="UTF-8"?>
<!-- XSL 문서 : XSLT 데이타를 저장한 XML 문서 -->
<!-- XSLT(eXtensible Stylesheet Language Template) : XML 기반의 언어로 작성된 파서(Parser) -->
<!-- => XML 문서를 전달받아 HTML 문서 또는 XML 문서로 변환하기 위한 정보 제공 -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<!-- output : XML 문서를 전달받아 변환하여 제공되는 문서의 형식을 설정하는 엘리먼트 -->
	<!-- method 속성 : 변환되어 제공되는 문서의 형식을 속성값으로 설정 - 기본값 : xml -->
	<!-- encoding 속성 : 문서에서 사용하는 문자형태(캐릭터셋)을 속성값으로 설정 - 기본값 : iso-8859-1 -->
	<xsl:output method="html" encoding="utf-8"/>
	<!-- template : XML 문서를 변환하기 위한 정보를 제공하는 엘리먼트 -->
	<!-- match 속성 : XML 문서의 루트 엘리먼트를 속성값으로 설정 -->
	<xsl:template match="books">
		<ol>
			<!-- for-each : XML 문서의 엘리먼트(태그)를 반복 처리하기 위한 엘리먼트 -->
			<!-- select 속성 : 반복 처리하기 위한 엘리먼트의 이름(태그명)을 속성값으로 설정 -->
			<xsl:for-each select="book">
				<!-- value-of : XML 문서의 엘리먼트 내용(태그내용)을 제공하기 위한 엘리먼트 -->
				<!-- select 속성 : 값을 얻어오기 위한 엘리먼트의 이름(태그명)을 속성값으로 설정 -->
				<li><b><xsl:value-of select="title"/></b><xsl:value-of select="author"/></li>
			</xsl:for-each>
		</ol>
	</xsl:template>
</xsl:stylesheet>

books .jsp

<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 책정보를 XML 형식의 데이타로 제공하는 JSP 문서 --%>    
<books>
	<book>
		<title>Java의 정석</title>
		<author>남궁성</author>
	</book>
	<book>
		<title>JSP 웹프로그래밍</title>
		<author>오정임</author>
	</book>
	<book>
		<title>스프링 입문</title>
		<author>유이치</author>
	</book>
</books>

books_ajax .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- [books.jsp] 문서를 AJAX 기능으로 요청하여 XML 데이타를 응답받아 태그로 변경하여 
클라이언트에게 전달하여 응답하는 JSP 문서 --%>
<%-- => XSL 문서를 사용하여 XML 데이타를 HTML 태그로 변환하여 응답 처리 --%>
<%-- => [books.xsl] 문서를 AJAX 기능으로 요청하여 XSLT 데이타를 응답받아 사용 --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>교재목록</h1>
	<hr>
	<div id="books"></div>
	
	<script type="text/javascript">
	var xmlDoc=null;//XML 데이타를 저장하기 위한 전역변수
	var xslDoc=null;//XSLT 데이타를 저장하기 위한 전역변수
	
	$.ajax({
		type: "get",
		url: "books.jsp",
		dataType: "xml",
		success: function(result) {
			xmlDoc=result;
			doXSLT();
		},
		error: function(xhr) {
			alert("에러코드 = "+xhr.status);
		}
	});
	
	$.ajax({
		type: "get",
		url: "books.xsl",
		dataType: "xml",
		success: function(result) {
			xslDoc=result;
			doXSLT();
		},
		error: function(xhr) {
			alert("에러코드 = "+xhr.status);
		}
	});
	
	//XSLT 데이타를 사용하여 XML 데이타를 HTML 태그로 변환하는 함수
	function doXSLT() {
		if(xmlDoc==null || xslDoc==null) return;
		
		//XSLTProcessor 객체 생성 - XSLT 데이타를 사용하여 XML 데이타를 전달받아 변환하기 위한 객체
		var xsltProcessor=new XSLTProcessor();
		
		//XSLTProcessor.importStylesheet(xslt) : XSLTProcessor 객체에 변환 정보가 저장된 XSLT 
		//데이타를 전달받아 저장하기 위한 메소드
		xsltProcessor.importStylesheet(xslDoc);
		
		//XSLTProcessor.transformToFragment(xml, document) : XML 데이타를 전달받아 XSLTProcessor
		//객체를 사용하여 document 객체의 자식 Element 객체로 변환하여 반환하는 메소드 
		var fragment=xsltProcessor.transformToFragment(xmlDoc, document);
		
		$("#books").append(fragment);
	}
	</script>
</body>
</html>

 

---

 

 

---

---