Front-End/JSP
[JSP] JDBC 회원가입 및 관리자 페이지 구현 실습
현기
2022. 10. 11. 21:16
JSP에서 JDBC를 활용해서 간단한 회원가입 및
관리자로 접속 했을 때 회원을 관리하는 프로그램을 실습했습니다.
이론보다는 소스코드 위주의 포스팅입니다.
📝 파일 목록
loginForm.jsp : 로그인 폼 페이지
joinForm.jsp : 회원가입 폼 페이지 (이전 글 참고)
loginProcess.jsp : 로그인 처리
joinProcess.jsp : 회원가입 처리
Main.jsp : 메인 페이지
Member_list.jsp : 어드민 회원목록 확인
Member_info.jsp : 어드민 회원정보 조회
Member_delete.jsp : 회원 삭제 처리
logOut.jsp : 로그아웃 (세션 초기화)
📝 프로그램 흐름
⦁ 📑 로그인 페이지
✔ 폼에 정보를 입력하고 loginProcess.jsp로 전송한다.
로그인 처리 파일에서 받은 파라미터 (id, pw)를 DB에서 조회해서
로그인 기능을 구현했다.
⦁ 📑 회원가입 페이지
CREATE TABLE user_info(
ID VARCHAR2(12) PRIMARY KEY,
PW VARCHAR2(12),
EMAIL VARCHAR2(15),
NAME VARCHAR2(10),
BIRTH VARCHAR2(10),
HOBBY VARCHAR2(50),
INTRO VARCHAR2(301)
);✔ 테이블을 만들고 Form에서 joinProcess.jsp 파일로 파라미터를 전달한다.
받은 파라미터를 DB에 INSERT 한다.
⦁ 📑 메인 페이지
✔ 로그아웃 버튼이 존재한다.
만약 로그인한 사용자가 어드민이라면 회원을 관리할 수 있는 링크가 있다.
⦁ 📑 Member_list.jsp
✔ 어드민만 접속할 수 있다.
이름을 누르면 GET 방식으로 파라미터를 전달하고 where 쿼리문을 통해
해당 유저의 정보를 조회할 수 있다.
삭제를 누르면 똑같은 방식으로 DB에서 해당 ID를 가진 유저를 DELETE 한다.
📝 소스코드
❗ 조금 길어요
더보기
📝 loginForm.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<center>
<h3>로그인 페이지</h3>
<form id="userinfoForm" action="loginProcess.jsp" method="post">
<table>
<tr>
<td>아이디 : </td>
<td> <input type="text" name="id"> </td>
</tr>
<tr>
<td>비밀번호 : </td>
<td> <input type="text" name="pw"> </td>
</tr>
<tr>
<td align="center">
<a href="joinForm.jsp"> 회원가입 </a>
</td>
<td align="center">
<input type="submit" value="로그인">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
📝 joinForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>회원가입</title>
<script type="text/javascript">
// 유효성 검사 메서드
function Validation() {
// 변수에 저장
var uid = document.getElementById("uid")
var pw = document.getElementById("pw")
var cpw = document.getElementById("cpw")
var mail = document.getElementById("mail")
var name = document.getElementById("uname")
var year = document.getElementById("year")
var hobby = document.getElementsByName("hobby")
var me = document.getElementById("me")
//아이디 확인
if(uid.value.length <4){
alert("아이디를 4글자 이상 입력하세요.")
uid.focus();
return false;
}
//아이디 영어 대소문자 확인
else if(!checkEngNumber(uid.value)){
alert("영문 대소문자, 숫자만 입력하세요.")
uid.focus();
return false;
}
//비밀번호 확인
if(pw.value.length <4){
alert("비밀번호를 4글자 이상 입력하세요.")
pw.focus();
return false;
}
//비밀번호 영어 대소문자 확인
else if(!checkEngNumber(pw.value)){
alert("영문 대소문자, 숫자만 입력하세요.")
pw.focus();
return false;
}
//비밀번호와 아이디 비교
else if(pw.value == uid.value){
alert("아이디와 동일한 비밀번호를 사용할 수 없습니다.")
pw.focus();
return false;
}
//비밀번호 확인
if(cpw.value !== pw.value){
alert("비밀번호와 동일하지 않습니다.")
cpw.focus();
return false;
}
//메일주소 확인
if(mail.value.length == 0){
alert("메일주소를 입력하세요.")
mail.focus();
return false;
}
else if(mail.value.indexOf("@") == -1 || mail.value.indexOf(".") == -1 || mail.value.length <=5){
alert("잘못된 이메일 형식입니다.")
mail.focus();
return false;
}
//이름 확인 = 한글과 영어만 가능하도록
if(uname.value == ""){
alert("이름을 입력하세요.")
uname.focus();
return false;
}
else if(!checkKorEng(uname.value)){
alert("한글, 영어만 입력하세요.")
uname.focus();
return false;
}
//생일 확인
if(year.value == ""){
alert("년도를 입력하세요.")
year.focus();
return false;
}
else if(!(year.value >=1900 && year.value <= 2050)){
alert("년도를 정확하게 입력해주세요.")
year.focus();
return false;
}
//관심분야 확인
if(!checkedHobby(hobby)){
alert("관심분야를 체크하세요.")
hobby.focus();
return false;
}
//자기소개 확인
if(me.value.length <= 10){
alert("자기소개는 최소 10글자를 입력해주세요.")
me.focus();
return false;
}
}
// 문자열이 영어, 숫자인지 확인하는 메서드
function checkEngNumber(value){
var count = 0;
for(var i=0; i<value.length; i++){
if((value.charCodeAt(i)>=65 && value.charCodeAt(i)<=90) || (value.charCodeAt(i)>=97 && value.charCodeAt(i)<=122) || (value.charCodeAt(i)>=48 && value.charCodeAt(i)<=57)){
count += 1;
}
}
//카운트 수와 문자의 길이가 같다면 true
if(count === (value.length)){
return true;
} else{
return false;
}
}
//영어, 한글인지(가~힣) 확인
function checkKorEng(value){
var count = 0;
for(var i=0; i<value.length; i++){
console.log(value.charCodeAt(i));
if((value.charCodeAt(i)>=65 && value.charCodeAt(i)<=90) || (value.charCodeAt(i)>=97 && value.charCodeAt(i)<=122) || (value.charCodeAt(i)>=44032 && value.charCodeAt(i)<=55203)){
count += 1;
}
}
if(count === (value.length)){
return true;
} else{
return false;
}
}
//관심분야 체크 확인
function checkedHobby(arr){
for(var i=0; i<arr.length; i++){
if(arr[i].checked == true){
return true;
}
}
return false;
}
</script>
<body>
<br>
<div align="center">
</div>
<br><br>
<form id="userinfoForm" action="joinProcess.jsp" method="post" onsubmit="return Validation();">
<table text-align="center" align="center" border="1" width="800" height="600" cellspacing="0">
<tr>
<td bgcolor="#48dbfb" align="center" colspan="2" height="50"> <b>회원 기본 정보</b> </td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center" width="150">아이디:</td>
<td bgcolor="white"> <input type="text" size="20" name="id" id="id" minlength="4" maxlength="12"> 4~12자의 영문 대소문자의 숫자로만 입력 </td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center">비밀번호:</td>
<td bgcolor="white"> <input type="password" size="20" name="pw" id="pw" minlength="4" maxlength="12"> 4~12자의 영문 대소문자의 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center">비밀번호확인:</td>
<td bgcolor="white"><input type="password" size="20" name="cpw" id="cpw"></td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center">메일주소:</td>
<td bgcolor="white"><input type="email" size="30" name="mail" id="mail"> 예) id@domain.com</td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center">이름:</td>
<td bgcolor="white"><input type="text" size="30" name="name" id="uname"></td>
</tr>
<tr>
<td bgcolor="#48dbfb" align="center" colspan="2" height="50"><B>개인 신상 정보</B></td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center">주민등록번호:</td>
<td bgcolor="white"><input maxlength="13" type="text" size="30" name="num">예) 1234561234567</td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center">생일:</td>
<td bgcolor="white">
<input type="text" size="8" name="year" id="year">년
<select name="month" id="month">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
</select>월
<select name="day" id="day">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
<option value = "13">13</option>
<option value = "14">14</option>
<option value = "15">15</option>
<option value = "16">16</option>
<option value = "17">17</option>
<option value = "18">18</option>
<option value = "19">19</option>
<option value = "20">20</option>
<option value = "21">21</option>
<option value = "22">22</option>
<option value = "23">23</option>
<option value = "24">24</option>
<option value = "25">25</option>
<option value = "26">26</option>
<option value = "27">27</option>
<option value = "28">28</option>
<option value = "29">29</option>
<option value = "30">30</option>
<option value = "31">31</option>
</select>일
</td>
</tr>
<tr>
<td bgcolor="#c8d6e5" align="center">관심분야:</td>
<td bgcolor="white">
<input type="checkbox" name="hobby" value="computer">컴퓨터
<input type="checkbox" name="hobby" value="internet">인터넷
<input type="checkbox" name="hobby" value="travel">여행
<input type="checkbox" name="hobby" value="movie">영화감상
<input type="checkbox" name="hobby" value="music">음악감상
</td>
</tr>
<tr height="100">
<td bgcolor="#c8d6e5" align="center" rowspan="2">자기소개:</td>
<td bgcolor="white">
<textarea rows="10" cols="75" name="intro" id="intro"> </textarea>
</td>
</tr>
</table>
<br>
<div align="center">
<input type="submit" width="30" id="btn" value="전송">
<input type="reset" onclick="alert('초기화 했습니다.')" value="다시 입력">
</div>
</form>
</body>
</html>
📝 loginProcess.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
//파라미터 받아오기
request.setCharacterEncoding("EUC-KR");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
int result = 0;
Connection conn = null;
String sql="SELECT COUNT(id) AS result FROM user_info WHERE id=? AND pw=?"; //쿼리문
try{
Context init = new InitialContext();
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
conn = ds.getConnection();
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
pstmt.setString(2, pw);
ResultSet rs = pstmt.executeQuery();
while(rs.next()){
result = rs.getInt(1);
}
//어드민 확인
if(result == 1 && id.equals("admin")){
result +=1;
}
//세션에 저장 1유저 2어드민
if(result != 0){
session.setAttribute("login", result);
session.setAttribute("id", id);
}
} catch(Exception e){
e.printStackTrace();
}
%>
<%
if(result == 1){
out.println("<script>alert('로그인 되었습니다.');</script>");
out.println("<script>location.href='Main.jsp'</script>");
} else if(result == 2) {
out.println("<script>alert('관리자 로그인 입니다.');</script>");
out.println("<script>location.href='Main.jsp'</script>");
} else {
out.println("<script>alert('아이디와 비밀번호를 확인하세요.');</script>");
out.println("<script>location.href='loginForm.jsp'</script>");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
📝 joinProcess.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="EUC-KR"%>
<%@ page import="java.util.Arrays" %>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
//파라미터 받아오기
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String email = request.getParameter("mail");
String name = request.getParameter("name");
String year = request.getParameter("year");
String month = request.getParameter("month");
String day = request.getParameter("day");
String intro = request.getParameter("intro");
//생년월일
String birth = ""+year+"-"+month+"-"+day;
//체크박스
String[] temp = request.getParameterValues("hobby");
String hobby = Arrays.toString(temp);
Connection conn = null;
String sql = "INSERT INTO user_info values(?, ?, ?, ?, ?, ?, ?)"; //쿼리문
//성공 확인용
int result = 0;
try{
Context init = new InitialContext();
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
conn = ds.getConnection();
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
pstmt.setString(2, pw);
pstmt.setString(3, email);
pstmt.setString(4, name);
pstmt.setString(5, birth);
pstmt.setString(6, hobby);
pstmt.setString(7, intro);
if(pstmt.executeUpdate() != 0){
result += 1;
}
} catch(Exception e){
e.printStackTrace();
}
%>
<%
if(result == 1){
out.println("<script>alert('회원가입이 완료되었습니다.');</script>");
out.println("<script>location.href='loginForm.jsp'</script>");
} else {
out.println("<script>alert('회원가입에 실패했습니다.');</script>");
out.println("<script>location.href='joinForm.jsp'</script>");
}
%>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
📝 Main.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%= session.getAttribute("id") %>님이 로그인한 상태입니다. <br/>
<%
//일반유저1 어드민2
int login = (int)session.getAttribute("login");
out.println("<a href='logOut.jsp'> 로그아웃 </a><br><br>");
if(login == 2){
out.println("<a href='Member_list.jsp'>"+ "회원정보 DB 조회하기" +"</a>");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
📝 Member_list.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.util.*"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
Connection conn = null;
String sql="SELECT * FROM user_info"; //쿼리문
ArrayList<String> arr = new ArrayList<String>(); //결과 담을 변수
try{
Context init = new InitialContext();
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
conn = ds.getConnection();
PreparedStatement pstmt = conn.prepareStatement(sql);
ResultSet rs = pstmt.executeQuery();
while(rs.next()){
arr.add(rs.getString(1));
}
//어드민은 리스트에서 제거
arr.remove("admin");
} catch(Exception e){
e.printStackTrace();
}
%>
<%
out.print("<h3>회원 리스트</h3>");
for(String id : arr){
out.print("<a href=Member_info.jsp?var="+id+">" + id + "</a> ");
out.print("<a href=Member_delete.jsp?var="+id+">" + "삭제</a><br>");
};
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
📝 Member_info.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("var");
Connection conn = null;
String sql="SELECT * FROM user_info WHERE id=?"; //쿼리문
try{
Context init = new InitialContext();
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
conn = ds.getConnection();
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
ResultSet rs = pstmt.executeQuery();
out.println("<h3>회원 상세 정보</h3>");
while(rs.next()){
out.println("ID : "+rs.getString(1)+"<br>");
out.println("PW : "+rs.getString(2)+"<br>");
out.println("EMAIL : "+rs.getString(3)+"<br>");
out.println("NAME : "+rs.getString(4)+"<br>");
out.println("BIRTH : "+rs.getString(5)+"<br>");
out.println("HOBBY : "+rs.getString(6)+"<br>");
out.println("INTRO : "+rs.getString(7)+"<br>");
}
} catch(Exception e){
e.printStackTrace();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
📝 Member_delete.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("var");
Connection conn = null;
String sql="DELETE FROM user_info where id = ?"; //쿼리문
try{
Context init = new InitialContext();
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
conn = ds.getConnection();
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
if(pstmt.executeUpdate()!=0){
out.println("<script>alert('삭제 성공');</script>");
out.println("<script>location.href = 'Member_list.jsp'</script>");
}
} catch(Exception e){
e.printStackTrace();
out.println("<script>alert('삭제 실패');</script>");
out.println("<script>location.href = 'Member_list.jsp'</script>");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
📝 logOut.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
session.invalidate(); //세션 초기화 메서드
out.println("<script>alert('로그아웃 합니다.');</script>");
response.sendRedirect("loginForm.jsp");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
참고 문헌 :