정보처리기사 실기
🪑8. list.jsp 작성하기 본문
자리현황 조회 화면 만들기
앞에서 reg.jsp와 action.jsp를 작성하면서 독서실 자리등록 기능을 만들었습니다.
이번 단계에서는 메뉴 중 하나인:
자리현황
화면을 만들어보겠습니다.
자리현황은 DB에 저장된 독서실 자리 사용 정보를 조회해서 화면에 표로 보여주는 페이지입니다.
1. 이번 문제에서 list.jsp가 필요한 이유
문제에서 자리현황 화면에는 다음 항목이 출력되어야 합니다.
독서실코드
사용시간
가로위치
세로위치
학습자코드
이 데이터는 모두:
tbl_studycafe
테이블 안에 있습니다.
따라서 이 화면은 JOIN이 필요하지 않습니다.
즉:
tbl_studycafe 테이블 하나만 조회
하면 됩니다.
그 역할을 하는 파일이:
list.jsp
입니다.
2. list.jsp가 해야 하는 일
이번 문제에서 list.jsp는 다음 역할을 합니다.
1. tbl_studycafe 테이블 조회
2. 독서실코드 출력
3. 사용시간 출력
4. 가로위치 출력
5. 세로위치 출력
6. 학습자코드 출력
7. 표 형태로 화면에 보여주기
즉 list.jsp는:
DB 데이터를 조회해서 화면에 출력하는 페이지
입니다.
3. list.jsp 전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<%@ page import = "DBPKG.Util" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자리현황</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
Connection conn = Util.getConnection();
Statement stmt = conn.createStatement();
String sql = " SELECT pk_studycafe AS 독서실코드 "+
", CONCAT(TO_CHAR(usage_date_start,'YYYY-MM-DD HH24'),'시') AS 시작시간 "+
", CONCAT(TO_CHAR(usage_date_end,'YYYY-MM-DD HH24'),'시') AS 종료시간 "+
", seat_x AS 가로위치 "+
", seat_y AS 세로위치 "+
", fk_learner AS 학습자코드 "+
" FROM tbl_studycafe ";
ResultSet rs = stmt.executeQuery(sql);
%>
<H4>자리현황</H4>
<TABLE border='1'>
<TR>
<TH width='110px'> 독서실코드 </TH>
<TH width='300px'> 사용시간 </TH>
<TH width='60px'> 가로위치 </TH>
<TH width='60px'> 세로위치 </TH>
<TH width='100px'> 학습자코드 </TH>
</TR>
<% while(rs.next()){ %>
<TR>
<TD align='center'> <%=rs.getString("독서실코드") %></TD>
<TD align='right'> <%=rs.getString("시작시간") %> ~ <%=rs.getString("종료시간") %></TD>
<TD align='right'> <%=rs.getString("가로위치") %> </TD>
<TD align='right'> <%=rs.getString("세로위치") %> </TD>
<TD align='center'> <%=rs.getString("학습자코드") %></TD>
</TR>
<% } %>
<%
rs.close();
conn.close();
stmt.close();
%>
</TABLE>
</body>
</html>
4. DB를 사용하는 페이지이므로 import가 필요합니다
list.jsp는 DB에 저장된 자리현황 데이터를 조회해야 합니다.
그래서 아래 코드가 필요합니다.
<%@ page import = "java.sql.*" %>
<%@ page import = "DBPKG.Util" %>
각 코드의 역할은 다음과 같습니다.
코드역할
| java.sql.* | DB 연결, SQL 실행 기능 사용 |
| DBPKG.Util | 우리가 만든 DB 연결 클래스 사용 |
5. 현재 페이지는 조회 페이지입니다
앞에서 만든 action.jsp는 데이터를 저장하는 페이지였습니다.
하지만 현재 list.jsp는 데이터를 입력하거나 저장하지 않습니다.
현재 페이지는:
tbl_studycafe에 저장된 자리 사용 정보를 조회해서
사용자에게 보여주는 페이지
입니다.
6. 이번 문제에서 필요한 SQL 판단하기
자리현황 화면에서 필요한 데이터는 다음과 같습니다.
독서실코드
사용시간
가로위치
세로위치
학습자코드
이 데이터들은 모두 tbl_studycafe 테이블에 있습니다.
따라서 사용하는 테이블은 하나입니다.
tbl_studycafe
즉 JOIN은 필요하지 않습니다.
7. SELECT 문 작성하기
SELECT pk_studycafe AS 독서실코드,
CONCAT(TO_CHAR(usage_date_start,'YYYY-MM-DD HH24'),'시') AS 시작시간,
CONCAT(TO_CHAR(usage_date_end,'YYYY-MM-DD HH24'),'시') AS 종료시간,
seat_x AS 가로위치,
seat_y AS 세로위치,
fk_learner AS 학습자코드
FROM tbl_studycafe
이 SQL문은:
tbl_studycafe 테이블에서
독서실코드, 사용시간, 자리위치, 학습자코드를 조회
하는 코드입니다.
8. AS 별칭 사용하는 이유
pk_studycafe AS 독서실코드
seat_x AS 가로위치
seat_y AS 세로위치
AS는 컬럼 이름을 보기 쉽게 바꾸는 역할입니다.
원래 DB 컬럼명은:
pk_studycafe
usage_date_start
usage_date_end
seat_x
seat_y
fk_learner
입니다.
하지만 화면에서는:
독서실코드
시작시간
종료시간
가로위치
세로위치
학습자코드
처럼 보여주는 것이 더 자연스럽습니다.
그래서 AS를 사용합니다.
그리고 JSP에서도 이 별칭을 기준으로 값을 꺼냅니다.
rs.getString("독서실코드")
rs.getString("시작시간")
rs.getString("종료시간")
rs.getString("가로위치")
rs.getString("세로위치")
rs.getString("학습자코드")
즉 SQL의 별칭과 JSP의 getString() 이름이 같아야 합니다.
9. 사용시간을 보기 좋게 출력하기
CONCAT(TO_CHAR(usage_date_start,'YYYY-MM-DD HH24'),'시') AS 시작시간
DB에 저장된 날짜와 시간은 그대로 출력하면 보기 불편할 수 있습니다.
그래서 TO_CHAR()를 사용해 날짜와 시간을 원하는 형식으로 바꿉니다.
예를 들어:
2025-04-20 10
형태로 바꾼 뒤, 뒤에 시를 붙입니다.
TO_CHAR를 사용하는 이유
TO_CHAR(usage_date_start,'YYYY-MM-DD HH24')
DATE 타입 데이터를 화면에 보여줄 문자 형태로 바꿉니다.
CONCAT을 사용하는 이유
CONCAT(TO_CHAR(...),'시')
Oracle에서 CONCAT은 두 문자열을 이어 붙이는 함수입니다.
즉 날짜/시간 뒤에 시를 붙여서:
2025-04-20 10시
처럼 출력합니다.
10. SQL 실행하기
ResultSet rs = stmt.executeQuery(sql);
현재 SQL은 SELECT 조회문입니다.
따라서:
executeQuery()
를 사용합니다.
조회 결과는 ResultSet에 저장됩니다.
11. table 태그로 화면 만들기
<TABLE border='1'>
조회 결과는 표 형태로 보여줘야 합니다.
그래서 TABLE 태그를 사용합니다.
12. TH 태그 : 제목칸 만들기
<TH width='110px'>독서실코드</TH>
<TH width='300px'>사용시간</TH>
<TH width='60px'>가로위치</TH>
<TH width='60px'>세로위치</TH>
<TH width='100px'>학습자코드</TH>
TH는 표 제목칸입니다.
현재 문제에서 요구한 출력 항목을 제목으로 작성합니다.
13. while(rs.next())로 여러 줄 출력하기
<% while(rs.next()){ %>
자리현황 데이터는 여러 개입니다.
따라서 한 줄만 출력하면 안 됩니다.
while(rs.next())는:
조회 결과가 있는 동안 반복
하라는 의미입니다.
즉 자리 데이터가 21개라면 21번 반복해서 출력합니다.
14. ResultSet에서 값 꺼내기
<%=rs.getString("독서실코드") %>
<%=rs.getString("시작시간") %>
<%=rs.getString("종료시간") %>
<%=rs.getString("가로위치") %>
<%=rs.getString("세로위치") %>
<%=rs.getString("학습자코드") %>
이 코드는 현재 행의 값을 화면에 출력합니다.
여기서 사용하는 이름은 SQL에서 지정한 별칭과 같아야 합니다.
예를 들어 SQL에서:
AS 독서실코드
라고 했기 때문에 JSP에서도:
rs.getString("독서실코드")
라고 작성합니다.
15. 시작시간과 종료시간을 한 칸에 출력하기
<%=rs.getString("시작시간") %> ~ <%=rs.getString("종료시간") %>
문제 화면에서는 사용시간을 한 칸에 보여줍니다.
그래서 시작시간과 종료시간을 따로 컬럼으로 보여주는 것이 아니라:
2025-04-20 10시 ~ 2025-04-20 16시
처럼 한 칸에 합쳐서 출력합니다.
16. align으로 표 정렬하기
<TD align='center'>
<TD align='right'>
표 안의 글자 정렬을 지정합니다.
현재 화면에서는:
독서실코드 → 가운데 정렬
사용시간 → 오른쪽 정렬
가로위치 → 오른쪽 정렬
세로위치 → 오른쪽 정렬
학습자코드 → 가운데 정렬
로 출력합니다.
숫자 데이터인 위치값은 오른쪽 정렬하면 보기 좋습니다.
17. DB 연결 닫기
rs.close();
conn.close();
stmt.close();
조회가 끝났으므로 DB 연결을 닫아줍니다.
DB 관련 객체는 사용 후 닫아주는 습관을 들이는 것이 좋습니다.
18. 현재 페이지 실행 흐름
list.jsp는 다음 순서로 동작합니다.
list.jsp 실행
↓
Oracle DB 연결
↓
tbl_studycafe 조회
↓
조회 결과를 ResultSet에 저장
↓
while 반복문으로 한 줄씩 출력
↓
자리현황 화면 완성
19. 현재까지 완성된 기능
main.jsp
→ 프로그램 설명 화면
reg.jsp
→ 자리등록 입력 화면
action.jsp
→ DB 저장 처리
list.jsp
→ 자리현황 조회 화면
즉 이제:
입력 + 저장 + 기본 조회
기능까지 구현된 상태입니다.
20. 핵심 정리
현재 list.jsp에서 가장 중요한 것은:
tbl_studycafe 테이블 하나만 조회해서
자리현황을 출력하는 흐름
입니다.
정리하면:
SELECT 실행
→ ResultSet 저장
→ while 반복
→ table 출력
구조를 이해하는 것이 핵심입니다.
'🪑 독서실 자리관리 프로그램' 카테고리의 다른 글
| 🪑10. list_j.jsp 작성하기 (0) | 2026.06.02 |
|---|---|
| 🪑9. search.jsp 작성하기 (0) | 2026.06.02 |
| 🪑7. action.jsp 작성하기 (0) | 2026.06.02 |
| 🪑6. reg.jsp 작성하기 (0) | 2026.06.02 |
| 🪑5. main.jsp 작성하기 (0) | 2026.06.02 |