[JSP]0430_CRUD구현하기

<개인공부>/[JSP]

by 데브수달 2024. 4. 30. 12:24

728x90

bandicam 2024-04-30 11-57-03-644.mp4

0.59MB

bandicam 2024-04-30 11-55-27-074.mp4

2.59MB

# ToDo List

- 프로젝트 이름: todo

- 데이터베이스 이름: todo_list

- 테이블 이름 : todo_list

1. 데이터베이스 설계

- 데이터베이스 이름: todo_list

- 테이블 이름 : todo_list

idx INT NOT NULL AUTO_INCREMENT PK

todo VARCHAR(250) NOT NULL

todoDate TIMESTAMP DEFAULT NOW() NOT NULL

2. 입출력 화면 설계

- index.html

- 입력화면폼

- JQUERY 구현 저장 버튼 클릭 이벤트

- .save-btn 버튼 클릭 이벤트

- #todoInput : 값 입력

- .todo-list: 목록 출력

- AJAX API 구현

- 입력하면 저장되고, 곧바로 목록에 출력된다.

- 웹페이지 로딩시 목록 출력된다.

3. JAVA & JSP

- JAVA => DTO :TodoDto.java

- 저장 JSP = > todo_insert_action.jsp => wrbapp=> 폼 입력값 => 받기 겟파라미터 => 콘솔창으로 보기

private Connection conn;

private PreparedStatement ps;

private ResultSet rs;

private String SQL;

- JAVA => DAO : TodoDao.java(1. JDBC 드라이버, 컨넥션)

- JAVA => DAO : TodoDao.java(2. 저장메서드 todoInsert()) => 저장완료 => 리턴1

- 저장완료 메시지 1이면 => 목록 호출 => TodoDao.java(3. 목록메서드 todoList()) => JSON 리턴

- JSON => AJAX 에게 응답

- AJAX => 목록출력(반복문)

- 웹페이지 로딩시 목록 출력된다. => todo_list_action.jsp

------------------------------------------------------------------------------ 완료

4. 삭제버튼 구현 TodoDao.java(4. 삭제메서드 todoDelect())

- DB todo_list_table => 테이블 목록 삭제 구현

- AJAX 삭제할 idx 번호를 => jsp 전달

=> todo_delect_action.jsp

=> idx를 파라미터로 전달

=> TodoDao todoDao = new TodoDao()

=> todoDao.todoDelect(삭제할 idx)

1) AJAX idx 삭제할 목록의 인덱스 번호를 추출기술 필요

2) AJAX 가 idx 를 todo_delect_action.jsp에 전송

5. 수정버튼 구현 TodoDao.java(5. 수정메서드 todoUpdate())

- todo.js ajax 리스트 목록에 있는 a 링크를 수정해야 한다. = > 업데이트는 입력상자로 변경 input text

- 1) 수정버튼 클릭 이벤트

- 2) AJAX 수정할 idx 번호와 입력 상자에 있는 수정내용 할일을 파라미터로 보낸다.

idx : idx

todo : 입력상자.할일

- 3) JSP : todo_update_action.jsp

int idx = Integer.parseInt(request.getParameter("idx"));

String todo = request.getParameter("todo");

* DTO는 선택임. 한 두개일 때는 바로 가능.

- 4) DTO 사용 안하고 곧바로 DAO에 전송

TodoDao todoDao = new TodoDao()

int res = todoDao.todoUpdate(idx, todo);

if(res==1){

System.out.println("수정완료");

}

============================================================================================

1.index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>ToDo List</title>
	<link rel="stylesheet" href="./css/style.css">
	<link rel="icon" href="#">
	<script src="./script/lib/jquery-1.9.0.min.js"></script>
	<script src="./script/todo.js" defer></script>
	
	
</head>
<body>
	
	<div id="wrap">
		<div class="todo-title">
			<h1>ToDo List</h1>
		</div>
		
		<form class="todo-form" action="./todo_insert_action.jsp" method="post">
			<!-- 할일 입력 폼 -->
			<div>
				<input type="text" name="todoInput" id="todoInput" placeholder="할일을 입력하세요." />
				<button class="save-btn">+</button>
			</div>
		</form>
		
		<!-- 할 일 목록 리스트 -->
		<ul class="todo-list">

			
		</ul>
		
		
	</div>
	
		
