Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
[JSP & Servlet] 20231208 [프로그램소스 (HTML → JSP)] - Send01, Receive01, Send02, Receive02 본문
[JSP & Servlet]/Program source (JSP & Servlet)
[JSP & Servlet] 20231208 [프로그램소스 (HTML → JSP)] - Send01, Receive01, Send02, Receive02
Jelly-fish 2023. 12. 10. 14:58WebApp07
01
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 > ← 회원가입 click
- 회원가입 버튼 클릭 시
『김수환님, 회원 가입이 완료되었습니다.
회원님께서 등록하신 전화번호는 010-1111-1111 입니다.』
라는 내용을 출력하는 JSP 페이지(Receive01.jsp)를 구성하여
데이터를 전달할 수 있도록 한다.
- 사용자의 최초 요청 주소는
http://localhost:3306/WebApp07/Send01.html 로 한다.
○ Send01.html
Receive01.jsp
(~ 10:20)
-->
<!--
최초로 만나는 페이지가 무조건 HTML은 아니다.
클라이언트와 최초로 만나는 페이지에
첫 실행시 『동적 처리 과정』이 필요할 경우에는 jsp로 구성한다.
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◎ 《정적인 페이지》 : [매일매일 메뉴가 똑같은 홈페이지 - HTML]
◎ 《동적인 페이지》 : [요일별 · 시즌별 메뉴가 달라지는 홈페이지 - JSP]
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
-->
<!--
1. 클라이언트 측에서 서버 측에 데이터 전송 및 페이지 요청을 위해
form 태그 필요.
2. form 태그 영역 안에 들어가야 하는 대상은
이름과 전화번호와 submit
3. form 태그의 action 속성은 데이터를 전송하며 요청하는
jsp 페이지의 주소 지정 → Receive01.jsp
4. form 태그의 method 속성은 데이터 전송 및 페이지 요청 방식
→ get 또는 post
-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩ 선 생 님 해 설 ▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<div>
<h1>데이터 송수신 실습</h1>
<hr>
</div>
<div>
<form action="Receive01.jsp" method="post">
<!--
5. id, name 속성은 어떤 여역에서 어떤 선택지를 활용하느냐에 따라
적절히 판단하여 부여할 수 있도록 한다.
6. name 속성은 JSP 에서 주로 사용하게 될 식별자.
-->
<table class="table">
<tr>
<th>이름</th>
<td>
<input type="text" name="userName" class="txt">
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type="text" name="userTel" class="txt">
<!-- <input type="tel"> -->
<!--
"tel" : 입력 과정에서 특별히 뭔가 달라지지 않지만
커서를 입력창에 놓았을 때 사용자가 여러 번 입력했던 값들이
자동완성 되어 아래에 나타나도록 한다.
(인텔리센스 활용하여 사용자 편의성 증대를 위한 속성값.)
-->
</td>
</tr>
<tr>
<td colspan="2">
<!--
7. submit 을 통해 전송 기능을 수행할 수 있다.
『<input type="submit" value="회원가입">』 과 동일한 코드
button 은 이미지 또는 다른 태그들을 포함할 수 있으며
input 은 스타일 구성을 폭넓게 할 수 있다.
-->
<button type="submit" class="btn" style="width: 150px;">회원 가입</button>
<button type="reset" class="btn" style="width: 150px;">취소</button>
</td>
</tr>
</table>
</form>
</div>
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩ 내 풀 이 ▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--
<div>
<form action="Receive01.jsp" method="post">
<table>
<tr>
<td>이름</td>
<td><input type="text" name="name" class="txt">
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="tel" class="txt">
</tr>
<tr>
<td><input type="submit" value="회원가입" class="btn"></td>
</tr>
</table>
</form>
</div>
-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
</body>
</html>
Receive01.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립릿 영역
// 이전 페이지(Send01.html)로부터 데이터 수신
// → userName, userTel
// 한글 수신을 위한 인코딩 방식 지정
//-- 웹은 UTF-8 을 기본 인코딩 방식으로 삼고 있음.
// 그러므로 기본 설정은 UTF-8 로 구성하는 것이 좋음.
// (하지만, 데이터를 전송하는 페이지에서 EUC-KR 과 같이 다른 인코딩 방식으로
// 처리해서 전송하고 있는 상황이라면... 그에 맞는 인코딩 방식이 지정되어야
// 한글이 깨지지 않음.
// 또한, 지금 하고 있는 이 처리는... 데이터를 수신해서 꺼내는 처리보다
// 먼저 수행디어야 한글이 깨지지 않은 상태로 수신할 수 있음.)
request.setCharacterEncoding("UTF-8");
String userName = request.getParameter("userName");
String userTel = request.getParameter("userTel");
/*
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String tel = request.getParameter("tel");
*/
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<%--
<p>『<%=name %>님, 회원 가입이 완료되었습니다.<br>
회원님께서 등록하신 전화번호는 <%=tel %> 입니다.』</p> --%>
<div>
<h1>데이터 송수신 실습 01</h1>
<hr>
</div>
<div>
<h2>가입 확인</h2>
<!-- <span style="color: blue; font-weight: bold;">김수환</span>님, -->
<span style="color: blue; font-weight: bold;"><%=userName %></span>님,
회원 가입이 완료되었습니다.<br>
회원님께서 등록하신 전화번호는
<!-- <span style="color: red; font-weight: bold;">010-1111-1111</span> 입니다. <br> -->
<span style="color: red; font-weight: bold;"><%=userTel %></span> 입니다. <br>
</div>
</body>
</html>
01
Send02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send02.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!--
○ 데이터 송수신 실습 02
- 이름과 성적 데이터를 입력받는 html 페이지를 구성한다.
이름 [ textbox ] ← 박가영
국어점수 [ textbox ] ← 90
영어점수 [ textbox ] ← 80
수학점수 [ textbox ]
← 70
< 전송 > < 취소 >
- 내용 입력 후 전송 버튼 클릭 시
『박가영님, 성적 처리가 완료되었습니다.
회원님의 점수는 국어:90점, 영어:80점, 수학:70점 입니다.
총점은 240점, 평균은 80.0점 입니다.』
라는 내용을 출력하는 JSP 페이지(Receive02.jsp)를 구성하여
데이터를 전달할 수 있도록 한다.
- 사용자 최초 요청 주소는
http://localhost:3306/WebApp07/Send02.html 로 한다.
○ Send02.html
Receive02.jsp
(~ 11:15)
-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩ 선 생 님 해 설 ▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<div>
<h1>데이터 송수신 실습02</h1>
<hr>
</div>
<div>
<form action="Receive02.jsp" method="post">
<table class="table">
<tr>
<th>이름</th>
<td>
<input type="text" name="userName" class="txt"
placeholder="이름 입력">
</td>
</tr>
<tr>
<th>국어점수</th>
<td>
<input type="text" name="kor" class="txt" placeholder="0 ~ 100">
</td>
</tr>
<tr>
<th>영어점수</th>
<td>
<input type="text" name="eng" class="txt" placeholder="0 ~ 100">
</td>
</tr>
<tr>
<th>수학점수</th>
<td>
<input type="text" name="mat" class="txt" placeholder="0 ~ 100">
</td>
</tr>
<tr>
<td>
<button type="submit" class="btn control" style="width: 150px;">전송</button>
</td>
<td>
<button type="reset" class="btn control" style="width: 150px;">취소</button>
</td>
</tr>
</table>
</form>
</div>
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩ 내 풀 이 ▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--
<div>
<form action="Receive02.jsp" method="post">
<table class="table">
<tr>
<th>이름</th>
<td>
<input type="text" name="name" class="txt">
</td>
</tr>
<tr>
<th>국어점수</th>
<td>
<input type="text" name="kor" class="txt">
</td>
</tr>
<tr>
<th>영어점수</th>
<td>
<input type="text" name="eng" class="txt">
</td>
</tr>
<tr>
<th>수학점수</th>
<td>
<input type="text" name="mat" class="txt">
</td>
</tr>
<tr>
<td>
<button type="submit" class="btn">전송</button>
</td>
<td>
<button type="reset" class="btn">취소</button>
</td>
</tr>
</table>
</form>
</div> -->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
<!--▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩-->
</body>
</html>
Receive02.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립릿 영역
// 이전 페이지(Send02.html)로부터 넘어온 데이터 수신
// → userName, kor, eng, mat
request.setCharacterEncoding("UTF-8");
String userName = request.getParameter("userName");
String korStr = request.getParameter("kor");
String engStr = request.getParameter("eng");
String matStr = request.getParameter("mat");
// 바인딩이 실패했을 경우를 대비하여, 모두 0으로 초기화 한다.
int kor, eng, mat;
kor=eng=mat=0;
int tot=0;
double avg = 0;
try
{
kor = Integer.parseInt(korStr);
eng = Integer.parseInt(engStr);
mat = Integer.parseInt(matStr);
tot = kor+eng+mat;
avg = tot / 3.0;
}
catch(Exception e)
{
System.out.println(e.toString());
}
%>
<%-- [내 풀이]=====================================================
<%
request.setCharacterEncoding("UTF-8");
String userName = request.getParameter("name");
String userKor = request.getParameter("kor");
String userEng = request.getParameter("eng");
String userMat = request.getParameter("mat");
int kor = Integer.parseInt(userKor);
int eng = Integer.parseInt(userEng);
int mat = Integer.parseInt(userMat);
int tot = kor+eng+mat;
// ===========================================================
// ⓐ [ Math.round((실수값)*100) / 100.0 ] 을 이용한 방식
// ===========================================================
double avg = Math.round((tot/3.0)*100) / 100.0;
// ===========================================================
// ===========================================================
// ⓑ [ String.format("%.1f", (tot/3.0)) ] 을 이용한 방식
// ===========================================================
/* String avg = String.format("%.1f", (tot/3.0)); */
// ===========================================================
%>
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@font-face {
font-family: 'S-CoreDream-3Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {font-family:'S-CoreDream-3Light'; }
span {color: blue; font-weight: bold; font-size: 15pt;}
/* span {background-color: #f2ffed; font-size: 15pt;} */
p {background-color: #dcfaf0; padding: 10pt; border-radius: 20pt; }
</style>
</head>
<body>
<div>
<h1>데이터 송수신 실습 02</h1>
<hr>
</div>
<div>
<span><%=userName %></span>님, 성적 처리가 완료되었습니다.<br>
회원님의 점수는 국어:<span><%=kor %></span>점, 영어:<span><%=eng %></span>점, 수학:<span><%=mat %></span>점 입니다.<br>
총점은 <span><%=tot %></span>점, 평균은 <span><%=String.format("%.1f", avg) %></span>점 입니다.
</div>
<!-- String.format() 을 통해, 소수부를 한 자리만 출력하도록 처리해 주었다. -->
<!-- 자바에서 모든 것을 연산 끝내고 보여줄 것인지 : 데이터를 소수부로 가공 후 출력
웹 페이지에서 보여줄 때 보이는 형식을 바꿔줄 것인지 : 원본 데이터의 일부 출력
[제어 가능 영역이 다양하다]
업무가 어떻게 변화함에 따라, 기능을 어디에 부여할 것인지를 생각하고 구성해야 한다.
(자동차 브레이크에만 후미등 발광 기능이 붙어있다면, )
보여지는 페이지에서만 다르게 보여지게끔 하는 처리가 일반적이다.
따라서 span 태그 사이에 스크립트릿으로 변수를 보이는 처리를 변경해 준것.
데이터를 직접적으로 가공하여 저장한 것이 아니다.(원본 데이터의 성격을 바꾸지 않고
처리해 주어야한다.)
연산 결과 필터링 → 나중에 표시값을 다르게할 때 로직 전부를 뜯어고쳐야됨
보여지는 것을 달라지도록 구성 → 뷰만 달라지게 하면 된다!
모델, 뷰, 컨트롤러
생명 주기가 다르다. (하나만 추출해서 처리해야할 일이 생길 수 있다.)
클래스 하나로 차를 만드는게 아니라, 클래스 여러 개가 모여서 차를 이루는 것. -->
<%--
<div>
<h1>성적 처리가 완료되었습니다.</h1>
</div>
<p>
<span style="color: #097e85; text-align: center; font-weight: bold;"><%=userName %></span>님, 성적 처리가 완료되었습니다.<br>
회원님의 점수는 국어: <%=kor %>점, 영어:<%=eng %>점, 수학:<%=mat %>점 입니다.<br>
총점은 <%=tot %>점, 평균은 <%=avg %>점 입니다.
</p>
--%>
</body>
</html>
'[JSP & Servlet] > Program source (JSP & Servlet)' 카테고리의 다른 글
'[JSP & Servlet]/Program source (JSP & Servlet)' Related Articles
more
