[JSP]0426_JAVA_DB_DTO_DAO_JSP_HTML_AJAX_TODOLIST만들기 executeUpdate() 메서드 와 execut

<개인공부>/[JSP]

by 데브수달 2024. 4. 26. 17:44

728x90

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다. -출처 ) CRUD - 위키백과, 우리 모두의 백과사전-

CRUD의 기능 중 오늘은 C (생성), R(읽기)를 JSP 동적 웹 프로젝트 생성해서 구현하는 법을 배웠다.
* SQL INSERT INTO 명령문 내용을 통해서 DB에 데이터를 추가할 때,
executeUpdate() 를 사용하였었는데,
오늘 추가로 익힌 SQL SELECT * FROM 테이블명 명령문을 DB 통해서 화면에 가져와서 출력할 때는
executeQuery() 를 사용하였다.

인터넷 서치 결과,, SELECT문을 구현할 때는 , executeQuery를 써야한다고한다.
executeQuery()와 executeUpdate() 메서드는 JDBC API에서 제공하는 메서드로,
데이터베이스와 상호작용하는 데 사용된다.

executeUpdate

executeUpdate()는 INSERT, UPDATE, DELETE와 같은 DML(Data Manipulation Language)에서 실행 결과로 영향을 받은 레코드 수를 반환한다.
executeUpdate()는 반환 타입이 int이므로, 쿼리 실행 결과로 반환되는 값을 int로 받아와야 한다.
executeUpdate()는 행의 개수를 반환하기 때문에 rs를 사용할 필요 없다.

executeQuery

SELECT 문과 같은 쿼리문을 실행할 때 쓰인다.
Query를 실행하고, 결과를 ResultSet 객체로 반환한다. 반환된 ResultSet 객체를 통해 결과를 가져올 수 있다.
ex) private ResultSet rs; 보통 약어로 rs로 변수명을 설정한다.
SELECT는 하나 이상의 레코드를 조회하게 되는데 이 때 결과 집합을 반환한다.
ResultSet은 결과 세트에 대한 커서를 포함하므로 사용자가 쿼리 결과를 반복적으로 가져올 수 있다.
커서는 데이터베이스에서 조회된 결과 집합에서 현재 위치를 나태내는 포인터로 이를 이용해 하나의 행을 읽어오고, 디음 행으로 이동하여 원하는 레코드를 순차적으로 탐색할 수 있다.

# TODO LIST 설계
  - 프로젝트 이름 :todo
  
  : 할일 저장 => DB 저장 
  => HTML(할일 입력폼) 
  => AJAX(JS)
  * 비동기식 객체기반;화면 새로고침 없이 데이터를 DTO에 저장해주는 것.
  => JSP(HTML + JAVA)
  *JAVA 서버 페이지
  => DTO(JAVA)
  => DAO(JAVA+JDBC+SQL) => 서블릿 HTTP 통신 (서버)
  => DB (정보의 목적지 (정보가 가라앉는 곳) RD;관계형데이터베이스)
   
  : 할일 목록
  => DB 목록 가져오기 org.json.simple.JSONArray & JSONObject 
  => HTML(할일 목록 테이블) <=> AJAX(JS) <=> JSP(HTML+JAVA) 
  <=> DTO(JAVA) || JSON 데이터 <=> DAO(JAVA+JDBC+SQL) <=> DB(RD)
  
1. DB 설계  
   - DATABASE  이름 : todo
   - TABLE : todo_list_table
     필드1 idx INT NOT NULL AUTO_INCREMENT PK
     필드2 할일 todo VARCHAR(100) NOT NULL
     필드3 등록일자 todoDate TIMESTAMP DEFAULT NOW() NOT NULL
     * NOW() = 대체 가능 CURRENT_TIMESTAMP
     
  
2. index.html => [webapp] => index.html
   - 할일 입력폼 디자인 (UIUX) => 할일 저장 버튼 클릭 이벤트
   - AJAX 구현
   - 할일 목록 테이블 디자인 (UIUX)

   
