AJAX #04 댓글 달기 예제

1. 댓글 달기 예제

: 댓글을 입력하면 최신글 순서로 글이 보여진다. 

: 댓글은 db에 저장하고, 브라우저에 내용을 지우고 다시 가져오는 방식으로 한다.

: AJAX에서  MVC모델 이용하여 DB 정보 가져오기.

: 서블릿에서는 페이지호출이 아니라 해당 데이터만 XML로 만들어 처리함.

예제> 

1) 테이블 : 

    comments

2) 서블릿 :

    - dao, vo, controller

3) html

[[ comments 테이블 ]]

** 테이블 생성, sequence생성,데이터입력

drop table comments;

create table comments

(

 num number primary key,

 id varchar2(10),

 comments varchar2(50)

);

create sequence seq_comments;

insert into comments values( seq_comments.nextval, 'test', 'good!');

commit;

** java파일

[[  CommentsVo.java  ]]

package test.vo;

public class CommentsVo {

    private int num;

    private String id;

    private String comments;

    public CommentsVo(){

        

    }

    

    public CommentsVo(int num, String id, String comments) {

        super();

        this.num = num;

        this.id = id;

        this.comments = comments;

    }

    public int getNum() {

        return num;

    }

    public void setNum(int num) {

        this.num = num;

    }

    public String getId() {

        return id;

    }

    public void setId(String id) {

        this.id = id;

    }

    public String getComments() {

        return comments;

    }

    public void setComments(String comments) {

        this.comments = comments;

    }

}

** db접속 정보

[[  DBConnection.java  ]]

package test.db;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.SQLException;

public class DBConnection {

    public static Connection getCon() throws SQLException{

        Connection con=null;

        try{

            Class.forName("oracle.jdbc.OracleDriver");

            String url="jdbc:oracle:thin:@localhost:1521:XE";

            con= DriverManager.getConnection(url,"scott","tiger");

            return con;

        }catch(ClassNotFoundException ce){

            System.out.println(ce.getMessage());

            return null;

        }

    }

}

** 처리 로직

[[   CommentsDao.java  ]]

package test.dao;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import test.db.DBConnection;

import test.vo.CommentsVo;

public class CommentsDao {

    public int insert(CommentsVo vo){

        Connection con = null;

        PreparedStatement pstmt=null;

        try{

            con=DBConnection.getCon();

            String sql="insert into comments values(seq_comments.nextval,?,?)";

            pstmt=con.prepareStatement(sql);

            pstmt.setString(1, vo.getId());

            pstmt.setString(2, vo.getComments());

            int n=pstmt.executeUpdate();

            return n;

        }catch(SQLException se){

            System.out.println(se.getMessage());

            return -1;

        }finally{

            try{

                if(pstmt!=null) pstmt.close();

                if(con!=null) con.close();

            }catch(SQLException se){

                System.out.println(se.getMessage());

            }

        }

    }

    public ArrayList<CommentsVo> getList(){

        Connection con = null;

        PreparedStatement pstmt=null;

        ResultSet rs = null;

        try{

            con=DBConnection.getCon();

            String sql="select * from comments";

            pstmt=con.prepareStatement(sql);

            rs=pstmt.executeQuery();

            ArrayList<CommentsVo> list = new ArrayList<>();

            while(rs.next()){

                CommentsVo vo = new CommentsVo(

                        rs.getInt("num"),

                        rs.getString("id"),

                        rs.getString("comments")

                        );

                list.add(vo);

            }

            return list;

        }catch(SQLException se){

            System.out.println(se.getMessage());

            return null;

        }finally{

            try{

                if(rs!=null) rs.close();

                if(pstmt!=null) pstmt.close();

                if(con!=null) con.close();

            }catch(SQLException se){

                System.out.println(se.getMessage());

            }

        }

    }

}

** controller

[[  CommController.java   ]]

package test.controller;

import java.io.IOException;

import java.io.PrintWriter;

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 test.dao.CommentsDao;

import test.vo.CommentsVo;

@WebServlet("/comm.do")

public class CommController extends HttpServlet {

    @Override

    protected void service(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        //1. 요청분석

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

        if(cmd.equals("insert")){

            insert(request,response);

        }

    }

    private void insert(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        //사용자가 보낸 아이디와 영화평 얻어오기.

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

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

        

        //정보를 vo 객체에 담기.

        CommentsVo vo=new CommentsVo(0,id,comments);

        

        //2. 요청에 따른 비즈니스로직을 처리하기 위한 자바객체 호출

        CommentsDao dao=new CommentsDao();

        

        //DB에 vo객체 추가하기.

        int n=dao.insert(vo);

        

        //3. 결과값을 xml로 응답하기 (ajax는 페이지이동하면 안된다.)

        response.setContentType("text/xml;charset=euc-kr");

        PrintWriter pw = response.getWriter();

        pw.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");

        pw.println("<result>");

        if(n>0){

            pw.println("<info>success</info>");

        }else{

            pw.println("<info>fail</info>");

        }

        pw.println("</result>");

        pw.close();

    }

}

