학습 목표
1. 서버로 데이터를 전송하는 form 태그 사용해 보자.
2. form 태그 action 에서 상대경로 와 절대 경로 개념을 이해하자.
HTML 파일명은 어떤 규칙으로 작성해볼까?
하이픈을 사용한 케밥 표기법 (Kebab Case)
index.html
contact-us.html
user-profile.html
product-list.html
언더스코어를 사용한 스네이크 표기법 (Snake Case)
index.html
contact_us.html
user_profile.html
product_list.html
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.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();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
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);
}
}
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;
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 {
}
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");
}
}'Java > JSP' 카테고리의 다른 글
| 서블릿 필터와 리스너란 뭘까? (0) | 2024.07.15 |
|---|---|
| server.xml과 context.xml 그리고 web.xml 파일 이란? (0) | 2024.07.15 |
| 서블릿과 서블릿 컨텍스트란? (0) | 2024.07.15 |
| Get, Post 요청 방식에 이해 (0) | 2024.07.15 |
| 서블릿 작성, 배포, web.xml 설정에 이해 (0) | 2024.07.15 |
