본문 바로가기
Programming/Javascript

의견 공유판 만들기

Dandy Andy 2020. 3. 9. 22:15

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
div{
   width: 100%;
   text-align: center;
}
#view{
   width : 60%;
   text-align: center;
   margin: 0px auto;
   height: 500px;
   overflow: auto;
   border: 1px solid black;
}
ul{
   list-style: none;
   margin: 0;
   padding: 10px;
}
li{
   text-align: left;
}
span{
   color: blue;
}
</style>
</head>
<body>
   <div>
      <h1>스마트미디어인재개발원 단톡방</h1>
      
      <br><br><br>
      <div id = "view">
         <ul id="list">
         </ul>
      </div>
      <input type="text" id="id"> <input type="text" id="content">
      <button id="btn">입력</button>
   </div>
   <script src="js/jquery-3.4.1.min.js"></script>
   <script type="text/javascript">
   
      $('#btn').on('click',play);
      
      setInterval(display,5000);
      
      function display(){
         
         $.ajax({
            url : "AddChat",
            type : "POST",
            dataType : "json",
            data : 'id=&content=',
            success : function(result){
               $('#list').empty();
               for(var i = result.length - 1; i >= 0; i--){
                  var item = '<li><span>'+result[i].id+'</span>:'+result[i].content+'</li>';
                  $('#list').append(item);
               }
            },
            error : function(){
               
            }
         });
      }
      function play(){
         var id = $('#id').val();
         var content = $('#content').val();
         $('#id').val('');
         $('#content').val('');
         $('#id').focus();
         
         $.ajax({
            url : "AddChat",
            type : "POST",
            dataType : "json",
            data : 'id='+id+'&content='+content,
            success : function(result){
               $('#list').empty();
               for(var i = result.length - 1; i >= 0; i--){
                  var item = '<li><span>'+result[i].id+'</span>:'+result[i].content+'</li>';
                  $('#list').append(item);
               }
            },
            error : function(){
               
            }
         });
      }
   
            
   </script>
</body>
</html>

 

Web Content > data.sql

drop table chat

create table chat(
	id varchar2(100),
	content varchar2(1000)
)

select * from chat;

 

Java Resources > src > com > AddChat

package com;

import java.io.IOException;
import java.util.ArrayList;

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 com.google.gson.Gson;

/**
 * Servlet implementation class AddChat
 */
@WebServlet("/AddChat")
public class AddChat extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		String id = request.getParameter("id");
		String content = request.getParameter("content");

		ChatDAO dao = new ChatDAO();
		if (id.length() > 0 && content.length() > 0) {
			ChatDTO dto = new ChatDTO(id, content);
			dao.insert(dto);
		}
		ArrayList<ChatDTO> list = dao.select();
		Gson gson = new Gson();
		String value = gson.toJson(list);
		response.getWriter().print(value);
	}

}

 

Java Resources > src > com > ChatDAO

package com;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

public class ChatDAO {

	private Connection conn;
	private PreparedStatement psmt;
	private ResultSet rs;

	private void getConnection() {
		try {
			Class.forName("oracle.jdbc.driver.OracleDriver");
			String db_url = "jdbc:oracle:thin:@localhost:1521:xe";
			String db_id = "hr";
			String db_pw = "hr";
			conn = DriverManager.getConnection(db_url, db_id, db_pw);
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	private void close() {
		try {
			if (rs != null)
				rs.close();
			if (psmt != null)
				psmt.close();
			if (conn != null)
				conn.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	public void insert(ChatDTO dto) {
		try {
			getConnection();
			String sql = "insert into chat values(?, ?)";
			psmt = conn.prepareStatement(sql);
			psmt.setString(1, dto.getId());
			psmt.setString(2, dto.getContent());
			psmt.executeUpdate();
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close();
		}
	}

	public ArrayList<ChatDTO> select() {
		ArrayList<ChatDTO> list = new ArrayList<ChatDTO>();
		try {
			getConnection();
			String sql = "select * from chat";
			psmt = conn.prepareStatement(sql);
			rs = psmt.executeQuery();
			while (rs.next()) {
				String id = rs.getString(1);
				String content = rs.getString(2);
				ChatDTO dto = new ChatDTO(id, content);
				list.add(dto);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close();
		}
		return list;
	}

}

 

Java Resources > src > com > ChatDTO

package com;

public class ChatDTO {
	private String id;
	private String content;

	public ChatDTO(String id, String content) {
		this.id = id;
		this.content = content;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

}
저작자표시 비영리 변경금지

'Programming > Javascript' 카테고리의 다른 글

javascript에서 html로 값 전달  (0) 2020.10.12
캐릭터 움직이기  (0) 2020.03.09
학생 목록 list로 관리하기 (ajax 활용)  (0) 2020.03.08
리스트 항목추가하기 (ajax를 활용하여 영화 순위 리스트로 가져오기)  (0) 2020.03.08
css 적용  (0) 2020.03.08

'Programming/Javascript' Related Articles

티스토리툴바