지난 시간에 배운 태그와 request 객체를 이용해 간단한 회원등록 폼을 만들어보자.
| 웹 브라우저 ( = 클라이언트 ) | 웹 서버 ( WAS ) |
| ① 시작 페이지인 index.html를 서버에 요청 (GET 방식) | ② index.html : 정적 웹 페이지 → 웹 서버 기능으로 작동 ⇒ index.html 문서 찾아서 응답 |
| ③ index.html의 회원등록 링크 클릭 → form.html를 서버에 요청 (GET 방식) |
④ form.html : 정적 웹 페이지 → 웹 서버 기능으로 작동 ⇒ form.html 문서 찾아서 응답 |
| ⑤ form.html의 양식 작성 → 작성한 데이터를 form_process.jsp로 보냄 |
⑥ form_process.jsp : request객체로부터 데이터 입력 값 추출 및 데이터 처리( 단순히 출력만 ) |
▷ index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
시작페이지
</p>
<p>
회원등록 폼을 요청하는 링크를 만들자.
</p>
<a href="form.html">회원등록 링크</a>
</body>
</html>
▷ form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원등록 페이지</title>
</head>
<body>
<form action="form_process.jsp" method="post">
이름 : <input type="text" name="name" size="10" /><br />
아이디 : <input type="text" name="id" size="10" /><br />
비밀번호 : <input type="password" name="pw" size="10" /><br />
취미 :
<input type="checkbox" name="hobby" value="read" />독서
<input type="checkbox" name="hobby" value="cook" />요리
<input type="checkbox" name="hobby" value="run" />조깅
<input type="checkbox" name="hobby" value="swim" />수영
<input type="checkbox" name="hobby" value="sleep" />취침<br />
전공 :
<input type="radio" name="major" value="kor" />국어
<input type="radio" name="major" value="eng" />영어
<input type="radio" name="major" value="math" />수학
<input type="radio" name="major" value="des" />디자인
<input type="submit" value="등록" />
</form>
</body>
</html>
▷ form_process.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Arrays"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form.html 정보 처리하기</title>
</head>
<body>
<%!
// 전역변수 선언
String name, id, pw, major;
String[] hobbys;
%>
<%
// 요청정보( =request 객체 )로부터 양식에 작성한 입력값 추출
// ❶ 문자코드체계 설정
request.setCharacterEncoding("UTF-8");
// ❷ 입력값의 key 변수이름(name)으로 값 추출
name = request.getParameter("name");
id = request.getParameter("id");
pw = request.getParameter("pw");
hobbys = request.getParameterValues("hobby");
major = request.getParameter("major");
%>
<% // ❸ 데이터 처리 (단순히 값만 출력해보자) %>
이름 : <%= name %><br />
아이디 : <%= id %><br />
비밀번호 : <%= pw %><br />
취미 : <%= Arrays.toString(hobbys) %><br />
전공 : <%= major %>
</body>
</html>- page 지시어의 import 속성을 이용해 java.util.Arrays를 JSP 문서에서 사용하기 위해 상단에 설정하기
▶ 직접 서버에 index.html 요청해 회원등록 해보자
'백엔드 > JSP' 카테고리의 다른 글
| JSP Servlet 기초 (6) : Cookie (0) | 2023.06.12 |
|---|---|
| JSP Servlet 기초 (5) : response 객체 (0) | 2023.06.12 |
| JSP Servlet 기초 (3) : JSP 태그 (0) | 2023.06.11 |
| 내장객체 request와 response (0) | 2023.06.11 |
| JSP lifestyle (0) | 2023.06.10 |