JavaScript 의 이해 - [AJAX] 한줄 답글 달기(CRUD)

Today

Total

Recent Comments

Recent Posts

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

관리 메뉴

💻

JavaScript 의 이해 - [AJAX] 한줄 답글 달기(CRUD) 본문

KITRI/JAVASCRIPT

JavaScript 의 이해 - [AJAX] 한줄 답글 달기(CRUD)

또효니 2020. 7. 16. 16:48

Oracle SQL Developer로 가서 linereply 테이블을 생성해준다.

ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri ="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:set var = "root" value = "${pageContext.request.contextPath}"/>
	<h3>사원 테이블</h3>
	<a href="${root}/sawon/list.do">사원목록</a>
	<br/><br/>
	
	<h3>실시간 댓글</h3>
	<a href="${root}/reply/replyList.do">한줄답글시작</a>
	
</body>
</html>

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<c:set var="root" value="${pageContext.request.contextPath}"/>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${root}/css/reply/reply.css">
<script type="text/javascript" src="${root}/XHR/xhr.js"></script>
<script type="text/javascript" src="${root}/javascript/reply/replyWrite.js"></script>
<script type="text/javascript" src="${root}/javascript/reply/replyDelete.js"></script>
<script type="text/javascript" src="${root}/javascript/reply/replyUpdate.js"></script>
</head>
<body>
	<div>실시간 댓글이 가능합니다.</div>
	<br /><br />
	
	<div>
		<input id="writeReply" type="text" name="write" size="50"/>
		<input type="button" value="한줄댓글" onclick="writeToServer('${root}')"/>
	</div>
	
	<div id="listAllDiv">
		<!-- 실시간댓글(새로운글) -->
		
		<!-- 기존글 -->
		<c:forEach var="replyDto" items="${replyList}">
			<div class="replyDiv" id="${replyDto.bunho}">
				<span class="cssBunho">${replyDto.bunho}</span>
				<span class="cssReply">${replyDto.line_reply}</span>
				<span class="cssUpDel">
					<a href="javascript:deleteToServer('${replyDto.bunho}','${root}')">삭제	&nbsp;</a>
					<a href="javascript:selectToServer('${replyDto.bunho}', '${root}')">수정</a>
				</span>
			</div>
		</c:forEach>
	</div>
</body>
</html>

xhr> [xhr.js]

코드 중복을 막기 위해 xhr.js를 따로 빼서 사용한다.

/**
 * 
 */

function createXHR(){
	if(window.XMLHttpRequest)
		return new XMLHttpRequest();
	else
		return new ActiveXObject("Microsoft.XMLHTTP");
}

var xhr = null;

function sendRequest(method, url, params, callback){	//post, xhr, txt, msg="", fromServer
	var httpMethod=method.toUpperCase();
	var httpUrl = url;
	var httpParams=(params==null || params=="")? null:params;
	if(httpMethod=="GET" &&httpParams!=null){
		httpUrl += "?" + httpParams;
	}
	arr.push(httpMethod+ "," + httpUrl + "," + httpParams);
	
	xhr = createXHR();
	xhr.open(httpMethod, httpUrl, true);
	//POST일때만 작동함 
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(httpMethod=="POST" ? httpParams:null);
	xhr.onreadystatechange=callback;
	
}

SqlConfig.xml 수정

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
  <environments default="development">
    <environment id="development">
      <transactionManager type="JDBC"/>
      <dataSource type="UNPOOLED">
        <property name="driver" value="oracle.jdbc.driver.OracleDriver"/>
        <property name="url" value="jdbc:oracle:thin:@localhost:1521:xe"/>
        <property name="username" value="mvc"/>
        <property name="password" value="1234"/>
      </dataSource>
    </environment>
  </environments>
  <mappers>
    <mapper resource="/com/java/member/model/mapper/MemberMapper.xml"/>
    <mapper resource="/com/java/board/model/mapper/BoardMapper.xml"/>
    <mapper resource="/com/java/sawon/model/mapper/SawonMapper.xml"/>
    <mapper resource="/com/java/reply/model/mapper/ReplyMapper.xml"/>
  </mappers>
</configuration>

