27일차(2)/jsp(4) : servlet, jsp 비교
<index>
- 쇼핑몰이라고 가정하고, 클라이언트가 물건 구매 후 이동하는 buy.jsp 링크를 만들어보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>인덱스 페이지입니다.</h1>
<ul>
<li><a href="fortune">오늘의 운세 보기</a></li>
<li><a href="fortune.jsp">오늘의 운세 보기2</a></li>
<li><a href="friends/list">친구 목록보기</a></li>
<li><a href="friends/list.jsp">친구 목록보기2</a></li>
<li><a href="member/list">회원 목록보기</a></li>
<li><a href="member/list.jsp">회원 목록보기2</a></li>
</ul>
<!--
폼을 제출(submit)하면 (type="submit"인 전송 버튼을 누르면)
action="요청경로"
method="전송방식"
서버에 "요청경로"대로 요청이 되고,
폼에 입력한 내용은 "전송방식"으로 전송이 된다.(get or post)
- form 사용법
1. action 속성의 값은 폼을 제출했을때 요청되는 경로가 된다.
2. method 속성의 값은 전송 방식을 지정한다. 생략하면 default 값은 get이다.
3. form의 자손요소 중에 type="submit" 버튼을 누르면 폼이 제출된다.
4. 전송 방식은 get 방식과 post 방식이 있는데
get 방식 전송은 입력한 정보를 주소창에 달고 가는 방식이고
post 방식 전송은 요청의 몸통에 달고가는 방식이기 때문에 주소창에 보이지 않는다.
-->
<form action="/Step01_Servlet/send" method="get">
<input type="text" name="msg" placeholder="서버에 할말 입력..."/>
<button type="submit">전송</button>
</form>
<br>
<form action="/Step01_Servlet/send2" method="post">
<input type="text" name="msg" placeholder="서버에 할말 입력..."/>
<button type="submit">전송</button>
</form>
<br>
<form action="/Step01_Servlet/send.jsp" method="post">
<input type="text" name="msg" placeholder="서버에 할말 입력..."/>
<button type="submit">전송</button>
</form>
<br />
<p>링크를 눌러도 GET 방식 전송 파라미터를 전달할 수 있다.</p>
<p>아래의 링크를 눌러 보세요.</p>
<ul>
<li><a href="shop/buy.jsp?num=1&amount=2">1번 상품 2개 구입하기</a></li>
<li><a href="shop/buy.jsp?num=5&amount=3">5번 상품 3개 구입하기</a></li>
</ul>
</div>
</body>
</html>
- get 방식은 주소창에 입력받은 내용을 달고 간다.
http://localhost:8888/Step01_Servlet/shop/buy.jsp?num=1&amount=2
- 여기의 / 은 webapp이다! (실제로 존재하는 폴더 경로)
- 상대경로 : <a href="shop/buy.jsp?num=1&amount=2">
- 절대경로 : <a href="/Step_Servlet/shop/buy.jsp?num=1&amount=2">
→ context 경로를 붙여주면 절대경로가 된다.
- get 전송방식은 쇼핑몰 홈페이지, 인터넷에서 흔하게 볼 수 있다.
- 'keyword'라는 파라미터가 '후드티'라는 입력받은 문자열을 가지고 이동한 것!
전송방식은 get방식이라는 것을 확인할 수 있다.
- 실제로 검사에서 get방식인 것을 확인해볼 수 있다.
- input name="keyword" 파라미터도 확인 가능!
- Item, 코드명 등 클릭했을 때 이동할 웹페이지 주소를 미리 준비해둔 것이다.
- <a target="_blank"> : 클릭시 해당 창이 아니라 새로운 페이지가 열리면서 이동하는 것.
- 파라미터가 여러개일 경우 & 를 붙여서 여러 개를 연결할 수 있다.
- shop 폴더안에 <buy.jsp> 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
전송 파라미터를 추출하면 숫자 모양을 띄고 있어도 문자열(String)으로 읽어와진다.
읽어와서 숫자(정수)로 바꾸고 싶으면 Integer 클래스의 static 메소드 .parseInt() 메소드를 활용하면 된다.
전송 파라미터 ex) ?num=x&amount=x
*/
int num=Integer.parseInt(request.getParameter("num"));
int amount=Integer.parseInt(request.getParameter("amount"));
//GET 방식 파라미터로 전달된 값을 가지고 무언가 구입하는 로직을 처리하고 응답한다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/shop/buy.jsp</title>
</head>
<body>
<p>
<!-- 클라이언트에게 출력은 되지만 클라이언트(웹브라우저)가 무시하는 주석 -->
<strong><%=num %></strong>번 상품 <strong><%=amount %></strong>개를 주문했습니다.
<%--
jsp 페이지에서의 주석 : jsp 페이지가 무시하는 주석
context path는 나중에 제거되거나 변경될 에정이기 때문에 java code 영역이나 jsp 페이지에
실제로 코딩이 되어 있으면 안 된다.
그래서 메소드 혹은 아래의 EL을 활용해서 context path를 출력해야 한다.
--%>
<a href="${pageContext.request.contextPath }/index.html">인덱스로 돌아가기</a>
</p>
</body>
</html>
- getParameter를 사용해 가져온 값은 숫자여도 문자로 인식된다. .parseInt() 메소드를 사용해 숫자로 바꿔준다.
- num, amount라는 변수에 입력받은 값을 담아준다.
- <%= %> 참조되는 내용을 그대로 출력!
<a href="${pageContext.request.contextPath }/index.html">
- 페이지 소스 보기에서 보면 : <a href="/Step01_Servlet/index.html">
${pageContext.request.contextPath }
- context 경로를 대신 출력해주는 코드. jsp에서만 가능하다.
- context경로는 /Step01_Servlet/ 이라고 직접 작성하지 않는다.
context path는 나중에 제거되거나 변경될 예정이기 때문이다.
- 따라서 java code 영역이나 jsp 페이지에 실제로 코딩이 되어 있으면 안 된다.
→ 그래서 메소드 혹은 아래의 EL을 활용해서 context path를 출력한다.
<%-- --%> : jsp 페이지의 주석! 클라이언트에게 출력되지 않는다.
<!-- --> : 클라이언트에게 출력은 되지만 클라이언트(웹브라우저)가 무시하는 주석
- 이런 표현방식은 EL 이라는 표현언어이다. 나중에 자세히 다룰 것.
- 주석 <%-- --%> 는 아예 표시되지 않는 것을 볼 수 있다.
- 입력받은 값에 따라 링크의 주소가 달라져서, 주소만 보아도 클라이언트가 어떤 링크를 눌렀는지 알 수 있다.
참고) 자주 사용하는 문구를 스니펫 처리하기
Window-Preference-Emmet-Snippet-New
- ${pageContext.request.contextPath } 를 스니펫 처리!
- 불러올 이름(단축키?)과 설명, 내용을 적어준다.
- 주의사항! 위와 같은 경우에는 맨 앞에 \ 를 붙여주어야 한다
$를 특별한 문자열로 해석하지 말라는 의미이다.
- 이후에 입력할때 cpath+tab 입력하면 저장한 내용이 불러와진다.
참고) HTML에서의 단독요소 처리
- <br> <br /> : 둘다 가능
- <input XXXX> <input XXXX /> : 둘다 가능
- 예전에는 단독요소도 전부 / 로 닫아줘야 했는데,
HTML5 이후로는 단독요소면 꼭 닫아주지 않아도 인식하는 데에는 상관없다.
'국비교육(22-23)' 카테고리의 다른 글
| 28일차(1)/jsp(6) : DBCP활용 (Delete) (0) | 2022.11.16 |
|---|---|
| 27일차(3)/jsp(5) : DB 연결 기본 세팅, DBCP 활용 (select, insert) (0) | 2022.11.15 |
| 27일차(1)/jsp(3) : servlet, jsp 비교 (table, form) (0) | 2022.11.15 |
| 26일차(2)/jsp(2) : servlet, jsp 비교 (0) | 2022.11.13 |
| 26일차(1)/jsp(1) : Eclipse Server, Emmet 설정 등 (0) | 2022.11.13 |