ajax CRUD

limchard·2023년 11월 1일

CRUD DAO DTO INSERT JSONArray JSONObject ajax delete detail each()hidden hide()input select show()textarea update

ajax

목록 보기

3/3

Ajax는 비동기 방식이므로 하나의 주소에서 모든 입출력 Form을 작성하고, 이를 처리하는 back end(JSP에서 Action)만 다른 주소로 작성

MemoDto.java

package db.memo;

import java.sql.Timestamp;

public class MemoDto {

	private String num;
	private String writer;
	private String story;
	private String avata;
	private Timestamp writeday;
	
	public String getNum() {
		return num;
	}
	public void setNum(String num) {
		this.num = num;
	}
	public String getWriter() {
		return writer;
	}
	public void setWriter(String writer) {
		this.writer = writer;
	}
	public String getStory() {
		return story;
	}
	public void setStory(String story) {
		this.story = story;
	}
	public String getAvata() {
		return avata;
	}
	public void setAvata(String avata) {
		this.avata = avata;
	}
	public Timestamp getWriteday() {
		return writeday;
	}
	public void setWriteday(Timestamp writeday) {
		this.writeday = writeday;
	}
}

MemoDao.java

package db.memo;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import java.util.Vector;

import oracle_db.DBConnect;

public class MemoDao {

	DBConnect db=new DBConnect();
	
	// 추가
	public void insertMemo(MemoDto dto) {
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="insert into memo values(seq1.nextval,?,?,?,sysdate)";
		
		try {
			pstmt=conn.prepareStatement(sql);
			
			pstmt.setString(1, dto.getWriter());
			pstmt.setString(2, dto.getStory());
			pstmt.setString(3, dto.getAvata());
			
			pstmt.execute();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(pstmt, conn);
		}
	}
	
	// 조회
	public List<MemoDto> getAllMemos(){
		List<MemoDto> list=new Vector<MemoDto>();
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from memo order by num desc";
		
		try {
			pstmt=conn.prepareStatement(sql);
			rs=pstmt.executeQuery();
			
			while(rs.next()) {
				MemoDto dto=new MemoDto();
				
				dto.setNum(rs.getString("num"));
				dto.setWriter(rs.getString("writer"));
				dto.setStory(rs.getString("story"));
				dto.setAvata(rs.getString("avata"));
				dto.setWriteday(rs.getTimestamp("writeday"));
				
				list.add(dto);
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		}
		return list;
	}
	
	// 삭제
	
	// 1. dao에서 삭제 메서드 만들기 deleteMemo
	// 2. delete를 처리해주는 jsp 만들기. memodelete.jsp
	// 3. 다시 memo.html에 와서 삭제관련 이벤트 해주기 -> alert 창을 통해 이벤트가 먹히는지 먼저 확인해야 함 
	// 4. 수정을 누르면 num값 받아 오는지 alert창으로 확인 후 삭제 ajax로 삭제 한다.
	// 5. 성공시 다시 list() 호출해야 한다.
	
	public void deleteMemo(String num) {
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="delete from memo where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			
			pstmt.setString(1, num);
			
			pstmt.execute();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(pstmt, conn);
		}	
	}
	
	// 수정
	// num에 해당하는 dto 반환하기 
	public MemoDto getData(String num) {
		MemoDto dto=new MemoDto();
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from memo where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			
			pstmt.setString(1, num);
			rs=pstmt.executeQuery();
			
			if(rs.next()) {
				
				dto.setNum(rs.getString("num"));
				dto.setWriter(rs.getString("writer"));
				dto.setStory(rs.getString("story"));
				dto.setAvata(rs.getString("avata"));
				dto.setWriteday(rs.getTimestamp("writeday"));
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		}
		return dto;
	}
	
	public void updateMemo(MemoDto dto) {
	
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="update memo set writer=?,story=?,avata=? where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			
			
			// 바인딩
			
			pstmt.setString(1, dto.getWriter());
			pstmt.setString(2, dto.getStory());
			pstmt.setString(3, dto.getAvata());
			pstmt.setString(4, dto.getNum());
			
			pstmt.execute();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(pstmt, conn);
		}
	}
}

memoinsert.jsp