ReplyMapper.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.java.reply.model.mapper.ReplyMapper">
	<insert id="reply_write" parameterType="com.java.reply.model.ReplyDto">
		<![CDATA[
		insert into linereply 
				values(linereply_bunho_seq.nextval, #{line_reply})
		]]>
	</insert>

	<select id="reply_bunho" resultType="int">
		select nvl(max(bunho), 0) from linereply
	</select>
	
	<select id="reply_list" resultType="com.java.reply.model.ReplyDto">
		select * from linereply 
				 order by bunho desc
	</select>
	
	<delete id="reply_delete" parameterType="int">
		delete from linereply 
			   where bunho=#{bunho}
	</delete>
	
	<select id="reply_select" parameterType="int" resultType="com.java.reply.model.ReplyDto">
		select * from linereply where bunho=#{bunho}
	</select>
	
	<update id="reply_update" parameterType="java.util.Map">
		update linereply set line_reply=#{linereply} where bunho=#{bunho}
	</update>
</mapper>

ReplyListCommand.java

package com.java.reply.command;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.java.command.Command;
import com.java.reply.model.ReplyDao;
import com.java.reply.model.ReplyDto;

public class ReplyListCommand implements Command {

    @Override
    public String proRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
	// DB List
	
	List<ReplyDto> replyList = ReplyDao.getInstance().getList();
	logger.info(logMsg+replyList.size());
	
	request.setAttribute("replyList", replyList);

	return "/WEB-INF/views/ajax/reply/list.jsp";
    }
}

ReplyWriteCommand.java

package com.java.reply.command;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.java.command.Command;
import com.java.reply.model.ReplyDao;
import com.java.reply.model.ReplyDto;

public class ReplyWriteCommand implements Command {

    @Override
    public String proRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
	String writeReply = request.getParameter("writeReply");
	logger.info(logMsg + writeReply);
	
	ReplyDto replyDto = new ReplyDto();
	replyDto.setLine_reply(writeReply);
	
	int check = ReplyDao.getInstance().insert(replyDto);
	logger.info(logMsg + check);
	
	if(check>0) {
	    int bunho = ReplyDao.getInstance().getBunho();
	    logger.info(logMsg + writeReply + "," + bunho);
	    
	    String str = bunho + "," + writeReply;  //JSON - SPRING
	    response.setContentType("application/text;charset=utf-8");
	    PrintWriter pw = response.getWriter();
	    pw.print(str);
	}
	return null;
    }

}

ReplySelectCommand.java

package com.java.reply.command;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.java.command.Command;
import com.java.reply.model.ReplyDao;
import com.java.reply.model.ReplyDto;

public class ReplySelectCommand implements Command {

    @Override
    public String proRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {

	int bunho = Integer.parseInt(request.getParameter("bunho"));
	ReplyDto replyDto = ReplyDao.getInstance().select(bunho);

	logger.info(logMsg + replyDto);

	if (replyDto != null) {
	    String str = replyDto.getBunho() + "," + replyDto.getLine_reply();

	    response.setContentType("application/txt;charset=utf-8");
	    PrintWriter out = response.getWriter();
	    out.print(str);
	}
	return null;
    }
}

ReplyUpdateCommand.java

package com.java.reply.command;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.java.command.Command;
import com.java.reply.model.ReplyDao;

public class ReplyUpdateCommand implements Command {

    @Override
    public String proRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
	int bunho = Integer.parseInt(request.getParameter("bunho"));
	String lineReply = request.getParameter("value");
	logger.info(logMsg + bunho + "\t" + lineReply);

	int check = ReplyDao.getInstance().update(bunho, lineReply);
	logger.info(logMsg + "@@@" + check);

	if (check > 0) {
	    String str = bunho + "," + lineReply;
	    response.setContentType("application/txt;charset=utf-8");
	    PrintWriter out = response.getWriter();
	    out.print(str);
	}
	return null;
    }
}

ReplyDeleteCommand.java

package com.java.reply.command;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.java.command.Command;
import com.java.reply.model.ReplyDao;

public class ReplyDeleteCommand implements Command {

    @Override
    public String proRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
	int bunho = Integer.parseInt(request.getParameter("bunho"));
	logger.info(logMsg + bunho);
	
	int check = ReplyDao.getInstance().delete(bunho);
	logger.info(logMsg + check);
	
	if(check > 0) {
	    response.setContentType("application/txt;charset=utf-8");
	    PrintWriter out = response.getWriter();
	    out.print(bunho);
	}
	return null;
    }
}