</body>
</html>

2.todo_delect_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="todo.TodoDto" %>
<%@ page import="todo.TodoDao" %>
<%@ page import="org.json.simple.*" %>

<%
	request.setCharacterEncoding("utf-8");
	
	String idx = request.getParameter("idx");
	
	
	TodoDao todoDao = new TodoDao();
	int res = todoDao.todoDelect(idx);

	
	if(res==1){
		// 목록 함수(json파일) 호출 
		JSONArray result = todoDao.todoList();
		out.println( result ); //ajax 응답 json 파일

	}
	
%>

3.todo_insert_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="todo.TodoDto" %>
<%@ page import="todo.TodoDao" %>
<%@ page import="org.json.simple.*" %>

<%
	request.setCharacterEncoding("UTF-8");

	String todo = request.getParameter("todo");
	
	// ajax 전송 => 콘솔창 확인
	// System.out.println(todo);
	
	TodoDto todoDto = new TodoDto();
	
	// ajax 전송 => TodoDto.java 에 저장 setTodo(todo)
	todoDto.setTodo(todo);
	// ajax 전송 => TodoDto.java  가져오기 확인 getTodo()
	// System.out.println(todoDto.getTodo());
	
	// DTO => DAO TodoDao 객체 생성 => 드라이버, 컨넥션 접속 확인 가능
	TodoDao todoDao = new TodoDao();
	int res = todoDao.todoInsert(todoDto);
	//System.out.println(res);
	
	if(res==1){
		// 목록 함수(json파일) 호출 
		JSONArray result = todoDao.todoList();
		out.println( result ); //ajax 응답 json 파일

	}
	
	
%>

4. todo_list_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="todo.TodoDto" %>
<%@ page import="todo.TodoDao" %>
<%@ page import="org.json.simple.*" %>

<%
	request.setCharacterEncoding("utf-8");

	TodoDao todoDao = new TodoDao();
	JSONArray result = todoDao.todoList();
	out.println( result );
			
%>

5. todo_update_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="todo.TodoDao"%>
<%@ page import="todo.TodoDto"%>
<%@ page import="org.json.simple.*" %>

<% 
	request.setCharacterEncoding("utf-8");
	int idx = Integer.parseInt(request.getParameter("idx"));
	String todo = request.getParameter("todo");

	// DAO 수정 인덱스번호와 내용 매개변수로 보내기
	TodoDao todoDao = new TodoDao();

	int res = todoDao.todoUpdate(idx, todo);
	
	if(res==1){
		 JSONArray list = todoDao.todoList(); //함수
		 out.println(list); //ajax에게 응답
	}

%>

java -todo 폴더 내부

1. TodoDto.java

package todo;

public class TodoDto {
	private String todo;
	private int idx;
	
	public String getTodo() {
		return todo;
	}
	public int getIdx() {
		return idx;
	}
	public void setTodo(String todo) {
		this.todo = todo;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}

	
}

2. TodoDao.java

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("드라이버 설정 성공");
			// 컨넥션 설정
			conn = DriverManager.getConnection("jdbc:mariadb://localhost:3307/todo_list", "root", "1234");
			System.out.println("컨넥션 설정 성공");
		}
		catch(Exception e) {
			System.out.println("드라이버 & 컨넥션 설정 실패!");
			System.out.println("에러메세지 :" + e.getMessage());
		}
	}
	
	// 1. 저장 (입력) 메서드 => SQL DB 저장구현
	// HTML 할 일 입력상자 => AJAX todo => JSP => DTO => DAO.todoInsert(TodoDto todoDto);
	
	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;
		}
	}
	// 2. 목록 메서드 JSONArray
	public JSONArray todoList() {
		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();
				obj.put("idx", rs.getString(1));
				obj.put("할일", rs.getString(2));
				obj.put("날짜", rs.getString(3));
				arr.add(obj);	
			}

		}
		catch(Exception e) {
			e.getMessage();
		}
		return arr;
		
		
	}
	// 3. 삭제 메서드 
	public int todoDelect(String idx) {
		SQL = "DELETE FROM todo_list_table WHERE idx = ?"; 
		try {
			ps = conn.prepareStatement(SQL);
			ps.setString(1, idx);
			ps.executeUpdate();
			return 1;
		}
		catch(Exception e) {
			System.out.println("에러메세지 :" + e.getMessage());
			return 2;
		}
	}
	
	// 4. 수정 메서드
	public int todoUpdate(int idx,String todo) {
		SQL = "UPDATE todo_list_table SET todo=?, todoDate = now() WHERE idx = ?";  // UPDATE 수정
		try {
			ps = conn.prepareStatement(SQL);
			ps.setString(1, todo);
			ps.setInt(2, idx);
			ps.executeUpdate();
			return 1;
		}
		catch(Exception e) {
			System.out.println("에러메세지 :" + e.getMessage());
			return 2;
		}
	}
}

