- DBCP 방식 사용,
- 액션태그 사용 (useBean, setProperty)
- DTO, DAO 클래스
- 세션
프로그램 구조
| Java Resources > src > membeer |
DTO 클래스 | MemberDTO.java | ||
| DAO 클래스 | MemberDAO.java | |||
| WebContent > member | 회원가입 폼 | memberform.html | member.jsp | |
| ID 중복검사 | idcheck.jsp | idcheck1.jsp | ||
| 로그인 폼 | loginform.jsp | login.jsp | main.jsp | |
| 수정 폼 | updateform.jsp | update.jsp | ||
| 삭제 폼 | deleteform.jsp | delete.jsp | ||
| 로그아웃 | logout.jsp |
1. DB 관리용 오라클 계정 생성
system 계정으로 접속, 새로운 DBA 계정을 생성하여
기본적인 테이블 생성과 관리를 위한 권한을 부여한다.
2. 이클립스에서 다이나믹 프로젝트 폴더 생성
이름은 member로 지정한다.
3. member 프로젝트에 index.jsp 파일을 생성한다.
잘 생성되었다.
4. 로그인, 회원가입 폼 준비
html, 자바스크립트, jsp를 배우며 꾸준히 디벨롭해온 폼들을
member 프로젝트 하위에 member 폴더를 만들어 복사, 붙여넣기 한다.
5. 그 밖의 환경설정
member 프로젝트 폴더 > WebContent > META-INF에 context.xml 파일을 넣는다.
WEB-INF 안에는 ojdbc6.jar 파일을 넣는다.
member 폴더 하위에 sql 폴더를 생성, member.sql을 생성해서
새로 생성한 totoro 계정과 연결했다.
6. 회원관리용 테이블 생성
컬럼들은 일전에 회원가입 폼 실습 시 생성했던 항목들에 맞추어 이름을 지정한다.
생성된 member 테이블을 조회해본다.
7. member 패키지와 DAO, DTO 파일 생성
src > member > MemberDAO.java, MemberDTO.java
8. DTO 파일 작성
DB 테이블 생성시 입력했던 컬럼의 이름들을 가져와 그대로 프로퍼티를 생성하고
get-set 메소드를 생성한다.
이때, 자료형을 맞춰준다. varchar2 타입은 String,
timestamp 타입은 java.sql.Timestamp로 import를 해야 한다.
9. DAO 파일 작성
1) 싱글톤 객체 생성
2) 정적 메소드를 이용한 리턴
3) 커넥션 풀을 구해오는 메소드
dbcpAPITest.jsp에서 예외처리를 위한 소스를 복사해와서 붙여넣는다.
import가 필요한 항목이 있어 Ctrl+Shift+O 를 눌러
(1) javax.naming.Context를 선택 > Next
(2) javax.sql.DataSource > Finish
package member;
import java.sql.Connection;
import javax.sql.DataSource;
import javax.naming.Context;
import javax.naming.InitialContext;
public class MemberDAO {
//1) 싱글톤 객체 생성 : 객체 생성을 한번만 수행.
private static MemberDAO instance = new MemberDAO();
//2) 정적 메소드를 이용한 리턴
public static MemberDAO getInstance() {
return instance;
}
//3) 커넥션풀에서 커넥션을 구해오는 메소드
private Connection getConnection() throws Exception {
Context init = new InitialContext();
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/orcl");
return ds.getConnection();
}
}
10. member.jsp를 생성한다.
만들어둔 회원가입 폼을 열어보면 폼 태그의 action 값이 member.jsp로 연결되어 있다.
이 파일은 usebean 액션태그로 MemberDTO를 불러와 new 연산자로 객체를 생성할 수 있게 해주고
그 객체를 기억공간으로 사용할 수 있게 해준다.
사용자가 입력한 정보를 기억하는 공간이 되는 것이다.
<jsp:useBean id="member" class="member.MemberDTO"></jsp:useBean>
<jsp:setProperty property="*" name="member"/>
MemberDAO.java파일을 import하고,
useBean의 id값과 setProperty의 name 값을 일치시킨다.
이전에 회원가입 폼을 생성할 때, 취미는 체크박스로 다섯개를 생성해서 중복 선택이 가능할 수 있도록 했다.
name값이 hobby이고, value값이 각 체크박스의 이름으로 설정되어 있는데,
DB 테이블을 생성할 때 hobby 컬럼은 하나 뿐이었다.
체크박스를 중복 선택할 경우 공부-등산-낚시 처럼 구분기호로 연결된 값으로 저장될 수 있도록 설정할 예정이다.
하나의 name 값에 여러 값을 가져오기 위해 배열로 값을 받는 request.getParameterValues를 사용한다.
이렇게 가져온 배열의 값을 DTO 객체에 저장할 수 있도록 하는 member.setHobby 코드를 추가하고,
DAO객체를 생성한다. 이 객체는 DAO에 앞으로 생성할 메소드를 불러 오기 위함이다.
insert 메소드 안에는 회원 정보를 DB 테이블에 추가하는 SQL문이 들어 있다.
그리고 회원가입에 성공 했을 때와 실패 했을 때
조건문을 사용해 화면에 출력할 문구를 두 가지로 나눠서 작성한다.
<%
String[] hobby = request.getParameterValues("hobby");
String h = "";
for(String h1 : hobby) {
h += h1 + "-";
}
member.setHobby(h);
MemberDAO dao = MemberDAO.getInstance();
int result = dao.insert(member);
if(result == 1) { // 회원가입 성공
%>
<script>
alert("회원가입 성공");
location.href="loginform.html"; // 성공시 로그인 화면으로 자동으로 이동
</script>
<% } else { // 회원가입 실패
%>
<script>
alert("회원가입 실패")
history.go(-1)
</script>
<% } %>
11. MemberDAO.java에 insert 메소드를 생성한다.
DB와 연결하기 위한 sql 클래스를 import 하고,
DB와 연결 성공-연결 실패의 경우가 있으므로 try catch 예외처리를 한다.
형식은 다음과 같다.
public int insert(MemberDTO member) {
int result = 0;
Connection con = null;
PreparedStatement pstmt = null;
try {
} catch(Exception e) {
e.printStackTrace();
} finally {
}
return result;
}
SQL문을 작성하여 String 객체에 저장한다.
너무 길어서 두줄에 걸쳐 작성했는데, 첫째줄 끝이나 둘째줄 시작 둘 중 한곳에는
반드시 공백이 있어야 membervalues 같이 한 단어로 처리되어 오류가 나는 것을 막을 수 있다.
컬럼의 개수만큼 ?를 적어야 한다.
String sql = "insert into member";
sql+=" values(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,sysdate)";
그리고 회원가입 폼의 각 항목의 값을 String 형식으로 가져오는데, 너무 길어서 캡쳐로 대신한다.
SQL문을 실행하는 코드를 추가한다.
이 코드는 SQL문이 잘 실행되면 1을, 예외 발생 시에는 0을 돌려준다.
result = pstmt.executeUpdate();
이제 Finally 구문을 채운다.
if (pstmt != null) try { pstmt.close();} catch (Exception e) {}
if (con != null) try { con.close();} catch (Exception e) {}
insert 메소드의 전체 코드는 다음과 같다.
public int insert(MemberDTO member) {
int result = 0;
Connection con = null;
PreparedStatement pstmt = null;
try {
con = getConnection();
String sql = "insert into member";
sql+=" values(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,sysdate)";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, member.getId());
pstmt.setString(2, member.getPasswd());
pstmt.setString(3, member.getName());
pstmt.setString(4, member.getJumin1());
pstmt.setString(5, member.getJumin2());
pstmt.setString(6, member.getMailid());
pstmt.setString(7, member.getDomain());
pstmt.setString(8, member.getTel1());
pstmt.setString(9, member.getTel2());
pstmt.setString(10, member.getTel3());
pstmt.setString(11, member.getPhone1());
pstmt.setString(12, member.getPhone2());
pstmt.setString(13, member.getPhone3());
pstmt.setString(14, member.getPost());
pstmt.setString(15, member.getAddress());
pstmt.setString(16, member.getGender());
pstmt.setString(17, member.getHobby());
pstmt.setString(18, member.getIntro());
result = pstmt.executeUpdate();
} catch(Exception e) {
e.printStackTrace();
} finally {
if (pstmt != null) try { pstmt.close();} catch (Exception e) {}
if (con != null) try { con.close();} catch (Exception e) {}
}
return result;
}
여기까지 잘 작성했다면 회원가입 폼에서 항목들을 입력하고 전송 버튼을 누르면
DB 테이블에 정보가 등록되고, loginform.html로 이동한다.
12. ID 중복검사
(1) 팝업창 띄우기로 처리하기
이 내용은 member.js 파일에 작성한다.
만약 공란으로 비워두고 ID중복검사 버튼을 누른다면,
alert을 실행하고 focus를 id칸으로 돌린다.
제대로 입력했다면 팝업창을 띄워 DB에 저장된 ID값에서 중복되는 값을 찾아 결과를 화면에 띄운다.
$("#idcheck").click(function(){
if($("#id").val()==""){
alert("ID를 입력하세요.");
$("#id").focus();
return false;
}else{
var ref="idcheck.jsp?id="+$("#id").val();
window.open(ref,"mywin","width=250,height=150");
}
});
// 일전에 작성해둔 내용이 그대로 적혀 있다.
// 아직은 별도로 기능을 추가하지 않았기 때문에
// 아이디를 입력하고 중복검사를 실행하면 칸에 입력한 ID가 그대로 출력된다.
var ref에 저장될 값을 idcheck.jsp에서 가져오도록 되어 있는데, 내용은 다음과 같다.
<%@page import="member.MemberDAO"%>
<%
String id = request.getParameter("id");
MemberDAO dao = MemberDAO.getInstance();
//ID 중복검사 메소드
int result = dao.memberAuth(id);
if( result == 1 ) { // 중복 : 1
%> <%= id %>는 중복 ID 입니다. <br>
<input type="button" value="닫기" id="close1">
<% } else { // 사용가능한 ID : -1
%>
<%= id %>는 사용 가능한 ID 입니다.<br>
<input type="button" value="닫기" id="close2">
<%} %>
이 때, 중복 ID인 경우 [닫기]를 누르면 (close1)
1) ID 중복검사 팝업창을 닫고
2) 아이디 폼을 리셋
3) 포커스를 아이디 폼에 두도록
사용 가능한 ID 인경우 [닫기]를 누르면 (close2)
1) ID 중복검사 팝업창을 닫고
2) 다음 항목인 비밀번호 폼에 포커스를 두도록 처리한다.
이 내용은 제이쿼리로 작성하였고, 문서의 상단에 둔다. (page import 아래)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("#close1").click(function(){ // 중복 ID
opener.$("#id").val("").focus();
window.close();
});
$("#close2").click(function(){ // 사용 가능한 ID
opener.$("#passwd").focus();
window.close();
});
});
</script>
(2) 비동기적 메시지 출력
memberform.html 을 열어 ID와 비밀번호 사이에 비동기 메시지가 출력될 영역을
div 태그로 지정했다.
member.js 에서 기존 팝업창 ID 중복 검사 부분을 주석처리 후,
ajax로 새로운 내용을 작성한다.
$("#idcheck").click(function() {
if ($("#id").val() == "") {
alert("ID를 입력하세요");
$("#id").focus();
return false;
} else {
var id = $("#id").val(); //사용자가 입력한 ID
$.ajax({
type : "post", //전송방식 선택. get, post, put, delete
url : "idcheck1.jsp",
data : {"id" : id}, //json
success : function(data) { //콜백 함수로 값을 돌려받는다.
alert(data);
if( data == 1 ) { //중복 ID
// $("#myid").text("중복 ID 입니다. 다른 ID를 입력해 주세요.")
$("#myid").html("<font color=red>중복 ID입니다. 다른 ID를 입력해 주세요.</font>");
$("#id").val("").focus();
} else { //사용 가능한 ID
// $("#myid").text("사용 가능한 ID입니다.");
$("#myid").html("<font color=red>사용 가능한 ID입니다.</font>");
$("#passwd").focus();
}
}//success end
}); //ajax end
} //else end
}); //click end
idcheck1.jsp를 생성한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="member.MemberDAO"%>
<%
String id = request.getParameter("id");
System.out.println("id: "+ id);
MemberDAO dao = MemberDAO.getInstance();
int result = dao.memberAuth(id);
System.out.println("result: "+result);
// result : 1 (중복 ID), -1(사용 가능한 ID)
// 웹 브라우저에 출력되는 값이 callback함수로 리턴된다.
out.println(result);
%>
(3) 중복검사 메소드 생성
MemberDAO.java로 이동해 중복검사 메소드를 생성한다.
이 메소드에서는
사용자가 입력한 id를 where 조건절로 삼아 회원정보 DB에 동일한 값이 있는지 찾아본 후,
동일 값이 있다면 사용할 수 없는 ID 메시지를 출력하게 해준다.
DB 테이블에서 ID는 Primary Key로 설정되어 있기 때문에, 값은 하나 이상 나올 수 없다.
이것을 if문으로 처리한다.
전체 내용은 다음과 같다.
public int memberAuth(String id) {
int result = 0;
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
con = getConnection(); // 커넥션풀에서 커넥션을 구해온다.
String sql = "select*from member where id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next()) {
result = 1; // 중복 : 1
} else {
result = -1; // 사용가능한 ID : -1
}
} catch (Exception e) {
} finally {
if (pstmt != null) try { pstmt.close();} catch (Exception e) {}
if (con != null) try { con.close();} catch (Exception e) {}
if (rs != null) try { rs.close();} catch (Exception e) {}
}
return result;
}
DB에 abc라는 아이디로 회원가입을 시켜놓은 후,
다시 회원가입 폼으로 돌아가 abc로 중복검사를 해보면 결과가 잘 나타난다.
'JSP > model 1' 카테고리의 다른 글
| 게시판 생성 (4) - 글 수정, 삭제 (0) | 2022.09.07 |
|---|---|
| 게시판 생성 (3) - 상세 페이지 (0) | 2022.09.07 |
| 게시판 생성 (2) - 글 작성, 게시판 목록 (0) | 2022.09.05 |
| 게시판 생성 (1) - 환경설정 (0) | 2022.09.05 |
| 회원 관리 (2) - 로그인, 로그아웃 (0) | 2022.09.02 |