ReplyDao.java

package com.java.reply.model;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.java.myBatis.SqlManager;

public class ReplyDao {
    private static SqlSessionFactory sqlSessionFactory = SqlManager.getInstance();
    private SqlSession session;
    
    private static ReplyDao instance = new ReplyDao();
    public static ReplyDao getInstance() {
	return instance;
    }
	    
    public int insert(ReplyDto replyDto) {
	int value=0;
	
	try {
	    session = sqlSessionFactory.openSession();
	    value = session.insert("reply_write", replyDto);
	    session.commit();
	} catch (Exception e) {
	    e.printStackTrace();
	    session.rollback();
	} finally {
	    session.close();
	}
	
	return value;
    }
    
    public int getBunho() {
	int value = 0;
	
	try {
	    session = sqlSessionFactory.openSession();
	    value = session.selectOne("reply_bunho");
	} catch (Exception e) {
	    e.printStackTrace();
	} finally {
	    session.close();
	}
	
	return value;
    }
    
    public List<ReplyDto> getList(){
	List<ReplyDto> replyList = null;
	
	try {
	    session = sqlSessionFactory.openSession();
	    replyList = session.selectList("reply_list");
	} catch (Exception e) {
	    e.printStackTrace();
	} finally {
	    session.close();
	}
	return replyList;
    }
    
    public int delete(int bunho) {
	int value = 0;
	
	try {
	    session = sqlSessionFactory.openSession();
	    value = session.delete("reply_delete", bunho);
	    session.commit();
	} catch (Exception e) {
	    e.printStackTrace();
	    session.rollback();
	} finally {
	    session.close();
	}
	
	return value;
    }

    public ReplyDto select(int bunho) {
	ReplyDto replyDto = null;

	try {
	    session = sqlSessionFactory.openSession();
	    replyDto = session.selectOne("reply_select", bunho);
	} catch (Exception e) {
	    e.printStackTrace();
	} finally {
	    session.close();
	}

	return replyDto;
    }

    public int update(int bunho, String lineReply) {
	int value = 0;
	System.out.println("bunho" + bunho);
	HashMap<String, Object> hMap = new HashMap<String, Object>();
	hMap.put("bunho", bunho);
	hMap.put("linereply", lineReply);

	try {
	    session = sqlSessionFactory.openSession();
	    value = session.update("reply_update", hMap);
	    session.commit();
	} catch (Exception e) {
	    e.printStackTrace();
	} finally {
	    session.close();
	}

	return value;
    }

}

ReplyDto.java

package com.java.reply.model;

public class ReplyDto {
    private int bunho;
    private String line_reply;
    public int getBunho() {
        return bunho;
    }
    public void setBunho(int bunho) {
        this.bunho = bunho;
    }
    public String getLine_reply() {
        return line_reply;
    }
    public void setLine_reply(String line_reply) {
        this.line_reply = line_reply;
    }
    @Override
    public String toString() {
	return "ReplyDto [bunho=" + bunho + ", line_reply=" + line_reply + "]";
    }
}

replyWrite.js

/**
 * 
 */
var arr = new Array();
var root = null;

function writeToServer(requestRoot) {
	root = requestRoot;
	var writeReply = document.getElementById("writeReply").value;
	arr.push(root + "," + writeReply);

	var url = root + "/reply/replyWrite.do";
	var params = "writeReply=" + writeReply;
	sendRequest("GET", url, params, writeFromServer);

	//alert(arr.join("\n"));
}

function writeFromServer() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		arr.push("result" + xhr.responseText);

		var result = xhr.responseText.split(",");
		var bunho = result[0].trim();
		var reply = result[1].trim();

		document.getElementById("writeReply").value = "";

		var listDiv = document.getElementById("listAllDiv");
		var div = document.createElement("div");
		div.className = "replyDiv";
		div.id = bunho;

		var spanBunho = document.createElement("span");
		spanBunho.className = "cssBunho";
		spanBunho.innerText = bunho;

		var spanReply = document.createElement("span");
		spanReply.className = "cssReply";
		spanReply.innerText = reply;

		var spanUpdel = document.createElement("span");
		spanUpdel.className = "cssUpDel";

		var aDelete = document.createElement("a");
		//aDelete.href = "javascript:deleteToserver(" +bunho + ",\'" +root +"\')";	//번호 , 루트

		aDelete.href = "#";
		aDelete.onclick = function() {
			deleteToserver(bunho, root);
		}
		aDelete.innerHTML = "삭제 &nbsp;";

		var aUpdate = document.createElement("a");
		aUpdate.href = '#';
		aUpdate.onclick = function() {
			selectToServer(bunho, root);
		}
		aUpdate.innerHTML = "수정";

		spanUpdel.appendChild(aDelete);
		spanUpdel.appendChild(aUpdate);

		div.appendChild(spanBunho);
		div.appendChild(spanReply);
		div.appendChild(spanUpdel);
		listDiv.appendChild(div);
		listDiv.insertBefore(div, listDiv.firstChild);
		//alert(arr.join("\n"));

	} else {

	}
}