<%@page import="db.memo.MemoDto"%>
<%@page import="db.memo.MemoDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	MemoDao dao=new MemoDao();
	
	// 엔코딩
	request.setCharacterEncoding("utf-8");
	
	// data 읽기 (writer,story,avata)
	String writer=request.getParameter("writer");
	String story=request.getParameter("story");
	String avata=request.getParameter("avata");
	
	// dto 에 묶기. 다시 setting 해줘야 insert에 값을 담을 수 있다.
	MemoDto dto=new MemoDto();
	dto.setWriter(writer);
	dto.setStory(story);
	dto.setAvata(avata);
	
	// insert 호출ㅇ하여 dto 넣어주기 
	dao.insertMemo(dto);
%>

메인페이지 (memo.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Moirai+One&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<style>
	div.memo{
		position: absolute;
		/* border: 1px solid gray; */
		font-size: 1.4em;
		font-family: Nanum Pen Script;
	}
	div.button{
		left: 150px;
		top: 30px;
		width: 400px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}
	div.addform{
		left: 100px;
		top: 150px;
		width: 500px;
		height: 500px;
		padding: 20px 20px;
	}
	div.updateform{
		left: 100px;
		top: 150px;
		width: 500px;
		height: 500px;
		padding: 20px 20px;
	}
	div.list{
		left: 700px;
		top: 100px;
		width: 600px;
		height: 700px;
		padding: 20px 20px;
	}
	img.avata{
		cursor: pointer;
	}
	img.select{
		border: 2px solid pink;
	}
	span.writeday{
		float: right;
		color: #bbb;
	}
	span.writer{
		font-weight: bold;
	}
	span.mod{
		margin-left: 200px; cursor: pointer;
	}
	span.del{
		cursor: pointer;
	}
	
</style>
<script>
	$(function(){
		// 처음 로딩이 되었을 때 목록이 출력되도록 합시다.
		list(); // 단순 list(); 함수 불러오기 
		$("div.addform").hide();
		$("div.updateform").hide();
		
		// btnadd 누르면 addform 나타나기
		$("#btnadd").click(function(){
			$("div.addform").slideToggle('slow'); // 클릭 시 나타났다 사라졌다 
		})
		
		// 아바타 2번인덱스에 select class 추가
		$("img.avata").eq(2).addClass("select"); // 초기셋팅 (분홍box 처리 )
		// 아바타의 2번 인덱스의 src값을 얻어서 input tag에 넣어줘야 한다.
		$("#avata").val($("img.avata").eq(2).attr("src")); // hidden 처리한 곳에 value값(src) 을 추가함 (나중에 db에 넣기 위해)
		
		// 아바타 선택하면 값 변경되기 -> 아바타에 선택되어 있는 box가 선택한 곳으로 이동 	 
		$("img.avata").click(function(){
			$(this).addClass("select");
			$(this).siblings().removeClass("select");
			$("#avata").val($(this).attr("src"));
		})
		
		// 수정폼의 아바타선택하면 값 변경되기 
		$("img.uavata").click(function(){
			$(this).addClass("select");
			$(this).siblings().removeClass("select");
			$("#uavata").val($(this).attr("src"));
		})
		
		// 저장(insert).. 추가 성공시 다시 list(); 호출해야 한다.
		$("td.dbsave").click(function(){
			var data=$("#addform").serialize();
			// alert(data);
			
			$.ajax({
				type:"post", // url 노출되어 있고, 대용량 파일의 경우 post가 유리. 특히 파일 upload는 무조건 post 사용해야 합니다.
				url:"memoinsert.jsp",
				dataType:"html",
				data:data,
				success:function(res){
					// 추가 성공시 다시 목록 출력 
					list(); 
					// 입력값 지우기 (초기화)
					$("#writer").val("");
					$("#story").val("");
					
					// 선택된 아바타 클래스 제거
					$("img.avata").removeClass("select");
					$("img.avata").eq(2).addClass("select");
					$("#avata").val($("img.avata").eq(2).attr("src"));
				}
			})
		})
		
		// 삭제 이벤트 
		$(document).on("click","span.del",function(){ // 동적 메서드 사용. 처음부터 있던 form이 아니라, 이벤트로 생겨난 곳에 '삭제' 가 있기 때문이다.
			var num=$(this).attr("num");
			// alert(num);
			
			$.ajax({
				type:"get",
				url:"memodelete.jsp",
				dataType:"html",
				data:{"num":num},
				success:function(){
					list();
				}
			});	
		}); 
		
		// list의 수정버튼 
		$(document).on("click","span.mod",function(){
			var num=$(this).attr("num");
			// alert(num);
			
			// 수정폼의 unum에 num(seq)을 넣어야 한다.
			$("#unum").val(num);
			
			$.ajax({
				type:"get",
				url:"memoGetData.jsp",
				dataType:"json",
				data:{"num":num},
				success:function(res){
					// 수정폼 태그 안에 넣어주기 (json으로 띄어주기)
					$("#unum").val(res.num);
					$("#uwriter").val(res.writer);
					$("#ustory").val(res.story);
					$("#uavata").val(res.avata);
					
					list();
					
					// 해당 이미지 (res에서 넘어온 이미지)의 select클래스 추가하기 
					$("img.uavata").each(function(i,ele){
						if($(this).attr("src")==res.avata){
							$(this).addClass("select");
						} else {
							$(this).removeClass("select");
						}
					});
					// 추가폼이 있다면 숨기고, 수정폼을 나타낸다. (값을 다 띄우고 가장 마지막에 한다.)
					$("div.addform").hide();
					$("div.updateform").show();
				}
			});
		});
		
		$("td.dbupdate").click(function(){
			var data=$("#updateform").serialize();
			// alert(data);
			
			$.ajax({
				type:"post", // url 노출되어 있고, 대용량 파일의 경우 post가 유리. 특히 파일 upload는 무조건 post 사용해야 합니다.
				url:"memoUpdate.jsp",
				dataType:"html",
				data:data,
				success:function(res){
					// 추가 성공시 다시 목록 출력 
					list(); 
					// 입력값 지우기 (초기화)
					$("#uwriter").val("");
					$("#ustory").val("");
					
					// 선택된 아바타 클래스 제거
					$("img.uavata").removeClass("select");
					$("img.uavata").eq(2).addClass("select");
					$("#uavata").val($("img.uavata").eq(2).attr("src"));
				}
			})
			// $("div.addform").show();
			$("div.updateform").hide();
		});
		
	});
	
	// 사용자 함수는 $(fucntion(){}) 에 넣으면 안된다.
	// 대표적인 사용자 함수.. list
	function list(){
		
		$.ajax({
			type:"get",
			dataType:"json",
			url:"memolist.jsp",
			success:function(data){
				// alert(data.length);
				var s="";
				if(data.length==0){
					s+="<h3 class='alert alert-info'>저장된 메모가 없습니다.</h3>"
				} else {
					$.each(data,function(i,ele){ // json은 배열로 값이 넘어온다. 
						s+="<table class='table'>";
						s+="<tr><td>";
						s+="<span class='writer'>작성자: "+ele.writer+"</span>";
						s+="<span class='writeday'>"+ele.writeday+"</span>";
						s+="<span class='mod' num="+ele.num+" style='color: cornflowerblue;'>수정 |</span>";
						s+="<span class='del' num="+ele.num+" style='color: pink;'> 삭제</span>";
						s+="<br>";
						s+="<pre>"+ele.story;
						s+="<img src='"+ele.avata+"' align='right' width='80'>";
						s+="</pre>";
						s+="</td></tr>";
						s+="</table><br>";
					});
				}
				$(".list").html(s);
			}
		})
	}
	
</script>
</head>
<body>
	<div class="memo button">
		<button type="button" class="btn btn-info" id="btnadd">메모추가</button>
	</div>
	
	<div class="memo addform">
		<form id="addform"> <!-- action은 action페이지로 넘어가서 redirect 하는 방식이다. ajax에서는 사용 안한다.-->
			<table class="table table-bordered">
				<tr>
					<th style="width: 120px; background-color: #e0ffff;">작성자</th>
					<td>
						<input type="text" class="form-control" name="writer" id="writer" style="width: 120px;">
					</td>
				</tr>
				<tr>
					<th style="width: 120px; background-color: #e0ffff;">메모</th>
					<td>
						<textarea class="form-control" name="story" id="story" style="width: 270px; height: 150px;"></textarea> <!-- 수정은 >< 사이에다가 해야한다. --> 
					</td>
				</tr>
				<tr>
					<th style="width: 120px; background-color: #e0ffff;">아바타</th>
					<td>
						<input type="hidden" name="avata" id="avata"> <!-- 이미지로 나타난다. 굳이 글씨가 나올 필요가 없으니까 hidden을 사용한다. // db주소에 넘기기 위해 가상의 공간을 만들어 놓았다고 생각하자. -->
						<script>
							// 아바타 10개 넣기 
							var s="";
							for(var i=1;i<=10;i++){
								s+="<img src='../img/avata/b"+i+".png' width='50' class='avata'>";
								if(i==5){
									s+="<br>";
								}
							}
							document.write(s);
						</script>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center" style="cursor: pointer; background-color: #e0ffff;" class="dbsave">
						DB에 저장하기	
					</td>
				</tr>
			</table>
		</form>
	</div>
	
	<div class="memo updateform">
		<form id="updateform"> <!-- action은 action페이지로 넘어가서 redirect 하는 방식이다. ajax에서는 사용 안한다.-->
		<!-- hidden 값 넣어주기. (받아온 seq값. ) ) -->
		<input type="hidden" name="unum" id="unum" > <!-- 수정폼의 name,id와 update폼의 name,id는 달라야 한다. -->
		<!-- // value가 없으므로 id나 name을 통해서 값을 받아와야 한다. -->
			<table class="table table-bordered">
				<tr>
					<th style="width: 120px; background-color: #e0ffff;">작성자</th>
					<td>
						<input type="text" class="form-control" name="uwriter" id="uwriter" style="width: 120px;">
					</td>
				</tr>
				<tr>
					<th style="width: 120px; background-color: #e0ffff;">메모</th>
					<td>
						<textarea class="form-control" name="ustory" id="ustory" style="width: 270px; height: 150px;"></textarea> <!-- 수정은 >< 사이에다가 해야한다. --> 
					</td>
				</tr>
				<tr>
					<th style="width: 120px; background-color: #e0ffff;">아바타</th>
					<td>
						<input type="hidden" name="uavata" id="uavata"> <!-- 이미지로 나타난다. 굳이 글씨가 나올 필요가 없으니까 hidden을 사용한다. // db주소에 넘기기 위해 가상의 공간을 만들어 놓았다고 생각하자. -->
						<script>
							// 아바타 10개 넣기 
							var s="";
							for(var i=1;i<=10;i++){
								s+="<img src='../img/avata/b"+i+".png' width='50' class='uavata'>";
								if(i==5){
									s+="<br>";
								}
							}
							document.write(s);
						</script>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center" style="cursor: pointer; background-color: #e0ffff;" class="dbupdate">
						DB에 수정하기	
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="memo list">list</div>
</body>
</html>

