1. 서버로 데이터를 전송하는 form 태그 사용해 보자. 2. form 태그 action 에서 상대경로 와 절대 경로 개념을 이해하자.
webapp/todo-add.html 파일에 작성
<!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;
border: none;
border-radius: 4px;
cursor: pointer;
}
</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 ="/s02/todo-insert" method="post">
<label for="title">Title : </label>
<input type="text" id = "title" placeholder="Enter todo title" name="title" value="코딩하기">
<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>
TodoServlet 파일(서블릿 클래스 생성)
package com.tenco.contoller;
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://8080/s02/todo-insert
@WebServlet("/todo-insert")
public class TodoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public TodoServlet() {
}
// 정적 초기화 블록 - 단 한번 호출
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("roCoount : " + rowCount);
} catch (Exception e) {
e.printStackTrace();
response.getWriter().print("Error : " + e.getMessage());
return;
}
response.getWriter().println("todo addes successfully");
}
}
DB 생성 및 테이블 설계
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,
created_at timestamp default current_timestamp
);
desc tb_todo;
select * from tb_todo;
