본문 바로가기
JSP/연습

게시글 댓글연습 +AJAX + JSON 추가로 배운거 써먹기 //JSONArray //toString()

by SEOKIHOUSE 2023. 6. 19.
  • 1)AJAX  -- 페이지 리로드방식 JSON 미사용

0619practice.zip
2.62MB

CREATE TABLE `bottomcontext` (
	`count` INT(11) NOT NULL AUTO_INCREMENT,
	`num` INT(11) NOT NULL,
	`bottomcontent` VARCHAR(50) NOT NULL COLLATE 'utf8mb4_general_ci',
	`writer` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8mb4_general_ci',
	INDEX `num` (`num`) USING BTREE,
	INDEX `count` (`count`) USING BTREE,
	CONSTRAINT `FK_bottomcontext_context` FOREIGN KEY (`num`) REFERENCES `mydb`.`context` (`num`) ON UPDATE NO ACTION ON DELETE NO ACTION
)

CREATE TABLE `context` (
	`num` INT(11) NOT NULL,
	`title` VARCHAR(50) NOT NULL DEFAULT '' COLLATE 'utf8mb4_general_ci',
	`content` VARCHAR(50) NOT NULL DEFAULT '' COLLATE 'utf8mb4_general_ci',
	`writer` VARCHAR(50) NOT NULL DEFAULT '' COLLATE 'utf8mb4_general_ci',
	`bottomwrite` VARCHAR(50) NOT NULL DEFAULT '' COLLATE 'utf8mb4_general_ci',
	PRIMARY KEY (`num`) USING BTREE
)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>댓글보기</title>
	<script>
		window.onload = function() {
			const trs = document.querySelector("table");
			
			trs.addEventListener("click", c);
			
			function c() {
				if(event.target.className =="tbl") {
					location.href="detailServlet?num="+event.target.innerHTML;
				}else {
					return;
				}
			}
			
			
			
		}
	</script>
</head>
<body>
	<h1>게시판1</h1>
	<hr>
	<table>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>내용</th>
			<th>작성자</th>
		</tr>
	<c:forEach var="con" items="${list }">
		<tr>
			<td class="tbl">${con.num }</td>
			<td>${con.title }</td>
			<td>${con.content }</td>
			<td>${con.writer }</td>
		</tr>
			
	</c:forEach>
	</table>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script>
		window.onload = function() {
			const txts= document.querySelector("input[name=txt]");
			const writers= document.querySelector("input[name=writer]");
			const smtBtn = document.querySelector("#smt");
			
			smtBtn.addEventListener("click", function e() {
				const xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange =function() {
					if(xhttp.readyState ===4 && xhttp.status ===200) {
						alert("등록완료");
						location.href="detailServlet?num="+${cv.num};
					}
				}
				xhttp.open("GET","insertServlet?number="+${cv.num}+"&content="+txts.value +"&writer="+writers.value, true);
				xhttp.send();
				
			}) 
		}
	</script>
</head>
<body>
	<p>제목:${cv.title } 작성자: ${cv.writer }</p>
	<p>내용</p>
	<p>${cv.content }</p>
	<hr>
	
		
	<h1>댓글수:${list.size()}</h1>
	<div style="border: 1px solid black;">
		<p>댓글작성</p>
		작성자:<input type="text" name="writer"><br>
		내용:<input type="text" name="txt"><br>
		<input id="smt" type="submit" value="댓글등록">
		<br>
	</div>
	<table>
		<tr>
			<th>번호</th>
			<th>작성자</th>
			<th>댓글내용</th>
		</tr>
		<c:forEach var ="repeat" items="${list }">
			<tr>
				<td>${repeat.count }</td>
				<td>${repeat.writer }</td>
				<td>${repeat.bottomcontent }</td>
			</tr>
		</c:forEach>
	</table>
	
</body>
</html>
package servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

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 vo.DBcon;

