Servlet/JSP - 2

클라우드 융합 Full-stack 웹 개발자 양성과정/Servlet, JSP

Servlet/JSP - 2_JSP

thesunset 2022. 11. 7. 09:29

2_JSP

1. JSP (Java Sever Page)

JSP란,

HTML형식 내에서 JAVA소스코드를 쓸 수 있어서 서블릿에서 응답화면을 구현했던 복잡함을

보다 간단하게 해결 가능한 기술

=> JSP의 가장 큰 장점은 Servlet에서는 비즈니스로직처리에만 집중하고
프레젠테이션 로직처리는(응답화면을 만들어내는 뷰) JSP에서 집중할 수 있게끔 분리하는 것

1) JSP 표현법

(1) JSP 스크립팅 요소(Scripting Element)

: JSP페이지에서 자바코드를 기술할 수 있게 해주는 기능

- 선언문 : <%! %> 변수나 메소드를 선언하기 위해 사용

- 스크립틀릿 : <% %> JSP에서 자바코드를 기술하기 위한 가장 기본적인 표현법

- 표현식(출력식) : <%= %> 자바에서 작성한 값(변수 또는 메소드 호출)을 출력하기 위해 사용

<h2>JSP 표현법</h2>

<h3>1. JSP 스크립팅 요소(Scripting Element)</h3>

<p>
    JSP페이지에서 자바코드를 기술할 수 있게 해주는 기능
</p>

<ol>
    <li>
        선언문 : &lt;%!   %&gt;
            변수나 메소드를 선언하기 위해 사용
    </li>
    <li>
        스크립틀릿 : &lt;% %&gt; <br>
            JSP에서 자바코드를 기술하기 위한 가장 기본적인 표현법 <br>
    </li>
    <li>
        표현식(출력식) : &lt;%= %&gt; <br>
            자바에서 작성한 값(변수 또는 메소드 호출)을 출력하기 위해 사용
    </li>

</ol>

    <a href="views/01_ScriptingElement.jsp">View Detail &raquo;</a>

<% 스클립틀릿 %> 안에서 자바코드의 실행순서는 순수 자바코드랑 마찬가지로 위에서 아래순서대로 흐른다.
즉, 먼저 선언을 하고나서 출력식을 통해 출력할 수 있다.

<%--JSP주석 : 개발자 도구탭봐도 안 보임--%>

- 스크립틀릿 : 이 안에 자바코드를 작성(변수선언, 초기화, 제어문 등)

예제1 ) 1 ~ 100까지의 합계를 구해보자.

<% 	int sum = 0;

    for(int i = 1; i<=100; i++){
        sum += i;
}
%>

만약 출력하고 싶다면,

스크립틀릭으로 출력 :

<% out.println(sum); %> <br>

표현식(출력)으로 출력 :

<%= sum %>

* 주의 : ; 은 쓰면 안 됨

예제1 ) 배열 사용해보기

<% 
    String[] names = {"이승철", "김승철", "홍승철"};
%>

배열의 길이 =

<%= names.length %>

* 출력 방법

① Arrays.toString메소드로 출력

: [이승철, 김승철, 홍승철]

<%= Arrays.toString(names) %>

② 반복문을 통해 HTML요소를 반복적으로 화면에 출력

<ul>
	//방법1 : for문
    <%for(int i=0; i<names.length; i++){ %>
     <li><%= names[i] %></li>
    <%} %>
	//방법2 : 향상된 for문
    <% for(String s : names) { %>
    <li><%=s %></li>
    <% } %>
</ul>

(2) 지시어 또는 지시자(Directive)

: JSP Page전체에 영향을 미치는 정보를 기술할 때 쓰임-페이지에 대한 설정

[표현법]

<%@ page / include / taplib 속성="속성값" ..%>

① taglib: JSP기능을 조금 더 확장할 수 있는 인자로 추가적인 라이브러리를 등록하는 구문

② page 지시어 : 현재 JSP페이지를 처리하는데 필요한 각종 속성들을 기술하는 부분

