JSP - 서블릿 기초 ( model 2 방식 ) STEP 1

안녕하세요 yunamom 입니다.

서블릿 의 기초부터 차례대로 포스팅하려고 합니다.

초보의 입장이니 오타/실수가 있으면 답글 부탁드려요 :D

먼저 실습을 위해 jsp파일 을 먼저 생성하도록 하겠습니다.

👇LoginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="login">
	<form action="LoginPro.do" method="post">
		<div>
		<input type="text" name="id" placeholder=" 아이디">
		</div>
		<div>
		<input type="text" name="pw" placeholder=" 비밀번호">
		</div>
		<div>
		<input class="btn" type="submit" value="Login">
		</div>
		<div>
		<input class="btn" type="button" value="Join">
		</div>
	</form>
</div>
</div>
</div>

</body>
</html>

👇style.css

@charset "UTF-8";

body{	
	background: #fbf0d7;
	font-size: 17px;
}
.wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
}
.box{
	margin: 5rem;
}
.login{
	width: 300px;
}
input{
	margin: 3px;
	width: 100%;
	height: 35px;
	border: 0;
	border-radius: 0.3rem;
	font-size: 17px;
}
.btn{
	width: 100%;
	height: 50px;
	border: 0;
	background-color: #706b61;
	color: #fff;
	cursor: pointer;
}
.btn:hover{
	border: 1px solid #706b61;
	background-color: #fbf0d7;
	color: #706b61;	
}

<form action="LoginPro.do" method="post">

form 태그에 action 부분을 보시면 지금껏 작성해왔던 .jsp 가 아닌 .do 라고 작성되어있습니다.

이부분이 아주 중요합니다.

다음으로 서블릿 파일을 생성해주겠습니다.

controller 패키지 생성후 그안에 LoginPro.java 파일을 생성해주었습니다.

💡여기서 주의하셔야 할부분은 @WebServlet 어노테이션 경로와 form 태그의 action 이름이 같아야합니다 (*대소문자 주의)

👇LoginPro.java 파일을 아래와 같이 작성해주신후 테스트 해보겠습니다.

package com.test.web.controller;

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


/* form action 의 이름과 아래 어노테이션의 이름이 같아야 합니다 */
@WebServlet("/LoginPro.do")
public class LoginPro extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		requestPro(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		requestPro(request, response);
	}
	
	public void requestPro(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		System.out.println("아이디 = " + id);
		System.out.println("비밀번호 = " + pw);
	}
}

이번시간에는 이렇게 서블릿에 데이터가 어떻게 이동하는지 간단한 코드와 함께 살펴보았습니다.

아래 영상은 많은 도움을 받은 신형섭 강사님의 jsp mvc 강의입니다.

직접 해보면서 이해하는게 참 중요한거같아요 여러분도 꼭 따라해보세요 :D

'개발언어 > JSP' 카테고리의 다른 글

[JSTL] JSTL 기초 정리 (문법 / 작성법) (0)	2022.04.07
[JSP/Servlet] css, js 적용이 안됨 해결하기 (1)	2022.04.05
[JSP] 게시글 줄바꿈하기 - ( c:out / <pre> 태그 ) (0)	2022.03.30
JSP - 서블릿 기초 ( model 2 방식 ) STEP 2 (0)	2022.03.28
[JSP] 서블릿(Servlet) 이란? (1)	2022.03.23

Study with yuna🌷

JSP - 서블릿 기초 ( model 2 방식 ) STEP 1

'개발언어 > JSP' 카테고리의 다른 글

티스토리툴바

JSP - 서블릿 기초 ( model 2 방식 ) STEP 1

'개발언어 > JSP' 카테고리의 다른 글

관련글

티스토리툴바