@WebServlet("/insertServlet")
public class insertServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String number = request.getParameter("number");
		int innum = Integer.parseInt(number);
		
		String content = request.getParameter("content");
		String writer =request.getParameter("writer");
		try {
			Connection conn = DBcon.getConnection();
			String query ="SELECT MAX(COUNT)+1 FROM bottomcontext WHERE num=?";
			PreparedStatement stmt = conn.prepareStatement(query);
			stmt.setInt(1, innum);
			
			ResultSet rs = stmt.executeQuery();
			rs.next();
			int maxnum = rs.getInt("MAX(COUNT)+1");
			
			String query2 = "INSERT INTO bottomcontext VALUES (?,?,?,?)";
			PreparedStatement stmt2 = conn.prepareStatement(query2);
			stmt2.setInt(1, maxnum);
			stmt2.setInt(2, innum);
			stmt2.setString(3, content);
			stmt2.setString(4, writer);
			
			stmt2.executeUpdate();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}
package vo;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBcon {
	public static Connection getConnection() throws Exception{
		final String driver = "org.mariadb.jdbc.Driver";
		Class.forName(driver);
		final String url ="jdbc:mariadb://localhost:3306/mydb";
		Connection conn = DriverManager.getConnection(url,"root","1234");
		return conn;
	}
}
package servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
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 vo.BottomContentVo;
import vo.ContextVo;
import vo.DBcon;

@WebServlet("/detailServlet")
public class detailServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			Connection conn = DBcon.getConnection();
			String query ="SELECT * FROM context where num=?";
			PreparedStatement stmt = conn.prepareStatement(query);
			String st = request.getParameter("num");
			int nums = Integer.parseInt(st);
			
			stmt.setInt(1, nums);
			ResultSet rs = stmt.executeQuery();
			rs.next();
			
			int num = rs.getInt("num");
			String title = rs.getString("title");
			String content = rs.getString("content");
			String writer = rs.getString("writer");
			String bottomwrite = rs.getString("bottomwrite");
			
			ContextVo cv = new ContextVo(num,title,content,writer,bottomwrite);
			request.setAttribute("cv", cv);
			
			/////////
			String query2 = "SELECT * FROM bottomcontext where num=? ORDER BY COUNT desc";
			PreparedStatement stmt2 =conn.prepareStatement(query2);
			stmt2.setInt(1, nums);
			ResultSet rs2 = stmt2.executeQuery();
			
			ArrayList<BottomContentVo> ar = new ArrayList<>();
			
			while(rs2.next()) {
				int count = rs2.getInt("count");
				int num2 = rs2.getInt("num");
				String bottomcontent = rs2.getString("bottomcontent");
				String writer2 = rs2.getString("writer");
				BottomContentVo bcv = new BottomContentVo(count,num2,bottomcontent,writer2);
				ar.add(bcv);
			}
			request.setAttribute("list", ar);
			request.getRequestDispatcher("detail.jsp").forward(request, response);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
			
	}

}
package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
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 vo.ContextVo;
import vo.DBcon;
@WebServlet("/contextServlet")
public class contextServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		ArrayList<ContextVo> ar = new ArrayList<>();
		
		try {
			Connection conn = DBcon.getConnection();
			String query ="SELECT * FROM context";
			PreparedStatement stmt = conn.prepareStatement(query);
			ResultSet rs = stmt.executeQuery();
			while(rs.next()) {
				int num = rs.getInt("num");
				String title = rs.getString("title");
				String content = rs.getString("content");
				String writer = rs.getString("writer");
				String bottomwrite = rs.getString("bottomwrite");
				ContextVo cv = new ContextVo(num,title,content,writer,bottomwrite);
				ar.add(cv);
			}
			request.setAttribute("list", ar);
			request.getRequestDispatcher("context.jsp").forward(request, response);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
				
	}

}
package vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class BottomContentVo {
	int count;
	int num;
	String bottomcontent;
	String writer;
}
package vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ContextVo {
	int num;
	String title;
	String content;
	String writer;
	String bottomwriter;
}

  • 2)AJAX + JSON 사용

 

