회원가입 성공 시 나타나는 화면
↓ Model package의 memberDAO 회원가입 메소드 ↓
-회원가입 후 정보를 DB에 저장해준다음, 실행결과(회원가입 성공or실패여부) 에 따라 사용자 정보를 가지고 있는 세션 객체 생성
HttpSession session = request.getSession();get하고,session.setAttribute("email", email);set 해줘야됨
-서블릿에서는 객체 생성을 하고, jsp에서 세션은 내장객체라 객체생성안해줘도됨!
package Controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import Model.MemberDTO;
import Model.memberDAO;
@WebServlet("/JoinServiceCon")
public class JoinServiceCon extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("[JoinServiceCon]");
request.setCharacterEncoding("euc-kr");
String email = request.getParameter("email");
String pw = request.getParameter("pw");
String tel = request.getParameter("tel");
String address = request.getParameter("address");
System.out.println("email : " + email);
System.out.println("pw : " + pw);
System.out.println("tel : " + tel);
System.out.println("address : " + address);
//3. 데이터 DTO로 묶기
MemberDTO dto = new MemberDTO(email, pw, tel, address);
//4. DB연결할 객체 DAO생성후 메소드 호출
memberDAO dao = new memberDAO();
int cnt = dao.join(dto);
HttpSession session = request.getSession();
//회원가입 후 사용자 정보를 가지고 있는 세션 객체 생성
//5실행결과확인
if(cnt>0) {
System.out.println("회원가입성공");
//email session으로 만들기
session.setAttribute("email", email);
response.sendRedirect("join_success.jsp");
//무조건 상대경로
}else {
System.out.println("회원가입실패");
response.sendRedirect("main.jsp");
}
}
}
response.sendRedirect("join_success.jsp");에 의해 jsp파일로 이동하게되는데
↓ View - join_success.jsp ↓
- <% %> 에 좀전에 생성하고 셋한 세션의 value를 불러와야한다!
다운캐스팅 필수 !
<%
String email = (String)session.getAttribute("email");
%> - 표현식으로 email을 넣어주면 됨!
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Forty by HTML5 UP</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<style>
#Update > ul.actions {
margin-top:10%;
}
</style>
<body style="text-align: center;">
<%
//session 불러오기
String email = (String)session.getAttribute("email");
%>
<!-- Wrapper -->
<div id="wrapper">
<!-- Menu -->
<nav id="Update">
<ul class="actions vertical">
<li><h1>환영합니다!</h1></li>
<li>회원가입을 축하합니다.</li>
<!-- request영역에 저장된 회원정보 중 이메일을 출력하시오. -->
<li>메세지시스템의 새로운 이메일은 <%= email %> 입니다.</li>
<li><button onclick='location.href="main.jsp"'>시작하기</button></li>
</ul>
</nav>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
ID중복체크
코드 간결화, 재사용성, 디버깅에 용이하게 MemberDAO에 DB에 연결하고, 연결 해제 하는 메소드 dbconn(), dbclose()생성한다 ! -->conn,psmt,cnt,rs 는 try~catch문 이후에 계속사용되기 때문에 클래스영역에 전역변수로 선언해줬음
↓ Model package의 MemberDAO에 dbconn(), dbclose()메소드 ↓
// DB연결 메소드
public void dbconn() {
try {
// 1.DB연결 (ojdbc6.jar 넣어주기 - c드라이브에서 찾아서 WEB-INF\lib 안에 드래그 복사)
// 1-1. 동적로딩 Class 찾기 : DB와 이클립스를 연결해줌
Class.forName("oracle.jdbc.driver.OracleDriver");
// 1-2. DB 연결 통로 만들기 접속하기 위한 주소, 아이디, 패스워드지정
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String dbid = "hr";
String dbpw = "hr";
// 1-3. DriverManager의 반환값인 Connection 객체 이용해 DB연결
conn = DriverManager.getConnection(url, dbid, dbpw);
} catch (Exception e) {
e.printStackTrace();
}
}
// db close 메소드
public void dbclose() {
try {
if (rs != null) {
rs.close();
}
if (psmt != null) {
psmt.close();
}
if (conn != null) {
conn.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
↓ Model package의 MemberDAO에 dbconn(), dbclose()메소드 ↓
-회원가입화면 form태그안의 input type="text"태그 옆 버튼태그 추가 : '아이디중복체크'버튼 ---> form태그 안에 버튼 태그는 기본값이 submit이라 type="button" 써주기!
-버튼 아래 출력될 li태그와 그 자식으로 p태그 생성 : id="idcheck" --> p태그에 중복or중복아님 출력 될예정
-비동기 통신 ajax 활용! 아이디 중복체크 버튼을 클릭했을 때 비동기통신으로 데이터 주고받음(page새로고침없음)
<ul class="actions vertical">
<li><h5>회원가입</h5></li>
<form action="JoinServiceCon" method="post">
<li><input type="text" name="email" placeholder="Email을 입력하세요">
<button type="button" id="btn">아이디 중복체크</button></li>
<li><p id="idcheck"></p></li>
<li><input type="password" name="pw" placeholder="PW를 입력하세요"></li>
<li><input type="text" name="tel" placeholder="전화번호를 입력하세요"></li>
<li><input type="text" name="address" placeholder="집주소를 입력하세요"></li>
<li><input type="submit" value="JoinUs" class="button fit"></li>
</form>
</ul>-맨아래에 jquery부분 바로 아래 스크립트태그 작성하기
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
// 아이디 중복체크 버튼을 클릭했을 때 비동기통신으로 데이터 주고받음(page새로고침없음)
$('#btn').on('click', function() {
//입력한 email가져오기
let email = $('input[name=email]').val();
console.log(email);
//ajax로 email보내기 idCheckServiceCon
$.ajax({
url : 'idCheckServiceCon', //어디로 보낼지 주소
data : {
email : email //입력한 email data 보내기
},
dataType : "text", //중복체크 결과값 text로 받아오기
success : function(result){
alert('성공' + result);
// result가 text형태로 와서 false가 text형태로 비교해줘됨
if(result == 'false'){
$('#idcheck').html('중복되는 아이디가 없습니다.');
//중복이 없다는 뜻
}else {
//중복이 있다.
$('#idcheck').html('아이디가 중복됩니다.');
}
},
error : function(){
alert('실패');
}
});
});
</script>↓ Model package의 MemberDAO에 idCheck메소드 ↓
-매개변수는 사용자로 입력받은 email
-중복이 아니라는 뜻의 boolean변수선언
-db에서 email컬럼과 사용자 입력email 값 비교 select문 조건절 --> 사용자에게 입력받은 email
-중복값이 있으면 true
-리턴은 T or F --> boolean리턴
public boolean idCheck(String email) {
boolean result = false; // 중복이 아니라는 뜻으로 변수선언
try {
dbconn();
String sql = "select email from web_member2 where email = ?";
psmt = conn.prepareStatement(sql);
psmt.setString(1, email);
rs = psmt.executeQuery();
// .next() : 값이 있는지 없는지 파악해줌. 값이 있으면 t(중복아이디가 있고, 없으면 f(중복아이디없고
if (rs.next()) {
result = true;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
dbclose();
}
return result;
}↓ Controller package에 idCheckServiceCon서블릿 ↓
-ajax는 인코딩 하지않음
-파라미터수집 후 .idCheck메소드에 매개변수로담아줌
-.idCheck의 리턴값이 boolean이므로 result변수에 담아줌
-PrintWriter 객체로 리턴값을 응답 response.getWriter()
package Controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Model.memberDAO;
@WebServlet("/idCheckServiceCon")
public class idCheckServiceCon extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("[idCheckServiceCon]");
//아이디 중복체크 버튼 눌렀을 때 ajax로 보낸 email값 받앙기
String email = request.getParameter("email");
System.out.println("email : " + email);
//아이디 중복체크 메소드 호출!
boolean result = new memberDAO().idCheck(email);
// memberDAO dao = new memberDAO();
// boolean res2 = dao.idCheck(email); 값을여러번 사용해야될때 변수에 담아줘서 사용
System.out.println(result);
PrintWriter out = response.getWriter();
out.print(result);
// response.getWriter().print(result); 위랑 똑같음
}
}
