병호의 IT새싹키우기

서블릿과 데이터베이스 연동 본문

java

서블릿과 데이터베이스 연동

병호네 2024. 7. 1. 16:37

💡학습 목표💡

  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: 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 title" name="description" value="html 연습">
			<button type="submit"> SAVE </button>
		</form>	
	</div>

</body>
</html>

 

 

TodoServlet파일(서블릿 클래스 생성)

 

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
);
INSERT INTO tb_todo(title, description) VALUES ('11', '11') ;
desc tb_todo;
select * from tb_todo;

'java' 카테고리의 다른 글

서블릿 필터와 리스너란 뭘까?  (0) 2024.07.02
server.xml과 context.xml 그리고 web.xml 파일 이란?  (0) 2024.07.02
서블릿과 서블릿 컨텍스트란?  (0) 2024.07.01
Get, Post 요청 방식에 이해  (1) 2024.07.01
서블릿 작성, 배포, web.xml 설정에 이해  (0) 2024.07.01
'java' Related Articles more