JSP와 ORACLE을 통한 기능 구현

이번주에 JSP와 Oracle을 이용하여 회원가입, 로그인, 회원목록, 정보 수정, 정보 삭제, 로그아웃에 대한 구현을 했다.

우선 웹에 보여줄 html을 간단히 작성하였다.

index

인덱스 페이지

회원 가입 | 로그인 |

위의 목록과 같이 회원가입과 로그인을 구성하였고, 회원가입을 하고 로그인을 하면

index

인덱스 페이지

회원 목록 | 회원 수정 | 회원 삭제 | 로그아웃 |

회원 목록, 회원 수정, 회원 삭제, 로그아웃의 기능을 사용할 수 있는 목록이 나온다.

기본적으로 Oracle에 table을 만들어주고 회원가입할 시 안에 있는 목록을 저장할 수 있는 컬럼들을 구성해준다.
나같은 경우 테이블 명 - test 컬럼명 - id, pw, name, email로 구성하였다.

1. 회원가입

회원가입 버튼을 누르게 되면 이런 항목이 나온다.
Javascript를 이용하여 아이디와 비번이 비어있는 지 체크한번 하고 비밀번호가 확인된 비밀번호와 같은지 확인하는 작업을 통해 잘못 작성한 가입자를 방지할 수 있도록 1차 조치를 취해주었다.
또한 서버의 부하를 막아줄 수 있기때문에 자바스크립트를 통한 1차 검증을 하면 서버입장에서의 불편함을 덜어줄 수 있다.

function check(){
// 자바스크립트 언어로 사용자의 입력 값을 검증
// 서버에 데이터를 전달(submit)
// 검증 데이터 : 아이디, 비밀번호, 비밀번호 확인
// 검증 ? 데이터는 입력 했는지, 비밀번호 두 개는 같은 지
var id = document.getElementById('id').value;
var pw = document.getElementById('pw').value;
var confirmPw = document.getElementById('confirmPw').value;
if(id == "" || pw == ""){
alert('아이디 또는 비밀번호 입력 데이터를 확인하세요.')
return;
}
if(pw != confirmPw){
alert('아이디 또는 비밀번호 입력 데이터를 확인하세요.')
return;
}
document.getElementById('f').submit();
}

만약 검증단계를 통과하게 되면 2차검증은 서버와 데이터베이스의 데이터를 비교작업을 통해 한번 더 검증이 이루어지게 된다.
document.getElementById('f').submit();를 통해 설정해놓았던 form의 action위치로 이동하게 된다.

<%

request.setCharacterEncoding("UTF-8");

String id = request.getParameter("id");
String pw = request.getParameter("pw");
String confirmPw = request.getParameter("confirmPw");

String name = request.getParameter("name");
String email = request.getParameter("email");

if(id == null || id == "" || pw == null || pw == ""){
out.print("<script>alert('아이디 / 비밀번호를 확인하세요.'); location.href='member.jsp';</script>");
	return;
}

if(pw.equals(confirmPw) == false){
out.print("<script>alert('아이디 / 비밀번호를 확인하세요.'); location.href='member.jsp';</script>");	
	return;
}

MemberDAO memberDao = new MemberDAO();
MemberDTO check = memberDao.selectId(id);

if(check == null){
	MemberDTO member = new MemberDTO();
	member.setId(id);
	member.setPw(pw);
	member.setName(name);
	member.setEmail(email);
	memberDao.insert(member);
	out.print("<script>alert('회원 가입이 되었습니다.'); location.href='index.jsp';</script>");
}else{
	out.print("<script>alert('이미 가입된 정보입니다.'); location.href='member.jsp';</script>");
}

%>

회원가입을 submit하게 되면 위 코드로 들어가게 된다.
parameter를 통해 id와 pw, 이름과 이메일의 정보를 서버를 통해 넘겨받게 된다.
서버의 검증을 통해 아이디와 비번이 비어있는지 또한 비번이 같은지 확인하는 검증 작업이 끝나게 되면 DAO에 있는 데이터를 통해 아이디를 검색하게 된다.
DAO란 간략히 말하면 데이터가 저장되어 있는(DataBase)에 CRUD 작업을 하는 페이지이다.

Orale에 접속

private Connection con;

