[JSP]
설치: Apache Tomcat(웹 서버 프로그램) 다운로드 => 설치 => 이클립스 연동
이클립스 설정
1. General => Workspace 탭 => Text file encoding 항목에 Other: UTF-8로 설정
2. Web => 각 CSS, HTML, JSP Files 탭 => Encoding: ISO(UTF-8)로 설정
3. 서버창 아래 더블 클릭 => Tomcat 9.0 server 설정
4. Dynamic Web Project로 프로젝트 만들기
http://localhost:8181/P2022_1/aaa.html 경로
* /P2022_1 : 톰캣 ROOT 폴더 위치
* /aaa.html : 프로젝트(webapp) ROOT 폴더 위치
HTTP 상태 404 - 찾을 수 없음 : "요청을 했는데 찾을 수 없다"라는 의미
사이트에 연결할 수 없음: "서버가 꺼져있다"라는 의미
[Servlet] - Controller 역할
- 웹 기반의 요청에 대한 동적인 처리가 가능한 하나의 클래스
- 서블릿은 JSP 표준이 나오기 전에 만들어진 표준으로 자바 클래스를 이용해서 웹 어플리케이션을 개발
- 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스 (HttpServlet 클래스를 상속 받음)
- Java 코드 안에 HTML 코드 (정적인 HTML 코드를 Java코드로 이용하여 동적으로 만드는 객체)
- DB 연동(DB에 INSERT한 것을 SELECT)에 쓰임
@WebServlet("/Test") // Test를 리퀘스트
public class Test extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// 메인코드 지점
out.println("<html>");
out.println("<head>");
out.println("<meta charset='utf-8'>");
out.println("</head>");
out.println("<body>");
int a = (int)(Math.random()*10)+1;
for(int i = 1 ; i <= a ; i++) {
out.println("반갑습니다");
}
out.println("</body>");
out.println("</html>");
[JSP] - View 역할
- 서블릿 기반 위에 보다 편리하게 작성할 수 있도록 만든 스크립트 언어 (JSP 파일=> java 파일 => class 파일)
- 자바 코드로 변환하기 위한 문법 (JSP도 사실상 Servlet 임)
- HTML 코드 안에 Java 코드 (HTML 코드는 자바코드로 변환되므로 모든 코드를 자바코드로 이해해야 함)
- Java 코드는 서버가 실행하고, JavaScript 코드는 응답받은 웹 브라우저가 실행시킴
* <% %> : 스크립트 요소 (JSP 페이지에서 자바코드를 사용할 수 있는 영역)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a = 10;
var b = 20;
var c = a+b;
alert(c);
</script>
</head>
<body>
<%
int a = 10;
int b = 20;
int q = (int) (Math.random()*10)+1;
for(int i = 1 ; i <= q ; i++){
out.println("반갑습니다");
}
%>
</body>
</html>
MVC(Model-View-Controller) 패턴
- MVC 패턴을 사용하면 유지보수 작업이 쉬워지고 어플리케이션을 쉽게 확장할 수 있음
- Model (자바 클래스) : 비즈니스 영역의 로직을 처리
- View (JSP) : 사용자가 보게 될 결과 하면을 담당
- Controller (서블릿) : 사용자의 입력 처리와 흐름 제어를 담당
http://localhost:8181/P20220104_2/param/result.jsp?v1=asdf&v2=qwer
- 링크를 이용하여 키값을 보낼 수 있음 (확정적인 값인 경우) : (v1, asdf), (v2, qwer)
JSP - 파라미터 값 가져오기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 앞으로 <% 는 java코드로 빼내야 될 코드
request.setCharacterEncoding("utf-8"); // 무조건 항상 존재해야 됨
String v1 = request.getParameter("v1"); // 값을 받는 API. 키로 값을 받는다.(Map)
System.out.println("v1 : " + v1);
String v2 = request.getParameter("v2");
System.out.println("v2 : " + v2);
%>
<!DOCTYPE html>
JSP - 파라미터 값 전달
<body>
<!-- html 주석 -->
<%-- jsp 주석 (java변환도 안됨) --%>
<!-- 방법1 (a 태그로 보내는 법) : 링크 그대로 보냄, 파라미터의 값이 확정적인 경우에 활용 -->
<a href="./result.jsp">결과로 이동하기1</a><br>
<a href="./result.jsp?v1=qwer">결과로 이동하기2</a><br>
<a href="./result.jsp?v2=1111">결과로 이동하기3</a><br>
<a href="./result.jsp?v1=1111&v2=qqqq">결과로 이동하기4</a><br>
<!-- 방법2 (form 태그로 보내는 법) : 입력 양식을 활용. 사용자가 입력한 값을 보내야 될 때 -->
<!--
양식 조건
1. 입력 양식을 감싸는 form 태그 존재
2. form 태그에 action으로 경로 설정
3. submit 버튼이 존재 할 것 (<input type="submit" value="전송"> or <button>전송</button>)
4. 각 입력 양식에 name 속성을 제대로 붙일 것
5. 보내는 방식 설정(get, post) 설정하지 않으면 get 방식 (보내는 방식은 method 속성으로 설정)
참고1. a태그는 무조건 get 방식
참고2. get방식 : URL에 쿼리스트링으로 포함해서 보냄. 내용크기 제한O. 캐릭터셋(charset)을 알 수 없음(한글처리에 불리함), 링크가 중요한 경우에 사용
참고3. post방식 : header에 숨겨서 보냄. 내용크기 제한X . 캐릭터셋(charset)을 알 수 있음(한글처리에 유리함), 글쓰기가 중요한 경우에 사용
-->
<form action="./result.jsp" method="post"> <!-- form태그로 입력 양식을 감싸야 함 --> <!-- post 방식 설정 -->
v1 : <input type="text" name="v1"><br> <!-- 입력 양식 -->
v2 : <input type="text" name="v2"><br>
<input type="submit" value="전송">
</form>
</body>
프로젝트 P2022_1 => HTML aaa.html, bbb.html (webapp 폴더) : 완료
프로젝트 P2022_1 => 패키지 a.a.a => 서블릿 Test.java : 완료
프로젝트 P2022_1 => 패키지 a.a.a => 서블릿 QWER.java : 완료
프로젝트 P2022_1 => JSP qqq.jsp (webapp 폴더) : 완료
(Dynamic Web Project) P20220104_2 =>JSP aa.jsp(webapp 폴더), bb.jsp(webapp 폴더), cc.jsp(ttt 폴더) : 완료
(Dynamic Web Project) P20220104_2 => JSP result.jsp(param 폴더), JSP send.jsp(param 폴더) : 완료
(Dynamic Web Project) P20220104_2 => JSP aa.jsp(scope 폴더), JSP bb.jsp(scope 폴더) : 완료
'수업 내용 > JSP' 카테고리의 다른 글
| (53일차) 1월 6일 (0) | 2022.01.06 |
|---|---|
| (52일차) 1월 5일 (0) | 2022.01.05 |