3. index.html + jQuery(AJAX API)=> HTTP 통신
   - AJAX API =>HTTP통신 QueryString ?쿼리 스트림"웹주소/액션.jsp? 파라미터1개= +내용값 & +파라미터2개=내용값" 보내는 법 배움 
   - JSON 데이터 처리 => 키 : 값

4. DTO(JAVA) - 입출력담당
   - TodoDto.java
   
5. JSP(HTML+JAVA)
   // todo 저장 구현 JSP
   - todo_insert_action.jsp 
   
   - getParameter()사용
   - setParameter()사용
   - TodoDto.java => import => 객체생성
   
   // todo 목록 구현 JSP
   - todo_list_action.jsp
AJAX가 목록 요청 
<=> todo_list_action.jsp 
<=> 서버목록 구현 함수 호출 
<=> 서버 todoListSelect()
{조회 SELECT * FROM todo_list_table;}
  
   

6. DAO(JAVA+JDBC+SQL)
   - TodoDao.java
   - import java.sql.*;
   - JDBC mariadb 드라이버 Driver 설정
   - JDBC mariadb 컨넥션 아이디 비번 인증하고 연결
완료----------------------------------------------------------------  
   - 저장 메서드 int todoInsert(){return 1,-1} 
   - SQL : INSERT INTO => 저장
완료---------------------------------------------------------------- 
   - HTML 목록버튼 클릭이벤트 JS AJAX =>
   - 목록 메서드 JSONArray todoListSelect (){return arr}
   - 리턴이 JSON 객체이기 때문에 리턴 타입이 JSONArray 가 된다. 
   
   - SQL : SELECT => 목록
   - JSONArray 
   - JSONObject
   - 리턴값 JSONArray

7. HTML 목록 버튼 클릭이벤트
   - AJAX 구현
   - ToDo LIST = >TABLE 출력

1. SQL

--DB 설계
--DATABASE  이름 : todo
--TABLE : todo_list_table
--필드1 idx INT NOT NULL AUTO_INCREMENT PK
--필드2 GKFDLF todo VARCHAR(100) NOT NULL
--필드3 등록일자 todoDate TIMESTAMP DEFAULT NOW() NOT NULL
SHOW DATABASES;

CREATE DATABASE todo;

USE todo;

CREATE TABLE todo_list_table(
	idx INT NOT NULL AUTO_INCREMENT COMMENT '인덱스번호' ,
    todo VARCHAR(100) NOT NULL COMMENT '할일' ,
    todoDate TIMESTAMP DEFAULT NOW() NOT NULL COMMENT '등록일자' ,
    PRIMARY KEY(idx)
) ENGINE=MYISAM CHARSET=UTF8MB4;

DESC todo_list_table;
--+----------+--------------+------+-----+---------------------+----------------+
--| Field    | Type         | Null | Key | Default             | Extra          |
--+----------+--------------+------+-----+---------------------+----------------+
--| idx      | int(11)      | NO   | PRI | NULL                | auto_increment |
--| todo     | varchar(250) | NO   |     | NULL                |                |
--| todoDate | timestamp    | NO   |     | current_timestamp() |                |
--+----------+--------------+------+-----+---------------------+----------------+

SHOW CREATE TABLE todo_list_table;
--| todo_list_table | CREATE TABLE `todo_list_table` (
--  `idx` int(11) NOT NULL AUTO_INCREMENT COMMENT '번호',
--  `todo` varchar(250) NOT NULL COMMENT '할일',
--  `todoDate` timestamp NOT NULL DEFAULT current_timestamp() COMMENT '등록일자',
--  PRIMARY KEY (`idx`)
--) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci         |


--+-----+-----------------------------------------------------------------------------------------------------------+---------------------+
--| idx | todo                                                                                                      | todoDate            |
--+-----+-----------------------------------------------------------------------------------------------------------+---------------------+
--|   1 | 정보처리기사 자격증 시험보러가기기                                                                        | 2024-04-26 14:47:24 |
--|   2 | java과제1- 회원가입 제작구현                                                                              | 2024-04-26 14:48:37 |
--|   3 | java과제2- ToDo List 제작구현                                                                             | 2024-04-26 14:48:49 |
--|   4 | 오늘은 즐거운 금요일 맛있는 저녁식사와  과제하기 TODOLIST &회원가입 구현하기                              | 2024-04-26 14:51:56 |
--|   5 | 닭갈비 먹는 날이다.                                                                                       | 2024-04-26 14:53:19 |
--|   6 | 내일은 행복한 토요일 날씨 좋으면 드라이브 가야지!                                                         | 2024-04-26 14:55:53 |
--+-----+-----------------------------------------------------------------------------------------------------------+---------------------+