replyUpdate.js

/**
 * 
 */

var root = null;
function selectToServer(bunho, requestRoot) {
	root = requestRoot;

	var url = root + "/reply/replySelect.do";
	var params = "bunho=" + bunho;
	arr.push(url + "," + params);
	// alert(arr.join("\n"));

	sendRequest("GET", url, params, SelectFromServer);

}

function SelectFromServer() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		var result = xhr.responseText.split(',');
		var bunho = result[0].trim();
		var reply = result[1].trim();

		arr.push(bunho + "," + reply);
		// alert(arr.join("\n"));

		// 새로운 inputTag 작성
		var div = document.createElement("div");
		div.id = "up" + bunho;

		var inputText = document.createElement("input");
		inputText.type = "text";
		inputText.value = reply;

		var inputBtn = document.createElement("input");
		inputBtn.type = "button";
		inputBtn.value = "수정";
		inputBtn.onclick = function() {
			updateToServer(bunho, inputText.value);
		}

		div.appendChild(inputText);
		div.appendChild(inputBtn);

		var bunhoDiv = document.getElementById(bunho);
		bunhoDiv.appendChild(div);

	}
}

function updateToServer(bunho, value) {
	var url = root + "/reply/replyUpdate.do";
	var params = "bunho=" + bunho + "&value=" + value;

	sendRequest("POST", url, params, updateToFrom);
}

function updateToFrom() {
	// alert(arr.join("\n"));
	if (xhr.readyState == 4 && xhr.status == 200) {
		var result = xhr.responseText.split(",");
		var bunho = result[0].trim();
		var reply = result[1].trim();

		var bunhoDiv = document.getElementById(bunho);
		var span = bunhoDiv.getElementsByTagName("span");
		span[1].innerText = reply;

		var upDiv = document.getElementById("up" + bunho);
		bunhoDiv.removeChild(upDiv);
	}
}

replyDelete.js

/**
 * 
 */
function deleteToserver(bunho, root) {

	var url = root + "/reply/replyDelete.do";
	var params = "bunho=" + bunho;

	sendRequest("GET", url, params, deleteFromServer);
	arr.push(bunho + "," + root);
	//alert("@@@@@" + arr.join("\n"));
}

function deleteFromServer() {
	//alert(arr.join("\n"));

	if (xhr.readyState == 4 && xhr.status == 200) {
		var bunho = xhr.responseText;
		var div = document.getElementById(bunho);

		var listDiv = document.getElementById("listAllDiv");
		listDiv.removeChild(div);

	}
}

SqlConfig.xml 로 가서 username 을 mvc 로 바꿔준다.

'KITRI > JAVASCRIPT' 카테고리의 다른 글

JavaScript 의 이해 - [AJAX] 기상청 데이터 Parsing (0)	2020.07.20
JavaScript 의 이해 - [AJAX] XMLHttpRequest.responseXML (0)	2020.07.16
JavaScript 의 이해 - [AJAX] XHR(XMLHttpRequest) (0)	2020.07.16
JavaScript 의 이해 - [AJAX] JSON 객체 다루기 (0)	2020.07.15
JavaScript 의 이해 - JS/jQuery 자동완성 플러그인 설치 (0)	2020.07.14

'KITRI/JAVASCRIPT' Related Articles

Comments

💻

JavaScript 의 이해 - [AJAX] 한줄 답글 달기(CRUD) 본문

JavaScript 의 이해 - [AJAX] 한줄 답글 달기(CRUD)

'KITRI > JAVASCRIPT' 카테고리의 다른 글

티스토리툴바