BackEnd/JSP

[JSP] JSP를 이용한 간단한 CRUD 구현(여행 예약 프로그램) ③ /R 구현

나루나른 2024. 4. 15. 16:32

Oracle DB와 java 이클립스 프로그램을 연동해서 간단한 crud를 구현하는 세 번째 포스팅이다 이런 형태로 구현하는 방법은 정말 구닥다리라서 참고용으로만 간단히 봐주길 바란다.

 

https://narunarus.tistory.com/30

 

[JSP] JSP를 이용한 간단한 CRUD 구현(여행 예약 프로그램) ② / C 구현

Oracle DB와 JavaIDE를 이용한 간단한 CRUD 구현의 두번째 게시글이다. 첫번째 게시글과 마찬가지로 이런 형태로 구현하는 방법은 정말 구닥다리이므로 기본적인 개념에 대한 참고용으로만 간단히 봐

narunarus.tistory.com

 

travelBook.jsp 페이지에서 사용자가 직접 데이터를 입력하면 validate.js 파일의 유효성 검사를 거친 후에 입력한 데이터가 모든 유효성 검사를 통과하면 travelBookProc.jsp 페이지에서 직접 DB에 insert 하는 과정을 거쳐  travelList.jsp 페이지에서 예약 등록이 완료된 데이터들을 보여주게 된다.

 

travelList.jsp ( Insert 작업이 완료된 데이터를 DB에서 직접 가져와 테이블 형태로 List 페이지에 보여준다.)

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>		
<title>travelList.jsp</title>
<style>
	header {background: blue; color: white; text-align : center; }
	nav {background: lightblue;}
	footer {background: blue; color: white; text-align: center;}
</style>
</head>
<body>
	<!-- header 생략 -->
	<!-- nav 생략 -->
		
	<section>
		<!-- 본문 작성 -->
		<h3>여행 내역 조회</h3>
		<table class="table table-bordered">
		<tr>
			<th>예약번호</th>
			<th>주민번호</th>
			<th>성명</th>
			<th>성별</th>
			<th>전화번호</th>
			<th>여행상품</th>
			<th>이메일</th>
			<th>상태</th>
			<th>금액</th>
			<th>수정/삭제</th>
		</tr>
