관리 메뉴

거니의 velog

(7) 모델2 방식으로 효율적으로 개발하기 4_답변형 게시판 구현 4 본문

Java_JSP Model2

(7) 모델2 방식으로 효율적으로 개발하기 4_답변형 게시판 구현 4

Unlimited00 2023. 9. 26. 08:37

(3) 글 상세 기능 구현

* 글 목록에서 글 제목을 클릭했을 때 글의 상세 내용을 보여주는 기능을 구현해 보자.

* 다음은 글 상세 기능을 구현하는 과정이다

(1) 글 목록창에서 글 제목을 클릭해 컨트롤러에 /board/viewArticle.do?articleNO=글번호 로 요청한다.

(2) 컨트롤러는 전송된 글 번호로 글 정보를 조회하며 글 상세창(viewArticle.jsp)으로 포워딩한다.

(3) 글 상세창(viewArticle.jsp)에 글 정보와 이미지 파일이 표시된다.

1. 글 상세 기능에 관련된 자바 코드와 JSP 파일을 다음과 같이 추가한다. 글 상세 기능을 구현하는 데 필요한 첨부 이미지를 표시하기 위해 sec03.common 패키지를 만든 후 FileDownloadController 클래스를 생성한다.

2. FileDownloadController 클래스를 다음과 같이 작성한다. viewArticle.jsp에서 전송한 글 번호와 이미지 파일 이름으로 파일 경로를 만든 후 해당 파일을 내려 받는다.

package sec03.common;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/download.do")
public class FileDownloadController extends HttpServlet {
	private static String ARTICLE_IMAGE_REPO = "C:\\board\\article_image";

	protected void doGet(HttpServletRequest request, HttpServletResponse response)	throws ServletException, IOException {
		doHandle(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)	throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		String imageFileName = (String) request.getParameter("imageFileName");
		String articleNO = request.getParameter("articleNO"); // 이미지 파일 이름과 글 번호를 가져온다.
		System.out.println("imageFileName=" + imageFileName);
		OutputStream out = response.getOutputStream();
		String path = ARTICLE_IMAGE_REPO + "\\" + articleNO + "\\" + imageFileName; // 글 번호에 대한 파일 경로를 설정한다.
		File imageFile = new File(path);

		response.setHeader("Cache-Control", "no-cache");
		response.addHeader("Content-disposition", "attachment;fileName=" + imageFileName); // 이미지 파일을 내려 받는 데 필요한 response에 헤더 정보를 설정한다.
		FileInputStream in = new FileInputStream(imageFile);
		byte[] buffer = new byte[1024 * 8];
		while (true) {
			int count = in.read(buffer);
			if (count == -1)
				break;
			out.write(buffer, 0, count);
		} // 버퍼를 이용해 한 번에 8kb씩 전송한다.
		in.close();
		out.close();
	}

}

3. BoardController 클래스를 다음과 같이 작성한다. /viewAtricle.do로 요청하여 글 번호를 받아온다. 그리고 그 번호에 해당하는 글 정보를 가져와 article 속성으로 바인딩한 후 viewArticle.jsp로 포워딩한다.

package sec03.brd04;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.RequestDispatcher;
import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;


@WebServlet("/board/*")
public class BoardController extends HttpServlet {
	
	private static String ARTICLE_IMAGE_REPO = "C:\\board\\article_image";
	BoardService boardService;
	ArticleVO articleVO;

