백엔드/웹개발
[이클립스/웹개발] MVC를 활용한 답변형 게시판 구현 (6) - 답글 쓰기 기능
김곰댕
2022. 3. 7. 12:19
728x90
답글 기능 구현 과정
- 글 상세창(viewArticle.jsp)에서 답글쓰기를 클릭하면 요청명을 /board/replyForm.do로 하여 부모 글 번호(parentNO)를 컨트롤러로 전송
- 답글 쓰기창(replyForm.jsp)에서 답변 글을 작성한 후 요청명을 /board/addReply.do로 하여 컨트롤러로 요청
- 컨트롤러에서는 전송된 답글 정보를 게시판 테이블에 부모 글 번호와 함께 추가
1. BoardController 클래스를 다음과 같이 작성
답글도 새 글이기 때문에 새 글 쓰기 기능과 비슷하다. 다른 점은 답글창 요청(/replyForm.do)시 미리 부모 글 번호를 parentNO 속성으로 세션(session)에 저장해놓고, 답글을 작성한 후 등록을 요청(/addReply.do)하면 세션에서 parentNO를 가져와 테이블에 추가한다는 점이다.
package sec03.brd07;
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 org.apache.tomcat.util.http.fileupload.FileItem;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletConfig;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
@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");
HttpSession session;
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 = "/board06/listArticles.jsp";
} else if (action.equals("/listArticles.do")) {
articlesList = boardService.listArticles();
request.setAttribute("articlesList", articlesList);
nextPage = "/board06/listArticles.jsp";
} else if (action.equals("/articleForm.do")) {
nextPage = "/board06/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);
}
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");
articleVO = boardService.viewArticle(Integer.parseInt(articleNO));
request.setAttribute("article", articleVO);
nextPage = "/board06/viewArticle.jsp";
} else if (action.equals("/modArticle.do")) {
Map<String, String> articleMap = upload(request, response);
int articleNO = Integer.parseInt(articleMap.get("articleNO"));
articleVO.setArticleNO(articleNO);
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);
boardService.modArticle(articleVO);
if (imageFileName != null && imageFileName.length() != 0) {
String originalFileName = articleMap.get("originalFileName");
File srcFile = new File(ARTICLE_IMAGE_REPO + "\\" + "temp" + "\\" + imageFileName);
File destDir = new File(ARTICLE_IMAGE_REPO + "\\" + articleNO);
destDir.mkdirs();
FileUtils.moveFileToDirectory(srcFile, destDir, true);
;
File oldFile = new File(ARTICLE_IMAGE_REPO + "\\" + articleNO + "\\" + originalFileName);
oldFile.delete();
}
PrintWriter pw = response.getWriter();
pw.print("<script>" + " alert('글을 수정했습니다.');" + " location.href='" + request.getContextPath()
+ "/board/viewArticle.do?articleNO=" + articleNO + "';" + "</script>");
return;
} else if (action.equals("/removeArticle.do")) {
int articleNO = Integer.parseInt(request.getParameter("articleNO"));
List<Integer> articleNOList = boardService.removeArticle(articleNO);
for (int _articleNO : articleNOList) {
File imgDir = new File(ARTICLE_IMAGE_REPO + "\\" + _articleNO);
if (imgDir.exists()) {
FileUtils.deleteDirectory(imgDir);
}
}
PrintWriter pw = response.getWriter();
pw.print("<script>" + " alert('글을 삭제했습니다.');" + " location.href='" + request.getContextPath()
+ "/board/listArticles.do';" + "</script>");
return;
} else if (action.equals("/replyForm.do")) {
int parentNO = Integer.parseInt(request.getParameter("parentNO"));
session = request.getSession();
session.setAttribute("parentNO", parentNO);
nextPage = "/board06/replyForm.jsp";
} else if (action.equals("/addReply.do")) {
session = request.getSession();
int parentNO = (Integer) session.getAttribute("parentNO");
session.removeAttribute("parentNO");
Map<String, String> articleMap = upload(request, response);
String title = articleMap.get("title");
String content = articleMap.get("content");
String imageFileName = articleMap.get("imageFileName");
articleVO.setParentNO(parentNO);
articleVO.setId("lee");
articleVO.setTitle(title);
articleVO.setContent(content);
articleVO.setImageFileName(imageFileName);
int articleNO = boardService.addReply(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);
}
PrintWriter pw = response.getWriter();
pw.print("<script>" + " alert('답글을 추가했습니다.');" + " location.href='" + request.getContextPath()
+ "/board/viewArticle.do?articleNO="+articleNO+"';" + "</script>");
return;
}else {
nextPage = "/board06/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(new ServletRequestContext(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;
}
}2. BoardService 클래스를 다음과 같이 작성
답글 쓰기는 새 글 쓰기와 동일하게 BoardDAO의 insertNewArticle() 메서드를 이용한다.
package sec03.brd07;
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;
}
public void modArticle(ArticleVO article) {
boardDAO.updateArticle(article);
}
public List<Integer> removeArticle(int articleNO) {
List<Integer> articleNOList = boardDAO.selectRemovedArticles(articleNO);
boardDAO.deleteArticle(articleNO);
return articleNOList;
}
public int addReply(ArticleVO article) {
return boardDAO.insertNewArticle(article);
}
}3. DAO와 VO작성 / common패키지 생성 후 FileDownloadController클래스를 생성하여 코드작성
package sec03.brd07;
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;
}
public void updateArticle(ArticleVO article) {
int articleNO = article.getArticleNO();
String title = article.getTitle();
String content = article.getContent();
String imageFileName = article.getImageFileName();
try {
conn = dataFactory.getConnection();
String query = "update t_board set title=?,content=?";
if (imageFileName != null && imageFileName.length() != 0) {
query += ",imageFileName=?";
}
query += " where articleNO=?";
System.out.println(query);
pstmt = conn.prepareStatement(query);
pstmt.setString(1, title);
pstmt.setString(2, content);
if (imageFileName != null && imageFileName.length() != 0) {
pstmt.setString(3, imageFileName);
pstmt.setInt(4, articleNO);
} else {
pstmt.setInt(3, articleNO);
}
pstmt.executeUpdate();
pstmt.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
public void deleteArticle(int articleNO) {
try {
conn = dataFactory.getConnection();
String query = "DELETE FROM t_board ";
query += " WHERE articleNO in (";
query += " SELECT articleNO FROM t_board ";
query += " START WITH articleNO = ?";
query += " CONNECT BY PRIOR articleNO = parentNO )";
System.out.println(query);
pstmt = conn.prepareStatement(query);
pstmt.setInt(1, articleNO);
pstmt.executeUpdate();
pstmt.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
public List<Integer> selectRemovedArticles(int articleNO) {
List<Integer> articleNOList = new ArrayList<Integer>();
try {
conn = dataFactory.getConnection();
String query = "SELECT articleNO FROM t_board ";
query += " START WITH articleNO = ?";
query += " CONNECT BY PRIOR articleNO = parentNO";
System.out.println(query);
pstmt = conn.prepareStatement(query);
pstmt.setInt(1, articleNO);
ResultSet rs = pstmt.executeQuery();
while (rs.next()) {
articleNO = rs.getInt("articleNO");
articleNOList.add(articleNO);
}
pstmt.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
return articleNOList;
}
}package sec03.brd07;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.sql.Date;
public class ArticleVO {
private int level;
private int articleNO;
private int parentNO;
private String title;
private String content;
private String imageFileName;
private String id;
private Date writeDate;
public ArticleVO() {
}
public ArticleVO(int level, int articleNO, int parentNO, String title, String content, String imageFileName,
String id) {
super();
this.level = level;
this.articleNO = articleNO;
this.parentNO = parentNO;
this.title = title;
this.content = content;
this.imageFileName = imageFileName;
this.id = id;
}
public int getLevel() {
return level;
}
public void setLevel(int level) {
this.level = level;
}
public int getArticleNO() {
return articleNO;
}
public void setArticleNO(int articleNO) {
this.articleNO = articleNO;
}
public int getParentNO() {
return parentNO;
}
public void setParentNO(int parentNO) {
this.parentNO = parentNO;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getImageFileName() {
try {
if (imageFileName != null && imageFileName.length() != 0) {
imageFileName = URLDecoder.decode(imageFileName, "UTF-8");
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
return imageFileName;
}
public void setImageFileName(String imageFileName) {
try {
if(imageFileName!=null && imageFileName.length()!=0) {
this.imageFileName = URLEncoder.encode(imageFileName, "UTF-8"); //파일이름에 특수문자가 있을 경우 인코딩합니다.
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public Date getWriteDate() {
return writeDate;
}
public void setWriteDate(Date writeDate) {
this.writeDate = writeDate;
}
}package sec03.common;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.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);
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);
}
in.close();
out.close();
}
}4. viewArticle.jps(글상세창)에 코드를 다음과 같이 작성
글 상세창(viewArticle.jsp)에서 답글쓰기를 클릭하면 fn_reply_form() 함수를 호출하며 글번호와 요청명을 함께 전달한다. 그리고 다시 <form> 태그와 <input> 태그를 이용해 글 번호를 parentNO 속성으로 컨트롤러에 전달한다.
<%@ 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}" />
<head>
<meta charset="UTF-8">
<title>글보기</title>
<style>
#tr_btn_modify{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
function backToList(obj){
obj.action="${contextPath}/board/listArticles.do";
obj.submit();
}
function fn_enable(obj){
document.getElementById("i_title").disabled=false;
document.getElementById("i_content").disabled=false;
document.getElementById("i_imageFileName").disabled=false;
document.getElementById("tr_btn_modify").style.display="block";
document.getElementById("tr_btn").style.display="none";
}
function fn_modify_article(obj){
obj.action="${contextPath}/board/modArticle.do";
obj.submit();
}
function fn_remove_article(url,articleNO){
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", url);
var articleNOInput = document.createElement("input");
articleNOInput.setAttribute("type","hidden");
articleNOInput.setAttribute("name","articleNO");
articleNOInput.setAttribute("value", articleNO);
form.appendChild(articleNOInput);
document.body.appendChild(form);
form.submit();
}
function fn_reply_form(url, parentNO){
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", url);
var parentNOInput = document.createElement("input");
parentNOInput.setAttribute("type","hidden");
parentNOInput.setAttribute("name","parentNO");
parentNOInput.setAttribute("value", parentNO);
form.appendChild(parentNOInput);
document.body.appendChild(form);
form.submit();
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form name="frmArticle" method="post" action="${contextPath}" 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="writer" 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' }">
<tr>
<td width="150" align="center" bgcolor="#FF9933" rowspan="2">
이미지
</td>
<td>
<input type= "hidden" name="originalFileName" value="${article.imageFileName }" />
<img src="${contextPath}/download.do?articleNO=${article.articleNO}&imageFileName=${article.imageFileName}" id="preview" /><br>
</td>
</tr>
<tr>
<td>
<input type="file" name="imageFileName " id="i_imageFileName" disabled onchange="readURL(this);" />
</td>
</tr>
</c:if>
<tr>
<td width="150" 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">
<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>5. replyForm.jps를 다음과 같이 작성한다.
답글 입력 후 컨트롤러에 /board/addReply.do로 요청
<%@ 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" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<%
request.setCharacterEncoding("UTF-8");
%>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function backToList(obj){
obj.action="${contextPath}/board/listArticles.do";
obj.submit();
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<title>답글쓰기 페이지</title>
</head>
<body>
<h1 style="text-align:center">답글쓰기</h1>
<form name="frmReply" method="post" action="${contextPath}/board/addReply.do" enctype="multipart/form-data">
<table align="center">
<tr>
<td align="right"> 글쓴이: </td>
<td><input type="text" size="5" value="lee" disabled /> </td>
</tr>
<tr>
<td align="right">글제목: </td>
<td><input type="text" size="67" maxlength="100" name="title" /></td>
</tr>
<tr>
<td align="right" valign="top"><br>글내용: </td>
<td><textarea name="content" rows="10" cols="65" maxlength="4000"> </textarea> </td>
</tr>
<tr>
<td align="right">이미지파일 첨부: </td>
<td> <input type="file" name="imageFileName" onchange="readURL(this);" /></td>
<td><img id="preview" src="#" width=200 height=200/></td>
</tr>
<tr>
<td align="right"> </td>
<td>
<input type=submit value="답글반영하기" />
<input type=button value="취소"onClick="backToList(this.form)" />
</td>
</tr>
</table>
</form>
</body>
</html>6. 글 목록을 나타내는 listArticles.jsp를 다음과 같이 작성
<%@ 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" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<style>
.cls1 {text-decoration:none;}
.cls2{text-align:center; font-size:30px;}
</style>
<meta charset="UTF-8">
<title>글목록창</title>
</head>
<body>
<table align="center" border="1" width="80%" >
<tr height="10" align="center" bgcolor="lightgreen">
<td >글번호</td>
<td >작성자</td>
<td >제목</td>
<td >작성일</td>
</tr>
<c:choose>
<c:when test="${empty articlesList}" >
<tr height="10">
<td colspan="4">
<p align="center">
<b><span style="font-size:9pt;">등록된 글이 없습니다.</span></b>
</p>
</td>
</tr>
</c:when>
<c:when test="${!empty articlesList}" >
<c:forEach var="article" items="${articlesList }" varStatus="articleNum" >
<tr align="center">
<td width="5%">${articleNum.count}</td>
<td width="10%">${article.id }</td>
<td align='left' width="35%">
<span style="padding-right:30px"></span>
<c:choose>
<c:when test='${article.level > 1 }'>
<c:forEach begin="1" end="${article.level }" step="1">
<span style="padding-left:10px"></span>
</c:forEach>
<span style="font-size:12px;">[답변]</span>
<a class='cls1' href="${contextPath}/board/viewArticle.do?articleNO=${article.articleNO}">${article.title}</a>
</c:when>
<c:otherwise>
<a class='cls1' href="${contextPath}/board/viewArticle.do?articleNO=${article.articleNO}">${article.title }</a>
</c:otherwise>
</c:choose>
</td>
<td width="10%"><fmt:formatDate value="${article.writeDate}" /></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
</table>
<a class="cls1" href="${contextPath}/board/articleForm.do"><p class="cls2">글쓰기</p></a>
</body>
</html>7. 새 글을 작성하는 articleForm.jsp를 다음과 같이 작성
<%@ 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}" />
<head>
<meta charset="UTF-8">
<title>글쓰기창</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
function backToList(obj){
obj.action="${contextPath}/board/listArticles.do";
obj.submit();
}
</script>
<title>새글 쓰기 창</title>
</head>
<body>
<h1 style="text-align:center">새글 쓰기</h1>
<form name="articleForm" method="post" action="${contextPath}/board/addArticle.do" enctype="multipart/form-data">
<table border="0" align="center">
<tr>
<td align="right">글제목: </td>
<td colspan="2"><input type="text" size="67" maxlength="500" name="title" /></td>
</tr>
<tr>
<td align="right" valign="top"><br>글내용: </td>
<td colspan=2><textarea name="content" rows="10" cols="65" maxlength="4000"></textarea> </td>
</tr>
<tr>
<td align="right">이미지파일 첨부: </td>
<td> <input type="file" name="imageFileName" onchange="readURL(this);" /></td>
<td><img id="preview" src="#" width=200 height=200/></td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="2">
<input type="submit" value="글쓰기" />
<input type=button value="목록보기"onClick="backToList(this.form)" />
</td>
</tr>
</table>
</form>
</body>
</html>8. /board/listArticles.do로 글목록을 요청해 게시글 중에 부모 글을 클릭
9. 글 상세정보창에서 답글쓰기 클릭
10. 글 작성 후 답글반영하기 클릭
11. 답글이 추가되었다는 글이 표시됨
12. 답글이 추가된 모습을 확인 가능
728x90