[ Review ]
Web Programming
왜 웹이 전체적으로 프로그래밍 시장을 점유하게 됐을까?
> 브라우저만 있으면, 별도의 프로그램 설치없이 다 서비스를 받을 수 있기 때문에 !
네트워크를 전제로 실행된다
> 자바가 있기가 있던 이유는, 인터넷(네트워크)이 활성화되며 객체 지향 언어가 활성화됐다!
-- 클라이언트 부분 --
클라이언트 프로그램 -> 웹 브라우저
: html, js, css를 해석함 (html - 문서의 contents / js - 동작, 행위 / css - 디자인, 스타일)
: 사용자가 정보를 검색하거나, 입력하는 등 소통이 필요하다.
: 이것은 TCP-IP 기반(우리가 그동안 썼던 소켓)으로, 해석할 때 http에 의거해서 해석한다!
: 결과적으로 클라이언트에 도달하는 것은 html이다.
request (요청)
: HTTPRequest 메세지 (startline / header / body (POST data) )로 이루어짐
html
-form 안에 있는 내용으로 서버에 내용을 전송한다.
- <form action = "서버url" method(서버에 어떤 방식으로 요청하겠다) = "GET" -/ "POST">
- GET 방식 :서버에 영향을 주지 않고, 조회하는것
- POST 방식 : 서버에 영향을 주는것, setCharacterEncoding이 필요
- <input type=" " name=" ">
- name이 있어야 서버에서 받아올 수 있다.
response (응답)
: status line / header / body (html) 로 이루어짐
-- 서버 부분 --
WAS
1) Web Server - 서버 소캣, accept ..
2) Web Container
3) Web apps
4) Dynamic Web project
- ① web.xml (DD) / @annotation 정보를 처음에 읽음
- ② ServletContext가 적재됨(읽음) (webApplication의 공유정보)
- ③ ServletContextListener를 통해 웹 어플리케이션의 LifeCycle event를 감지할 수 있다 (①② 의 업무를 함)
- ④ jsp LifeCycle
: is loaded ? -> no -> .jsp -> .java -> .class -> class loading -> 객체 생성 -> init(servletConfig) -> service(request, response) -> browser와 소통(통신)
: is loaded ? -> yes -> service(request, response) -> browser와 소통(통신)
[ Form 연동 ]
| 목차 |
| 1. link (Query String 방식) |
| 2. ArrayList & input type="radio" |
| 3. Select & option |
| 4. Select - Onchange |
| 5. Checkbox |
| 6. action.jsp 내에서 javascript 사용 |
1. link
* Query String 방식
서버URL?name=value&name2=value2 로 설정 가능
: 위와 같이 전송하면 Servlet과 JSP에서 request.getParameter(name)으로 반환받을 수 있다.
코드 예시
/step1-link.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>link 연습</title>
</head>
<body>
<%-- Query String 방식 --%>
<%-- 서버URL? name=value & name2=value2 로 설정 가능 --%>
<%-- command를 find로, no를 1로 설정 --%>
<a href = "step1-link-action.jsp?command=find&no=1">
첫번째 링크</a>
<br>
<%-- command를 update로, no를 2로 설정 --%>
<a href = "step1-link-action.jsp?command=update&no=2">
두번째 링크</a>
</body>
</html>
/step1-link-action.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과 페이지</title>
</head>
<body bgcolor="yellow">
결과 페이지 입니다.
<br>
command : <%=request.getParameter("command")%>
<br>
no : <%=request.getParameter("no") %>
</body>
</html>
브라우저 화면
-> 첫번째 링크
-> 두번째 링크
2. ArrayList & input type="radio"
코드 예시
1. ArrayList를 이용해서 라디오버튼을 3개 만들기
2. action.jsp에서 [파스타 주문 완료!] 뜨게 하기
/step2-radio.jsp
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
ArrayList<String> list = new ArrayList<String>();
list.add("치킨");
list.add("파스타");
list.add("프로포즈");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>radio test</title>
</head>
<body>
<%-- action.jsp에서 파스타 주문 완료! --%>
<form action="step2-radio-action.jsp">
<%-- ArrayList를 이용해서 라디오버튼을 3개 만들기 --%>
<% for (int i=0; i<list.size(); i++){ %>
<input type="radio" name="menu" value="<%=list.get(i)%>"
required="required">
<%=list.get(i)%>
<br>
<% } %>
<input type="submit" value="주문">
</form>
</body>
</html>
/step2-radio-action.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주문 결과</title>
</head>
<body>
[ 주문 내역 ]<br>
<%=request.getParameter("menu") %> 주문 완료!
</body>
</html>
브라우저 화면
-> 결과 화면 (action)
3. Select
코드 예시
1. JSP로 1호선에서 9호선까지 화면에 표현되도록 하기
(서버에 전송되는 정보는 (1~9)이고 화면에 표현되는 형식은 1호선~9호선이다)
2. step3-select-action.jsp 화면에서,
1호선~4호선까지는 "코레일 [ ]호선 선택하셨습니다" 로 출력
5호선~9호선까지는 "도시철도 [ ]호선 선택하셨습니다"로 출력
/step3-select.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<body>
<form action="step3-select-action.jsp">
<select name = "line" required="required">
<%-- jsp로 1호선에서 9호선까지 화면세 표현되도록 하세요
서버에 전송되는 정보는 (1~9)이고
화면에 표현되는 형식은 1호선~9호선이다 --%>
<% for(int i=1; i<10; i++) { %>
<option value="<%=i %>"> <%=i %>호선 </option>
<% } %>
</select>
<input type="submit" value="선택">
</form>
</body>
</html>
/step3-select-action.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과 화면</title>
</head>
<%-- step3-select-action.jsp 화면에서,
1호선~4호선까지는 "코레일 [ ]호선 선택하셨습니다" 로 출력
5호선~9호선까지는 "도시철도 [ ]호선 선택하셨습니다"로 출력
--%>
<body>
<% String line = request.getParameter("line"); %>
<% if (Integer.parseInt(line) <= 4) { %>
코레일 <%=line %>
<% } else { %>
도시철도 <%=line %>
<% } %>
호선 선택하셨습니다
</body>
</html>
브라우저 화면
--> 결과 화면 1
--> 결과 화면 2
4. Select - Onchange
코드 예시
1. option은 list를 활용해서 3개 만든다.
2. step4-select-action.jsp는 선택한 꽃 이미지를 보여준다.
3. 단, '선택'버튼으로 submit하지 않고, 선택하면 바로 정보가 action으로 전송되도록한다! (javascript에서 처리)
★ submit 버튼을 이용하지 않고도, js를 통해 자동으로 submit할 수 있다 ★
/step4-select-onchange.jsp
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
ArrayList<String> list = new ArrayList<String>();
list.add("해바라기");
list.add("캐모마일");
list.add("동백꽃");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step4-select-onchange</title>
<script type="text/javascript">
function sendFlower() {
var f = document.FlowerForm;
if (f.flower.value === ""){ //공란이면
alert("옵션을 선택해주세요.")
} else {
//폼객체.submit()
f.submit();
}
}
</script>
</head>
<%--
1. option은 list를 활용해서 3개 만든다.
2. step4-select-action.jsp는 선택한 꽃 이미지를 보여준다.
--%>
<body>
<form action="step4-select-action.jsp" name="FlowerForm">
<%-- select 단계에서, js의 sendFlower()로 넘어감! --%>
<select name="flower" onchange="sendFlower()">
<option value=""> [ Flower ]</option>
<% for (int i=0; i<3; i++) { %>
<option value="<%=list.get(i) %>">
<%=list.get(i) %></option>
<% } %>
</select>
<!-- <input type="submit" value="선택"> -->
</form>
</body>
</html>
/step4-select-action.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과 화면</title>
</head>
<body>
<% String flowerName = request.getParameter("flower"); %>
<%=flowerName%><br>
<img src= "picture/<%=flowerName%>.png">
</body>
</html>
브라우저 화면
--> [ Flower] 즉, 아무것도 선택을 안 할 시
--> 해바라기 선택 시
--> 캐모마일 선택 시
--> 동백꽃 선택 시
5. Checkbox
코드 예시
1. ArrayList를 이용해서 체크박스 3개를 동적으로 생성하기
2. javascript로 체크박스를 하나 이상 선택했을 때, 서버에 전송한다
(만약 아무 메뉴도 선택하지 않을 경우 alert으로 '메뉴를 선택하세요' 띄우고 전송하지 않는다.)
(* checkbox에서는 require="require"이 먹지 않으므로, js으로 조정해준다.)
3. step5-checkbox-action.jsp에서 전송받는 메뉴 정보를 테이블 형식으로 화면에 보여준다.
/step5-checkbox.jsp
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox</title>
<script type="text/javascript">
function CheckForm() {
var flag = false;
// "menu" component 객체 생성
var menuComp = document.getElementsByName("menu");
// for문에서 각 배열 접근
// .checked를 이용해 선택 여부 확인하여
// submit될 수 있도록 flag를 true로 변환
for (var i = 0; i < menuComp.length; i++) {
if (menuComp[i].checked){
flag = true; //체크박스가 하나라도 있으면 flag true
break;
}
}
// 여전히 주문이 없을 경우(flag가 false이면)
// submit이 안될 예정
// + alert 띄우기
if (flag === false){
alert("메뉴를 선택하세요");
}
return flag;
}
</script>
</head>
<body>
<%
ArrayList<String> list = new ArrayList<String>();
list.add("단호박스무디");
list.add("그릭요거트");
list.add("버블티");
%>
<form action="ste5-checkbox-action.jsp"
onsubmit="return CheckForm()">
<% for(int i=0; i<list.size(); i++) { %>
<input type="checkbox" name="menu" value="<%=list.get(i) %>">
<%=list.get(i) %><br>
<% } %>
<input type="submit" value="주문">
</form>
</body>
</html>
/step5-checkbox-action.jsp
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주문완료</title>
<%-- CSS style 적용 --%>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
<body>
<table>
<thead>
<tr>
<th>순번</th>
<th>메뉴명</th>
</tr>
</thead>
<%-- tr, td를 동적으로 보여준다 --%>
<tbody>
<% String[] list = request.getParameterValues("menu"); %>
<% for(int i=0; i < list.length; i++) { %>
<tr>
<td><%=i+1 %></td>
<td><%=list[i] %></td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>
브라우저 화면
-> 메뉴 체크 없이 그냥 주문 누르면 alert 뜸
-> 단호박스무디, 버블티 체크하고 주문 누르면 table에 들어감
6.action.jsp내에서javascript사용
코드 예시
[파프리카] 이름 입력하고 [88]점 점수 입력하면
-> 100 ~ 90 이상 : 파프리카님, A학점
-> 90미만 ~ 80이상 : 파프리카님, B학점
-> 80미만 ~ 70이상 : 파프리카님, C학점
-> 70미만 : F학점 --> 파프리카님, F학점입니다. alert 후, step7-F.jsp로 이동
/step7-F.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>재수강</title>
</head>
<body>
<img src = "picture/river.png">
</body>
</html>
/step7-form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step7-form</title>
</head>
<body>
<%--
파프리카 이름 입력하고 88점 점수 입력하면
-> 100 ~ 90 이상 : 파프리카님, A학점
-> 90미만 ~ 80이상 : 파프리카님, B학점
-> 80미만 ~ 70이상 : 파프리카님, C학점
-> 70미만 : F학점 --> 파프리카님, F학점입니다. alert 후,
step7-F.jsp로 이동
--%>
<form action="step7-grade.jsp">
이름 <input type="text" name="studentName" required="required">
점수 <input type="number" name="studentScore" min="0" max="100">
<input type="submit" value="학점 확인">
</form>
</body>
</html>
/step7-grade.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>학점 확인</title>
</head>
<body>
<% String name = request.getParameter("studentName");
int score = Integer.parseInt(request.getParameter("studentScore"));
String grade = "F";
if (score >= 90)
grade = "A";
if (score >= 80)
grade = "B";
if (score >= 70)
grade = "C";
%>
<%
if (grade.equals("F")) { %>
<%-- javascript 사용! --%>
<script type="text/javascript">
//alert
alert("<%=name%>님, F학점입니다.")
//페이지 이동 (loaction.href="[path]")
location.href = "step7-F.jsp";
</script>
%>
<%
} else { %>
<%=name %>님 <%=grade %> 학점입니다.
%>
<% } %>
</body>
</html>
브라우저 화면
-> 88점 입력 시,
-> 50점 입력 시,
'Java Web Programming > 4. JSP' 카테고리의 다른 글
| [JSP/Model2] Model 2 Architecture ( Singleton Pattern 싱글톤 패턴) (0) | 2020.08.27 |
|---|---|
| [JSP/Model2] Model 2 Architecture ( MVC Pattern ) / Model 1 설계방식과 차이점 ? (0) | 2020.08.27 |
| [JSP] Model 1 Architecture (설계방식) (0) | 2020.08.27 |
| [JSP] JSP와 DB 연동 - basic (0) | 2020.08.26 |
| [JSP] JSP 기초 basic - 기본 문법 / JSP LifeCycle / table / form과 연동 (0) | 2020.08.25 |