0619practice.zip
2.69MB

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
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 vo.ContextVo;
import vo.DBcon;
@WebServlet("/contextServlet")
public class contextServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		ArrayList<ContextVo> ar = new ArrayList<>();
		
		try {
			Connection conn = DBcon.getConnection();
			String query ="SELECT * FROM context";
			PreparedStatement stmt = conn.prepareStatement(query);
			ResultSet rs = stmt.executeQuery();
			while(rs.next()) {
				int num = rs.getInt("num");
				String title = rs.getString("title");
				String content = rs.getString("content");
				String writer = rs.getString("writer");
				String bottomwrite = rs.getString("bottomwrite");
				ContextVo cv = new ContextVo(num,title,content,writer,bottomwrite);
				ar.add(cv);
			}
			request.setAttribute("list", ar);
			request.getRequestDispatcher("context.jsp").forward(request, response);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
				
	}

}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>댓글보기</title>
	<script>
		window.onload = function() {
			const trs = document.querySelector("table");
			
			trs.addEventListener("click", c);
			
			function c() {
				if(event.target.className =="tbl") {
					location.href="detailServlet?num="+event.target.innerHTML;
				}else {
					return;
				}
			}
			
			
			
		}
	</script>
</head>
<body>
	<h1>게시판1</h1>
	<hr>
	<table>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>내용</th>
			<th>작성자</th>
		</tr>
	<c:forEach var="con" items="${list }">
		<tr>
			<td class="tbl">${con.num }</td>
			<td>${con.title }</td>
			<td>${con.content }</td>
			<td>${con.writer }</td>
		</tr>
			
	</c:forEach>
	</table>
</body>
</html>
package servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
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 vo.BottomContentVo;
import vo.ContextVo;
import vo.DBcon;

@WebServlet("/detailServlet")
public class detailServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			Connection conn = DBcon.getConnection();
			String query ="SELECT * FROM context where num=?";
			PreparedStatement stmt = conn.prepareStatement(query);
			String st = request.getParameter("num");
			int nums = Integer.parseInt(st);
			
			stmt.setInt(1, nums);
			ResultSet rs = stmt.executeQuery();
			rs.next();
			
			int num = rs.getInt("num");
			String title = rs.getString("title");
			String content = rs.getString("content");
			String writer = rs.getString("writer");
			String bottomwrite = rs.getString("bottomwrite");
			
			ContextVo cv = new ContextVo(num,title,content,writer,bottomwrite);
			request.setAttribute("cv", cv);
			
			/////////
			String query2 = "SELECT * FROM bottomcontext where num=? ORDER BY COUNT desc";
			PreparedStatement stmt2 =conn.prepareStatement(query2);
			stmt2.setInt(1, nums);
			ResultSet rs2 = stmt2.executeQuery();
			
			ArrayList<BottomContentVo> ar = new ArrayList<>();
			
			while(rs2.next()) {
				int count = rs2.getInt("count");
				int num2 = rs2.getInt("num");
				String bottomcontent = rs2.getString("bottomcontent");
				String writer2 = rs2.getString("writer");
				BottomContentVo bcv = new BottomContentVo(count,num2,bottomcontent,writer2);
				ar.add(bcv);
			}
			request.setAttribute("list", ar);
			//JSON미사용 서버리로드
			//request.getRequestDispatcher("detail.jsp").forward(request, response);
			//JSON사용
			request.getRequestDispatcher("detail2json.jsp").forward(request, response);
		} catch (Exception e) {
			e.printStackTrace();
		}
			
	}

}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script>
		window.onload = function() {
			const txts= document.querySelector("input[name=txt]");
			const writers= document.querySelector("input[name=writer]");
			const smtBtn = document.querySelector("#smt");
			let tables = document.querySelector("table");
			let spans = document.querySelector("#spans");
			
			smtBtn.addEventListener("click", function e() {
				const xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange =function() {
					if(xhttp.readyState ===4 && xhttp.status ===200) {
						let getlist = JSON.parse(this.responseText);
						spans.innerHTML = getlist.length;
						tables.innerHTML =
							'<tr>'+
								'<th>번호</th>'+
								'<th>작성자</th>'+
								'<th>댓글내용</th>'+
							'</tr>';
						for(let i =0; i<getlist.length; i++) {
							tables.innerHTML += 
							'<tr>'+
								'<td>'+getlist[i].count +'</td>'+
								'<td>'+getlist[i].writer +'</td>'+
								'<td>'+getlist[i].bottomcontent +'</td>'+
							'</tr>';
						}
							
					}
				}
				xhttp.open("Post","insertServlet", true);
				xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				const data = "number="+${cv.num}+"&content="+txts.value +"&writer="+writers.value;
				xhttp.send(data);
				
			}) 
		}
	</script>