** html 

[[  movieinfo.html  ]]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function getXHR(){

        if(window.XMLHttpRequest){

            return new XMLHttpRequest();

        }else{

            return new ActiveXObject("Microsoft.XMLHTTP");

        }        

    }

    var xhr=null;

    function addComments(){

        //1. xhr객체 얻어오기

        xhr=getXHR();

        //2. 콜백메소드 설정하기

        xhr.onreadystatechange=callback;

        //3. open함수로 초기화설정(전송방식,서버주소,..)

        xhr.open("POST","comm.do?cmd=insert",true);

        //4. send함수로 서버에 요청

        //-*-  post방식으로 전송할때는 아래와같이 콘텐츠타입을 설정해야 함!*-*-/

       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        

        //사용자가 입력한 아이디와 영화평 얻어오기

        var id=document.getElementById("id").value;

        var comments=document.getElementById("comments").value;

        var param="id=" +id +"&comments=" +comments;

        //send메소드를 호출하면서 파라미터 전송하기

        xhr.send(param);

    }

    function callback(){

        if(xhr.readyState==4 && xhr.status==200){

            var xml=xhr.responseXML;

            var result=xml.getElementsByTagName("info")[0].firstChild.nodeValue;

            if(result=="success"){

                //alert('등록성공');

                getList(); //댓글목록얻어오기

            }else{

                //alert("등록실패");

            }

        }

    }

    function getList(){

        xhr=getXHR();

        xhr.onreadystatechange=showList;

        xhr.open("get","comm.do?cmd=list",true);

        xhr.send(null);

    }

    //댓글 div안의 내용들 모두 제거하기.

    function listRemove(){

        //commList의 자식div의 갯수 얻어오기.(컬렉션타입으로 얻어옴)

        var childs=document.getElementById("commList").childNodes;

        //commList의 자식div들 제거하기.

        for(var i=childs.length - 1;i>=0;i--){

            //childs배열의 i번째 요소 참조값 얻어오기.

            var child=childs.item(i);

            //commList에서 child제거하기

            document.getElementById("commList").removeChild(child);

        }

    }

    // textarea에서 개행은 \n으로 db에 저장된다.

    // 가져온 데이터를 개행하기 위해서는 

    // \n을 <br/>로 바꿔줘야 한다.

    //str1문자열에서 str2를 str3문자열로 바꾸기

    //예: replace("hello \n test","\n","<br/>");

    function replace(str1, str2, str3){

        var ch="";

        var chstr="";

        for(var i=0;i<str1.length;i++){

            ch=str1.charAt(i);

            if(ch==str2){// str2 : '\n'

                chstr=chstr+str3;

            }else{

                chstr=chstr + ch;

            }

        }

        return chstr;

    }

    // 정상적이면(xhr.readyState==4 && xhr.status==200)

    // 기존 화면의 <div>삭제하고 불러와 

    // 표시한다.

    function showList(){

        if(xhr.readyState==4 && xhr.status==200){

            //commList의 자식div모두 제거하기

            listRemove();

            

            //var xml=xhr.responseText;

            //alert(xml);

            var xml=xhr.responseXML;

            var len=xml.getElementsByTagName("id").length;

            if(len>0){

                for(var i=0;i<len;i++){

                    var id=xml.getElementsByTagName("id")[i].firstChild.nodeValue;

                    var comments=xml.getElementsByTagName("comments")[i].firstChild.nodeValue;

                    comments = replace(comments,'\n','<br/>');

                    var txt= "작성자:" + id + "<br/>" +

                            "영화평:" + comments ;

                    //내용을 담을 div 생성하기

                    var div=document.createElement("div");

                    //생성된 div에 내용담기

                    div.innerHTML=txt;

                    div.style.width="300px";

                    div.style.height="80px";

                    div.style.border="1px solid blue";

                    div.style.marginTop="8px";

                    //전체 댓글을 담을 div의 참조값 얻어오기

                    var commList=document.getElementById("commList");

                    //댓글 div에 생성된 div추가하기.

                    commList.appendChild(div);

                }

            }

        }

    }

</script>

</head>

<body onload="getList()">

<div style="width:500px;height: 300px;background-color: orange">

    <h2>호빗</h2>

    <div>

        <img alt="" src="images/001.jpg" />

    </div>

</div>

<div>

    <!-- 댓글이 추가될 div -->

    <div id="commList">

    </div>

    <div id="commReg">

        아이디 <input type="text" id="id"/><br/>

        영화평 <textarea rows="3" cols="30" id="comments"></textarea>

        <br/>

        <input type="button" value="등록" onclick="addComments()"/>

    </div>

</div>

</body>

</html>