Ajax를 이용하여 댓글 게시판 만들기

○ struts2 답변형 게시판 & Ajax를 사용한 방명록 참고

1. 필요한 파일 확인

○ com.util.sqlMap

- ibbs_sqlMap.xml

○ com.ibbs

- BoardAction.java

- BoardDTO.java

- CommentAction.java

- CommentDTO.java

○ WebContent > ibbs

- css폴더 : article.css, created.css, list.css, style.css

- article.jsp

- commentList.jsp

- created.jsp

- list.jsp

○ WEB-INF > classes

- struts.xml

- struts-ibbs.xml

○ WEB-INF > sqlMapConfig

- sqlMapConfig.xml

2. 테이블 생성

① 게시판 테이블

create table ibbs (

boardNum NUMBER(9) not null,

name VARCHAR2(20) not null,

email VARCHAR2(50),

subject VARCHAR2(50) not null,

content VARCHAR2(4000) not null,

ipAddr VARCHAR2(20) not null,

hitCount NUMBER(9) not null,

created DATE,

constraint pk_ibbs_boardNum primary key(boardNum));

② 댓글 테이블

create table ibbsComment (

commentNum NUMBER(9) not null,

boardNum NUMBER(9) not null,

commentName VARCHAR2(20) not null,

commentContent VARCHAR2(100) not null,

ipAddr VARCHAR2(20) not null,

created DATE,

constraint pk_ibbsComment_commentNum primary key(commentNum),

constraint fk_ibbsComment_boardNum foreign key(boardNum) referenceibbs(boardNum) on delete cascade);

3. DTO 생성

① BoardDTO

package com.ibbs;

public class BoardDTO {

private int boardNum;

private String name;

private String email;

private String subject;

private String content;

private String ipAddr;

private int hitCount;

private String created;

private int comment;

private int boardListNum;

private String pageNum;

private String searchKey;

private String searchValue;

private String mode;

//getter&setter

}

② CommentDTO

package com.ibbs;

public class CommentDTO {

private int commentNum;

private int boardNum;

private String commentName;

private String commentContent;

private String ipAddr;

private String created;

private int commentListNum;

private String commentPageNum;

//getter&setter

}

4. jsp파일 작성

○ created.jsp : 게시물 작성 및 수정

○ list.jsp : 작성된 게시물 보여주는 창

○ article.jsp : 하나의 게시물 내용 + 이전글&다음글 + 댓글

○ commentList.jsp : 댓글내용

① created.jsp

○ 수정 부분

- 답글 부분 삭제

<c:if test="${mode=='created' }">

<input type="button" value="작성취소" class="btn2"

onclick="javascript:location.href='<%=cp %>/ibbs/list.action?pageNum=${pageNum }';" />

</c:if>

<c:if test="${mode=='updated' }">

<input type="button" value="수정취소" class="btn2" onclick="javascript:location.href='<%=cp %>/ibbs/list.action?

pageNum=${pageNum }&searchKey=${dto.searchKey }&searchValue=${dto.searchValue }';" />

</c:if>

</div>

② list.jsp

○ 수정 부분 없음

③ article.jsp

○ script 추가

- Ajax 실행 부분

- 댓글 작성시 넘겨줘야 하는 데이터 : boardNum, commentName, commentContent

