Notice

Recent Posts

Recent Comments

Link

« 2026/06 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

정보처리기사 실기

🪑9. search.jsp 작성하기 본문

🪑 독서실 자리관리 프로그램

🪑9. search.jsp 작성하기

윤서입니다롱 2026. 6. 2. 11:43

일별검색 입력 화면 만들기

이번 단계에서 작성할 파일은:

search.jsp

입니다.

search.jsp는 독서실 자리현황을 날짜와 시간 기준으로 검색하기 위한 입력 화면입니다.

즉 사용자가:

일자
시간

을 선택한 뒤 검색 버튼을 누르면, list_j.jsp로 이동하여 해당 시간의 자리 배치 결과를 보여주는 구조입니다.

1. search.jsp가 필요한 이유

이번 문제에는 다음 메뉴가 있습니다.

일별검색

일별검색은 전체 자리현황을 모두 보여주는 것이 아니라, 사용자가 선택한 특정 날짜와 시간에 어떤 자리가 사용 중인지 확인하는 기능입니다.

예를 들어:

2025-04-20
13시

를 검색하면 해당 날짜와 시간에 사용 중인 자리를 조회할 수 있어야 합니다.

그래서 검색 조건을 입력받는 화면인 search.jsp가 필요합니다.

2. search.jsp가 해야 하는 일

이번 문제에서 search.jsp는 다음 역할을 합니다.

1. 검색할 날짜 입력칸 만들기
2. 검색할 시간 선택칸 만들기
3. 날짜와 시간이 비어 있는지 검사하기
4. 검색 버튼 클릭 시 list_j.jsp로 값 전달하기

중요한 점은 search.jsp는 결과를 직접 출력하지 않는다는 것입니다.

역할은 이렇게 나뉩니다.

search.jsp → 검색 조건 입력 화면
list_j.jsp → 검색 결과 출력 화면

3. search.jsp 전체 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script>
		function check_val(){
			var search_date = document.fm.search_date.value;
			if(search_date==""){
				alert("날짜를 입력하지 않았습니다.");
				fm.search_date.focus();
				return false;
			}

			var search_time = document.fm.search_time.value;
			if(search_time==""){
				alert("시간을 입력하지 않았습니다.");
				fm.search_time.focus();
				return false;
			}

			return true;
		}
	</script>
</head>

<body>
	<H4>일별검색</H4>

	<FORM name="fm" action="list_j.jsp" method="get" onsubmit="return check_val()">
		<TABLE>
			<TR>
				<TH align="center" width="40px">일자</TH>
				<TD align="left" width="80px">
					<INPUT type="date" name="search_date">
				</TD>

				<TH align="center" width="40px">시간</TH>
				<TD align="left" width="80px">
					<SELECT name="search_time">
						<OPTION value="">--</OPTION>
						<%
						for(int e=1; e<25; e++){
						%>
							<OPTION value="<%=e %>"><%=e %>시</OPTION>
						<%
						}
						%>
					</SELECT>
				</TD>

				<TD align="center">
					<INPUT type="submit" value="검색">
				</TD>
			</TR>
		</TABLE>
	</FORM>
</body>
</html>

4. CSS 연결하기

<link rel="stylesheet" type="text/css" href="style.css">

이 코드는 현재 search.jsp 화면에 style.css 디자인을 적용하는 코드입니다.

검색 화면도 다른 페이지와 같은 디자인을 유지해야 하므로 CSS 파일을 연결합니다.

5. 입력값 검사 함수 만들기

