JAVA 게시판 만들기 5 탄 (feat. jsp페이지 적용하기)

안녕하세요.

 

이번 프로젝트의 코딩 마지막 단계인 JSP를 만들어 화면에 띄워보는 과정을 정리해서 포스팅해보겠습니다.

모든 기능을 구현하는 JSP를 전부 적기엔 무리가 있을 것 같아 가장 메인이 되는 List화면의 JSP만 부분부분 정리해서 올리겠습니다.

 

1. qnaList.jsp part1 (Java 코드 작성)

<%
//Qna qna = new Qna();
QnaService qnaService = new QnaService();

String pageno = request.getParameter("pageno");
if (pageno == null || pageno.equals("")) {
	pageno = "1";
}

PageMakerDto<Qna> qnaListPage = (new QnaService().getQnaList(Integer.parseInt(pageno)));
MemberService memberService = new MemberService();
%>

 - QnaService에 대한 객체를 생성

 - 현재 페이지를 확인할 pageno를 설정 // pageno값이 없이 들어올 경우 1page를 보여주도록 설정

 - PageMakerDto<Qna> 객체를 QnaService에서의 getQnaList에 현재 페이지 번호를 읽어 페이징 설정 시 사용

 - Member(회원정보)관련 데이터를 불러오기 위한 MemberService 객체 생성

(위 서비스 객체 상세 내용은 이전 작성 포스팅 참고)

https://soonggi.tistory.com/71

https://soonggi.tistory.com/72

 

 

2. qnaList.jsp part2 (Qna 게시물 노출 테이블)

<table border=0 cellpadding=0 cellspacing=0>
	<tr>
		<td><br />
			<table style="padding-left: 10px" border=0 cellpadding=0
				cellspacing=0>
				<tr>
					<td bgcolor="f4f4f4" height="22">&nbsp;&nbsp; <b>게시판-리스트</b>
					</td>
				</tr>
				<tr bgcolor="#FFFFFF">
					<td height="20" class="t1" align="right" valign="bottom">♠
						총 <font color="#FF0000"><%=qnaListPage.totRecordCount%></font>
						건 | 현재페이지( <font color="#FF0000"><%=qnaListPage.pageMaker.getCurPage()%></font>
						/ <font color="#0000FF"><%=qnaListPage.pageMaker.getTotPage()%></font>
						)
					</td>
				</tr>
			</table> <br /> <!-- list -->
			<form name="f" method="post" action="">
				<table border="0" cellpadding="0" cellspacing="1" width="590"
					bgcolor="BBBBBB">

					<tr>
						<td width=280 align=center bgcolor="E6ECDE">제목</td>
						<td width=120 align=center bgcolor="E6ECDE">작성자</td>
						<td width=120 align=center bgcolor="E6ECDE">작성일</td>
						<td width=70 align=center bgcolor="E6ECDE">첨부파일</td>
						<td width=70 align=center bgcolor="E6ECDE">조회수</td>
					</tr>
					<%
						for (Qna qna : qnaListPage.itemList) {
					%>
					<tr>
						<td width=280 bgcolor="ffffff" style="padding-left: 10px" align="left">
						<a href='qnaView.jsp?qnano=<%=qna.getQnaNo()%>&pageno=<%=qnaListPage.pageMaker.getCurPage()%>' >
								<%=qna.getQnaTitle()%>
								<%if(qna.getQna_reply_count()>0){
									out.print("("+qna.getQna_reply_count()+")");
								}
								%>
								<%if(qna.getQnaVisible()==0){%>
								<img src="image/lockimg.png" width = "15">
								<%
								}
								%>
						</a></td>
						<td width=120 align=center bgcolor="ffffff">
								<%=memberService.getMember(qna.getMemberNo()).getMemberName().toString().substring(0, 1)%>**
						</td>
						<td width=120 bgcolor="ffffff" style="padding-left: 10px"
							align="left"><%=qna.getQnaRegDate().toString().substring(0, 10)%>
						</td>
						<td width=70 align=center bgcolor="ffffff">
								<%if(qna.getQnaFile()!=null){%>
										<img src="image/fileimg.png" width = "15">
								<%}%>
						
						</td>
						<td width=70 align=center bgcolor="ffffff" align="left"><%=qna.getQnaViews()%>
						</td>
					</tr>
					<%
					}
					%>
				</table>
				
				
			</form> 
			<!-- button -->
			<table border="0" cellpadding="0" cellspacing="1" width="590">
				<tr>
					<td align="right"><input type="button" value="게시물 생성"
						onclick="qnaWrite();" /></td>
				</tr>
			</table>

 

 