public MemberDAO() {
	String url = "jdbc:oracle:thin:@localhost:1521:xe";
	String user = "jsp1209";
	String password = "oracle";
		
	try {
		Class.forName("oracle.jdbc.OracleDriver");
		con = DriverManager.getConnection(url, user, password);
	} catch (Exception e) {
		e.printStackTrace();
	}
}

이전에 selectId로 이동해서 데이터의 값을 찾으려면 우선 Oracle에 접속하여 데이터를 볼 수있어야 하기 때문에 위의 작업을 통해 오라클에 접속을 한다.

DAO에 있는 selectId 메소드

public MemberDTO selectId(String id) {
PreparedStatement ps = null;
ResultSet rs = null;
try {
ps = con.prepareStatement("SELECT * FROM test WHERE id=?");
ps.setString(1, id);
rs = ps.executeQuery();
if(rs.next()) {
MemberDTO member = new MemberDTO();
member.setId(id);
member.setPw(rs.getString("pw"));
member.setName(rs.getString("name"));
member.setEmail(rs.getString("email"));
return member;
}
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}

selectId메서드를 통해 데이터베이스에 id를 검색하게 되면 id에 관련된(id, pw, name, email) 테이블의 정보를 가져올 수 있다.
이 작업을 통해 id의 중복이 있는지 검사하고 없다면 DAO에 있는 insert메서드를 통해 입력된 정보를 데이터베이스에 저장한다.

insert메서드

public void insert(MemberDTO member) {

	PreparedStatement ps = null;
	try {
		ps = con.prepareStatement("INSERT INTO test VALUES(?, ?, ?, ?)");
		ps.setString(1, member.getId());
		ps.setString(2, member.getPw());
		ps.setString(3, member.getName());
		ps.setString(4, member.getEmail());
		ps.executeUpdate();		
	} catch (SQLException e) {
		e.printStackTrace();
	}
}

PreparedStatement를 이용하여 데이터베이스의 쿼리문을 작성하고, MemberDTO에 전달된 id, pw, name, email의 정보를 가져와 쿼리문에 values설정을 한 후 executeUpdate를 통해 데이터베이스에 쿼리문을 실행시켜 준다.

2. 로그인

아이디와 비번을 입력한다.

설정된 action페이지

<%
request.setCharacterEncoding("UTF-8");

String id = request.getParameter("id");
String pw = request.getParameter("pw");

if(id == null || id == "" || pw == null || pw == ""){
out.print("<script>alert('아이디 / 비밀번호를 확인하세요.'); location.href='login.jsp';</script>");
	return;
}

// 아이디는 5~20자리의 길이
// 첫 문자는 소문자, 숫자
// 두번째 이상부터는 소문자, 숫자, _-(특수문자) 

String regex = "^[a-z0-9]{1}[a-z0-9_-]{4,19}$";
Pattern pattern = Pattern.compile(regex);
Matcher m = pattern.matcher(id);
// true : 규칙 맞아, false : 규칙 안 맞아
boolean regexResult = m.matches();
if(regexResult == false){
out.print("<script>alert('5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.'); " + 
			"location.href='login.jsp';</script>");
}
	
MemberDAO memberDao = new MemberDAO();
MemberDTO check = memberDao.selectId(id);
if(check != null){
	// 비밀번호 비교 후 로그인성공/실패
	if(check.getPw().equals(pw)){
		//로그인 성공
		session.setAttribute("id", id);
		session.setAttribute("name", check.getName());
		session.setAttribute("email", check.getEmail());
		out.print("<script>alert('로그인 성공!!'); location.href='index.jsp';</script>");
		return;
	}
}
out.print("<script>alert('아이디 / 비밀번호를 확인하세요.'); location.href='login.jsp';</script>");

%>

웹에서는 id와 비번만 입력받았기 때문에 두 데이터를 파라미터를 통해 가져온다.
회원가입과 마찬가지로 아이디와 비번이 비어있는지 검증 한번 거친 후 첫문자는 소문자 또는 숫자 두번째 이상부터는 소문자 숫자 특수문자만 입력할 수 있도록 해주었다.
DAO에 있는 selectId메서드를 통해 데이터베이스의 pw에 대한 정보를 가져와 입력한 값과 비교하여 일치하게 된다면 session을 setAttribute해주어 웹에 정보를 저장해준다.
session을 하는 이유 - 사용자가 로그인을 하여 이용하려는 사이트의 서비스를 보여주기 위해서는 필요하다. 만약 로그인을 통하지 않다면 session이 주어지지 않아 session이 있어야만 볼 수 있는 페이지에 접속할 수 없다.

3. 회원 목록

<%
MemberDAO memberDao = new MemberDAO();
ArrayList members = memberDao.list(); // 회원의 모든 정보를 반환하기를 원해
%>

DAO에 있는 list메서드를 불러온다.

DAO의 list메서드

public ArrayList list() {
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "SELECT * FROM test";
ArrayList members = new ArrayList();
try {
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
while(rs.next()) {
MemberDTO member = new MemberDTO();
member.setId(rs.getString("id"));
member.setPw(rs.getString("pw"));
member.setName(rs.getString("name"));
member.setEmail(rs.getString("email"));
members.add(member);
}
} catch (SQLException e) {
e.printStackTrace();
}
return members;
}

MemberDTO에서 id, pw, name, email이 담겨진 데이터 정보를 ReseultSet을 통해 확인한다.
데이터가 있다면 MemberDTO member에 담아 데이터를 저장한다.
저장한 데이터를 ArrayList를 만든 members에 추가해주고 추가된 데이터를 html에 하나씩 뿌려준다.

<% for(MemberDTO m : members) { %>

	<tr>
		<td><%=m.getId() %></td>
		<td><%=m.getPw() %></td>
		<td><%=m.getName() %></td>
		<td><%=m.getEmail() %></td>
	</tr>
	<%} %>
      

for문을 통해 members에 저장된 데이터가 있는 만큼 수행해서 만들어주어 회원 목록을 나타내었다.

4. 회원 수정

회원 수정은 회원가입과 동일하게 form을 구성하였지만 id는 고유값이기 때문에 설정을 바꾸지 못하도록 readonly로 설정해주었다.

jsp - update

<%
request.setCharacterEncoding("UTF-8");

String id = (String)session.getAttribute("id");
if(id == null){
%>
	<script>alert('로그인 후 이용 할 수 있습니다.'); location.href='login.jsp';</script>
<%		
}

String pw = request.getParameter("pw");
String confirmPw = request.getParameter("confirmPw");

String name = request.getParameter("name");
String email = request.getParameter("email");

if(pw == null || pw == ""){
out.print("<script>alert('비밀번호를 확인하세요.'); location.href='update.jsp';</script>");
	return;
}

if(pw.equals(confirmPw) == false){
out.print("<script>alert('비밀번호를 확인하세요.'); location.href='update.jsp';</script>");	
	return;
}

MemberDAO memberDao = new MemberDAO();

MemberDTO member = new MemberDTO();
member.setId(id);
member.setPw(pw);
member.setName(name);
member.setEmail(email);

memberDao.update(member);

session.setAttribute("name", name);
session.setAttribute("email", email);

out.print("<script>alert('회원 정보가 수정 되었습니다.'); location.href='index.jsp';</script>");

%>

DAO에 저장된 update메서드를 통해서 수정한다.
session을 다시 설정한 이유는 기존 로그인된 세션이 그대로 남아있기 때문에 다시 session을 설정해 주었다.

DAO - update메서드

public void update(MemberDTO member) {
PreparedStatement ps = null;
String sql = "UPDATE test SET pw=?, name=?, email=? WHERE id=?";
try {
ps = con.prepareStatement(sql);
ps.setString(4, member.getId());
ps.setString(1, member.getPw());
ps.setString(2, member.getName());
ps.setString(3, member.getEmail());
ps.executeUpdate();

	} catch (SQLException e) {
		e.printStackTrace();
	}
}
  

ps로 쿼리문을 전달하여 기존에 있던 데이터베이스의 정보를 수정하고 exeuteUpdate로 쿼리문을 수행하였다.

5. 회원 삭제

DAO - delete메서드

  public void delete(MemberDTO member) {
	PreparedStatement ps = null;
	String sql = "DELETE FROM test WHERE id=?";
	try {
		ps = con.prepareStatement(sql);
		ps.setString(1, member.getId());
		ps.executeUpdate();
	} catch (SQLException e) {
		e.printStackTrace();
	}
}
  

delete메서드도 update메서드와 동일하기 때문에 내용은 생락하겠다.