function check_val(){

이 함수는 검색 버튼을 눌렀을 때 날짜와 시간이 입력되었는지 확인합니다.

일별검색은 날짜와 시간이 모두 있어야 검색할 수 있습니다.

그래서 둘 중 하나라도 비어 있으면 검색하지 못하게 막습니다.

6. 날짜 입력 검사

var search_date = document.fm.search_date.value;
if(search_date==""){
	alert("날짜를 입력하지 않았습니다.");
	fm.search_date.focus();
	return false;
}

사용자가 날짜를 선택하지 않으면 경고창을 띄웁니다.

날짜를 입력하지 않았습니다.

그리고 날짜 입력칸으로 커서를 이동시킵니다.

7. 시간 선택 검사

var search_time = document.fm.search_time.value;
if(search_time==""){
	alert("시간을 입력하지 않았습니다.");
	fm.search_time.focus();
	return false;
}

사용자가 시간을 선택하지 않으면 경고창을 띄웁니다.

시간을 입력하지 않았습니다.

그리고 시간 선택칸으로 커서를 이동시킵니다.

8. form 태그 만들기

<FORM name="fm" action="list_j.jsp" method="get" onsubmit="return check_val()">

이 코드는 검색 조건을 보내는 입력폼입니다.

여기서 중요한 속성은 다음과 같습니다.

속성의미

name="fm"	JavaScript에서 폼을 찾기 위한 이름
action="list_j.jsp"	검색 버튼 클릭 시 이동할 페이지
method="get"	검색 조건을 주소에 붙여 전달
onsubmit	전송 전에 검사 함수 실행

즉 검색 버튼을 누르면 먼저 check_val()이 실행되고, 문제가 없으면 list_j.jsp로 이동합니다.

9. 날짜 입력칸 만들기

<INPUT type="date" name="search_date">

type="date"를 사용하면 브라우저에서 날짜 선택 창이 나타납니다.

사용자는 직접 날짜를 입력하거나 달력에서 날짜를 선택할 수 있습니다.

예를 들어:

2025-04-20

같은 값이 전달됩니다.

10. 시간 선택칸 만들기

<SELECT name="search_time">
	<OPTION value="">--</OPTION>

시간은 선택박스로 만듭니다.

첫 번째 옵션은 아직 시간을 선택하지 않은 상태를 의미합니다.

<OPTION value="">--</OPTION>

11. for문으로 1시부터 24시까지 만들기

<%
for(int e=1; e<25; e++){
%>
	<OPTION value="<%=e %>"><%=e %>시</OPTION>
<%
}
%>

검색 시간은 1시부터 24시까지 선택할 수 있습니다.

이 옵션을 하나씩 직접 쓰면 코드가 길어집니다.

그래서 JSP의 for문을 사용해서 1부터 24까지 자동으로 만들어줍니다.

즉 화면에는 다음처럼 출력됩니다.

1시
2시
3시
...
24시

12. 검색 버튼 만들기

<INPUT type="submit" value="검색">

검색 버튼입니다.

이 버튼을 누르면 form이 전송됩니다.

흐름은 다음과 같습니다.

검색 버튼 클릭
↓
check_val() 실행
↓
날짜, 시간 입력 여부 검사
↓
문제 없으면 list_j.jsp로 이동

13. GET 방식으로 값이 전달되는 모습

현재 form에는 다음 코드가 있습니다.

method="get"

GET 방식은 입력값이 주소 뒤에 붙어서 전달됩니다.

예를 들어 사용자가 다음처럼 선택했다고 하면:

search_date = 2025-04-20
search_time = 13

실제 이동 주소는 다음처럼 됩니다.

list_j.jsp?search_date=2025-04-20&search_time=13

이후 list_j.jsp에서는 이 값을 받아서 해당 날짜와 시간의 자리현황을 조회합니다.

14. search.jsp의 실행 흐름

search.jsp는 다음 순서로 동작합니다.

search.jsp 실행
↓
일자 입력칸 출력
↓
시간 선택칸 출력
↓
사용자가 날짜와 시간 선택
↓
검색 버튼 클릭
↓
입력값 검사
↓
list_j.jsp로 검색 조건 전달

15. 현재까지의 프로젝트 흐름

db.sql
→ 학습자 테이블과 독서실 테이블 생성

index.jsp
→ 전체 화면 틀 생성

style.css
→ 화면 디자인 적용

main.jsp
→ 프로그램 설명 화면

reg.jsp
→ 자리등록 입력폼

action.jsp
→ 자리등록 DB 저장 처리

list.jsp
→ 자리현황 전체 조회

search.jsp
→ 일별검색 조건 입력

16. 핵심 정리

현재 search.jsp에서 가장 중요한 것은 검색 결과를 직접 보여주는 것이 아닙니다.

search.jsp의 역할은:

날짜와 시간을 입력받아
list_j.jsp로 전달하는 것