반응형
JSP를 사용해 로그인 페이지 및 게시판을 구현했으며 사용한 개발 환경은 다음과 같다.
- 개발툴 : eclipse
- DB : oracle 11g
- 서버 : apache, tomcat
JSP로 로그인 페이지를 구현하기 위한 프로세스는 다음과 같다.
1. 사용자의 로그인 페이지 접속
2. ID/PW입력
3. ID/PW의 존재/참거짓 여부 판별
4. 로그인 성공 -> 게시판 등으로 이동
만약 3번에서 ID/PW가 틀리거나 입력하지 않았다면 2번으로 돌아가서 다시 ID/PW를 입력하게 된다.
그림으로 나타내면 아래처럼 간단하게 이해할 수 있다.
이제 각자 동작 할 페이지 마다 이름을 붙인다.
로그인 페이지 : login.jsp
ID/PW검증 페이지 : login_check.jsp
게시판 페이지 : board_list.html.jsp
그 뒤 다음과 같이 개발 소스를 만든다.
1. 로그인 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
<script type="text/javascript">
var user_id = "<%=(String)session.getAttribute("user_id")%>";
function logout(){
window.location.href = "logout.php";
}
</script>
</head>
<body style="background:gray">
<script>
if (user_id == null){</script>
<div style="background:white;margin:-12px -0.5% 0px -20px; text-align:center;height:80px; border: 1px solid">
<h2>로그인 페이지</h2></div>
<div style="position:absolute; top:50%; left:50%; width:19%; height:80px; margin:-80px 0px 0px -200px; border:1px solid;">
<form name="login" method="post" action="./login_check.jsp">
아이디 : <input type="text" name="user_id"/><br />
패스워드 : <input type="password" name="user_pw" /><br />
<input type="submit" value="로그인">
</form>
<br>
<a href="../main.html">맨 처음 페이지로</a>
<a href="./new_join.html">회원가입</a>
</div><br>
<script>} else {
alert("이미 로그인 된 상태입니다.");
document.location.href="./board_list.jsp";
}</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html><head>부분의 session.getAttribute는 만약 로그인 되어 ID가 존재하는 경우를 확인하기 위해 ID값을 세션에서 가져오는 부분이다.
만약 세션에 ID값이 존재하면 board_list.jsp로 이동한다.
그렇지 않은 경우 (user_id가 null) 아이디와 패스워드를 입력받아 <form>태그로 인해 입력값을 login_check.jsp로 전송한다.
이렇게 작성한 뒤 결과를 확인해보면 아래처럼 로그인 페이지를 확인할 수 있다.
2. ID/PW 검증 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.Statement"%>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<%
String user_id = "";
String user_pw = "";
String userLevel = "";
if(request.getParameter("user_id") == ""){ %>
<script>
alert("아이디를 입력하세요");
document.location.href='./login.jsp'
</script>
<% }
else if(request.getParameter("user_pw") == ""){ %>
<script>
alert("비밀번호를 입력하세요");
document.location.href='./login.jsp'
</script>
<% }
else{
user_id = request.getParameter("user_id"); //ID값 가져옴
user_pw = request.getParameter("user_pw"); //PW값 가져옴
//여기서 부터 DB 연결 코드
Connection conn = null;
String driverName="oracle.jdbc.driver.OracleDriver";
Class.forName(driverName);
String serverName = "localhost";
String serverPort = "1521";
String sid = "orcl";
String url = "jdbc:oracle:thin:@localhost:1521:orcl";
String userName = "DB의 사용자명";
String userPassword = "DB 패스워드";
conn = DriverManager.getConnection(url, userName, userPassword);
Statement st = conn.createStatement();
ResultSet rs = st.executeQuery("select * from USERID where ID = '" + user_id + "' AND PW ='" + user_pw + "'");
Boolean check = false;
while(rs.next()) // 결과값을 하나씩 가져와서 저장하기 위한 while문
{
String id = rs.getString("ID"); //DB에 있는 ID가져옴
String lv = rs.getString("USER_LEVEL"); // 사용제 레벨 가져옴(필수 아님)
session.setAttribute("user_id", id); //DB값을 세션에 넣음
session.setAttribute("userLevel", lv); // 세션에 레벨값 넣음
check = true;
}
if(check){ //ID,PW가 DB에 존재하는 경우 게시판으로 이동하는 코드
%>
<script>
document.location.href='./board_list.jsp'
</script> <%
rs.close();
conn.close();
} else { //ID,PW가 일치하지 않는 경우
%>
<script>
alert("ID 또는 PW를 잘못 입력했습니다.");
document.location.href='./login.jsp'
</script>
<% }
} %>
</html>ID/PW값을 파라미터 값으로 받아서 DB값과 비교하여 일치하면 board_list.jsp인 게시판으로 이동하게 하는 코드이다.
만약 일치하지 않으면 다시 로그인 페이지로 이동한다.
3. 게시판 페이지
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.Statement"%>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<%
String user_id = (String)session.getAttribute("user_id");
String userLevel = (String)session.getAttribute("userLevel");
if(user_id == null || userLevel == null){
response.sendRedirect("./login.jsp");
} %>
<script type="text/javascript">
function logout(){
window.location.href = './logout.jsp';
}
</script>
</head>
<body>
<div style="background:white;margin:-12px -0.5% 0px -20px; text-align:center;height:80px; border: 1px solid"><h2>취약한 페이지</h2></div>
<div style="text-align:center;">
<br>세션 ID : <%=session.getId() %><br>
<%=user_id %>님 로그인 되었습니다.
<br> 사용자레벨 : <%=userLevel%>
<a href="./logout.jsp" style="margin-left:3%">로그아웃</a>
<% if(userLevel.equals("3")) { %>
<a href="./adminpage.jsp"style="margin-left:3%">관리자 페이지</a>
<% } %>
<a href="/webTest/main.html"style="margin-left:3%">메인 페이지</a></div><br>
<div style="margin-left:42%">
<form action="./list_search.jsp" method="post">
<input type="text" name="search_word" size="30" align="center"/>
<input type="hidden" name="sort" value="BOARD_N">
<button>검색</button>
</form>
</div>
<table border="1" width="80%" style="margin-top:3%;margin-left:9%">
<tr>
<td align="center"><a href="./board_list.jsp?sort=BOARD_N">번호</a></td>
<td align="center"><a href="./board_list.jsp?sort=TITLE">제목</a></td>
<td align="center"><a href="./board_list.jsp?sort=WRITER">작성자</a></td>
<td align="center"><a href="./board_list.jsp?sort=WRITE_DATE">날짜</a></td>
<td align="center">조회수</td>
</tr>
<%
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
ResultSet gg = null;
String sort = "";
if(request.getParameter("sort") != null){
sort = request.getParameter("sort");
}
else if(request.getParameter("sort") == null){
sort = "BOARD_N";
}
try {
String jdbcDriver = "jdbc:oracle:thin:@localhost:1521:orcl";
String dbUser = "DB 사용자명";
String dbPw = "DB패스워드";
String query = "SELECT * FROM BOARD ORDER BY " + sort + " desc";
conn = DriverManager.getConnection(jdbcDriver, dbUser, dbPw);
stmt = conn.createStatement();
rs = stmt.executeQuery(query);
while(rs.next()){ %>
<tr align=center>
<td width="70"><%=rs.getInt("BOARD_N")%></td>
<td width="500"><a href="./view.jsp?N=<%=rs.getInt("BOARD_N")%>"><%=rs.getString("TITLE")%></a></td>
<td width="120"><%=rs.getString("WRITER")%></td>
<td width="100"><%=rs.getString("WRITE_DATE")%></td>
<td width="100"><%=rs.getString("HIT")%></td>
<tr>
<% }
}catch(SQLException ex){
out.println(ex.getMessage());
ex.printStackTrace();
}finally{
// 6. 사용한 Statement 종료
if(rs != null) try { rs.close(); } catch(SQLException ex) {}
if(stmt != null) try { stmt.close(); } catch(SQLException ex) {}
// 7. 커넥션 종료
if(conn != null) try { conn.close(); } catch(SQLException ex) {}
} %>
</table>
<br>
<button type="button" onclick="location.href='new_write.html?id=<%=user_id%>' " style="margin-left:83%">글쓰기</button>
</body>
</html>게시판 소스는 이렇다.
사실 login_check.jsp에서 검증한 후 사용자에게 보여줄 게시판 페이지 이다.
세션 ID와 사용자 레벨은 모의해킹을 위해 사용한 것이니 실제 게시판을 작성할 때 굳이 사용 안해도 된다.
또한 간단한 정렬을 위해 번호, 제목, 작성자, 날짜에 <a> 태그를 사용했으며, 이 태그의 각자 파라미터 값을 통해 정렬을 하게 된다.
정렬은 sort라는 파라미터 값을 받아서 하는데, 중간에 if문으로 sort 값을 확인해서 정렬을 한다.
SQL문은 게시글을 보여주므로 SELECT 절을 사용했으며, 전체 게시글 목록이므로 WHERE 절은 없다.
또한 정렬을 위해 ORDER BY를 사용해 sort값으로 정렬을 해서 게시글을 보여준다.
그리고 JSP에서 try{}구문을 사용했으면 예외처리문인 catch와 finally를 사용해주자
그렇지 않으면 에러가 난다..
이렇게 작성한 게시판을 확인하면 아래와 같다.
참고해서 쓸수있는 부분은 적당히 쓰자!
반응형