- language : 사용할 언어 유형을 지정
- contentType : 웹브라우저가 받아볼 페이지의 형식, 인코딩 방식 지정
- pageEncoding : JSP파일에 기록된 자바코드의 인코딩 방식 지정
- import : 자바의 import구문과 같은 의미
- errorPage : 해당 JSP상에 오류가 발생했을 경우 보여줄 에러페이지의 경로 지정

< views/02_DirectivePage.jsp >

* import예시) ArrayList와 Date 임포트하기

<%@ page import="java.util.ArrayList, java.util.Date" %>

- ArrayList

ArrayList<String> list = new ArrayList(); //import

list.add("Servlet");
list.add("JSP");

+ list의 메소드들

리스트의 길이 :

<%= list.size() %> <br>

리스트가 비었는지 :

<%= list.isEmpty() %> <br>

0번 인덱스에 들어있는 요소 , 1번 인덱스에 들어있는 요소 :

0번 인덱스에 들어있는 요소 : <%= list.get(0) %> <br>
1번 인덱스에 들어있는 요소 : <%= list.get(1) %> <br>

- Date

Date today = new Date();

+ 현재 날짜 및 시간 :

 <%=today %>

③ include 지시어 : jsp파일 안에 또 다른 jsp파일을 포함 시키고자 할 때 사용하는 지시어

< views/03_DiretiveInclude.jsp >

▷_ScriptingElement.jsp파일 include하기

<div style="border : 1px solid red;">
    <%@ include file="01_ScriptingElement.jsp" %>
</div>

- 1부터 100까지의 총 합계 :

<%= sum %>

특징 : 포함한 JSP상에 있는 모든 화면구성요소들이 뜸
포함한 JSP상에 있는 모든 변수들을 가져다 쓸 수 있음

* 중복된 변수는 사용 불가능함 (예: sum이라는 변수 불가)

- 오늘 날짜는?

<%@include file="datePrint.jsp" %>

예제) 치킨주문페이지 -- 주문요청 --> 주문요청을 받아서 처리해주는 Servlet --> 치킨 결제페이지(응답 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>
	<h1>☆반반무많이 치킨에 오신걸 환영합니다.★</h1>
	
	<h2>오늘의 날짜</h2>
	<%@ include file="datePrint.jsp" %>
	
	<br>

	<form action="/2_JSP/orderChicken.do" method="get">
		<fieldset>
			<legend>주문자 정보</legend>
			<table>
				<tr>
					<th>이름</th>
					<td><input type="text" required name="nickName"></td>
				</tr>
				<tr>
					<th>전화번호</th>
					<td><input type="text" required name="phone"></td>
				</tr>
				<tr>
					<th>주소</th>
					<td><input type="text" required name="address"></td>
				</tr>
				<tr>
					<th>요청사항</th>
					<td><textarea style="resize: none" name="message"></textarea></td>
				</tr>
			</table>	
		</fieldset>
		
		<br>

		<fieldset>
			<legend>주문 정보</legend>
		
			<table>
				<tr>
					<th>치킨</th>
					<td>
						<select name="chicken">
							<option>황금올리브치킨</option>
							<option>볼케이노치킨</option>
							<option>고추바사삭치킨</option>
							<option>허니콤보치킨</option>
							<option>호랑이치킨</option>
							<option>민트초코치킨</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>사이드</th>
					<td>
						<input type="checkbox" value="웨지감자" name="side">웨지감자
						<input type="checkbox" value="치즈볼" name="side">치즈볼
						<input type="checkbox" value="치즈스틱" name="side">치즈스틱
						<input type="checkbox" value="떡볶이" name="side">떡볶이
						<input type="checkbox" value="오뎅탕" name="side">오뎅탕
						<input type="checkbox" value="민트초코아이스크림" name="side">민트초코아이스크림
					</td>
				</tr>
				<tr>
					<th>음료</th>
					<td>
						<input type="checkbox" value="제로콜라(펩시)" name="drink">제로콜라(펩시)
						<input type="checkbox" value="테라" name="drink">테라
						<input type="checkbox" value="데자와" name="drink">데자와
						<input type="checkbox" value="솔의눈" name="drink">솔의눈
						<input type="checkbox" value="맥콜" name="drink">맥콜
						<input type="checkbox" value="민트초코우유" name="drink">민트초코우유
					</td>
				</tr>
				<tr>
					<th>결제방식</th>
					<td>
						<input type="radio" name="payment" value="card" checked>카드결제
						<input type="radio" name="payment" value="cash">만나서 현금결제
					</td>
				</tr>
			</table>
		</fieldset>
		<input type="submit" value="주문하기">
		<input type="reset" value="초기화">
	</form>
</body>
</html>

< com.kh.controller/ChickenServlet >

- doGet메소드

1) 전달값 중에 한글이 있을 경우에는 인코딩 처리(POST방식일 경우)