2. index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>ToDo List</title>
	<link rel="stylesheet" href="./css/style.css" >
	<script src="./script/lib/jquery-1.9.0.min.js"></script>
	<script src="./script/todo.js" defer></script>

</head>
<body>
	<div id="wrap">
		<h1>TODO LIST</h1>
		
		<form method='get' action='http://localhost:8080/todo/todo_action.jsp'>
			<ul>
				<li>
					<input type="text" name="todo" id="todo" placeholder="할일을 입력하세요." />
				</li>
			</ul>

			<button type="submit">FORM전송 할일저장</button>
			<button type="button" class="save-btn">할일저장</button>
			<button type="button" class="list-btn">할일목록</button>

		</form>
		
		<br/><br/><br/>
		
		<table>
			<thead>
				<tr>
					<th>글번호</th>
					<th>할일</th>
					<th>날짜</th>
				</tr>
			</thead>
			<tbody class="todo-list">
				
			</tbody>
		</table>
	</div>
</body>
</html>

3. todo.js

(($)=>{
	
	//저장 버튼 클릭 이벤트
	$('.save-btn').on({
		click(e){
			e.preventDefault();
			
			// URL HTTP 통신 매개변수 전송하기
			// location.href = 웹주소/프로젝트이름/파일명/? data 내용 = 변수 데이터
			// ? 뒤에 나오는 것을 '쿼리스트림' 이라고 한다.
			// location은 이 사이트로 이동해라!!
			//location.href = "http://localhost:8080/todo/todo_action.jsp?todo="  + $('#todo').val()
			// http://localhost:8080/todo/todo_action.jsp?todo=%ED%85%8D%EC%8A%A4%ED%8A%B8+%EC%A0%84%EC%86%A1+%EB%82%B4%EC%9A%A9+TODO+LIST
			
			
			// AJAX 전송
			
			$.ajax({
				url:'./todo_insert_action.jsp',
				type:'POST',
				data:{
					todo : $('#todo').val()
				},
				success(res){
					console.log("AJAX성공");
					console.log(res);
					$('#todo').val(''); //todo안에 입력상자 지울 때는 val('공백만 넣으면된다.')
				},
				erroe(err){
					console.log("AJAX실패");
					console.log(err);
				},
			})
			
		}
	})
	

	//목록 출력 클릭 이벤트 => 목록 배열로 가져오기  => *가져오는 것만 하는 것이면 get, 방식 보내고 받고 할 때는 post *
	$('.list-btn').on({
		click(e){
			e.preventDefault();
			
			$.ajax({
				url:'./todo_list_action.jsp',
				type:'GET',

				success(res){
					//console.log("AJAX 성공");
					//console.log( res );
					//console.log( JSON.parse(res) );
					
					let txt = '';
					const result = JSON.parse(res);
					
	
					
					
					
					result.map((item, idx)=>{
							txt += `<tr>`;
							txt += `<td>${item.idx}</td>`;
							txt += `<td><a href="#"><span>${item.할일}</span></a></td>`;
							txt += `<td>${item.일시}</td>`;
							txt += `</tr>`;
					});
					
					$('.todo-list').empty(); // .empty() 청소해라!
					$('.todo-list').append(txt); // .append(txt) 새로고침이 됨.
				},
				error(err){
					//console.log("AJAX 실패");
					console.log( err );
				}
			});
		}
	})
	
})(jQuery);

4.DTO

package todo;

public class TodoDto {
	private String todo;

	public String getTodo() {
		return todo;
	}

	public void setTodo(String todo) {
		this.todo = todo;
	}
	
	
}

5.DAO

package todo;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;


public class TodoDao {
	
