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">컴퓨터&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="internet">인터넷&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="travel">여행&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="movie">영화감상&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="music">음악감상&nbsp;&nbsp;
            </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>&nbsp;&nbsp;&nbsp;&nbsp;");
	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>

 

 

 

 

 

참고 문헌 : 

 

'Front-End > JSP' 카테고리의 다른 글

[JSP] MVC 모델2 게시판 만들기-2 (기능 구현)  (2) 2022.10.18
[JSP] MVC 모델2 게시판 만들기-1 (서블릿, 자바 빈즈, JDBC, JSP 활용)  (5) 2022.10.13
[JSP] JSP에서 DB연동하기 (JDBC, 오라클, 커넥션 풀)  (3) 2022.10.08
[JSP] 자바빈즈로 회원가입 페이지 구현하기 (useBean 액션 사용, 미사용 버전 2가지)  (1) 2022.09.21
[JSP] 간단한 장바구니 구현하기 (세션 사용)  (2) 2022.09.20

티스토리툴바