프로그래밍

[Web] day37 : JSP 본문

Web/Web

[Web] day37 : JSP

시케 2023. 7. 5. 08:44
728x90
반응형

2023.06.27.화

JSP

JSP는 Java Server Pages 줄임말로 언어가 아니다

자바를 웹페이지에서 활용할 수 있도록 해주는 기술이다

 

html 파일에서 JAVA를 쓰고싶으면 JSP를 써야하며
지시어를 통해 이루진다

 

자바는 HTML 혹은 자바스크립트와 달리 컴파일이 필요하다

그러므로 이제까지 웹에서 새로고침한 것과 달리 컴파일러를 통하여 컴파일 후에 실행 시켜야 적확한 결과가 반영되어 보인다

이때 컴파일이 된 .java파일은 servlet 파일이라고 하며 다음 경로에서 확인할 수 있다

D:\JHyun\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\day37\org\apache\jsp

 

※※※JSP 상의 코드가 컴파일 후 자바로 어떻게 바뀌는지 인지하는 것은 매우 중요하다※※※

 

servlet 파일을 실제로 열어보면 여러가지의 내장객체들을 볼 수 있으며 <%=과 같은 지시어가 out.print 등으로 바뀐것을 볼 수 있다

 

JSP

<% 지시어를 통하여 자바를 쓸 수 있게 되었다

<%= 는 컴파일을 하게 될시 out.print로 바뀐다

<%@ 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>

<h1> <%= new Date() %> </h1>
<!-- HTML 주석 -->
<%-- JSP 주석 --%>

</body>
</html>

JSP 내장 객체 request

내장객체 request 를 사용해보자

request 객체는 모든 데이터를 무조건 String 타입으로 받아온다

<%@ 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 타입
	// 별도의 선언없이 사용가능한 객체가 있는데
	// 이런걸 "내장객체"라고 함 ex.request
	
	
	// 맨처음 화면을 로드하는 요청은 모두 GET, POST로 바꿈
	if (request.getMethod().equals("POST")) {
		int num1 = Integer.parseInt(request.getParameter("num1"));
		String op = request.getParameter("op");
		int num2 = Integer.parseInt(request.getParameter("num2"));

		if (op.equals("+")) {
			result = num1 + num2;
		} else if (op.equals("-")) {
			result = num1 - num2;
		}

	}
	%>

	<form method = "post">
		<input type="number" name="num1"> <select name="op">
			<option>+</option>
			<option>-</option>
		</select> <input type="number" name="num2"> <input type="submit" value="결과확인">
	</form>

	<hr>

	계산결과 : <%= result %>

</body>
</html>

JSP 내장 객체 request 활용

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>request 객체 활용</title>
</head>
<body>

	<%
	// 자바 영역 스크립틀릿
	String result = "다시 입력하세요.";

	if (request.getMethod().equals("POST")) {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");	
		
		if (id.equals("admin") && pw.equals("1234")) {
				result = "관리자님 환영합니다! :D";

		}
	}
	%>

	<form method = "post">
		<input type ="text" name = "id" required placeholder="아이디를 입력해주세요">
		<input type ="password" name = "pw" required placeholder="비밀번호를 입력해주세요">
		<input type="submit" value="결과확인">
	</form>

	<hr>

	<%= result %>

</body>
</html>

 

JSP 액션태그와 객체화

<jsp:useBean id="cb" class="test.CalcBean"></jsp:useBean>

jsp의 액션 태그를 활용하면 객체화 할 수 있다 (객체화를 담당하는 태그)

usebean을 사용하면 자바에서 new 한것과 정확히 같다

<jsp:setProperty property="*" name="cb"/>

위에서 new(객체화/인스턴스화)한 객체에 멤버변수를 초기화하는 태그이다

파라미터 이름이 같으면 자동으로 형변환처리하여 초기화해준다

그렇기 때문에 멤버변수 등의 이름을 미리 설계 단계에서 잘 결정하는 것이 좋다

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<jsp:useBean id="cb" class="test.CalcBean"></jsp:useBean>
<%-- 액션 태그를 활용하면 객체화 할 수 있다 (객체화를 담당하는 태그)
CalcBean cb = new CalcBean();
--%>

<jsp:setProperty property="*" name="cb"/>
<%-- cb 객체의 멤버변수 초기화 
멤버변수가 4개이므로 getter setter가 각각 4번 호출될것
객체의 멤버변수 이름과 파라미터 이름이 같아야 함(자동형변환 처리)
따라서 설계서가 중요함
--%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>코드 분리</title>
</head>
<body>

	<% cb.calculate(); %>


	<form method="post">
		<input type="number" name="num1"> <select name="op">
			<option>+</option>
			<option>-</option>
		</select> <input type="number" name="num2"> <input type="submit"
			value="결과확인">
	</form> 

	<hr>
	계산결과 : <jsp:getProperty property="result" name="cb"/> <br>
	<%= cb.getResult() %>

</body>
</html>

 

JSP 로그인 활용 예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="test.MemberVO,java.util.ArrayList" %>
<jsp:useBean id="mDAO" class="test.MemberDAO" />
<jsp:useBean id="mVO" class="test.MemberVO" />
<jsp:setProperty property="*" name="mVO" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 활용 예제</title>
</head>
<body>

<script type="text/javascript">
<%
if(request.getMethod().equals("POST")){
   
   if(request.getParameter("action").equals("login")){
   
   MemberVO data=mDAO.selectOne(mVO);
   if(data != null){
      out.println("alert('"+data.getMid()+"님, 로그인 성공!');");
   }
   else{
      out.println("alert('로그인 실패...');");
   }
   
   }
   else if(request.getParameter("action").equals("signup")){
      boolean flag=mDAO.insert(mVO);
      if(flag){
         out.println("alert('회원가입 성공!');");
      }
      else{
         out.println("alert('회원가입 실패...');");
      }
   }
}
%>
</script>

<script type="text/javascript">
   function signup(){
      var ans=confirm('입력하신 정보로 회원가입을 할까요?');
      if(ans==true){
         document.test.action.value="signup";
         document.test.submit();
      }
      else {
         return;
      }
   }
</script>

<form method="post" name="test">
   <input type="hidden" name="action" value="login">
   아이디 <input type="text" name="mid"> <br>
   비밀번호 <input type="password" name="mpw"> <br>
   <input type="button" value="회원가입" onClick="signup()">
   <input type="submit" value="로그인">
</form>

<hr>

<h2>회원목록</h2>
<ul>
<%
   ArrayList<MemberVO> datas=mDAO.selectAll(null);
   for(MemberVO v:datas){
      // out.println("<li>"+v+"</li>");
%>
   <li><%=v%></li>
<%
   }
%>
</ul>

</body>
</html>

 

728x90
반응형

'Web > Web' 카테고리의 다른 글

[Web] day38 : 데이터 전송(foward / sendRedirect)  (1) 2023.07.31
[Web] day38 : 에러페이지  (0) 2023.07.31
[Web] day37 : ajax() 메서드와 JSON 데이터  (0) 2023.07.05
[Web] day36 : jQuery 자바스크립트 라이브러리  (1) 2023.07.05
[Web] day36 : 자바스크립트 주사위/가위바위보 예제  (0) 2023.07.04
'Web/Web' Related Articles more
Comments