2) 요청 시 전달한 값 뽑기 및 데이터 가공처리 => 변수에 기록

- request.getParameter("키") : String형의 값

- request.getParameterValues("키") : String[]

> 주문자 정보

String nickName = request.getParameter("nickName"); //"닉네임"
String phone = request.getParameter("phone"); //"01011112222"
String address = request.getParameter("address"); //"서울시 중구 ~"
String message = request.getParameter("message"); //" " / "20분 안에 가져다 주세요."

> 주문정보

String chicken = request.getParameter("chicken"); //"황금올리브 치킨"
String[] sides = request.getParameterValues("side"); //["치즈볼", "치즈스틱"] / null
String[] drinks = request.getParameterValues("drink"); //["솔의눈", "데자와"] /null
String payment = request.getParameter("payment"); //"cash", "card"

3) 요청처리

보통의 흐름 : Controller-Service-DAO-DB

사용자가 보게될 내용을 처리 : 가격

int price = 0;

치킨가격 + 사이드 추가 시 가격 + 음료 추가 시 가격 = 총 결제할 금액

- 치킨

switch(chicken) {
case "황금올리브치킨" :
case "고추바사삭치킨" : price += 20000; break;
case "볼케이노치킨" : price += 30000; break;
case "허니콤보치킨" : price += 14000; break;
case "호랑이치킨" : price += 18000; break;
case "민트초코치킨" : price += 50000; break;
}

- 사이드

if(sides != null) {
    for(int i = 0; i<sides.length; i++) {
        switch(sides[i]) {
        case "웨지감자" :  
        case "치즈스틱" : price += 5000; break; 
        case "치즈볼" : price += 3000; break; 
        case "떡볶이" : price += 8000; break; 
        case "오뎅탕" : price += 10000; break; 
        case "민트초코아이스크림" : price += 1000; break; 
        }
    }
}

- 음료

if(drinks != null) {
    for(int i = 0; i<drinks.length; i++) {
        switch (drinks[i]) {
        case "맥콜" : 
        case "제로콜라(펩시)" : price += 2000; break;
        case "데자와" : 
        case "솔의눈" : price += 1000; break;
        case "테라" : price += 5000; break;
        case "민트초코우유" : price += 3000; break;
        }
    }
}

4) 요청 처리 후 사용자가 보게 될 응답페이지 만들기 또는 JSP에게 위임

> request의 attribute라는 여역에 응답페이지에 필요한 값 담기

 request.setAttribute("nickName", nickName);
 request.setAttribute("phone", phone);
 request.setAttribute("address", address);
 request.setAttribute("message", message);

 request.setAttribute("chicken", chicken);
 request.setAttribute("sides", sides);
 request.setAttribute("drinks", drinks);
 request.setAttribute("payment", payment);

 request.setAttribute("price", price);

RequestDispatcher 객체 생성(위임할 JSP파일 경로 기술) & request.getRequestDispatcher() 호출하면 반환

RequestDispatcher view = request.getRequestDispatcher("views/05_ChickenPayment.jsp");
view.forward(request, response);

< views/05_ChickenPayment.jsp >

