재밌고 어려운 IT를 이해해보자~!

JSP 본문

코리아IT핀테크과정

JSP

언제나즐거운IT 2024. 1. 4. 16:06

 JSP는 Java Server Pages 의 약자이며 HTML 코드에 JAVA 코드를 넣어 동적 웹페이지를 생성하는 웹어플리케이션 도구이다. JSP가 실행되면 자바 서블릿(Servlet)으로 변환되며 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행하고 그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답한다.

JSP는 기존의 단순한 html을 서비스하던 웹서버의 기능을 보다 발전시켜 웹 기반의 프로그램을 할 수 있도록 만든 것이다. 그리고 서블릿을 기반으로 하고 있으며 서블릿의 프로그램적인 요소를 발전시켜 사용자가 보다 쉽게 다룰 수 있도록 만든 스크립트 기반의 프로그램이다.

JSP...쉽지않다...공부열심히하자.

자바 서블릿(Java Servlet)

서블릿이란 웹페이지를 동적으로 생성하기 위해 서버측 프로그램을 말한다. 

이는 자바 언어를 기반으로 만들지며 웹 어플리케이션 서버 ( Web Application Sever ) 위에서 컴파일 되고 동작한다.

jsp도 servlet 이다!

 

서블릿이란 ?
 ot POJO 인 클래스를 의미 >> 클래스니까 .java 파일로 생성됨


POJO 클래스 종류
: String, Scanner, Random, Math, ...
: Student, Member, Product, Point, ...


지금까지 우리가 사용한 모든 클래스는 전부다 POJO 였음!!!!
 not POJO 인 클래스
: 서블릿, 리스너, 필터


request.getParameter는 어떻게 그냥 쓸 수 있는 것일까?? 

아까 JSP파일이 Servlet코드로 변환된 것으로 보면 위의 HttpSession, ServletContext등등이 다 선언되어 있는 것을 알 수 있다. 그렇기 때문에 사용할 수 있는 것이다. (동적이 코드이기 때문에 서버에서 처리를 해줄거기 때문이다) 따라서 내장객체이기 때문에 위에 선언되어 있는 것들은 다 사용할 수 있다고 생각하면 된다. 

 

HTML 구조안에 JAVA를 작성하는 jsp~

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<!-- HTML 주석 -->
<%-- JSP 주석 --%>
<h1><%= new java.util.Date() %></h1>  
<%
//<%@ 지시어
//<%= 표현식
//<% 스크립트립
//java.util은 자동임포트가 되지않는다 자바처럼... 지시어 작성란쪽에 적어줘야함.
%>


<% //이표시를 하면 자바영역이된다!!!!!!!!
	//상단의 page가붙어있는곳은 page 지시어이다.
	//page에대한 정보를알려줌 
	//자바랭귀지 사용가능 인코딩 등등..
	// 모든 jsp첫줄에 들어간다.
	//.jst는 내부에 JAVA코드를 가지기때문에 반드시 컴파일 해야함!
	//test.jsp -> test_jsp.java
		//★★★★★★★서블릿(Servlet)★★★★★★★★
		//원래 서버프로그래밍을 서블릿으로했다. 원래 서블릿으로 웹개발했었다.
		//원래....자바코드안에서 HTML을 작성해서 웹을 만들었어야했다...
		//매우매우매우X10^99 불편했다...
		//HTML 안에서 자바를 작성해보자! 반대로
		//->이게바로 JSP ㅇㅅㅇ bb 완전 굿 혁신이다!
		// 결론) Servlet 과 JSP는 사실 같다. JSP파일을 컴파일하면 Servlet 파일이 된다 :D
		//수많은비전공자가 JSP만 배우는데 Servlet도알아야한다 일하다보면 만남 멘탈나감!
		//서블릿이란?
		// not POJO 인 클래스를 의미
		// POJO 클래스 종류
		// 		: String, Scanner, Random, Math....
		//		: Student, Member, Product, Point...
		//		지금까지 우리가 사용한 클래스는 다 POJO 였음!
		//		Plain Old JAVA Object -> 기본의 옛날 자바객체~
		// NOT POJO 인 클래스
		//		: 서블릿, 리스너, 필터
		//		리스너와 필터는 서블릿을 상속받은 클래스이다.
		//
	out.println("<h1>스크립트릿</h1>");
	//웹 페이지 코드내에서
	//JAVA를 사용하려고 탄생한 서버 프로그래밍 언어
	//system.out -> 자바콘솔에 띄워달라는 뜻 이제는 웹에다 띄우기 때문에
	//쓰지않는다
	//이표현식은 out.println을 생략할 수 있게 해주는 태그이다
	%>