memolist.jsp

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.util.List"%>
<%@page import="db.memo.MemoDao"%>
<%@page import="db.memo.MemoDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	MemoDao dao=new MemoDao();

	// 전체목록 가져오기 
	List<MemoDto> list=dao.getAllMemos();
	JSONArray arr=new JSONArray();
	
	//JSONObject size=new JSONObject();
	//size.put("size",list.size());
	//arr.add(size);

	SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm");
	for(MemoDto dto:list){
		JSONObject ob=new JSONObject();
		ob.put("num", dto.getNum());
		ob.put("writer", dto.getWriter());
		ob.put("story", dto.getStory());
		ob.put("avata", dto.getAvata());
		ob.put("writeday", sdf.format(dto.getWriteday()));
		
		// arr에 추가 
		arr.add(ob);	
	}
%>

<%=arr.toString()%>

memoGetData.jsp

<%@page import="org.json.simple.JSONObject"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="db.memo.MemoDto"%>
<%@page import="db.memo.MemoDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

 <%
 	MemoDao dao=new MemoDao();
 	
 	String num=request.getParameter("num");
 	MemoDto dto=dao.getData(num);
 	SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-hh HH:mm");
 	
 	JSONObject ob=new JSONObject();
 	
 	ob.put("num", dto.getNum());
	ob.put("writer", dto.getWriter());
	ob.put("story", dto.getStory());
	ob.put("avata", dto.getAvata());
	ob.put("writeday", sdf.format(dto.getWriteday()));
 	
 %>
 <%=ob.toString() %>

