티스토리 뷰
HTML 파일명 작성 규칙
1. 하이픈을 사용한 케밥 표기법 (Kebab Case)
index.html
contact-us.html
user-profile.html
product-list.html
2. 언더스코어를 사용한 스네이크 표기법 (Snake Case)
index.html
contact_us.html
user_profile.html
product_list.html
서블릿과 DB 연동
DB에 연동할 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 속성이 있어야 한다. (key 값으로 name 속성을 씀)-->
<div class="todo-form">
<h2>Add Todo</h2>
<p>http://localhost:8080/s02/todo-add.html</p>
<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>
*추가 설명*
| 1. 절대 주소(absolute URL) ex) href=“http://www.tcpschool.com/target.php” 2. 상대 주소(relative URL) ex) href=“target.php” action : 폼 내부에 데이터를 보내는 목적지 url을 지정함. method : 폼을 서버로 전송하는 http 방식을 지정. (POST or GET) - GET 방식은 url 뒤에 input 박스의 내용이 key=value 형태로 변환되어 전송됨.(id&pw 처럼 보안 취약) - POST 방식은 노출되지 말아야 할 데이터들을 전송함. name : 폼을 식별하기 위한 이름을 지정함. |
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;
서블릿 클래스 생성
'JSP' 카테고리의 다른 글
| 서블릿 필터와 리스너 (0) | 2024.07.02 |
|---|---|
| server.xml, context.xml, web.xml (0) | 2024.07.02 |
| 서블릿 컨텍스트 (0) | 2024.07.01 |
| GET, POST 요청 방식 (0) | 2024.07.01 |
| 서블릿 작성, 배포, web.xml 설정 (0) | 2024.07.01 |