</body>
</html>

 

첫번째 실습 JSP에서 모두 처리하는 방법

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>
	<%  
	int result = 0;
	//요청정보는 request라는 객체에 저장되어있다.
	//웹에서의 모든 데이터는 String 타입!!! parseInt로 Integer로 바꿔준다. 
	//처음 화면을 볼때 num1이 없다 -> null값으로 인식함
	//따라서 포스트 요청이 들어오면 그때 해달라고 알려줘야함
	//처음 페이지를 보여달라는 요청은 GET (디폴트 요청)
	if (request.getMethod().equals("POST")) { //포스트 요청하기
		int num1 = Integer.parseInt(request.getParameter("num1")); //리턴타입 String
		String op = request.getParameter("op");
		int num2 = Integer.parseInt(request.getParameter("num2"));
		// String op=request.getParameter("opppp")처럼 잘못쓰면 
		//★★★★★에러는 안나고 데이터가 안간다 그냥 ★★★ 어렵당 
		// String op=null; 이되어버림
		//500대는~ 백엔드 에러 ~ 100% 
		//404는 프론트 에러~ 
		if (op.equals("+")) {
			result = num1 + num2;
		} else {
			result = num1 - num2;
		}
	}
	%>
	<!-- jsp는 서버프로그래밍 언어니까 데이터를 주고받을 수 밖에 없는데
사용자가 데이터를 줄때는 대부분 form을 쓴다 -->
	<!-- 오늘은 자기 자신에게 전달~ -->
	<!-- 데이터 품어서 주기 POST~ 대부분 form은 POST 쓴다 -->
	<form method="POST">
		<input type="text" name="num1">
		<select name="op">
			<option>+</option>
			<option>-</option>
		</select> <input type="text" name="num2"> 
		<input type="submit" value="계산하기">
	</form>

	<hr>

	<h2>
		계산결과 :
		<%=result%></h2>





</body>
</html>

HTML문에서 num1, num2입력과 옵션 op 계산하기 버튼을 만들고

HTML의 <form> 태그를 이용해서 POST 방식으로 데이터를 넘겨준다.

그로고나면 <% %> 로 감싸져있는 자바문에서 method가 포스트인지 확인 후 파라미터 num1,num2,op 를 자바 변수에 받아 계산결과를 result에 대입한다.

마지막으로 "계산결과 :" 와  표현식 <%= %> 을 통해 결과값을 웹브라우저에 출력해준다.

 

<form> 태그의 method 속성

폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시한다.
method 속성은 속성값으로는 GET과 POST 두 가지 중 하나를 선택할 수 있다.

GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식입니다
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다.
또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.
따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다.


POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식이다.
POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.
또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송된다.
따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높다.

Servlet 사용

servlet.java

package calc;

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;

/**
 * Servlet implementation class CalcServlet
 */
@WebServlet("/CalcServlet")
public class CalcServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CalcServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int num1=Integer.parseInt(request.getParameter("num1"));
		String op=request.getParameter("op");
		int num2=Integer.parseInt(request.getParameter("num2"));
		
		
		//test2랑 프로세스가 똑같다.
		//new -> set -> 계산 -> get
		//int result=calc(num1,num2,op);
		
		CalcBean cb = new CalcBean();
		cb.setNum1(num1);
		cb.setNum2(num2);
		cb.setOp(op);
		cb.calc();
		
		
		response.setContentType("text/html;charset=UTF-8");
		
		PrintWriter out=response.getWriter();
		out.println("결과 :" + cb.getResult());
	}
	
	
	/*
	public int calc(int num1, int num2, String op) {
		int result=0;
		if(op.equals("+")) {
			result=num1+num2;
		}
		else {
			result=num1-num2;
		}
		return result;
	}
	*/
	
	//★개발자의 최고 목표는 "유지 보수~ "
	//★"모듈화"가 기본입니다!!! :D
	// jsp 에서 모두처리 OUT
	// Bean 에서 처리 ->>>> Bean을 활용하는 방식이 웹의 표준이다!!!!!!
	// Servlet 에서 처리 OUT

}

jsp 방식과 servlet방식은 같다. enw -> set -> 계산 -> get

servlet파일 자체에 자바언어로 함수를 적어서 사용해도 되지만,  CalcBean 파일을 사용해 클래스를 만들고 getter setter와 메서드를 만들어 모듈화 하였다.