</head>
<body>
	<p>제목:${cv.title } 작성자: ${cv.writer }</p>
	<p>내용</p>
	<p>${cv.content }</p>
	<hr>
	
		
	<h1>댓글수:<span id="spans">${list.size()}</span></h1>
	<div style="border: 1px solid black;">
		<p>댓글작성</p>
		작성자:<input type="text" name="writer"><br>
		내용:<input type="text" name="txt"><br>
		<input id="smt" type="submit" value="댓글등록">
		<br>
	</div>
	<table>
		<tr>
			<th>번호</th>
			<th>작성자</th>
			<th>댓글내용</th>
		</tr>
		<c:forEach var ="repeat" items="${list }">
			<tr>
				<td>${repeat.count }</td>
				<td>${repeat.writer }</td>
				<td>${repeat.bottomcontent }</td>
			</tr>
		</c:forEach>
	</table>
	
</body>
</html>
package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
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 org.json.JSONArray;

import vo.BottomContentVo;
import vo.ContextVo;
import vo.DBcon;

@WebServlet("/insertServlet")
public class insertServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String number = request.getParameter("number");
		int innum = Integer.parseInt(number);
		
		String content = request.getParameter("content");
		String writer =request.getParameter("writer");
		try {
			Connection conn = DBcon.getConnection();
			String query ="SELECT MAX(COUNT)+1 FROM bottomcontext WHERE num=?";
			PreparedStatement stmt = conn.prepareStatement(query);
			stmt.setInt(1, innum);
			
			ResultSet rs = stmt.executeQuery();
			rs.next();
			int maxnum = rs.getInt("MAX(COUNT)+1");
			
			String query2 = "INSERT INTO bottomcontext VALUES (?,?,?,?)";
			PreparedStatement stmt2 = conn.prepareStatement(query2);
			stmt2.setInt(1, maxnum);
			stmt2.setInt(2, innum);
			stmt2.setString(3, content);
			stmt2.setString(4, writer);
			
			stmt2.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//json으로 해보기
		request.setCharacterEncoding("utf-8");
		String number = request.getParameter("number");
		int innum = Integer.parseInt(number);
		
		String content = request.getParameter("content");
		String writer =request.getParameter("writer");
		
		try {
			Connection conn = DBcon.getConnection();
			String query ="SELECT MAX(COUNT)+1 FROM bottomcontext WHERE num=?";
			PreparedStatement stmt = conn.prepareStatement(query);
			stmt.setInt(1, innum);
			
			ResultSet rs = stmt.executeQuery();
			rs.next();
			int maxnum = rs.getInt("MAX(COUNT)+1");
			
			String query2 = "INSERT INTO bottomcontext VALUES (?,?,?,?)";
			PreparedStatement stmt2 = conn.prepareStatement(query2);
			stmt2.setInt(1, maxnum);
			stmt2.setInt(2, innum);
			stmt2.setString(3, content);
			stmt2.setString(4, writer);
			
			int result =stmt2.executeUpdate();
			
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			
			
			if (result ==1 ) {
				
				String query3 ="SELECT * FROM bottomcontext where num=? ORDER BY COUNT desc";
				PreparedStatement stmt3 = conn.prepareStatement(query3);
				stmt3.setInt(1, innum);
				
				ArrayList<BottomContentVo> ar = new ArrayList<>();
				ResultSet rs3 = stmt3.executeQuery();
				while(rs3.next()) {
					int count3 = rs3.getInt("count");
					int num3 = rs3.getInt("num");
					String bottomcontent3 = rs3.getString("bottomcontent");
					String writer3 = rs3.getString("writer");
					BottomContentVo bcv = new BottomContentVo(count3,num3,bottomcontent3,writer3);
					ar.add(bcv);
				}
				JSONArray jlist = new JSONArray(ar);
				String stringJlist = jlist.toString();
				out.print(stringJlist);
				
				//System.out.println(stringJlist);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
		
		
		
		
		
		
		
		
		
	}

}