확인해보기
- Servlet ???
자바 코드로 html 쓸 수 있는 것 -> 웹서비스 생성
-- Servlet = Java
-- JSP('Java' Server Page)
서버 실행하면 jspwork 폴더에 폴더들 생김
result_jsp.java 116번째 줄 -> Servlet 코드
JSP -> Servlet -> .java -> .class(2진수)
JSPProject1
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSP Project1</title>
</head>
<body>
<h1>로그인 테스트</h1>
<pre>
입력된 ID/PW가 user01/pass01 이면 "로그인 성공"
아니면 "아이디 또는 비밀번호가 일치하지 않습니다" 출력
</pre>
<form action="/login" method="post">
ID : <input type="text" name="id"> <br>
PW : <input type="password" name="pw"> <br>
<button>LOGIN</button>
</form>
<hr>
<h1>a태그 클릭 시 화면 전환하기</h1>
<h3 style="color: red;">a태그, js(location)코드 요청은 모두 GET 방식</h3>
<a href="/test/result">페이지 이동</a>
<hr>
<h1>피자 주문하기</h1>
<form action="/pizzaOrder" method="post">
피자 :
<select name="pizza">
<option value="1">치즈 피자(8000)</option>
<option value="2">콤비네이션 피자(9000)</option>
<option value="3">핫치킨 피자(10000)</option>
</select>
<br><br>
사이즈 <br>
<label>
R <input type="radio" name="size" value="R">
</label>
<label>
L <input type="radio" name="size" value="L">
</label>
<br><br>
수량 :
<button id="minus" type="button">-</button>
<span id="amount">0</span>
<button id="plus" type="button">+</button>
<input type="hidden" name="amount" value="0">
<br><br>
<button>주문하기</button>
</form>
<script>
const plus = document.getElementById("plus");
const minus = document.getElementById("minus");
const amount = document.getElementById("amount");
const input = document.querySelector("[name='amount']");
// plus 버튼 클릭시 amount, input 1증가
plus.addEventListener("click", () => {
amount.innerText++;
input.value = amount.innerText;
});
// minus 버튼 클릭시 amount, input 1감소
minus.addEventListener("click", () => {
// 만약에 수량이 0 이면 이벤트 핸들러 종료
if(amount.innerText == 0) return;
amount.innerText--;
input.value = amount.innerText;
});
</script>
</body>
</html>LoginController.java
package edu.kh.jsp.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login") // 현재 클래스를 Servlet 등록 + /login 요청을 처리
public class LoginController extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// POST 방식 문제점 : 한글이 깨진다(인코딩 불일치 문제)
req.setCharacterEncoding("UTF-8"); // 요청 데이터 인코딩 변경
// 전달 받은 값(파라미터) 다 얻어와 변수에 저장
// POST, GET 모두 전달 받은 값은 파라미터!
String id = req.getParameter("id");
String pw = req.getParameter("pw");
// id/pw가 user01/pass01과 일치하면 "로그인성공"
// 일치하지 않으면 "아이디 또는 비밀번호 불일치" 출력
String message = null;
if( id.equals("user01") && pw.equals("pass01") ) {
message = "로그인 성공";
} else {
message = "아이디 또는 비밀번호가 일치하지 않습니다";
}
// Servlet 으로 클라이언트에게 응답할 화면 만들기...
// -> 작성하기 힘드니까 JSP로 위임
// Request : 요청
// Dispatcher : 발송자, 필요한 정보를 제공하는자, 역할을 넘긴다..
// RequestDispatcher : 요청 정보, (응답)역할을 넘기는 객체
// ** JSP 경로 작성방법 **
// -> webapp 폴더 기준으로 경로를 작성
RequestDispatcher dispatcher
= req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");
// message 값을 속성(attribute)으로 추가
// -> Map 형식으로 작성(K:V)
req.setAttribute("message", message);
// K , V
// *****************
// **** forward ****
// *****************
// 전송하다, 전달하다, 보내다
// forward를 하면
// 주소창이 요청 주소 바뀌고
// 그 요청에 맞는 화면으로 변함
// 요청에 맞는 응답을 했기 때문에
// -> Servlet이 가지고 있던 req, resp 객체를
// JSP에게 전달하여 요청을 위임
dispatcher.forward(req, resp);
}
}
loginResult.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>
<ul>
<li>id : <%= request.getParameter("id") %></li>
<li>pw : <%= request.getParameter("pw") %></li>
</ul>
<%-- Servlet에서 추가한 속성(message) 얻어오기 --%>
<%-- request.getAttribute("키") --%>
<h1> <%= request.getAttribute("message") %> </h1>
<button type="button" onclick="history.back()">돌아가기</button>
</body>
</html>
LOGIN 버튼 클릭 시,
돌아가기 버튼 클릭 후 잘못된 id, pw 입력 시,
TestController.java
package edu.kh.jsp.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/test/result")
public class TestController extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 파라미터 사용 X, 값 세팅 X, 단순히 페이지 이동
// 바로 JSP 로 위임 코드 작성
RequestDispatcher dispatcher
= req.getRequestDispatcher("/WEB-INF/views/testResult.jsp");
dispatcher.forward(req, resp);
}
}testResult.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>a태그를 클릭해서 전환된 화면입니다.</h1>
</body>
</html>
페이지 이동 클릭 시,
Pizza.java
package edu.kh.jsp.model.dto;
public class Pizza {
private String name;
private int price;
// 단축키 : Shift + Alt + s
public Pizza() {}
public Pizza(String name, int price) {
super();
this.name = name;
this.price = price;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}PizzaController.java
package edu.kh.jsp.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import edu.kh.jsp.model.dto.Pizza;
@WebServlet("/pizzaOrder")
public class PizzaController extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Pizza> pizzaList = new ArrayList<Pizza>();
pizzaList.add( new Pizza("치즈 피자", 8000) );
pizzaList.add( new Pizza("콤비네이션 피자", 9000) );
pizzaList.add( new Pizza("핫치킨 피자", 10000) );
req.setCharacterEncoding("UTF-8");
String pizza = req.getParameter("pizza"); // 1,2,3 중 하나
String size = req.getParameter("size"); // R, L 중 하나
String amount = req.getParameter("amount"); // 수량 (0 이상)
// L 사이즈는 2천원 추가
// 피자 종류 : 핫치킨 피자(L)
// 수량 : 2
// 총 가격 : 24000원
// 피자 종류 파악
// -> pizza는 "1" 처럼 문자열 -> 정수로 형변환(parsing) 필요
Pizza p = pizzaList.get( Integer.parseInt(pizza) - 1 );
String pizzaName = p.getName();
int price = p.getPrice();
// L 사이즈면 2천원 추가
if(size.equals("L")) price += 2000;
// price에 amount 값 곱하기
price *= Integer.parseInt(amount);
// req에 pizzaName, price를 속성으로 추가(세팅)
req.setAttribute("pizzaName", pizzaName);
req.setAttribute("price", price);
// JSP로 요청 위임
// JSP 경로 작성 기준 폴더 : webapp
RequestDispatcher dispatcher
= req.getRequestDispatcher("/WEB-INF/views/pizzaResult.jsp");
// 요청 위임
dispatcher.forward(req, resp);
}
}pizzaResult.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>
<h3>피자 종류 : <%= request.getAttribute("pizzaName") %>
(<%= request.getParameter("size") %>)
</h3>
<h3>수량 : <%= request.getParameter("amount") %></h3>
<h3>총 가격 : <%= request.getAttribute("price") %></h3>
</body>
</html>
주문하기 버튼 클릭 시,