3. qnaList.jsp part3 (QnaList 내 검색창, 페이징버튼 노출 테이블)

<!-- 검색 창 -->
<form id='searchform' name='searchform' action="qnaListSearchResult.jsp" onsubmit='return keywordCheck();'>
	<input type="text" placeholder="제목+내용으로 검색" name="keyword" style="height: 20px; width: 200px;">
	<button class="btn-search" type="button" onclick="keywordCheck()">검색</button>
</form>
<!-- 검색 창 -->

<!-- /list -->
<table border="0" cellpadding="0" cellspacing="1" width="590">
	<tr>
		<td align="center">
			<%if(qnaListPage.pageMaker.getPrevGroupStartPage()>0) {%>    
			    <a href="./qnaList.jsp?pageno=1">◀◀</a>&nbsp;
			 <%}%>
			 <%if(qnaListPage.pageMaker.getPrevPage()>0) {%>    
				<a href="./qnaList.jsp?pageno=<%=qnaListPage.pageMaker.getPrevPage()%>">◀</a>&nbsp;&nbsp;
			 <%}%>
			
			<%
				for (int i = qnaListPage.pageMaker.getBlockBegin(); i <= qnaListPage.pageMaker.getBlockEnd(); i++) {
			 	if (qnaListPage.pageMaker.getCurPage() == i) {
			%>
			 <font color='blue'><strong><%=i%></strong></font>&nbsp;
			<%} else {%>
			<a href="./qnaList.jsp?pageno=<%=i%>"><strong><%=i%></strong></a>&nbsp;
			<%
			   }
			  }%>
			  
			 <%if(qnaListPage.pageMaker.getCurPage() < qnaListPage.pageMaker.getTotPage()){%>
			  <a href="./qnaList.jsp?pageno=<%=qnaListPage.pageMaker.getNextPage()%>">▶&nbsp;</a>
			 <%}%>
			 <%if(qnaListPage.pageMaker.getNextGroupStartPage()< qnaListPage.pageMaker.getTotPage()){%>
			<a
			href="./qnaList.jsp?pageno=<%=qnaListPage.pageMaker.getTotPage()%>">▶▶</a>&nbsp;
			 <%}%>
					</td>
				</tr>
			</table> 
			</td>
	</tr>
</table>

 

 

4. 최종 화면

 

이상으로 이번 프로젝트에서 맡은 게시판 리스트 화면 보여드리며 마치겠습니다.

리스트 화면 외에도 각 기능들 마다의 jsp페이지나 상세페이지 수정, 삭제, 댓글 작성 등 기능 구현을 위해

준비한 페이지가 많으나 현실적으로 포스팅을 다 하는게 너무 쉽지 않네요..

 

그래서 프로젝트 관련 내용에 대한 포스팅은 완성된 리스트 화면을 보여드리며 마치도록 하겠습니다!

이번 프로젝트는 팀으로 진행됐고 저는 QNA 게시판을 전담해서 진행을 했습니다.

그 외 다른 분들은 전자도서관 예약과 관련된 서비스나 회원 관련 서비스를 진행하셨습니다.

 

처음하는 프로젝트라 쉽지 않았으나 그래도 생각보다 많은 기능을 넣어보며 좋은 경험이 되었습니다.

감사합니다.

 

 

 

ps. 기획자로 일 할 땐 페이지 하나 개발자에게 요청하는게 뚝딱이었으나,,

직접 해보면서 세상엔 뚝딱 되는 일은 없다는걸 뼈저리게 느꼈습니다...