3.1 작성 개요
3.1.1 작성 목표와 내용
- DB에 존재하는 모든 레코드 들의 리스트 출력
- 특정 조건에 맞는 레토드만을 검색해 출력
- 답변 레코드를 포함한 레코드 리스트 화면 출력 : 부모 레코드와 답변 순서 올바르게
- 출력하는 레코드의 수가 많을 경우 -> 사용자가 쉽게 참조하도록 -> 페이지 내비게이션(페이지와 페이지 집합으로 나누어 출력하는) 기능 제공
- 이 절에서는 DB 에 존재하는 레코드의 제목 리스트 출력, 검색 출력 이 2개 배움
3.2 레코드 리스트 출력 문서(BoardList.jsp) 작성
3.2.1 레코드 리스트 출력 문서의 개요
// BoardList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML"; charset="UTF-8">
<LINK REL="stylesheet" type="text/css" herf="../include/style.css"/>
<title>게시글 리스트</title>
</head>
<body>
<TABLE WIDTH=620 HEIGHT=40 BORDER=0 CELLSPACING=1 CELLPADDING=1 ALIGN=CENTER>
<TR BGCOLOR=#A0A0A0>
<TD ALIGN=CENTER><FONT SIZe=4><B>게시판(리스트)</B></FONT></TD>
</TR>
</TABLE>
<%
//--------------------- JSP CODE START (세션 속성에 따른 문서 선택)
// member_id 세션 속성 존재 X -> BoardList.jsp 문서에 LoginForm.jsp 문서의 실행 결과 포함
// member_id 세션 속성 존재 -> BoardList.jsp 문서에 LoginState.jsp 문서의 실행 결과 포함
String member_id = (String)session.getAttribute("member_id");
if(member_id == null) {
%>
<jsp:include page="../member/LoginForm.jsp"/>
<%
} else {
%>
<jsp:include page="../member/LoginState.jsp"/>
<%
}
//--------------------- JSP CODE END
%>
<TABLE WIDTH=620 BORDER=1 CELLSPACING=0 CELLPADDING=1 ALIGN=CENTER>
<TR ALIGN=CENTER>
<TD WIDTH=45><B>번호</B></TD>
<TD WIDTH=395><B>제목</B></TD>
<TD WIDTH=65><B>작성자</B></TD>
<TD WIDTH=70><B>작성일</B></TD>
<TD WIDTH=45><B>참조</B></TD>
</TR>
// 가상의 내용
<TR>
<TD WIDTH=45 ALIGN=CENTER>1</TD>
<TD WIDTH=395 ALIGN=LEFT><A HERF="BoardContent.jsp">전영중입니다.</A></TD>
<TD WIDTH=65 ALIGN=CENTER>전영중</TD>
<TD ALIGN=CENTER>2024.02.08</TD>
<TD ALIGN=CENTER>1</TD>
</TR>
</TABLE>
// <FORM> 태그의 ACTION 속성의 값으로 BoardList.jsp 자신이 지정
// 이 <FORM> 태그의 구성 요소들은 레코드의 검색을 위해 사용됨
// 검색어가 입력된 상태에서 submit 발생 -> 입력된 검색어가 BoardList.jsp 문서(자신)로 전송 -> 해당 검색어를 포함하는 레코드 출력
<FORM NAME="BoardSerch" METHOD=POST action="BoardList.jsp">
<TABLE WIDTH=620 HEIGHT=50 BORDER=0 CELLSPACING=1 CELLPADDING=1 ALIGN=CENTER>
<TR>
<TD ALIGN=LEFT WIDTH=100>
// [신규] 버튼 이미지 : 자바스크립트의 location.replace() 메소드 사용 -> 레코드 입력 양식인 BoardWrite.jsp 문서 브라우저에 출력
<IMG SRC="../images/btn_new.gif" onClick="javascript:location.replace('BoardWrite.jsp')" STYLE=CURSOR:HAND>
</TD>
// 페이지 내비게이션을 위한 부분 -> 차후 내비게이션 학습할 때 할 것
<TD WIDTH=320 ALIGN=CENTER>
<IMG SRC="../images/btn_bf_block.gif"> // 이전 페이지 집합 출력
<IMG SRC="../images/btn_bf_page.gif"> // 이전 페이지 출력
1 2 3 4 5 6
7 8 9 10 // 현재 페이지 집합을 구성하는 페이지의 번호, 특정 번호 클릭 -> 해당 페이지의 내용 BoardList.jsp 문서에 출력
<IMG SRC="../images/btn_nxt_page.gif"> // 다음 페이지 출력
<IMG SRC="../images/btn_nxt_block.gif"> // 다음 페이지 집합
</TD>
// 키워드 검색에 사용되는 구문
<TD WIDTH=200 ALIGN=RIGHT>
// <SELECT> 요소를 사용 -> 검색하고자 하는 대상 지정
<SELECT NAME="column" SIZE=1>
<OPTION VALUE="" SELECTED>선택</OPTION>
<OPTION VALUE="UsrSubject">제목</OPTION> // 제목 선택 -> UsrSubject값 column 변수에 실려 BoardList.jsp(자신)으로 전송
<OPTION VALUE="UsrContent">내용</OPTION> // 내용 선택 -> UsrContent값 column 변수에 실려 BoardList.jsp(자신)으로 전송
</SELECT>
// 키워드 입력하는 TEXT 입력 양식
// 키워드 검색을 위해 입력된 데이터 -> key 변수에 실려 BoardList.jsp(자신)으로 전달
<INPUT TYPE=TEXT NAME="key" SIZE=10 MAXLENGTH=20>
// 키워드 검색을 수행하는 하이퍼링크 이미지
// submit 발생 -> <FORM> 태그의 ACTION 속성에 지정된 BoardList(자신)에게 선택한 검색 대상(column의 값)과 키워드(key의 값) 전달됨
<IMG SRC="../images/btn_search.gif" ALIGN=absmiddle STYLE=CURSOR:HAND>
</TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
안녕하세요.