	public void init(ServletConfig config) throws ServletException {
		boardService = new BoardService();
		articleVO = new ArticleVO();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)	throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String nextPage = "";
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		String action = request.getPathInfo();
		System.out.println("action:" + action);
		try {
			List<ArticleVO> articlesList = new ArrayList<ArticleVO>();
			if (action == null) {
				articlesList = boardService.listArticles();
				request.setAttribute("articlesList", articlesList);
				nextPage = "/board03/listArticles.jsp";
				
			} else if (action.equals("/listArticles.do")) {
				articlesList = boardService.listArticles();
				request.setAttribute("articlesList", articlesList);
				nextPage = "/board03/listArticles.jsp";
				
			} else if (action.equals("/articleForm.do")) {
				nextPage = "/board03/articleForm.jsp";
				
			} else if (action.equals("/addArticle.do")) {
				int articleNO=0;
				Map<String, String> articleMap = upload(request, response);
				String title = articleMap.get("title");
				String content = articleMap.get("content");
				String imageFileName = articleMap.get("imageFileName");
				
				articleVO.setParentNO(0);
				articleVO.setId("hong");
				articleVO.setTitle(title);
				articleVO.setContent(content);
				articleVO.setImageFileName(imageFileName);
				articleNO= boardService.addArticle(articleVO);
				if(imageFileName!=null && imageFileName.length()!=0) {
				    File srcFile = new 	File(ARTICLE_IMAGE_REPO +"\\"+"temp"+"\\"+imageFileName);
					File destDir = new File(ARTICLE_IMAGE_REPO +"\\"+articleNO);
					destDir.mkdirs();
					FileUtils.moveFileToDirectory(srcFile, destDir, true);
					srcFile.delete();
				}
				PrintWriter pw = response.getWriter();
				pw.print("<script>" 
				         +"  alert('새글을 추가했습니다.');" 
						 +" location.href='"+request.getContextPath()+"/board/listArticles.do';"
				         +"</script>");

				return;
				
			}else if(action.equals("/viewArticle.do")){
				String articleNO = request.getParameter("articleNO"); // 글 상세창을 요청할 경우  articleNO 값을 가져온다.
				articleVO=boardService.viewArticle(Integer.parseInt(articleNO));
				request.setAttribute("article",articleVO); // articleNO에 대한 글 정보를 조회하고 article 속성으로 바인딩한다.
				nextPage = "/board03/viewArticle.jsp";
			
			}else {
				nextPage = "/board03/listArticles.jsp";
			}

			RequestDispatcher dispatch = request.getRequestDispatcher(nextPage);
			dispatch.forward(request, response);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	private Map<String, String> upload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Map<String, String> articleMap = new HashMap<String, String>();
		String encoding = "utf-8";
		File currentDirPath = new File(ARTICLE_IMAGE_REPO);
		DiskFileItemFactory factory = new DiskFileItemFactory();
		factory.setRepository(currentDirPath);
		factory.setSizeThreshold(1024 * 1024);
		ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			List items = upload.parseRequest(request);
			for (int i = 0; i < items.size(); i++) {
				FileItem fileItem = (FileItem) items.get(i);
				if (fileItem.isFormField()) {
					System.out.println(fileItem.getFieldName() + "=" + fileItem.getString(encoding));
					articleMap.put(fileItem.getFieldName(), fileItem.getString(encoding));
				} else {
					System.out.println("파라미터명:" + fileItem.getFieldName());
					//System.out.println("파일명:" + fileItem.getName());
					System.out.println("파일크기:" + fileItem.getSize() + "bytes");
					//articleMap.put(fileItem.getFieldName(), fileItem.getName());
					if (fileItem.getSize() > 0) {
						int idx = fileItem.getName().lastIndexOf("\\");
						if (idx == -1) {
							idx = fileItem.getName().lastIndexOf("/");
						}

						String fileName = fileItem.getName().substring(idx + 1);
						System.out.println("파일명:" + fileName);
						articleMap.put(fileItem.getFieldName(), fileName);  //익스플로러에서 업로드 파일의 경로 제거 후 map에 파일명 저장
						File uploadFile = new File(currentDirPath + "\\temp\\" + fileName);
						fileItem.write(uploadFile);

					} // end if
				} // end if
			} // end for
		} catch (Exception e) {
			e.printStackTrace();
		}
		return articleMap;
	}

}

4. 컨트롤러에서 전달받은 글 번호로 다시 selectArticle() 메서드를 호출한다.

[BoardService.java]

package sec03.brd04;

import java.util.List;

public class BoardService {
	
	BoardDAO boardDAO;

	public BoardService() {
		boardDAO = new BoardDAO();
	}

	public List<ArticleVO> listArticles() {
		List<ArticleVO> articlesList = boardDAO.selectAllArticles();
		return articlesList;
	}

	public int addArticle(ArticleVO article) {
		return boardDAO.insertNewArticle(article);
	}

	public ArticleVO viewArticle(int articleNO) {
		ArticleVO article = null;
		article = boardDAO.selectArticle(articleNO);
		return article;
	}

}

5. 전달받은 글 번호를 이용해 글 정보를 조회한다.

[BoardDAO.java]

package sec03.brd04;


import java.net.URLEncoder;
import java.sql.Connection;
import java.sql.Date;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;


public class BoardDAO {
	private DataSource dataFactory;
	Connection conn;
	PreparedStatement pstmt;