<%
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
	//오라클 DB 서버 연결 관련 정보 생략  	
	//드라이버 로딩 생략 
	//오라클 DB 서버 연결 생략
	
	//SQL 쿼리를 작성하기 위한 StringBuilder 객체 생성
	StringBuilder sql = new StringBuilder();
	//예약 테이블(tbl_reserve_01)에서 검색할 컬럼의 목록을 추가
	sql.append("select tbl_reserve_01.tcode, rno, rjumin, rname, rphone1, rphone2, rphone3, remail, rstat ");
	//투어 정보를 포함하는 필드(지역, 날짜, 시간, 호텔, 비용, 항공 정보)
	sql.append(" , tarea, tdate, ttime, thotel, tmoney, tair ");
	//tbl_reserve_01(예약 등록) 테이블과 tbl_tourcode_02(상품 정보) 테이블을 내부 조인해서 
	sql.append(" from tbl_reserve_01 inner join tbl_tourcode_02 ");
	//해당 테이블들의 예약등록번호를 기준으로 정렬한 후 색인해서 출력함
	sql.append(" on tbl_reserve_01.tcode = tbl_tourcode_02.tcode ");
	sql.append(" order by tbl_reserve_01.rno ");
	//sql 형식으로 변환 PreparedStatement : 변수를 문자열로 변환해주는 명령어
	pstmt = con.prepareStatement(sql.toString());
	
	//sql문 실행 rs(ResultSet에 저장된 sql문을 실행) 
	rs = pstmt.executeQuery(); 
	if(rs.next()){//커서를 통해 첫번째 행에 데이터가 존재하는지 확인 후 출력
		do{
%>
		<tr>
			<td>
				<%=rs.getString("rno")%>
			</td>
			<td>
				<!-- DB에서 주민번호의 0번째 인덱스부터 6번째 인덱스 전까지의 부분을 추출(생년월일) -->
				<%=rs.getString("rjumin").substring(0, 6)%>
				-
				<!-- 주민등록번호에서 6번째 인덱스부터 끝까지의 부분, 즉 주민등록번호 뒷부분을 추출 -->
				<%=rs.getString("rjumin").substring(6)%>
			</td>
			<td>
				<%=rs.getString("rname")%>//rs에 저장된 사용자 이름을 가져옴
			</td>
			<td>
		<% 
			//주민번호 13자리를 전부 가져와서 juminNo 변수에 저장한다.
		        String juminNo = rs.getString("rjumin");
			//주민번호에서 '7번째' 문자만 잘라서 가져와 변수에 저장하는데
		        char genderCode = juminNo.charAt(6); 
		        String gender = "";
		        //잘라온 문자가 저장된 변수의(genderCode) 값이 1,3이면 남성, 2,4면 여성이라는 값을 gender 문자열에 추가함
		        switch(genderCode) {
		            case '1': case '3':
		                gender = "남성";
		                break;
		            case '2': case '4':
		                gender = "여성";
		                break;
		            default:
		                gender = "알 수 없음";
		        }
        	%>
        	<%= gender %>//성별을 저장(남, 여)
			</td>
			<td>
            		<!--전화번호를 가져와서 저장(010-0000-0000)-->
			<%=rs.getString("rphone1")%>-<%=rs.getString("rphone2")%>-<%=rs.getString("rphone3")%> 
			</td>
			<td>
			<%
			//여행 상품을 추가 (예약 번호, 지역, 일자, 시간, 호텔, 항공 등)
			String tname = "";
			tname += rs.getString("tcode") + "-";
			tname += rs.getString("tarea") + "-";
			tname += rs.getString("tdate") + "-";
			tname += rs.getString("ttime") + "/";
			tname += rs.getString("thotel") + "/";
			tname += rs.getString("tair");
			out.print(tname);
			%>
			</td>
			<td>
				<%=rs.getString("remail") %>
			</td>
			<td>
				<%
				String stat = rs.getString("rstat");//체크된 값이 1이면 미납, 2면 완납
		       	if(stat.equals("1")){
		       		out.print("미납");
		       	}else if(stat.equals("2")){
		       		out.print("완납");
		       	}
				%>
			</td>
			<td>
				<%=String.format("%,d", rs.getInt("tmoney")) %><!--해당 상품의 가격을 가져옴-->
			</td>
			<td>
            		<!--버튼을 클릭시 해당하는 각 페이지에 데이터가 전송되는 동시에 rno(예약번호)의 값도 동시에 넘어가며 동작을 수행-->
			<input type="button" value="수정" onclick="location.href='travelUpdate.jsp?rno=<%=rs.getString("rno")%>'">
             		<input type="button" value="삭제" onclick="location.href='travelDel.jsp?rno=<%=rs.getString("rno")%>'">
			</td>
		</tr>
<% 
		}while(rs.next());
	}else{//데이터가 '존재하지 않다면 존재하지 않습니다' 라는 글귀를 출력함
		out.println("<tr>");
		out.println(" <td colspan='10'> 글이 존재하지 않습니다.</td>");
		out.println("</tr>");
	}
	
} catch (Exception e) {
	out.println("오라클 DB 서버 연결 및 행 추가 : "+e);
}finally{//자원 반납의 순서 주의(후순위부터 닫기)
	try{if(rs != null) {rs.close();}
	}catch(Exception e){}
	
	try{if(pstmt != null){pstmt.close();}
	}catch(Exception e){}
	
	try{if(con!=null){con.close();}
	}catch(Exception e){}
}//finally end
%>
		</table>
<!-- 본문 끝 -->
<section>
<!--footer 생략 -->
		
</body>
</html>

 

 

JSP 페이지 내에서 해당하는 쿼리문을 실행할 시에 그 값을 List 페이지에서는 테이블의 형태로 사용자에게 보여준다.

List.jsp 페이지에서 동작하는 sql문

 

List.jsp페이지에서 등록된 내역을 조회할 수 있다.

 

 

그리고 List 페이지에서는 버튼을 통해 내역을 수정 및 삭제도 가능한데 , 버튼을 클릭 할 경우 서버에 데이터가 전송되며 해당하는 동작이 실행된다.(Update 수정, Del 삭제)

수정/삭제 버튼 클릭시 서버에 데이터가 전송되며 해당 동작을 실행함

 

삭제 버튼을 누르면 Del.jsp 페이지로 넘어가면서 데이터가 삭제됨

 

 

그리고 List 페이지 내에 등록된 정보가 없다면  '글이 존재하지 않습니다.'  라는 글귀를 페이지에 출력한다.

List 페이지에 데이터가 없다면 해당 글귀를 출력