[JSP] 15. 서블릿과 DB 연동

728x90

[JSP] 15. 서블릿과 DB 연동

*form 태그: 서버로 데이터를 전송하는 태그!

*form-action

*상대 경로와 절대 경로

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo Form</title>
</head>
<body>
	
	<div class="todo-form">
		<h2>ADD Todo</h2>
		<form action="">
			<label for="title">Title : </label>
			<input type="text" id="title" placeholder="Enter todo title">
			<label for="description">Description : </label>
			<input type="text" id="description" placeholder="Enter todo description">
			<button type="submit"> Save </button>
		</form>
	</div>
	
</body>
</html>

package com.tenco.controller;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

// 주소 설계 - http://localhost:8080/s02/todo-insert
@WebServlet("/todo-insert")
public class TodoServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

    public TodoServlet() {
        super();
    }


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("TODO-INSERT POST 호출 됨");
		
		
		// HTTP 메세지에서 데이터 추출하기
		// form 태그에서 name 속성이 있어야 값을 추출할 수 있다.
		String title=request.getParameter("title");
		String description=request.getParameter("description");
		
		System.out.println("title : "+title);
		System.out.println("description : "+description);
	}

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo Form</title>
</head>
<body>
	<!-- form 태그에서 데이터를 서버로 제출할 때, 만드시 name 속성이 있어야 한다. -->
	<div class="todo-form">
		<h2>ADD Todo</h2>
		<!-- 절대 경로 -->
		<!-- / 부터 시작한다면 절대 경로를 의미하고, context-root부터 시작이다. -->
		<!-- 상대 경로 -->
		<form action="http://localhost:8080/s02/todo-insert" method="post">
			<label for="title">Title : </label>
			<input type="text" id="title" placeholder="Enter todo title" name="title">
			<label for="description">Description : </label>
			<input type="text" id="description" placeholder="Enter todo description" name="description" value="html 연습">
			<button type="submit"> Save </button>
		</form>
	</div>
	
</body>
</html>

create database db_todo;
use db_todo;

-- 테이블 생성
create table tb_todo(
	id int auto_increment primary key,
    title varchar(255) not null,
    description text not null,
    completed boolean not null default false,
    creadted_at timestamp Default current_timestamp
);

desc tb_todo;
select*from tb_todo;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo Form</title>
<style type="text/css">
 	body {
		display:flex;
		justify-content:center;
		align-items:center;
		height: 100vh;
		margin: 0;
		font-family: arial,sans-serif;
		background-color:#f4f4f4;
	}
	.todo-form{
		background-color:#fff;
		padding:20px;
		border-radius:8px;
		width:400px;
		box-shadow:0 0 10px rgba(0,0,0,0.1);
	}
	form{
		display:flex;
		flex-direction: column;
	}
	label{
		margin-bottom:5px;
		font-weight:bold;
	}
	input[type="text"]{
		margin-bottom:15px;
		padding:10px;
		border: 1px solid #ccc;
		border-radius:4px;
	}
	button{
		padding:10px;
		background-color:#28a745;
		color:white;
		cursor:pointer;
		border-radius:4px;
		border: none;
	}
	
</style>
</head>
<body>
	<!-- form 태그에서 데이터를 서버로 제출할 때, 만드시 name 속성이 있어야 한다. -->
	<div class="todo-form">
		<h2>ADD Todo</h2>
		<p>http://localhost:8080/s02/todo-add.html</p>
		<!-- 절대 경로 -->
		<!-- / 부터 시작한다면 절대 경로를 의미하고, context-root부터 시작이다. -->
		<!-- 상대 경로 -->
		<form action="http://localhost:8080/s02/todo-insert" method="post">
			<label for="title">Title : </label>
			<input type="text" id="title" placeholder="Enter todo title" name="title">
			<label for="description">Description : </label>
			<input type="text" id="description" placeholder="Enter todo description" name="description" value="html 연습">
			<button type="submit"> Save </button>
		</form>
	</div>
	
</body>
</html>

package com.tenco.controller;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

// 주소 설계 - http://localhost:8080/s02/todo-insert
@WebServlet("/todo-insert")
public class TodoServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

    public TodoServlet() {
        super();
    }
    
    // 정적 초기화 블록 - 단 한 번 호출
    static {
    	try {
    		// JDBC 드라이버 로드 (MySQL)
			Class.forName("com.mysql.cj.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
    }


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// HTTP 메세지에서 데이터 추출하기
		// form 태그에서 name 속성이 있어야 값을 추출할 수 있다.
		String title=request.getParameter("title");
		String description=request.getParameter("description");
		
		// 데이터베이스 연동 코드를 작성해야 한다.
		String jdbcURL="jdbc:mysql://localhost:3306/db_todo?serverTimezone=Asia/Seoul";
		String username="root";
		String password="asd123";
		
		String insertTodoSQL=" INSERT INTO tb_todo(title,description) VALUES (?,?)";
		try (Connection conn=DriverManager.getConnection(jdbcURL,username,password);
				PreparedStatement pstmt=conn.prepareStatement(insertTodoSQL);){
			pstmt.setString(1, title);
			pstmt.setString(2, description);
			int rowCount=pstmt.executeUpdate();
			System.out.println("rowCount : "+rowCount);
		} catch (Exception e) {
			e.printStackTrace();
			response.getWriter().print("Error : "+e.getMessage());
			return;
		}
		
		response.getWriter().println("Todo added successfully");
	}

}

728x90

'JSP' 카테고리의 다른 글

[JSP] 17. 서블릿 필터와 리스너 (0)	2024.07.03
[JSP] 16.server.xml과 context.xml, web.xml (0)	2024.07.03
[JSP] 14. 서블릿과 서블릿 컨텍스트 (0)	2024.07.03
[JSP] 13. 쿼리 스트링 (0)	2024.07.03
[JSP] 12. URI와 URL (0)	2024.07.03