프로필사진
Servlet(5) - Servlet vs JSP

2019. 11. 5. 11:06🔴 JSP웹개발

300x250

JSP = Java(자바) + Server(서버기능을 담고 있다) + Page(HTML)

"서버 기능을 가지고 있는 자바코드 + HTML"

Servlet으로 화면구현(HTML)시 비효율적인 측면을 해결하기위해 탄생한 문서양식!
JAVA & HTML(html+css+javascript)코드가 같은 문서 내에 공존함


Servlet

JavaResources → servlet → <VsServlet.java>

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

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("/vs.do")
public class VsServlet extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//setCharacter은 get이든 post이든 항상 써주자~
		request.setCharacterEncoding("utf-8");

		String msg = request.getParameter("msg");
		response.setContentType("text/html; charset=utf-8");
		
		//동적으로 html페이지를 만들어줌
		//태그들을 문자열로 만들어서 하나하나 넣는게 불편함!
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE html>");
		out.println("<html>");
		out.println("<head>");
		out.println("<meta charset=\"UTF-8\">");
		out.println("<title>Insert title here</title>");
		out.println("<script src=\'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\'></script>");
		out.println("<body>");
		out.println("여기는 Servlet<br>");
		out.println("<h1>"+msg+"</h1>");
		out.println("</body>");
		out.println("</head>");
		out.println("</html>");
	}

}

WebContent → <send_msg.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	function mySend(){
		//var msg = document.getElementById('msg').value;
		var msg = $("#msg").val();
		//url로 호출 -> get방식
		location.href= "vs.do?msg="+msg;
	}
</script>

</head>
<body>
	<input id="msg" placeholder="메시지를 입력"/>
	<input type="button" value="msg전송" onclick="mySend()"/>
</body>
</html>

실행 → 소스코드보기:
(msg = 안녕) 입력한 값을 받아서 동적으로 html문서 만들어줌

단점: 한번에 코드가 눈에 들어오지 않아 구조파악이 어려움!!


JSP

Java Resources에서 만드는것이 아니라, WebContent에서 만듬!
WebContent → <vs.jsp>

한 파일 안에 : jsp 속성 + html파일

<vs.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	/* 자바코드 쓰기 */
	/* JSP파일은 Servlet파일로 변환됨, 따라서 request가져다가 사용할 수 있음 */
	String msg = request.getParameter("msg");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	여기는 JSP<br>
	<!-- 자바코드 response.getWriter().println(msg) -->
	<h1><%=msg %></h1>
</body>
</html>

WebContent → <send_msg.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	function mySend(){
		//var msg = document.getElementById('msg').value;
		var msg = $("#msg").val();
		//url로 호출 -> get방식
		/* location.href= "vs.do?msg="+msg; */
		location.href= "vs.jsp?msg"+msg;
	}
</script>

</head>
<body>
	<input id="msg" placeholder="메시지를 입력"/>
	<input type="button" value="msg전송" onclick="mySend()"/>
</body>
</html>

WAR Export : web application 만들기 (war 파일) [배포하기]

  1. 파일 export하기 (파일: vsapp.war)

  2. tomcat폴더 → webapps폴더 안에 넣기

  3. tomcat실행시키기 (bin폴더 → startup.bat)
    하지만, 리눅스와 같은 서버는 UI가 제공되지 않기 때문에 cmd와 같은 터미널을 이용:
    Tomcat설정할때 환경변수를 설정했다! (=전역변수로 지정) → 바로 startup.bat 실행 가능

  4. webapps → 'vsapp'폴더로 자동으로 압축풀어줌

  5. vsapp폴더 = 하나의 프로그램, tomcat이 실행시키는 것

  6. 크롬을 열어 호스팅하기:

eclipse 내의 Servers

실제 tomcat 프로그램으로부터 복사해온 "가상의 서버" → eclipse가 이용하기 위해

eclipse의 tomcat이 실제로 실행시키는 (build, war파일을 만듬) 공간

좌: tomcat이 만든 클래스
우: eclipse에 내가 저장해놓은 jsp파일

→ tomcat이 우리가 작성한 jsp파일을 class로 변환시켜준다! [vs.jsp ⇒ vs_jsp.java]


참고자료 : https://opentutorials.org/module/2817/16198

300x250