	private Connection conn;
	private PreparedStatement ps;
	private ResultSet rs;
	private String SQL;
	
	public TodoDao() {
		try {
			// 드라이버 설정
			Class.forName("org.mariadb.jdbc.Driver");
			System.out.println("mariadb Driver 설정 완료");
			// 컨넥션 설정 getConnection 접속   
			conn = DriverManager.getConnection("jdbc:mariadb://localhost:3307/todo", "root", "1234");
			System.out.println("mariadb getConnection 설정 완료");
		}
		catch(Exception e) {
			System.out.println("Driver OR getConnection 설정 실패!");
			System.out.println("에러 메세지 : " + e.getMessage());
			
		}
		
	}
	// DB todo => todo_list_table = > INSERT INTO 
	public int todoInsert(TodoDto todoDto){
		SQL = "INSERT INTO todo_list_table(todo) VALUES (?)";
		try {
			
			ps = conn.prepareStatement(SQL);
			ps.setString(1, todoDto.getTodo());
			ps.executeUpdate();
			
			
			return 1; //성공
		}
		catch(Exception e) {
			System.out.println("에러 메시지 : " + e.getMessage());
			return -1; //실패
		}
	} 
	// todo 리스트 목록 select 
	public JSONArray todoListSelect() {
		SQL = "SELECT * FROM todo_list_table ORDER BY todoDate DESC";
		// 오류가 나든 안나든 너는 실행해라! 
		JSONArray arr = new JSONArray();
		
		try {
			ps = conn.prepareStatement(SQL);
			rs = ps.executeQuery();
			
			
			while(rs.next()) {
				JSONObject obj =new JSONObject();
				// 모든 것을 string으로 가져오면 숫자도 문자도 다 겹따옴표로 들어온다. 
				obj.put("idx", rs.getString(1)); // 1번째 칸 값 String ("1") "idx" :"1"
				obj.put("할일", rs.getString(2)); // 2번째 칸 값
				obj.put("일시", rs.getString(3)); // 3번째 칸 값
				arr.add(obj);//1줄 내용 들어감. 반복문으로 인해 누적누적됨.
			}
			
		}
		catch(Exception e) {
			System.out.println("에러 메세지 : " + e.getMessage());
		}
		
		
		return arr;
	}

}

6. JSP
// 저장 구현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ page import="todo.TodoDto" %>
<%@ page import="todo.TodoDao" %>
    
<% 
	request.setCharacterEncoding("utf-8");
	
	//AJAX 보내온 데이터 받기 => getParameter 데이터 받기
	String todo = request.getParameter("todo");
	

	//DTO 객체 => 세터함수 => 저장  : TodoDto 객체 생성
	TodoDto todoDto = new TodoDto();
	todoDto.setTodo(todo);
	
	
	//JDBC 드라이버설정 컨넥션 연결확인
	TodoDao todoDao = new TodoDao();
	// 리턴 값 문자열
	int res = todoDao.todoInsert(todoDto);
	System.out.println( res );
	// DAO DB에 저장 결과를  AJAX 에게 응답한다.
	out.println( res );
%>

// 출력 구현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ page import="todo.TodoDao" %> 
<%@ page import="org.json.simple.*" %>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>
<%
	request.setCharacterEncoding("utf-8");

	TodoDao todoDao = new TodoDao();
	JSONArray res = todoDao.todoListSelect(); // 목록 출력하는 것.
	
	System.out.println( res );
	out.println( res );
%>

728x90

'<개인공부> > [JSP]' 카테고리의 다른 글

[JSP]0430_CRUD구현하기 (1)	2024.04.30
[JSP]JAVA_DB_DTO_DAO_JSP_회원가입 구현하기(아이디,이름,전화번호) (0)	2024.04.25
[JSP]DTO_DAO_JSP_회원가입구현설계.md (0)	2024.04.25
[JSP]동적웹프로젝트_mariadb-java-client-3.3.3.jar_빌드패치하는 법 (0)	2024.04.25
[JSP]데이터베이스연동_INSERT INTO_ 폼_데이터입력_DB에 저장하기 (1)	2024.04.24