memoUpdate.jsp

<%@page import="db.memo.MemoDto"%>
<%@page import="db.memo.MemoDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	MemoDao dao=new MemoDao();	

	String num=request.getParameter("unum");
	String writer=request.getParameter("uwriter");
	String story=request.getParameter("ustory");
	String avata=request.getParameter("uavata");
	
	MemoDto dto=new MemoDto();
	dto.setNum(num);
	dto.setWriter(writer);
	dto.setStory(story);
	dto.setAvata(avata);
	
	dao.updateMemo(dto);
%>

memodelete.jsp

<%@page import="db.memo.MemoDto"%>
<%@page import="db.memo.MemoDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	request.setCharacterEncoding("utf-8");

	MemoDao dao=new MemoDao();
	String num=request.getParameter("num");
	dao.deleteMemo(num);
%>

예제 2

AjaxBoardDto.java

package db.ajaxboard;

import java.sql.Timestamp;

public class AjaxBoardDto {
	private String num;
	private String writer;
	private String subject;
	private String story;
	private String avata;
	private Timestamp writeday;
	
	public String getNum() {
		return num;
	}
	public void setNum(String num) {
		this.num = num;
	}
	public String getWriter() {
		return writer;
	}
	public void setWriter(String writer) {
		this.writer = writer;
	}
	public String getSubject() {
		return subject;
	}
	public void setSubject(String subject) {
		this.subject = subject;
	}
	public String getStory() {
		return story;
	}
	public void setStory(String story) {
		this.story = story;
	}
	public String getAvata() {
		return avata;
	}
	public void setAvata(String avata) {
		this.avata = avata;
	}
	public Timestamp getWriteday() {
		return writeday;
	}
	public void setWriteday(Timestamp writeday) {
		this.writeday = writeday;
	}
}

