16장 상세보기및 파일 다운로드

작업 페이지 : /WebContent/board/view.jsp

 

select.jsp 페이지에서 게시물의 세부적인 내용을 보기 위해 목록의 한 행을 클릭하면 보게 되는 페이지 입니다.

 

<%for(BoardVo v : list){ %>
	<div class='row' onclick="board.view(<%=v.getSerial()%>)">
     ...
     </div>
<%} %>

물론 자바스크립트 함수 board.view()에 의해 index.jsp?inc=./board/view.jsp 가 <form/>태그의 actioin값으로 전달됩니다. 이 때 view.jsp 페이지에 넘어가는 주요 정보는 nowPage, findStr, serial 입니다.

 

세부 내용은 자바스크립 코드를 확인해 보시기 바랍니다.

 

첨부파일이 있는 게시물의 상세보기 하면의 예입니다.

 

상세보기 화면

 

 

[전체 코드]

<%@page import="bean.Page"%>
<%@page import="bean.BoardController"%>
<%@page import="bean.AttVo"%>
<%@page import="bean.BoardVo"%>
<%@page import="java.util.List"%>
<%@page import="bean.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<%
BoardController ctrl = new BoardController(request, response);
ctrl.view();
BoardVo vo = (BoardVo)request.getAttribute("vo");
List<AttVo> attList = vo.getAttList();
Page p = (Page)request.getAttribute("page");
%>

<div id='board' class='view'>

		<h2 class='title'>자유 게시물 상세보기</h2>
		<label>작성자 | </label> 
		<span'><%=vo.getWorker()%></span>
		<span> [조회수 : <%=vo.getHit()%> ]</span>
		<br/>
		
		<label>제&ensp;&ensp;목 | </label>
		<span class='subject'><%=vo.getSubject()%></span>
		<br/>
	
	
		<div class='content'><%=vo.getContent()%></div><br/>
	
		<div id='btnZone'>
			<input type='button' value='댓글' id='btnRepl' />
			<input type='button' value='수정' id='btnModify' />
			<input type='button' value='삭제' id='btnDelete' />
			<input type='button' value='목록' id='btnSelect'/>
		</div>
			
			
		<form name='frmBrd' id='frmInput' method='post'>
			<input type='hidden' name='password' >
			<input type='hidden' name='findStr' size='30' value="<%=p.getFindStr()%>">
			<input type='hidden' name='nowPage' value="<%=p.getNowPage()%>">
			<input type='hidden' name='serial' value="<%=vo.getSerial()%>">
			
		</form>
		<%
			if(attList.size()>0) {
		%>
			<fieldset id='attachList'>
				<legend>첨부파일 목록</legend>
					<% for(AttVo att : attList) {  %>
						<a href="./upload/<%=att.getAttFile() %>" 
								download="<%=att.getOriAttFile() %>" />
								<img src="./upload/<%=att.getAttFile() %>"   class='img'/></a></li>
					<%} %>
				
			</fieldset>
		<%} %>	
		
	
</div>

 

[코드 설명]

 

• 13~14행 : 요청 정보(request)를 파라미터로 사용하여 BoardController를 생성한 후 상세보기를 처리하는 view() 메서드 호출.
• 15~17행 : view()메서드가 호출되면 BoardVo(게시물 내용), attList(첨부파일 정보) , Page(페이징)와 관련된 정보를 처리하여 request영역에 attribute(속성)형태로 담겨져서 request.getAttribute()로 가져와 사용할 수 있음.
• 36~42행 : 화면을 이동할 때 전달해줄 기준 정보 저장.
• 44~55행 : 첨부파일이 존재하는 경우 <a/>를 사용하여 화면에 표시해 주는데 서버에 실제로 저장된 파일은 att.getAttFile() 메서드에 의해 처리되고, 사용자가 선택한 파일명은 att.getOriAttFile()메서드에 의해서 처리됨.
• 50행 : <a/> 태그의  download 속성은 사용자가 표시된 항목을 클릭하면 자동으로 다운로드해 주는 역활을 함.
• 57~62행 : 화면 이동과 관련된 버튼들이며 36행의 <form/> 태그 정보를 submit 하도록 조치됨.

이상으로 상세보기 및 파일 다운로드 포스팅을 마치도록 하겠습니다.

 

[관련 동영상-게시물 상세보기(묵음)]