Server

AJAX STEP 7 - 테이블 저장 AJAX

2023. 5. 17. 12:12
728x90

★ 테이블을 이용한 AJAX

 

■ 필요 파일들

com.test.java > Ex11.java
com.test.java > Ex11Data.java
com.test.java > Ex11DTO.java

views > ex11.jsp

 

■ 데이터베이스

create table ajaxTable
(
    seq number primary key,
    x number not null,
    y number not null,
    ck char(1) not null     --'y', 'n'
);

select * from ajaxTable;

create sequence tableseq;

 

■ 소스코드

  • Ex11.java
package com.test.ajax;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex11.do")
public class Ex11 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//Ex11.java
		AjaxDAO dao = new AjaxDAO();
		
		List<Ex11DTO> list = dao.listCell();
		
		req.setAttribute("list", list);

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex11.jsp");
		dispatcher.forward(req, resp);
	}

}

 

  • Ex11Data.java
package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex11data.do")
public class Ex11Data extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//Ex11Data.java
		String x = req.getParameter("x");
		String y = req.getParameter("y");
		String ck = req.getParameter("ck");
		
		System.out.println(x);
		System.out.println(y);
		System.out.println(ck);
		
		Ex11DTO dto = new Ex11DTO();
		
		dto.setX(x);
		dto.setY(y);
		dto.setCk(ck);
		
		AjaxDAO dao = new AjaxDAO();
		
		//1. 검사
		// - select
		//2. 처음 클릭
		// - insert
		//3. 다시 클릭
		// - update
		
		//*** DAO에서는 1개의 메소드가 1개의 업무만 구현한다.
		//	  DAO 안에서는 알고리즘을 구현하지 않는다.
		//	  DAO.메소드() == 딱 1개의 SQL만 실행
		
		//boolean result = dao.checkCell(dto);
		
		if (dao.checkCell(dto)) {
			dao.editCell(dto);
		} else {
			dao.addCell(dto);
		}
		
		
		
	}

}

 

  • Ex11DTO.java
package com.test.ajax;

import lombok.Data;

@Data
public class Ex11DTO {
	private String x;
	private String y;
	private String ck;
}

 

  • ex11.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>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

	#tbl1 {
		width : auto;
	}
	#tbl1 td {
		width: 100px;
		height: 100px;
	}
</style>
</head>
<body>

	<h1>테이블 상태 유지</h1>
	
	<table id="tbl1">
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#tbl1 td').click(function() {
		
		//rgb(255, 215, 0)
		//$(this).css('background-color', 'gold');
		//alert($(this).css('background-color'));
		
// 		alert(this.cellIndex);	<td>
// 		alert(this.parentElement.rowIndex); <tr>
		let x = this.cellIndex;
		let y = this.parentElement.rowIndex;
		let ck = 'n';
		
		console.log(x,y);
		
		if($(this).css('background-color') == 'rgb(255, 215, 0)') {
			$(this).css('background-color', 'transparent');
			ck = 'n';
		}else {
			$(this).css('background-color', 'gold');
			ck = 'y';
		}
		
		//x, y, ck
		
		$.ajax({
			type: 'POST',
			url: '/ajax/ex11data.do',
			data: {
				x: x,
				y: y,
				ck: ck
			},
			error: (a,b,c)=>console.log(a,b,c)
		});
	});
	
	//셀 상태 설정
	<c:forEach items="${list}" var="dto">
	$('#tbl1 tbody')
		.children().eq(${dto.y})
		.children().eq(${dto.x})
		.css('background-color', '${dto.ck == 'y' ? 'gold' : 'transparent'}');
	</c:forEach>
	
</script>
</body>
</html>

 

  •  DAO.java
    • 1. 검사
    • - select
    • 2. 처음 클릭
    • - insert
    • 3. 다시 클릭
    • - update
public boolean checkCell(Ex11DTO dto) {
		
		try {
			
			String sql = "select count(*) as cnt from ajaxTable"
						+ " where x = ? and y = ?";
			
			pstat = conn.prepareStatement(sql);
			pstat.setString(1, dto.getX());
			pstat.setString(2, dto.getY());
			
			rs = pstat.executeQuery();
			
			if(rs.next()) {
				return rs.getInt("cnt") == 1 ? true : false;
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return false;
	}

	public void editCell(Ex11DTO dto) {
		
		try {
			
			String sql = "update ajaxTable set ck = ? where x = ? and y = ?";
			
			pstat = conn.prepareStatement(sql);
			pstat.setString(1, dto.getCk());
			pstat.setString(2, dto.getX());
			pstat.setString(3, dto.getY());
			
			pstat.executeUpdate();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}

	public void addCell(Ex11DTO dto) {
		
		try {
			
			String sql = "insert into ajaxTable (seq, x, y, ck) values (tableseq.nextVal, ?, ?, 'y')";
			
			pstat = conn.prepareStatement(sql);
			pstat.setString(1, dto.getX());
			pstat.setString(2, dto.getY());
			
			pstat.executeUpdate();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}

	public List<Ex11DTO> listCell() {
		
		try {
			
			String sql = "select * from ajaxTable";
			
			stat = conn.createStatement();
			rs = stat.executeQuery(sql);
			
			List<Ex11DTO> list = new ArrayList<Ex11DTO>();
			
			while (rs.next()) {
				
				Ex11DTO dto = new Ex11DTO();
				
				dto.setX(rs.getString("x"));
				dto.setY(rs.getString("y"));
				dto.setCk(rs.getString("ck"));
				
				list.add(dto);
				
			}
			
			return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return null;
	}

 

■ 실행 결과

브라우저를 종료해도 해당 데이터가 저장

728x90

'Server' 카테고리의 다른 글

AJAX STEP 9 - 상품 목록 페이지  (0) 2023.05.17
AJAX STEP 8 - 일기장 AJAX  (0) 2023.05.17
AJAX STEP 6 - 다양한 전송 방법  (2) 2023.05.17
AJAX STEP 5 - 주소록 조회  (0) 2023.05.16
AJAX STEP 4 - ID 중복 검사  (0) 2023.05.16
'Server' 카테고리의 다른 글
  • AJAX STEP 9 - 상품 목록 페이지
  • AJAX STEP 8 - 일기장 AJAX
  • AJAX STEP 6 - 다양한 전송 방법
  • AJAX STEP 5 - 주소록 조회
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • 웹개발
  • jsp
  • 자바
  • IT자격증
  • it
  • java
  • 정보처리기사필기
  • 백준
  • 웹개발자
  • 개발블로그
  • jquery
  • DB
  • 앱개발자
  • 정보처리기사
  • DBA
  • IT자격증공부
  • 알고리즘
  • 코딩테스트
  • ajax
  • 웹페이지
  • 데이터베이스
  • 프론트엔드
  • 정보보안전문가
  • JavaScript
  • 개발자
  • html
  • React
  • css
  • IT개발자
  • 백엔드

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
AJAX STEP 7 - 테이블 저장 AJAX
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.