script-lib -> jquere 파일

script-> todo.js

(($)=>{

	class Todo{
		init(){
			this.todoSave();

		}
		//할일저장
		todoSave(){
			function resJsonOutput(res){
				const jsonArr = JSON.parse(res); // JSON 객체로 변경
							
				let output= '';
				jsonArr.map((item, idx)=>{
					output +=`<li>`;
					output +=`<input type='text' name='todoInput' id='todoInput${item.idx}' value='${item.할일}' > `;
					output +=`<span>`;
					output +=`<button value='${item.idx}' class="update-btn">수정</button>`;
					output +=`<button value='${item.idx}' class="delete-btn">삭제</button>`;
					output +=`<span>`;
					output +=`</li>`;

				});
				
				$('.todo-list').empty();
				$('.todo-list').append(output);
				
				// 1. 수정 버튼 클릭 이벤트
				$('.update-btn').on({
					click(e){
						e.preventDefault();
						const idx = $(this).val(); // 클릭한 수정 번호 가져오기
						const todo = $(`#todoInput${idx}`).val(); //클릭한 수정 할일 내용 가져오기
						
						$.ajax({
							url:'./todo_update_action.jsp',
							type:'POST',
							data:{
								idx : idx,
								todo : todo
							},
							success(res){
								resJsonOutput(res);				
							},
							error(err){
								console.log("ajax 전송 실패!")
								console.log(err);
							}
						})
						
						
					}
				})
				
				
				// 2. 삭제 버튼 클릭 이벤트
				// 삭제할 idx 번호를 todo_delect_action.jsp에 보내기(전달)
				// todo_delect_action.jsp / 인코딩 /파라미터 받기 /콘솔창 확인
				$('.delete-btn').on({
					click(e){
						e.preventDefault();
						//console.log( $(this).val() );
						$.ajax({
							url:'./todo_delect_action.jsp',
							type:'post',
							data:{
								idx: $(this).val()
							},
							success(res){
								resJsonOutput(res);
							},
							error(err){
								console.log("ajax 실패");
								console.log(err);
							}
						})
						
					}
				})
				
				
			}
			
			// 3. 리스트 목록 가져오기 함수 todo_list_action.jsp
			function todoList(){
				$.ajax({
						url:'./todo_list_action.jsp',
						type:'GET',
						success(res){
						
							resJsonOutput(res);

						},
						error(err){
							console.log('ajax 전송 성공!');
							console.log( err );
						}
					})
			}
			todoList();
			
			// 4. 할 일 저장 버튼 클릭 이벤트
			$('.save-btn').on({
				click(e){
					e.preventDefault();
					
					if($('#todoInput').val()!==''){ // 공백이 아니면 전송해라.

						$.ajax({
							url:'./todo_insert_action.jsp',
							type:'POST',
							data:{
								todo : $('#todoInput').val()
							},
							success(res){
							
								resJsonOutput(res);

							},
							error(err){
								console.log('ajax 전송 성공!');
								console.log( err );
							}
						})

					}
					else{
						alert('할일을 입력하세요!');
					}
					
				}
			})
		}

	}
	const todo = new Todo();
	todo.init();

})(jQuery);

728x90

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

[JSP]0426_JAVA_DB_DTO_DAO_JSP_HTML_AJAX_TODOLIST만들기 executeUpdate() 메서드 와 execut (0)	2024.04.26
[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