JSP 로 2개의 페이지 만들기(목록, 등록)

박영준·2024년 6월 14일

JDBC jsp oracle sql

JSP

목록 보기

12/17

JSP 에서 JDBC 로 Oracle DB 연동 후, 데이터 조회하기 과정을 진행한 것으로 가정하고 작성했다.

1. JSP 작성하기

userList.jsp

요약 : DB연결 & DB조회 & DB로 데이터 전송

<%@page import="java.util.*"%>
<%@page import="javax.sql.*"%>
<%@page import="javax.naming.*"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>사용자 목록 페이지</title>
	
	<style>
		th {
			color: blue;
		}
	</style>
	
</head>
<body>
	<h3>사용자 목록</h3>
	<table border="1" width="300" height="10">
		<tr>
			<th>번호</th>
			<th>이름</th>
			<th>나이</th>
			<th>성별</th>
		</tr>

	<%	
		// 1. 연결
		Connection con = null;
		Boolean connect = false;	

		PreparedStatement pstmt = null;
		
		ResultSet rs = null;
	
		try {			
			Context init = new InitialContext();
			DataSource ds = (DataSource) init.lookup("java:comp/env/Oracle_park");
			con = ds.getConnection();
			
			connect = true;
			
			if(connect = true) {
				out.println("<script>alert('DB 연결 성공');</script>");
			} else {
				out.println("<script>alert('DB 연결 실패');</script>");
		  	}
	
			// 2. 조회 : DB 에서 모든 user 조회
			pstmt = con.prepareStatement("SELECT * FROM MEMBER");
			rs = pstmt.executeQuery();
			
			while(rs.next()) {
				int num = rs.getInt("NUM");
				String name = rs.getString("NAME");
				int age = rs.getInt("AGE");
				String sex = rs.getString("SEX");		
	%>				
				<tr>
					<td><%=num%></td>
					<td><%=name%></td>
					<td><%=age%></td>
					<td><%=sex%></td>
				</tr>
	<%				
		 	}
			
		} catch(Exception ex) {
			connect = false;
			ex.printStackTrace();
			
		} finally {
			if(rs != null) rs.close();
			if(pstmt != null) pstmt.close();
			if(con != null) con.close();
		}
			
	%>	
    </table>			
    
    <!-- 3. 저장 (정확히는 post 요청(저장 요청)) -->
	<form id="userinfoform" action="userInsert.jsp" method="post">
		<table>
			<tr>
				<td>번호 : </td>
				<td><input type="text" size="3" name="num"></td>
				<td>이름 : </td>
				<td><input type="text" size="7" name="name"></td>
				<td>나이 : </td>
				<td><input type="text" size="3" name="age"></td>
				<td>성별 : </td>
				<td>
					<select name="sex">
						<option value="남성">남성</option>
						<option value="여성">여성</option>
					</select>
				</td>
				<td><input type="submit" width="10" id="btn" value="등록"></td>
			</tr>
		</table>
	</form>			    
</body>
</html>

저장 (정확히는 post 요청(저장 요청))
- form 中 action : 서버 측 URL을 지정
- form 中 method : 서버로 데이터를 전송하는 방식
- input 과 select 中 name
  - 서버에서 form 데이터를 참조하도록 하기 위함
  - name을 통해서 브라우저에서 보낸 데이터를 서버가 받을 수 있음(순서 5)
- select 中 value : DB 에 저장되는 값

사용자들에게 띄워지는 페이지
- 구성 : 사용자 목록, 사용자 정보 입력 후 등록
DB 에 저장된 사용자들의 정보를 보여준다.

userInsert.jsp

요약 : 브라우저로부터 데이터 받기 & DB연결 & 실제로DB저장 & 전페이지로되돌아가기
--> userList.jsp와 동일하게 JSP페이지이나, Java 코드의 역할을 함

<%@page import="javax.sql.*"%>
<%@page import="javax.naming.*"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	// 4. 인코딩 : 브라우저 -> 서버 로 Post 요청시에 인코딩
	request.setCharacterEncoding("UTF-8");
	
	// 5. 브라우저에서 보낸(post) 데이터 받기(파라미터 가져오기) 
	int num = Integer.parseInt(request.getParameter("num"));	// int 타입
	String name = request.getParameter("name");					// String 타입
	int age = Integer.parseInt(request.getParameter("age"));
	String sex = request.getParameter("sex");
	
	// 6. 연결
	Connection con = null;
	PreparedStatement pstmt = null;
	
	try {
		Context init = new InitialContext();
		DataSource ds = (DataSource) init.lookup("java:comp/env/Oracle_park");
		con = ds.getConnection();
		
		// 7. DB 에 저장
		pstmt = con.prepareStatement("INSERT INTO MEMBER (num, name, age, sex) VALUES (?, ?, ?, ?)");
		pstmt.setInt(1, num);
		pstmt.setString(2, name);
		pstmt.setInt(3, age);
		pstmt.setString(4, sex);
		
		pstmt.executeUpdate();
		
	} catch(Exception ex) {
		ex.printStackTrace();
	}
	
	// 8. 지정한 페이지로 이동
	response.sendRedirect("userList.jsp");
%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>사용자 등록 페이지</title>
</head>
<body>
	<!-- body 는 비워둔다 -->
</body>
</html>