$(function(){

$("#writeComment").click(function(){

var params = "boardNum=" + ${dto.boardNum} + "&commentName=" + $("#commentName").val()

+ "&commentContent=" + $("#commentContent").val();

$.ajax({

type:"POST",

url:"<%=cp%>/ibbs/commentCreated.action",

data:params,

success:function(args){

$("#listData").html(args);

$("#commentName").val("");

$("#commentContent").val("");

beforeSend:showRequest,

error:function(e){

alert(e.responseText);

}

});

○ showRequest() 함수

- 사용자가 값을 입력했는지 검사 : beforeSend

- 마지막에 return값으로 반드시 true를 줘야 한다.

- beforeSend는 true값이 오지 않으면 다음 작업을 실행하지 않음

function showRequest(){

var commentName = $.trim($("#commentName").val());

var commentContent = $.trim($("#commentContent").val());

if(!commentName){

alert("\n이름을 입력해주세요");

$("#commentName").focus();

return false;

}

if(!commentContent){

alert("\n내용을 입력해주세요");

$("#commentContent").focus();

return false;

}

if(commentContent.length>100){

alert("\n내용은 100자를 초과할 수 없습니다");

$("#content").focus();

return false;

}

return true;

}

○ listPage() 함수

- 페이징 작업

- boardNum을 넘겨줘야 한다

function listPage(page){

var url = "<%=cp%>/ibbs/commentList.action?boardNum="+ ${dto.boardNum};

$.post(url,{commentPageNum:page},function(args){

$("#listData").html(args);

});

$("#listData").show(); //display:block의 역할 - 보여지는거(none의 반대)

}

○ deleteData() 함수

- 댓글 삭제

- boardNum을 넘겨줘야 한다

function deleteData(num,page){

var url = "<%=cp%>/ibbs/commentDeleted.action?boardNum="+ ${dto.boardNum};

$.post(url,{commentNum:num,commentPageNum:page},function(args){

$("#listData").html(args);

});

}

○ 댓글 작성창 및 댓글 출력 창 작성

- <span id="listData" style="display: none;"></span> : 댓글 출력 부분

<tr>

</tr>

<tr>

</td>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

</table>

</div>

<br/>

④ commentList.jsp

○ 댓글 출력폼을 만들어서 넘겨주는 부분

<c:if test="${commentDataCount!=0 }">

<c:forEach var="dto" items="${commentList }">

<tr>

</tr>

<b>작성자 : ${dto.commentName }</b>

</td>

${dto.created }  

</td>

</tr>

<tr>

</tr>

<tr>

${dto.commentContent }

</td>

</tr>

</c:forEach>

<tr>

</tr>

${pageIndexList }

</td>

</tr>

</table>

</c:if>

5. ibbs_sqlMpa.xml 작성

① 게시판

○ boardNum 최댓값

○ 게시판 입력

○ 데이터 갯수

○ 전체 게시판 데이터

○ 게시판 조회수 증가

○ 한 개의 게시물 내용

○ 이전글

○ 다음글

○ 게시물 수정

○ 게시물 삭제

② 댓글

○ commentNum 최댓값

○ 댓글 입력

○ 하나의 게시물에 달린 댓글 갯수

○ 하나의 게시물에 달린 전체 댓글 데이터

○ 댓글 삭제

6. BoardAction 작성

○ dao와 myutil 생성 부분을 스프링으로 변경

private BoardDTO dto;

public BoardDTO getDto() {

return dto;

}

@Resource(name="dao")

private CommonDAO dao;

@Resource(name="myUtil")

private MyUtil myutil;

@Override

public BoardDTO getModel() {

return dto;

}

@Override

public void prepare() throws Exception {

dto = new BoardDTO();

}

○ 각각의 메소드에서 dao와 myutill 객체 생성 부분 지움

○ created, updated, article, deleted 메소드는 변경 부분 없음

○ list메소드에서 댓글 갯수를 dto에 추가

while(it.hasNext()){

BoardDTO vo = (BoardDTO)it.next();

listNum = totalDataCount-(start+n-1);

vo.setBoardListNum(listNum);

vo.setComment(dao.getIntValue("ibbs.commentDataCount", vo.getBoardNum()));

n++;

}

7. CommentAction 작성

① 객체 생성

private CommentDTO dto;

@Resource(name="dao")

private CommonDAO dao;

@Resource(name="myUtil")

private MyUtil myutil;

@Override

public CommentDTO getModel() {

return dto;

}

@Override

public void prepare() throws Exception {

dto = new CommentDTO();

}

② commentCreated() 메소드

○ 리다이렉트를 하면 안되므로 commentList 메소드를 찾아가도록 설정

public String commentCreated() throws Exception{

HttpServletRequest request = ServletActionContext.getRequest();

int maxNum = dao.getIntValue("ibbs.maxCommentNum");

dto.setCommentNum(maxNum+1);

dto.setIpAddr(request.getRemoteAddr());

dao.insertData("ibbs.insertCommentData", dto);

return commentList();

}

③ commentList() 메소드

public String commentList() throws Exception {

HttpServletRequest request = ServletActionContext.getRequest();

String cp = request.getContextPath();

int boardNum = Integer.parseInt(request.getParameter("boardNum"));

int numPerPage = 5;

int totalPage = 0;

int commentDataCount = 0;

String commentPageNum = request.getParameter("commentPageNum");

int currentPage = 1;

if(commentPageNum!=null && !commentPageNum.equals("")){

currentPage = Integer.parseInt(commentPageNum);

}else{

commentPageNum = "1";

}

commentDataCount = dao.getIntValue("ibbs.commentDataCount",boardNum);

if(commentDataCount!=0)

totalPage = myutil.getPageCount(numPerPage, commentDataCount);

if(currentPage>totalPage)

currentPage = totalPage;

int start = (currentPage-1)*numPerPage+1;

int end = currentPage*numPerPage;

Map<String, Object> hMap = new HashMap<String, Object>();

hMap.put("start", start);

hMap.put("end", end);

hMap.put("boardNum",boardNum);

List<Object> commentList = (List<Object>)dao.getListData("ibbs.listCommentData", hMap);

int listNum,n=0;

ListIterator<Object> it = commentList.listIterator();

while(it.hasNext()){

CommentDTO vo = (CommentDTO)it.next();

listNum = commentDataCount-(start+n-1);

vo.setCommentListNum(listNum);

vo.setCommentContent(vo.getCommentContent().replaceAll("\n", "<br/>"));

n++;

}

String pageIndexList = myutil.pageIndexList(currentPage, totalPage);

request.setAttribute("commentList", commentList);

request.setAttribute("pageIndexList", pageIndexList);

request.setAttribute("commentDataCount", commentDataCount);

request.setAttribute("commentPageNum", commentPageNum);

return SUCCESS;

}

④ commentDeleted() 메소드

○ 리다이렉트를 하면 안되므로 commentList 메소드를 찾아가도록 설정

public String commentDeleted() throws Exception{

HttpServletRequest request = ServletActionContext.getRequest();

int commentNum = Integer.parseInt(request.getParameter("commentNum"));

dao.deleteData("ibbs.deleteCommentData",commentNum);

return commentList();

}

8. struts-ibbs.xml 작성