request의 attribute영역에 저장된 객체들을 get하기 == > object타입이므로 각 value값에 맞는 자료형으로 형변환해주기

<%
	String nickName = (String)request.getAttribute("nickName"); // : object타입
	String phone = (String)request.getAttribute("phone");
	String address = (String)request.getAttribute("address");
	String message = (String)request.getAttribute("message");
	
	String chicken = (String)request.getAttribute("chicken");
	String[] sides = (String[])request.getAttribute("sides");
	String[] drinks = (String[])request.getAttribute("drinks");
	
	
	String payment = (String)request.getAttribute("payment");
	
	int price = (int)request.getAttribute("price");
%>

* 사용자가 입력한 값들의 경우의 수를 고려해서 if문을 사용해 나눠주기

- 주문자 정보

<h4>주문자 정보</h4>

<ul>
    <li>닉네임 : <%= nickName %></li>
    <li>전화번호 : <%=phone %></li>
    <li>주소 : <%=address %></li>

<%if(message.equals("")) { %>
<!-- case1) 요청사항을 작성하지 않은 경우 -->
    <li>요청사항 : 없음</li>
<%} else {%>
<!-- case2) 요청사항을 작성한 경우 -->
    <li>요청사항 : <%=message %></li>
<%} %>
</ul>

- 주문정보

<ul>
    <li>치킨 : <%= chicken %></li>

    <!-- 민트초코, 치즈볼 -->

    <%if(sides == null){ %>
    <!-- case1) 사이드를 선택하지 않았을 경우 -->
    <li>사이드 : 선택 안 함</li>
    <%} else { %>
    <!-- case1) 사이드를 선택했을 경우 -->
    <li>사이드 : <%= String.join(",", sides) %></li>
    <%} %>

    <!-- 제로콜라, 솔의눈 -->

    <%if(drinks == null){ %>
    <!-- case1) 음료를 선택하지 않았을 경우 -->
    <li>음료 : 선택 안 함</li>
     <%} else { %>
    <!-- case1) 음료를 선택했을 경우 -->
    <li>음료 : <%= String.join(",", drinks) %></li>
     <%} %>

     <%if(payment.equals("cash")){ %>
    <!-- case1) 현금을 선택했을 경우 -->
    <li>결제방식 : 현금</li>
    <%} else { %>
    <!-- case2) 카드를 선택했을 경우 -->
    <li>결제방식 : 카드</li>
    <%} %>

</ul>

- 총가격

<h3>위와 같이 주문하셨습니다.</h3>
<h2>총 가격 : <%=price %></h2>

'클라우드 융합 Full-stack 웹 개발자 양성과정 > Servlet, JSP' 카테고리의 다른 글

Servlet/JSP - 마이페이지(비밀번호변경), 회원탈퇴, 공지사항 (0)	2022.11.11
Servlet/JSP - 로그아웃기능, 회원가입페이지, 마이페이지(정보변경) (0)	2022.11.10
Servlet/JSP - login기능 (0)	2022.11.09
Servlet/JSP - SubwayStore (0)	2022.11.07
Servlet/JSP - apache tomcat설치, 1_Servlet (0)	2022.11.04

현재글Servlet/JSP - 2_JSP

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

CobaltBlue

Servlet/JSP - 2_JSP

2_JSP

1. JSP (Java Sever Page)

JSP란,

1) JSP 표현법

'클라우드 융합 Full-stack 웹 개발자 양성과정 > Servlet, JSP' 카테고리의 다른 글

'클라우드 융합 Full-stack 웹 개발자 양성과정/Servlet, JSP'의 다른글

티스토리툴바

Servlet/JSP - 2_JSP

2_JSP

1. JSP (Java Sever Page)

JSP란,

1) JSP 표현법

'클라우드 융합 Full-stack 웹 개발자 양성과정 > Servlet, JSP' 카테고리의 다른 글

'클라우드 융합 Full-stack 웹 개발자 양성과정/Servlet, JSP'의 다른글

관련글

티스토리툴바