정보처리기사 실기
🪑6. reg.jsp 작성하기 본문
독서실 자리등록 입력폼 만들기
앞에서 main.jsp까지 작성하면서 프로그램의 기본 화면을 만들었습니다.
이제부터는 실제 기능 화면을 만들어야 합니다.
이번 단계에서 작성할 파일은:
reg.jsp
입니다.
reg.jsp는 자리등록 화면입니다.
즉 사용자가 독서실 자리를 등록할 수 있도록:
자리등록번호
사용일자
사용시간
학습자
사용자리
를 입력하거나 선택하는 화면을 만들어주는 페이지입니다.
1. 이번 문제에서 reg.jsp가 필요한 이유
문제에는 다음 메뉴가 있습니다.
자리등록
사용자가 이 메뉴를 클릭하면
새로운 독서실 자리 사용 정보를 입력할 수 있어야 합니다.
따라서 우리는:
자리등록 입력 화면
이 필요합니다.
그 역할을 하는 파일이 바로:
reg.jsp
입니다.
2. reg.jsp가 해야 하는 일
이번 문제에서 reg.jsp는 다음 역할을 합니다.
1. 자리등록번호 자동 생성
2. 사용일자 입력칸 만들기
3. 사용시간 선택칸 만들기
4. 학습자 선택 목록 만들기
5. 9×9 자리표 만들기
6. 입력값이 비어 있는지 검사
7. 등록 버튼을 누르면 action.jsp로 이동
8. 조회 버튼을 누르면 자리현황 화면으로 이동
중요한 점은 reg.jsp가 직접 DB에 저장하는 파일은 아니라는 것입니다.
reg.jsp → 입력 화면
action.jsp → DB 저장 처리
이렇게 역할이 나누어져 있습니다.
3. reg.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">
<script>
function check_val(){
var usage_date = document.fm.usage_date.value;
if(usage_date==""){
alert("사용일자를 입력하지 않았습니다.");
fm.usage_date.focus();
return false;
}
var usage_date_start = document.fm.usage_date_start.value;
var usage_date_end = document.fm.usage_date_end.value;
if(usage_date_start=="" || usage_date_end=="" ){
alert("사용시간을 입력하지 않았습니다.");
fm.usage_date_start.focus();
return false;
}
var fk_learner = document.fm.fk_learner.value;
if(fk_learner==""){
alert("학습자를 입력하지 않았습니다.");
fm.fk_learner.focus();
return false;
}
if(!document.querySelector('input[name="seat"]:checked')){
alert("사용자리를 선택하지 않았습니다.");
document.getElementByName("seat")[0].focus();
return false;
}
return true;
}
</script>
</head>
<%
request.setCharacterEncoding("UTF-8");
Connection conn = Util.getConnection();
Statement stmt = conn.createStatement();
String sql = " SELECT TRIM(to_char(max(pk_studycafe)+1,'00000')) AS pk_studycafe "+
" FROM tbl_studycafe ";
ResultSet rs = stmt.executeQuery(sql);
rs.next();
String pk_studycafe = rs.getString("pk_studycafe");
%>
<body>
<H4>자리등록</H4>
<FORM name='fm' action='action.jsp' onsubmit="return check_val()">
<TABLE border='1'>
<TR>
<TH align="center" width="300px">자리등록번호(자동발생)</TH>
<TD align="left" width="400px">
<INPUT type='text' name='pk_studycafe' value='<%=pk_studycafe %>' readonly>
</TD>
</TR>
<TR>
<TH align="center" width="300px">사용일자</TH>
<TD align="left" width="400px">
<INPUT type='date' name='usage_date' >
</TD>
</TR>
<TR>
<TH align="center">사용시간</TH>
<TD align="left" width="80px">
<SELECT name='usage_date_start'>
<OPTION value="">--</OPTION>
<%
for(int e=1; e<25; e++){
%>
<OPTION value="<%=e %>">
<%=e %>시
</OPTION>
<%} %>
</SELECT> 부터 ~
<SELECT name='usage_date_end'>
<OPTION value="">--</OPTION>
<%
for(int e=1; e<25; e++){
%>
<OPTION value="<%=e %>">
<%=e %>시
</OPTION>
<%} %>
</SELECT>
</TD>
</TR>
<TR>
<TH align="center">학습자</TH>
<TD align="left" width="400px">
<SELECT name='fk_learner'>
<OPTION value="">--</OPTION>
<%
sql = " SELECT pk_learner "+
" , name "+
" FROM tbl_learner ";
rs = stmt.executeQuery(sql);
while(rs.next()){
%>
<OPTION value="<%=rs.getString("pk_learner") %>">
<%=rs.getString("name") %>
</OPTION>
<%} %>
</SELECT>
</TD>
</TR>
<TR>
<TH align="center">사용자리</TH>
<TD align="left" width="400px">
<TABLE border='1'>
<TR bgcolor='gray'>
<TH rowspan='2' colspan='2'>자리</TH>
<TH colspan='9'>가로위치</TH>
</TR>
<TR>
<%for(int x=1; x<=9; x++){%>
<TH width='20px' bgcolor='gray'><%=x %></TH>
<%} %>
</TR>
<TR>
<%for(int y=1; y<=9; y++){%>
<TR>
<% if(y==1){ %> <TH rowspan='9' bgcolor='gray'>세<BR>로<BR>위<BR>치</TH><%} %>
<TH bgcolor='gray'><%=y %></TH>
<%for(int x=1; x<=9; x++){%>
<TD><INPUT type='radio' name='seat' value="<%=y%>/<%=x%>"></TD>
<%} %>
</TR>
<%} %>
</TABLE>
</TD>
</TR>
<TR>
<TD align="center" colspan='2'>
<INPUT type='submit' value="등록">
<INPUT type='button' value="조회" onclick="location.href='list.jsp'">
</TD>
</TR>
</TABLE>
</FORM>
<%
rs.close();
conn.close();
stmt.close();
%>
</body>
</html>
4. DB를 사용하는 페이지이므로 import가 필요합니다
reg.jsp에서는 자리등록번호를 자동으로 가져오고,
학습자 목록을 DB에서 불러옵니다.
그래서 아래 코드가 필요합니다.
<%@ page import = "java.sql.*" %>
<%@ page import = "DBPKG.Util" %>
각 코드의 역할은 다음과 같습니다.
코드역할
| java.sql.* | DB 연결, SQL 실행 기능 사용 |
| DBPKG.Util | 우리가 만든 DB 연결 클래스 사용 |
즉 이 페이지는 단순 입력폼만 있는 것이 아니라
DB에서 자동번호와 학습자 목록을 가져오는 작업도 합니다.
5. 입력값 검사 함수 만들기
function check_val(){
이 함수는 사용자가 등록 버튼을 눌렀을 때
필수 항목이 비어 있는지 확인합니다.
이번 문제에서는 자리등록을 할 때 다음 값이 반드시 필요합니다.
사용일자
사용시간
학습자
사용자리
따라서 이 값들이 비어 있으면 등록되지 않게 막아야 합니다.
사용일자 검사
var usage_date = document.fm.usage_date.value;
if(usage_date==""){
alert("사용일자를 입력하지 않았습니다.");
fm.usage_date.focus();
return false;
}
사용일자가 비어 있으면 등록할 수 없습니다.
비어 있다면 경고창을 띄우고, 사용일자 입력칸으로 커서를 이동시킵니다.
사용시간 검사
var usage_date_start = document.fm.usage_date_start.value;
var usage_date_end = document.fm.usage_date_end.value;
if(usage_date_start=="" || usage_date_end=="" ){
alert("사용시간을 입력하지 않았습니다.");
fm.usage_date_start.focus();
return false;
}
독서실 이용 정보는 시작 시간과 종료 시간이 필요합니다.
둘 중 하나라도 선택하지 않으면 등록할 수 없습니다.
그래서 시작 시간 또는 종료 시간이 비어 있는지 검사합니다.
학습자 검사
var fk_learner = document.fm.fk_learner.value;
if(fk_learner==""){
alert("학습자를 입력하지 않았습니다.");
fm.fk_learner.focus();
return false;
}
자리 사용 정보는 반드시 어떤 학습자가 사용하는지 알아야 합니다.
따라서 학습자를 선택하지 않으면 등록되지 않도록 막습니다.
사용자리 검사
if(!document.querySelector('input[name="seat"]:checked')){
alert("사용자리를 선택하지 않았습니다.");
document.getElementByName("seat")[0].focus();
return false;
}
자리등록에서는 실제 자리를 선택해야 합니다.
9×9 자리표 중 하나를 선택하지 않으면 등록할 수 없도록 검사합니다.
참고로 실제 JavaScript에서는 getElementByName이 아니라
getElementsByName이 정확한 메서드입니다.
다만 현재 코드에서는 앞의 querySelector()로 이미 선택 여부를 검사하고 있으므로,
포커스 부분은 생략해도 동작에는 큰 문제가 없습니다.
6. 자리등록번호를 자동으로 가져와야 하는 이유
문제 화면에서는:
자리등록번호(자동발생)
이라고 되어 있습니다.
즉 사용자가 직접 번호를 입력하는 것이 아니라,
DB에서 다음 번호를 자동으로 계산해서 보여줘야 합니다.
그래서 다음 SQL문을 사용합니다.
SELECT TRIM(TO_CHAR(MAX(pk_studycafe)+1,'00000')) AS pk_studycafe
FROM tbl_studycafe
7. 자동번호 SQL 설명
현재 tbl_studycafe에는 이미 자리등록번호가 있습니다.
예를 들어 마지막 번호가:
00021
이라면 다음 번호는:
00022
가 되어야 합니다.
그래서:
MAX(pk_studycafe)+1
을 사용합니다.
뜻은:
현재 가장 큰 자리등록번호를 찾고
거기에 1을 더한다
입니다.
TO_CHAR를 사용하는 이유
TO_CHAR(MAX(pk_studycafe)+1,'00000')
숫자 결과를 다섯 자리 문자 형태로 바꿉니다.
예를 들어:
22
라는 숫자가 나오면:
00022
처럼 출력되게 합니다.
TRIM을 사용하는 이유
TRIM(TO_CHAR(MAX(pk_studycafe)+1,'00000'))
문자 변환 과정에서 생길 수 있는 앞뒤 공백을 제거합니다.
즉 화면에 깔끔하게 번호만 출력되도록 처리합니다.
8. DB 연결 코드
Connection conn = Util.getConnection();
Statement stmt = conn.createStatement();
이 코드는 Oracle DB와 연결하고 SQL 실행 준비를 하는 코드입니다.
코드의미
| Connection conn | DB 연결 |
| Statement stmt | SQL 실행 준비 |
9. SELECT 실행하기
ResultSet rs = stmt.executeQuery(sql);
rs.next();
String pk_studycafe = rs.getString("pk_studycafe");
자동번호를 가져오는 SQL은 조회문입니다.
조회문은:
executeQuery()
를 사용합니다.
그리고 결과값을 읽기 위해:
rs.next();
를 실행합니다.
이후 결과값을 변수에 저장합니다.
10. form 태그 만들기
<FORM name='fm' action='action.jsp' onsubmit="return check_val()">
이 코드는 입력폼을 만드는 부분입니다.
여기서 중요한 속성은 세 가지입니다.
속성의미
| name='fm' | JavaScript에서 폼을 찾기 위한 이름 |
| action='action.jsp' | 등록 버튼 클릭 시 이동할 페이지 |
| onsubmit | 전송 전 검사 함수 실행 |
즉 등록 버튼을 누르면 먼저 check_val()이 실행되고,
문제가 없으면 action.jsp로 이동합니다.
11. 자리등록번호 입력칸
<INPUT type='text' name='pk_studycafe' value='<%=pk_studycafe %>' readonly>
이 부분은 자동으로 계산된 자리등록번호를 화면에 보여주는 입력칸입니다.
여기서:
<%=pk_studycafe %>
는 JSP 변수 값을 화면에 출력하는 코드입니다.
즉 DB에서 가져온 다음 자리등록번호를 input에 넣어줍니다.
readonly는 사용자가 값을 수정하지 못하게 하는 속성입니다.
12. 사용일자 입력칸
<INPUT type='date' name='usage_date'>
사용자가 독서실을 이용할 날짜를 선택하는 입력칸입니다.
type='date'를 사용하면 브라우저에서 날짜 선택 창을 제공해줍니다.
13. 사용시간 선택칸
<SELECT name='usage_date_start'>
<OPTION value="">--</OPTION>
<%
for(int e=1; e<25; e++){
%>
<OPTION value="<%=e %>">
<%=e %>시
</OPTION>
<%} %>
</SELECT>
사용 시작 시간을 선택하는 부분입니다.
1시부터 24시까지 반복문으로 option을 만듭니다.
같은 방식으로 종료 시간도 만듭니다.
for문을 사용하는 이유
시간 선택지를 직접 하나씩 작성하면 코드가 길어집니다.
예를 들어:
<option>1시</option>
<option>2시</option>
<option>3시</option>
를 24개 작성해야 합니다.
그래서 JSP의 for문을 사용해 1부터 24까지 자동으로 생성합니다.
14. 학습자 선택 목록 만들기
sql = " SELECT pk_learner "+
" , name "+
" FROM tbl_learner ";
rs = stmt.executeQuery(sql);
학습자 목록은 직접 입력하는 것이 아니라
DB에 저장된 학습자 데이터를 가져와 선택하도록 만듭니다.
즉 tbl_learner 테이블에서 학습자 코드와 이름을 조회합니다.
SELECT 태그 사용
<SELECT name='fk_learner'>
<OPTION value="">--</OPTION>
SELECT는 드롭다운 목록을 만들 때 사용합니다.
첫 번째 옵션은 아무것도 선택하지 않은 상태를 의미합니다.
while문으로 학습자 목록 출력
while(rs.next()){
DB에 저장된 학습자 수만큼 반복하여 option을 생성합니다.
<OPTION value="<%=rs.getString("pk_learner") %>">
<%=rs.getString("name") %>
</OPTION>
여기서 중요한 점은:
화면에는 학습자 이름이 보이고
실제로 전송되는 값은 학습자 코드
라는 점입니다.
예를 들어 화면에는:
영희
가 보이지만 실제 action.jsp로 전송되는 값은:
L0001
입니다.
15. 9×9 자리표 만들기
이번 문제에서 가장 눈에 띄는 부분은 사용자리 선택입니다.
독서실 자리는 9×9 형태로 구성됩니다.
가로위치 1~9
세로위치 1~9
즉 총 81개의 자리 중 하나를 선택해야 합니다.
이때 사용하는 입력 요소는:
<input type="radio">
입니다.
16. 가로위치 제목 만들기
<%for(int x=1; x<=9; x++){%>
<TH width='20px' bgcolor='gray'><%=x %></TH>
<%} %>
가로위치는 1부터 9까지 있습니다.
하나씩 직접 작성하지 않고 for문으로 출력합니다.
17. 세로위치와 자리 선택 만들기
<%for(int y=1; y<=9; y++){%>
<TR>
<% if(y==1){ %>
<TH rowspan='9' bgcolor='gray'>세<BR>로<BR>위<BR>치</TH>
<%} %>
<TH bgcolor='gray'><%=y %></TH>
<%for(int x=1; x<=9; x++){%>
<TD><INPUT type='radio' name='seat' value="<%=y%>/<%=x%>"></TD>
<%} %>
</TR>
<%} %>
이 코드는 세로 1~9, 가로 1~9 자리표를 만듭니다.
즉 반복문이 두 번 사용됩니다.
바깥 for문 → 세로위치 y
안쪽 for문 → 가로위치 x
18. radio 버튼을 사용하는 이유
<INPUT type='radio' name='seat' value="<%=y%>/<%=x%>">
독서실 자리는 여러 개 중 하나만 선택해야 합니다.
그래서 checkbox가 아니라 radio 버튼을 사용합니다.
모든 radio 버튼의 name을 seat로 같게 하면
그중 하나만 선택할 수 있습니다.
19. seat 값의 의미
value="<%=y%>/<%=x%>"
현재 자리값은 다음 형태로 전달됩니다.
세로위치/가로위치
예를 들어 세로 3, 가로 5를 선택하면:
3/5
가 action.jsp로 전달됩니다.
나중에 action.jsp에서는 이 값을 / 기준으로 나누어
세로위치와 가로위치로 저장하게 됩니다.
20. 등록 버튼
<INPUT type='submit' value="등록">
등록 버튼입니다.
이 버튼을 누르면 form이 전송됩니다.
즉:
check_val() 실행
→ 입력값 검사
→ action.jsp로 이동
흐름으로 동작합니다.
21. 조회 버튼
<INPUT type='button' value="조회" onclick="location.href='list.jsp'">
조회 버튼입니다.
이 버튼을 누르면 자리현황 화면인 list.jsp로 이동합니다.
22. DB 연결 닫기
rs.close();
conn.close();
stmt.close();
DB 사용이 끝났기 때문에 연결을 닫아줍니다.
실습에서는 코드가 짧아도 DB 관련 객체는 사용 후 닫아주는 습관을 들이는 것이 좋습니다.
23. 현재까지의 작업 흐름
db.sql
→ 학습자 테이블과 독서실 테이블 생성
index.jsp
→ 전체 화면 틀 생성
style.css
→ 화면 디자인 적용
main.jsp
→ 프로그램 설명 화면
reg.jsp
→ 자리등록 입력폼 생성
24. 핵심 정리
이번 reg.jsp에서 중요한 것은 단순히 입력칸을 만드는 것이 아닙니다.
문제에서 요구한:
자리등록번호 자동발생
사용일자 선택
사용시간 선택
학습자 선택
9×9 자리 선택
등록 전 빈칸 검사
기능을 화면에 구현하는 것입니다.
즉 reg.jsp는:
사용자에게 독서실 자리 사용 정보를 입력받는 화면
이고, 실제 DB 저장은 다음 단계에서 작성할:
action.jsp
가 담당하게 됩니다.
'🪑 독서실 자리관리 프로그램' 카테고리의 다른 글
| 🪑8. list.jsp 작성하기 (0) | 2026.06.02 |
|---|---|
| 🪑7. action.jsp 작성하기 (0) | 2026.06.02 |
| 🪑5. main.jsp 작성하기 (0) | 2026.06.02 |
| 🪑4. style.css 작성하기 (0) | 2026.06.02 |
| 🪑3. index.jsp 작성하기 (0) | 2026.06.02 |