html

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>

<body>

	<form method="POST" action="/day028/CalcServlet">
		<input type="text" name="num1">
		<select name="op">
			<option>+</option>
			<option>-</option>
		</select>
		<input type="text" name="num2">
		<input type="submit" value="계산하기">
	</form>

</body>

</html>

HTML에서 유저입력을 받아 Servlet의 doPost메서드로 전달후 cb객체에 set 이후 계산을 진행하고 결과를 get 해온다.

 

 

가장많이 쓰이는 JSP + Bean파일을 이용한 처리방법

CalcBean.java

package calc; //이거패키지 꼭 마들어야지 웹에서 부를 수 있다.

// 안만들면 웹에서 절때 안불러짐!!!!!!!!

// Bean 이란?
// 웹에서 한가지 기능을 담당하는 클래스
// 그 클래스의 객체를 의미함
// 일종의 기능 단위
public class CalcBean {
	// 멤버변수는 웹에서의 네임과 이름을 맞춰주는게 좋다
	private int num1;
	private int num2;
	private String op;
	private int result;

	public void calc() {
		if (op == null) {
			return;
		}
		if (op.equals("+")) {
			result = num1 + num2;
		} else {
			result = num1 - num2;
		}
	}

	public int getNum1() {
		return num1;
	}

	public void setNum1(int num1) {
		this.num1 = num1;
	}

	public int getNum2() {
		return num2;
	}

	public void setNum2(int num2) {
		this.num2 = num2;
	}

	public String getOp() {
		return op;
	}

	public void setOp(String op) {
		this.op = op;
	}

	public int getResult() {
		return result;
	}

	public void setResult(int result) {
		this.result = result;
	}

}

  

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:useBean id="cb" class="calc.CalcBean"/>
<%-- new 를 대신하는 JSP 코드 useB
an~ 클래스에는 클래스명 id는 객체명-->	
	<!-- calc.CalcBean cb=new calc.CalcBean(); -->	
	<!-- 여기서 기본생성자를 사용해야하기 때문에 웹에서 기본생성자를 쓰고 자바로도 기본생성자로 연습을 한 것 이다. -->
 --%>

<jsp:setProperty name="cb" property="*"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>두번 쨰 실습~</title>
</head>
<body>

<%cb.calc();%>

	<form method="POST">
		<input type="text" name="num1"> <select name="op">
			<option>+</option>
			<option>-</option>
		</select> <input type="text" name="num2"> <input type="submit"
			value="계산하기">
	</form>

	<hr>

	<h2>계산결과 : <jsp:getProperty name="cb" property="result"/></h2>
	<!-- JSP에서 getter를 부르는 태그!! cb의 result속성을 getter로 가져온다~ -->




</body>
</html>

Bean에서 처리(메서드)하고 JSP 화면출력, 변수전달,  객체를 만들어 set하고 메서드사용, 이후 계산결화를 get 해온다!
property 속성에 * 를 사용하면 프로퍼티와 동일한 이름의 파라미터를 이용하여 setter 메서드를 생성한 모든 프로퍼티(필드)에 대해 값을 설정

DB를 활용한 JSP 작성

CTRL

package test;

import model.MemberDAO;
import model.MemberDTO;

public class CheckBean2 {
   private String mid;
   private String msg;
   
   public void check() {
      if(mid==null) {
         msg="";
         return;
      }
      
      MemberDAO mDAO=new MemberDAO();
      
      MemberDTO mDTO=new MemberDTO();
      mDTO.setMid(mid);
      mDTO=mDAO.selectOne(mDTO);
            
      if(mDTO==null) {
         msg="<font color='green'>해당 아이디는 사용가능합니다! :D</font>";
      }
      else {
         msg="<font color='red'>중복이라 사용불가능한 아이디입니다...</font>";
      }
   }

   public String getMid() {
      return mid;
   }
   public void setMid(String mid) {
      this.mid = mid;
   }
   public String getMsg() {
      return msg;
   }
   public void setMsg(String msg) {
      this.msg = msg;
   }
}

모델의 DAO, DTO, selectOne 사용.

'코리아IT핀테크과정' 카테고리의 다른 글

JSP practice  (0) 2024.01.06
JSP2  (0) 2024.01.05
JavaScript  (3) 2024.01.04
WebApp, HTML 1  (0) 2023.12.27
Web Crawling  (0) 2023.12.22
Comments