1. Server 정리
Servlet => Java
JSP => JavaServerPage => Java (표기법만 HTML 처럼 사용함! )
JSP -> Servlet -> .java -> .class
.class 파일 : 0과 1로 이루어진 2진수 (컴퓨터가 읽을 수 있음)
.java 파일 : 사람이 읽을 수 있음
==> JSP -> Servlet 확인하기
- JSP 코드 안에서 Servlet 코드 확인
⭕이용방법⭕
생성 과정 ) (Dynamic Web Project)프로젝트 생성 ->root 최상위 주소 바꾸기 -> webapp파일 만들기
파일 파악!
webapp => 배포 서술자(설명서)
그러므로 index.html 파일을 생성 ( 메인 페이지 )
① html 작성
<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>② java class
=> 상속 (HttpServlet) 진행하기
- 요청주소 받기 :: 현재 클래스를 Servlet 등록 + /login 요청을 처리
1) post로 받은 경우 doPost로 오버라이딩 진행
2) 한글깨짐 문제 해결 :: setCharacterEncoding
3) 전달받은 파라미터 저장
4) jsp에 전달할 값 프로그래밍 한 후
5) JSP 연결 (=> webapp 폴더 기준으로 경로 작성 )
RequestDispatcher dispatcher
= req.getRequestDispatcher("경로 작성");
- 경로 폴더 추가
// java class
@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"); // 요청 데이터 인코딩 변경
// html에서 전달받은 값(파라미터) 변수에 저장
// 전달된 값 == 파라미터
// name 속성값 받아옴
String id = req.getParameter("id");
String pw = req.getParameter("pw");
String msg = null;
// id/pw가 user01/pass01과 일치하면 "로그인 성공"
// 일치하지 않으면 "아이디 또는 비밀번호 불일치" 출력
if(id.equals("user01") && pw.equals("pass01")) {
msg = "로그인 성공";
}else {
msg = "아이디 또는 비밀번호가 일치하지 않습니다.";
}
// Servlet으로 클라이언트에게 응답할 화면 만들기..
// 작성하기 힘들어서 ==> JSP 이용
// Request : 요청
// Dispatcher : 발송자, 필요한 정보를 제공하는자, 역할을 넘김.
// RequestDispatchaer : 요청 정보 , (응답)역할을 넘기는 객체
// ** JSP 경로 작성방법 **
// -> webapp 폴더 기준으로 경로를 작성
//
RequestDispatcher dispatcher
= req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");
// msg를 같이 전달해줄 것 ( 속성(attribute)으로 추가)
// -> Map 형식으로 작성(K:V)
req.setAttribute("msg", msg);
//****************
// forward
// 전송하다, 전달하다, 보내다
// forward를 하면 주소창이 요청 주소 바뀜 -> 그 요청에 맞는 화면으로 변함
// 요청에 맞는 응답을 했기 떄문
// => Servlet이 가지고 있던 req,resp객체를 JSP에게 전달하여 요청을 위임
dispatcher.forward(req, resp);
}
}
추가한 속성 얻어오기
request.getAttribute("키")
// 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에서 추가한 속성(msg)얻어오기 --%>
<%-- request.getAttribute("키") --%>
<h1><%=request.getAttribute("msg") %> </h1>
<button type="button" onclick="history.back()">돌아가기</button>
</body>
</html>2.🌟a태그 이용하여 페이지 이동🌟
html에서 a태그 이동 시, 해당 주소로 이동 가능
하지만, 서버를 이용하면 주소는 이동하되 test/result에 띄워줄 코드가 작성되어 있지 않고 mapping되는 Controller가 없기 때문에 페이지 오류
즉, 단순 이동에도 Controller 필요
하지만, Controller에서 파라미터 가져올 거 없으므로 바로 JSP 이동
// index.html
<h1>a태그 클릭 시 화면 전환하기</h1>
<h3 style = "color: red;">a태그, js(location)코드 요청은 모두 GET 방식 </h3>
<a href="/test/result">페이지 이동</a>// Controller.java
@WebServlet("/test/result")
public class TestController extends HttpServlet{
// a태그 이용
// a태그 이용 시, 컨트롤러 무조건 이동! (주소만 이동됨)
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//바로 JSP로 위임
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/testResult.jsp");
dispatcher.forward(req, resp);
}
}//jsp
<html>
<head>
<meta charset="UTF-8">
<title>화면전환 테스트 결과 </title>
</head>
<body>
<h1>a태그를 클릭해서 전환된 화면입니다.</h1>
</body>
</html>
단, 그냥 페이지 이동은 가능
ex) 네이버 페이지 이동
3. ☀ 예제 : 피자 주문하기
// index.html (+ javascript)
<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">
<!-- form 안의 값을 수집할 때, input 값만 가져올 수 있음. span은 가져오지 못함.-->
<br><br>
<button>주문하기</button>
</form>
<script>
<!-- queryAll 로 받아오는 것도 해보기! -->
const plus = document.getElementById("plus");
const minus = document.getElementById("minus");
const amount = document.getElementById("amount");
const input = document.querySelector("[name = 'amount']");
plus.addEventListener("click", function() {
amount.innerText++;
input.value = amount.innerText;
//amount.innerText = amount.innerText++;
});
minus.addEventListener("click", function() {
// 만약에 수정이 0이면 이벤트 핸들러 종료
if(amount.innerText == 0 )return;
amount.innerText--;
input.value = amount.innerText;
//amount.innerText = amount.innerText++;
});
</script>// java Class Pizza 객체 생성
package edu.kh.jsp.model.dto;
public class Pizza {
//필드
private String name;
private int price;
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;
}
}// java Controller
@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));
// 파라미터와 일치하는 객체를 꺼내와서 JSP로 위임할 것
req.setCharacterEncoding("UTF-8");
String pizza = req.getParameter("pizza"); // 1,2,3 중 하나 들어옴 Value값을 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 ); // ?? Integer 꼭 써야함??
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로 요청 위임
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/pizzaOrder.jsp");
dispatcher.forward(req, resp);
}
}// jsp
<h3>피자 종류 : <%= request.getAttribute("pizzaName") %>
(<%= request.getParameter("size") %>)
</h3>
<h3>수량 : <%= request.getParameter("amount") %></h3>
<h3>총 가격 : <%= request.getAttribute("price") %></h3>✨오늘의 프로그래밍 Tip ✨
1) 서버 안열리는 경우
이것도 안되면 서버 지우고 다시 생성
2) button눌러서 뒤로 돌아가기
//jsp
<button type="button" onclick="history.back()">돌아가기</button>3) html -> Servlet-> JSP 정리
action = " /login" 요청 파일 주소
post를 이용한 전달 방식
=>
http body {
id : user01;
pw : pass01;
}
버튼 누르면 -> POST 방식이라서 위의 형태로 loginController.java로 파라미터를 가져감
-> 변수 저장 -> 조건 처리 -> jsp로 위임 [응답 페이지] => RequestDispatcher ( Servlet -> JSP로 전달 및 위임해주는 역할 ) -> forward로 jsp에 전달 + 속성도 같이 넘겨주고 싶음. (setAttribute) => 데이터가진 request를 가져와서 속성값을 가져옴 (Parameter / Atrribute) 후 표현함. --> 주소창에는 우리가 요청했던 주소가 뜸
4) amount.innerText = amount.innerText+1
amount.innerText = (0+1)
amount.innerText++;
의 차이
5) String -> int 변환 시,
Wrapper class 이용해야 함.
사용하는 곳 => ① 제네릭
② 기본 자료형의 값을 문자열로 변환 혹은 반대 경우
6) JSP Project 생성 시, 최상위 주소 "/"로 바꿔야하는 이유
변경하지 않은 경우 위 그림에서 아래 주소와 같이 계속 따라다님
