Send01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send01.html</title>
<link rel="stylesheet" type ="text/css" href="css/main.css">
</head>
<body>
<!--
○ 데이터 송수신 실습 01
- 이름과 전화번호를 입력받는 html 페이지를 작성한다.
페이지 레이아웃
---------------------------------------------------
이름 [ textbox ] ← 홍길동
전화번호 [ textbox ] ← 010-1111-1111
<button> ← 회원가입
--------------------------------------------------
- 회원가입 버튼 클릭 시
『홍길동님, 회원 가입이 완료되었습니다.
회원님께서 등록하신 전화번호는 010-1111-1111 입니다.』
라는 내용을 출력하는 JSP 페이지를 사용자에게 전달 할 수 있도록 한다.
- 사용자의 최초 요청 주소는
『http://localhost:8090/WebApp05.Send01.html』로 한다.
- 구성
·Send01.html
·Receive01.jsp
-->
<div>
<h1>회원가입</h1>
<hr>
<div>
<!-- 1. 클라이언트 측에서 서버 측에 데이터 전송을 위해 form 태그 필요 -->
<!-- 2. form 태그 영역 안에 들어가야 하는 대상은... 이름과 전화번호 -->
<!-- 3. ※ form 태그의 action 속성은 데이터 전송 및 페이지 요청을 해야하는 페이지 등록 -->
<!-- 즉, 데이터를 넘겨주며 요청하는 JSP 페이지의 주소 지정 -->
<!-- 4. form의 method 속성은 데이터 전송 및 페이지 요청 방식 지정 -->
<!-- (get또는 post -->
<form action="Receive01.jsp" mthod="get">
<table class ="tbl" style="width: 50%">
<tr>
<th>이름</th>
<td>
<!-- 6. id,name 속성은 -->
<!-- 어떤 계층 어떤 영ㅇ역에서 어떤 선택자로 활용할지에 따라 -->
<!-- 적절히 생각해서 부여해야 한다. -->
<!-- 기억 !★★ ※ name 속성은 JSP에서 사용하게 될 식별자 ★★ -->
<input type="text" name="userName" class ="txt" placeholder="이름을 입력하세요" >
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type="tel" name="userTel" class ="txt" placeholder="전화번호를 입력하세요" >
</td>
</tr>
<tr style="height: 40px;">
<th colspan="2">
<!-- 5. submit 을 통해 전송 기능 수행 -->
<!-- btton태그는 태그와 태그 사이에 다른 태그를 넣을 수 있다 -->
<button type="submit" style="width: 150px;" class="btn">회원가입</button>
<button type="reset" style="width: 150px;" class="btn">취소</button>
</table>
</form>
</div>
</div>
</body>
</html>
Receive01.jsp
Receive01.jsp
<%@page import="org.omg.CORBA.Request"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
//데이터수신 ->스크립릿영역->자바문법 적용
//한글 수신을 위한 인코딕 방식 지정
//※ 웹은 UTF-8을 기본 인코딩 방식으로 삼고 있음.
request.setCharacterEncoding("UTF-8");
//이 처리는 데이터 수신 처리보다 먼저 수행해야
//처리 과정에서 지정된 인코딩 방식이 달라
//한글이 깨지지 않은 상태로 수신할 수 있음.
//스크림 릿 영역 - > send01에서 던진 데이터들을 처리해야 함. (자바 문법 적용)
//Send01에서 name값을 가져와야함.
String userName = request.getParameter("userName");
String userTel=request.getParameter("userTel");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 표현식에서 찍어보기 -->
<div>
<h1>가입확인</h1>
<hr>
</div>
<div>
<span><%=userName%></span>님,회원 가입이 완료되었습니다.<br> 회원님께서 등록하신 전화번호는<span><%=userTel %></span>입니다.<br>
</div>
</body>
</html>