AjaxBoardDao.java

package db.ajaxboard;

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

import oracle_db.DBConnect;

public class AjaxBoardDao {

	DBConnect db=new DBConnect();
// 	insert
	public void insertBoard(AjaxBoardDto dto) {
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="insert into ajaxboard values(seq1.nextval,?,?,?,?,sysdate)";
		
		try {
			pstmt=conn.prepareStatement(sql);
			
			// 바인딩
			pstmt.setString(1, dto.getWriter());
			pstmt.setString(2, dto.getSubject());
			pstmt.setString(3, dto.getStory());
			pstmt.setString(4, dto.getAvata());
			
			// 출력
			pstmt.execute();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(pstmt, conn);
		}
	}
	
	// select
	public ArrayList<AjaxBoardDto> getAllDatas(){
		
		ArrayList<AjaxBoardDto> list=new ArrayList<AjaxBoardDto>();
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from ajaxboard order by num desc";
		
		try {
			pstmt=conn.prepareStatement(sql);
			rs=pstmt.executeQuery();
			
			while(rs.next()) {
				AjaxBoardDto dto=new AjaxBoardDto();
				
				dto.setNum(rs.getString("num"));
				dto.setWriter(rs.getString("writer"));
				dto.setSubject(rs.getString("subject"));
				dto.setStory(rs.getString("story"));
				dto.setAvata(rs.getString("avata"));
				dto.setWriteday(rs.getTimestamp("writeday"));
				
				list.add(dto);
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		} return list;
	}
	// update (하나 찾기).. detail page
	
	public AjaxBoardDto getData(String num) {
		AjaxBoardDto dto=new AjaxBoardDto();
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from ajaxboard where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			// 바인딩
			pstmt.setString(1, num);
			
			rs=pstmt.executeQuery();
			
			if(rs.next()) {
				
				dto.setNum(rs.getString("num")); 
				dto.setWriter(rs.getString("writer"));
				dto.setSubject(rs.getString("subject"));
				dto.setStory(rs.getString("story"));
				dto.setAvata(rs.getString("avata"));
				dto.setWriteday(rs.getTimestamp("writeday"));
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		}
		return dto;
	}
	
	// update 가즈아!!
	public void updateBoard(AjaxBoardDto dto) {
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="update ajaxboard set writer=?,subject=?,avata=?,story=? where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			
			// 바인딩
			pstmt.setString(1, dto.getWriter());
			pstmt.setString(2, dto.getSubject());
			pstmt.setString(3, dto.getAvata());
			pstmt.setString(4, dto.getStory());
			pstmt.setString(5, dto.getNum());
			
			pstmt.execute();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(pstmt, conn);
		}	
	}
	
	// delete
	public void deleteBoard(String num) {
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="delete from ajaxboard where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			
			// 바인딩
			pstmt.setString(1, num);
			
			pstmt.execute();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(pstmt, conn);
		}
	}
}

insertBoard.jsp

<%@page import="db.ajaxboard.AjaxBoardDao"%>
<%@page import="db.ajaxboard.AjaxBoardDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%