	public BoardDAO() {
		try {
			Context ctx = new InitialContext();
			Context envContext = (Context) ctx.lookup("java:/comp/env");
			dataFactory = (DataSource) envContext.lookup("jdbc/oracle");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public List<ArticleVO> selectAllArticles() {
		List<ArticleVO> articlesList = new ArrayList<ArticleVO>();
		try {
			conn = dataFactory.getConnection();
			String query = "SELECT LEVEL,articleNO,parentNO,title,content,id,writeDate" + " from t_board"
					+ " START WITH  parentNO=0" + " CONNECT BY PRIOR articleNO=parentNO"
					+ " ORDER SIBLINGS BY articleNO DESC";
			System.out.println(query);
			pstmt = conn.prepareStatement(query);
			ResultSet rs = pstmt.executeQuery();
			while (rs.next()) {
				int level = rs.getInt("level");
				int articleNO = rs.getInt("articleNO");
				int parentNO = rs.getInt("parentNO");
				String title = rs.getString("title");
				String content = rs.getString("content");
				String id = rs.getString("id");
				Date writeDate = rs.getDate("writeDate");
				ArticleVO article = new ArticleVO();
				article.setLevel(level);
				article.setArticleNO(articleNO);
				article.setParentNO(parentNO);
				article.setTitle(title);
				article.setContent(content);
				article.setId(id);
				article.setWriteDate(writeDate);
				articlesList.add(article);
			}
			rs.close();
			pstmt.close();
			conn.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return articlesList;
	}

	private int getNewArticleNO() {
		try {
			conn = dataFactory.getConnection();
			String query = "SELECT  max(articleNO) from t_board ";
			System.out.println(query);
			pstmt = conn.prepareStatement(query);
			ResultSet rs = pstmt.executeQuery(query);
			if (rs.next())
				return (rs.getInt(1) + 1);
			rs.close();
			pstmt.close();
			conn.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return 0;
	}

	public int insertNewArticle(ArticleVO article) {
		int articleNO = getNewArticleNO();
		try {
			conn = dataFactory.getConnection();
			int parentNO = article.getParentNO();
			String title = article.getTitle();
			String content = article.getContent();
			String id = article.getId();
			String imageFileName = article.getImageFileName();
			String query = "INSERT INTO t_board (articleNO, parentNO, title, content, imageFileName, id)"
					+ " VALUES (?, ? ,?, ?, ?, ?)";
			System.out.println(query);
			pstmt = conn.prepareStatement(query);
			pstmt.setInt(1, articleNO);
			pstmt.setInt(2, parentNO);
			pstmt.setString(3, title);
			pstmt.setString(4, content);
			pstmt.setString(5, imageFileName);
			pstmt.setString(6, id);
			pstmt.executeUpdate();
			pstmt.close();
			conn.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return articleNO;
	}
	
	public ArticleVO selectArticle(int articleNO){
		ArticleVO article=new ArticleVO();
		try{
			conn = dataFactory.getConnection();
			String query ="select articleNO, parentNO, title, content, NVL(imageFileName, 'null') as imageFileName, id, writeDate"
				                     +" from t_board" 
				                     +" where articleNO=?"; // 전달받은 글 번호를 이용해 글 정보를 조회한다.
			System.out.println(query);
			pstmt = conn.prepareStatement(query);
			pstmt.setInt(1, articleNO);
			ResultSet rs =pstmt.executeQuery();
			rs.next();
			int _articleNO =rs.getInt("articleNO");
			int parentNO=rs.getInt("parentNO");
			String title = rs.getString("title");
			String content =rs.getString("content");
			String imageFileName = URLEncoder.encode(rs.getString("imageFileName"), "UTF-8"); // 파일이름에 특수문자가 있을 경우 인코딩한다.
			if(imageFileName.equals("null")) {
				imageFileName = null;
			}
			String id = rs.getString("id");
			Date writeDate = rs.getDate("writeDate");
	
			article.setArticleNO(_articleNO);
			article.setParentNO (parentNO);
			article.setTitle(title);
			article.setContent(content);
			article.setImageFileName(imageFileName);
			article.setId(id);
			article.setWriteDate(writeDate);
			rs.close();
			pstmt.close();
			conn.close();
		}catch(Exception e){
			e.printStackTrace();	
		}
		return article;
	}

}

6. viewArticle.jsp를 다음과 같이 작성한다. 컨트롤러에서 바인딩한 글 정보 속성을 이용해 표시한다. 이미지 파일이 존재하는 경우는 글 번호와 이미지 파일 이름을 FileDownloadController 로 전송한 후 <img /> 태그에 다운로드하여 표시한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  request.setCharacterEncoding("UTF-8");
%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>글보기</title>
        <script type="text/javascript">
            function backToList(obj) {
                obj.action = "${contextPath}/board/listArticles.do";
                obj.submit();
            }
        </script>
    </head>

    <body>
        <form name="frmArticle" method="post" enctype="multipart/form-data">
            <table border="0" align="center">
                <tr>
                    <td width="150" align="center" bgcolor="#FF9933">
                        글번호
                    </td>
                    <td>
                        <input type="text" value="${article.articleNO }" disabled />
                        <input type="hidden" name="articleNO" value="${article.articleNO}" />
                    </td>
                </tr>
                <tr>
                    <td width="150" align="center" bgcolor="#FF9933">
                        작성자 아이디
                    </td>
                    <td>
                        <input type="text" value="${article.id }" name="id" disabled />
                    </td>
                </tr>
                <tr>
                    <td width="150" align="center" bgcolor="#FF9933">
                        제목
                    </td>
                    <td>
                        <input type="text" value="${article.title }" name="title" id="i_title" disabled /> <%-- 글 제목을 표시한다. --%>
                    </td>
                </tr>
                <tr>
                    <td width="150" align="center" bgcolor="#FF9933">
                        내용
                    </td>
                    <td>
                        <textarea rows="20" cols="60" name="content" id="i_content" disabled />${article.content }</textarea> <%-- 글 내용을 표시한다. --%>
                    </td>
                </tr>

                <c:if test="${not empty article.imageFileName && article.imageFileName!='null' }"> <%-- imageFileName 값이 있으면 이미지를 표시한다. --%>
                    <tr>
                        <td width="20%" align="center" bgcolor="#FF9933" rowspan="2">
                            이미지
                        </td>
                        <td>
                            <input type="hidden" name="originalFileName" value="${article.imageFileName }" /> <%-- <hidden> 태그에 원래 이미지 파일 이름을 저장한다. --%>
                            <img src="${contextPath}/download.do?imageFileName=${article.imageFileName}&articleNO=${article.articleNO }" id="preview" /><br> <%-- FileDoenloadController 서블릿에 이미지 파일 이름과 글 번호를 전송해 이미지를 <img>태그에 표시한다. --%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="file" name="imageFileName " id="i_imageFileName" disabled onchange="readURL(this);" />
                        </td>
                    </tr>
                </c:if>
                <tr>
                    <td width="20%" align="center" bgcolor="#FF9933">
                        등록일자
                    </td>
                    <td>
                        <input type="text" value="<fmt:formatDate value='${article.writeDate}' />" disabled />
                    </td>
                </tr>
                <tr id="tr_btn_modify">
                    <td colspan="2" align="center">
                        <input type="button" value="수정하기" onclick="fn_modify_article(frmArticle)">
                        <input type="button" value="취소" onclick="backToList(frmArticle)">
                    </td>
                </tr>

                <tr id="tr_btn">
                    <td colspan="2" align="center">
                        <%-- <c:if test="${member.id == article.id }">
                            <input type="button" value="수정하기" onclick="fn_enable(this.form)">
                            <input type="button" value="삭제하기" onclick="fn_remove_article('${contextPath}/board/removeArticle.do', ${article.articleNO})">
                        </c:if> --%>
                        <input type="button" value="수정하기" onclick="fn_enable(this.form)">
                        <input type="button" value="삭제하기" onclick="fn_remove_article('${contextPath}/board/removeArticle.do', ${article.articleNO})">
                        <input type="button" value="리스트로 돌아가기" onclick="backToList(this.form)">
                        <input type="button" value="답글쓰기" onclick="fn_reply_form('${contextPath}/board/replyForm.do', ${article.articleNO})">
                    </td>
                </tr>
            </table>
        </form>
    </body>

</html>

7. 다음의 주소로 글 목록창을 요청하여 글 제목을 클릭해 보자. 그러면 /board/viewArticle.do?articleNO=글 번호 로 요청한다.

- http://localhost:8090/pro17/board/listArticles.do

8. 전달받은 글 번호로 글 정보를 조회한 후 글 상세 화면에 내용을 표시한다.