// 엔코딩 
request.setCharacterEncoding("utf-8");
// 입력될 변수 호출
String writer=request.getParameter("writer");
String subject=request.getParameter("subject");
String story=request.getParameter("story");
String avata=request.getParameter("avata");

AjaxBoardDto dto=new AjaxBoardDto();
dto.setWriter(writer);
dto.setSubject(subject);
dto.setStory(story);
dto.setAvata(avata);

AjaxBoardDao dao=new AjaxBoardDao();
dao.insertBoard(dto);
%>

매인 page (homeBoard.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Moirai+One&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<style>
	div.list,div.detail,div.updateform{
		position: absolute;
		left: 100px;
		top: 100px;
	}
	div.writeform{
		position: absolute;
		left: 900px;
		top: 150px;
	}
	span.detail{
		cursor: pointer;
	}
	div.list *,idv.writeform *,div.detail *,div.updateform *{
		font-family: Nenum Pen Script;
		font-size: 15pt;
	}
</style>
<script>
$(function(){
		list();
		
		$("div.writeform").hide();
		$("div.updateform").hide();
		
		$("#btnwrite").click(function(){
			$("div.writeform").toggle('slow');
			
		});
		
	// db 추가
	
	$("#btnadd").click(function(){
		var writer=$("#writer").val();
		var subject=$("#subject").val();
		var avata=$("#avata").val();
		var story=$("#story").val();
		
		console.log(writer,subject,avata,story); // 확인방법 1 
		
//		var data="writer="+writer+"&subject="+subject+"&story="+story+"&avata="+avata;
//		alert(data); // 확인방법 2

		$.ajax({
			type:"post",
			dataType:"html",
			url:"insertBoard.jsp",
			data:{"writer":writer,"subject":subject,"story":story,"avata":avata},
			success:function(){
				
				// 다시출력 
				list();
				
				// insert시 초기화
				$("#writer").val("");
				$("#subject").val("");
				$("#story").val("");
				
				// 입력폼 사라지게 하기
				$("div.writeform").hide();
			}
		});
	});
	
	// 제목을 클릭했을 때 내용보기 
	$(document).on("click","span.detail",function(){
		
		// span에 심어놓은 num 가져오기
		var num=$(this).attr("num");
		// alert(num);
		
		$.ajax({
			type:"get",
			dataType:"json",
			url:"detailBoard.jsp",
			data:{"num":num},
			success:function(data){
				// alert(data.writer);
					var s="<table class='table table-bordered' style='width:500px;'>";
					s+="<tr>";
					s+="<td><b style='font-size:1.3em;'>"+data.subject+"</b>";
					s+="<span style='float:right; color:gray;'>"+data.writeday+"</span></td></tr>";
					s+="<tr><td>";
					s+="<img src='"+data.avata+"' width='100' align='left'>";
					s+="<br>"+data.writer+"</td></tr>";
					s+="<tr height='150'><td><pre>"+data.story+"</pre></td></tr>";
					s+="<tr><td align='right' num='"+data.num+"'>";
					s+="<button type='button' class='btn btn-default btnadd'>글쓰기</button>";
					s+="<button type='button' class='btn btn-warning btnlist'>목록</button>";
					s+="<button type='button' class='btn btn-info btnmodify'>수정</button>";
					s+="<button type='button' class='btn btn-success btndelete'>삭제</button>";
					s+="</td></tr></table>";
					
					$("div.detail").html(s);

				// list 숨기기
				$("div.list").hide();
				// detail 페이지 보이기 
				$("div.detail").show();
				
			}
		});
	});
	// 목록보기
	$(document).on("click",".btnlist",function(){
		$("div.list").show();
		$("div.detail").hide();
	})
	
	// 내용보기의 글쓰기 버튼
	$(document).on("click",".btnadd",function(){
		$("div.detail").hide();
		$("div.list").show();
		$("div.writeform").show();
	});
	
	// 삭제
	$(document).on("click",".btndelete",function(){
		var num=$(this).parent().attr("num");
		 // alert(num);
		
		$.ajax({
			type:"get",
			dataType:"html", // 값을 받아오면 json, 안받아오면 html.. 
			url:"deleteBoard.jsp",
			data:{"num":num},
			success:function(res){
				list();// 목록 다시 호출
				
				// 내용보기 안보이게 하기
				$("div.detail").hide();
				$("div.list").show(); // 목록 보이게 
				
			}
		})
	});
	
	// 수정 (클릭 시 값 받아오기 )
	$(document).on("click",".btnmodify",function(){
		var num=$(this).parent().attr("num");
	 	// alert(num);
		
		// 상세보기에서 사용하던 detailBoard.jsp로 부터 json을 얻어서 수정form을 출력하고, 수정form이 보이게 해야한다.
		$.ajax({
			type:"get",
			dataType:"json", // detailBoard 에서 json을 사용했다. 그걸 얻어온 것이다. 
			url:"detailBoard.jsp",
			data:{"num":num},
			success:function(data){
				// 수정 form에 data를 넣어주기.. 즉 원래 기입되어 있던 항목들을 그대로 가져와 입력창에 띄워주기  
				$("#unum").val(data.num); // hidden 으로 해놨기 때문에 여기에 기입해줌 (기준점이 됨)
				$("#uwriter").val(data.writer);
				$("#usubject").val(data.subject);
				$("#uavata").val(data.avata);
				$("#ustory").val(data.story);
				
				// 내용보기(detail page) 가 안보이게 해야 합니다.
				$("div.detail").hide();
				// 수정 form(update form)이 보이게 해야 합니다.
				$("div.updateform").show();
			}
		});
	})
	// 수정 (db에 넣기 )
	$("#btnupdate").click(function(){
		var data=$("#updatefrm").serialize();
		// alert(data);
		
		$.ajax({
			type:"post",
			dataType:"html",
			url:"updateBoard.jsp",
			data:data,
			success:function(){
				// 수정했으니 다시 목록
				list();
				
				// 수정폼 안보이게
				$("div.updateform").hide();
				
				// 목록
				$("div.list").show();		
			}
		});
	});
});
	
	// 출력하는 사용자 함수 	
	function list(){
		$.ajax({
			type:"get",
			url:"listBoard.jsp",
			dataType:"json",
			success:function(res){
				// alert(res.length); 값 넘어오는거 확인 완료!
				
				// 제목출력
				var s="<table class='table table-bordered' style='width:700px;'>";
					s+="<caption align='top'><b>AJAX로 게시판 만들기<b></caption>";
					s+="<tr class='table-info'>";
					s+="<th width='60'>번호</th>";
					s+="<th width='260'>제목</th>";
					s+="<th width='120'>작성자</th>";
					s+="<th width='160'>작성일</th>";
					s+="</tr>";
					if(res.length==0){
						s+="<tr>";
						s+="<td colspan='4' align='center'>";
						s+="<b>저장된 글이 없습니다</b>";
						s+="</td></tr>";
					} else {
						// 데이터가 한개 이상인 경우
						$.each(res,function(i,item){
							s+="<tr>";
							s+="<td align='center'>"+(i+1)+"</td>";
							s+="<td>";	
							s+="<span num='"+item.num+"' class='detail'>"+item.subject+"</span>";
							s+="</td>";
							s+="<td>"+item.writer+"</td>";
							s+="<td>"+item.writeday+"</td>";
							s+="</tr>"		
						});
					}
				$("#board").html(s);	
			}	
		})
	}
</script>

</head>
<body>
	<div class="list">
		<button type="button" class="btn btn-info" id="btnwrite">글쓰기</button>
		<div id="board"></div>
	</div>
	
	<div class="writeform">
		<form>
			<table class="table table-borderd" style="width: 300px;">
				<caption align="top"><b>게시글추가</b></caption>
				<tr>
					<th>작성자</th>
					<td>
						<input type="text" id="writer" style="width: 120px;" class="form-control">
					</td>
				</tr>
				<tr>
					<th>제목</th>
					<td>
						<input type="text" id="subject" style="width: 180px;" class="form-control">
					</td>
				</tr>
				<tr>
					<th>상태이미지</th>
					<td>
						<select id="avata" class="form-control">
							<option value="../img/avata/b1.png">i seoul you</option>
							<option value="../img/avata/b2.png">24시간이 모자라</option>
							<option value="../img/avata/b5.png">HBD</option>
							<option value="../img/avata/b8.png">좋댓구알</option>
							<option value="../img/avata/b6.png">OTL</option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<textarea style="width: 290px; height: 80px;" id="story" class="form-control"></textarea>
// textarea는 나중에 수정할 때도 태그 사이에서만 수정 가능 원래는 colspan줘서 th없이 메모장 작성 가능하게 만듦
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="button" class="btn btn-success" id="btnadd">DB추가</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	
	<div class="updateform">
		<form id="updatefrm">
			
			<!-- num hidden -->
			<input type="hidden" name="unum" id="unum"> <!-- 이게 중요! 기준점  -->
			<table class="table table-borderd" style="width: 300px;">
				<caption align="top"><b>게시글수정</b></caption>
				<tr>
					<th>작성자</th>
					<td>
						<input type="text" id="uwriter" name="uwriter" style="width: 120px;" class="form-control">
					</td>
				</tr>
				<tr>
					<th>제목</th>
					<td>
						<input type="text" id="usubject" name="usubject" style="width: 180px;" class="form-control">
					</td>
				</tr>
				<tr>
					<th>상태이미지</th>
					<td>
						<select id="uavata" name="uavata" class="form-control">
							<option value="../img/avata/b1.png">i seoul you</option>
							<option value="../img/avata/b2.png">24시간이 모자라</option>
							<option value="../img/avata/b5.png">HBD</option>
							<option value="../img/avata/b8.png">좋댓구알</option>
							<option value="../img/avata/b6.png">OTL</option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<textarea style="width: 290px; height: 80px;" id="ustory" name="ustory" class="form-control"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="button" class="btn btn-danger" id="btnupdate">DB수정</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	
	<div class="detail"></div>
</body>
</html>

listBoard.jsp

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="db.ajaxboard.AjaxBoardDto"%>
<%@page import="java.util.ArrayList"%>
<%@page import="db.ajaxboard.AjaxBoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	AjaxBoardDao db=new AjaxBoardDao();
	ArrayList<AjaxBoardDto> list=db.getAllDatas();
	SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
	
	JSONArray arr=new JSONArray();
	for(AjaxBoardDto dto:list){
		JSONObject ob=new JSONObject();
		ob.put("num", dto.getNum()); // key값은 무조건 문자열 형태이다.
		ob.put("writer", dto.getWriter());
		ob.put("subject", dto.getSubject());
		ob.put("story", dto.getStory());
		ob.put("avata",dto.getAvata());
		ob.put("writeday",sdf.format(dto.getWriteday()));
		arr.add(ob);
	}
%>

<%=arr.toString() %>

updateBoard.jsp

<%@page import="db.ajaxboard.AjaxBoardDao"%>
<%@page import="db.ajaxboard.AjaxBoardDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// 엔코딩 
request.setCharacterEncoding("utf-8");

// 입력될 변수 호출
String num=request.getParameter("unum");
String writer=request.getParameter("uwriter");
String subject=request.getParameter("usubject");
String story=request.getParameter("ustory");
String avata=request.getParameter("uavata");

AjaxBoardDto dto=new AjaxBoardDto();
dto.setNum(num);
dto.setWriter(writer);
dto.setSubject(subject);
dto.setStory(story);
dto.setAvata(avata);

AjaxBoardDao dao=new AjaxBoardDao();
dao.updateBoard(dto);
%>

deleteBoard.jsp

<%@page import="db.ajaxboard.AjaxBoardDao"%>
<%@page import="db.ajaxboard.AjaxBoardDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
String num=request.getParameter("num");
AjaxBoardDao dao=new AjaxBoardDao();
dao.deleteBoard(num);
%>

detailBoard.jsp

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="db.ajaxboard.AjaxBoardDto"%>
<%@page import="db.ajaxboard.AjaxBoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	String num=request.getParameter("num");

	AjaxBoardDao dao=new AjaxBoardDao();
	AjaxBoardDto dto=dao.getData(num);
	SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
	
	JSONObject ob=new JSONObject();
	
		ob.put("num", dto.getNum()); // key값은 무조건 문자열 형태이다.
		ob.put("writer", dto.getWriter());
		ob.put("subject", dto.getSubject());
		ob.put("story", dto.getStory());
		ob.put("avata",dto.getAvata());
		ob.put("writeday",sdf.format(dto.getWriteday()));
%>
<%=ob.toString() %>

업로드중..

limchard

java를 잡아...... 하... 이게 맞나...

이전 포스트

ajax CRUD

ajax

Ajax는 비동기 방식이므로 하나의 주소에서 모든 입출력 Form을 작성하고, 이를 처리하는 back end(JSP에서 Action)만 다른 주소로 작성

예제 2

ajax DataBase 연결

0개의 댓글

관련 채용 정보