본문 바로가기

Servlet&JSP

Step01_Servlet(오늘의 운세2, bootstrap 사용, jsp)

2022.08.10 - [java] - HttpServlet 활용 예제(오늘의 운세 만들기)

이번 게시글은 위의 게시글에서 연장된다

 

 

JSP (JavaServer Pages)

 

HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다. 
자바 서버 페이지는 실행시에는 자바 서블릿으로 변환된 후 실행되므로 서블릿과 거의 유사하다고 볼 수 있다. 하지만, 서블릿과는 달리 HTML 표준에 따라 작성되므로 웹 디자인하기에 편리하다.

 

jsp 에서는 outprint() 대신 =로 대체 가능하다.

<p class="alert alert-primary">오늘의 운세: <%=list[ranNum] %></p>
<p class="alert alert-primary">오늘의 운세: <%out.print(list[ranNum]);%></p>

 

 

Templates 만들기

 

 

window Preferences Templates에서 원하는 부분을 템플릿 지정해서 ctrl+space로 한번에 가져올 수 있다.

 

 

FortuneServlet (이전 게시글에서 필자 작성코드)

2022.08.10 - [java] - HttpServlet 활용 예제(오늘의 운세 만들기)

 

package test.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

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("/fortune")
public class FortuneServlet extends HttpServlet{
	/*
	 *  FortuneServlet 객체가 언제 생성이 되지?
	 *  생성이 된다면 여러개가 생성이 될까?
	 *  아니면 하나만 생성해서 사용이 될까?
	 */
	public FortuneServlet() {
		System.out.println("FortuneServlet 객체 생성됨!");
	}
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      
      //랜덤 객체
      Random ran=new Random();
      int r=ran.nextInt(5);
      
      //배열
      String[] fortuneText=new String[5];
      fortuneText[0]="<p>빛나는 성과가 기대되는 최고의 하루입니다. <br>추구하는 일의 이상과 포부를 크게 세워도 좋습니다. <br>당신의 수고와 노력에 비례하는 결실을 얻을 수 있을 것입니다. <br>행운이 당신의 계획을 힘껏 밀어주는 오늘 하루 동안의 기회를 최대한 활용하시기 바랍니다. <br>열과 성을 다하십시오. <br>결단을 내리면 즉시 실천하세요.<br>머뭇거리지만 않는다면 모든 일이 좋게 마무리 될 것입니다.</p>";
      fortuneText[1]="<p>요행을 기대하지 마십시오. <br>요행을 바라는 그릇된 사행심은 자신을 갉아먹으며 화를 자초할 뿐이지요. <br>어려운 가운데 성실함을 견지한다면 결코 당신을 저버리지 않습니다. 위기로부터 당신을 구해 줄 것입니다. </p>";
      fortuneText[2]="<p>지금 당장 경쟁자에게 뒤쳐지는 것을 걱정하지 마세요. <br>사람에 따라 개성과 장단점은 다른 것입니다. <br>일찍부터 당신의 재능을 잘 활용하는 사람은 대부분 자신의 단점을 제대로 알지 못하고 있는 사람이 많습니다.<br> 사람의 가치는 돈으로 환산할 수 없는 무한한 것이죠. </p>";
      fortuneText[3]="<p>평탄한 하루의 흐름이 이어지는 가운데에 감당하기 벅찬 어려운 과제가 주어져서 잠시 페이스가 흐트러질 수 있습니다. <br>하지만, 피한다고 피할 수 있는 문제가 아니니, 차근차근 인내심을 가지고 풀어가도록 노력하세요. </p>";
      fortuneText[4]="<p>의지를 굽히지 말고 끝까지 최선을 다하시기 바랍니다. <br>과정이 좀 쉽지 않겠지만 달고 풍성한 열매를 기대할 수 있을 것입니다.</p>";
      
      
      //응답 인코딩 설정
      resp.setCharacterEncoding("utf-8");
      //응답 컨텐츠 설정 
      resp.setContentType("text/html; charset=utf-8");
      //클라이언트의 웹브라우저에 문자열을 출력할 수 있는 객체의 참조값 얻어내기
      PrintWriter pw=resp.getWriter();
      pw.println("<!doctype html>");
      pw.println("<html>");
      pw.println("<head>");
      pw.println("<meta charset='utf-8'>");
      pw.println("<title>제목 입니다</title>");
      pw.println("</head>");
      pw.println("<body>");
      pw.println("<p>운세 페이지 입니다</p>");
      pw.println(fortuneText[r]);
      pw.println("<a href=\"/Step01_Servlet/\">운세 다시보기</a>");
        
      pw.println("</body>");
      pw.println("</html>");
      //pw.flush();//방출
      pw.close();//닫아주기
	}
}

 

 

FortuneTeacher (선생님 작성 기능 추가 코드)

운세 내용을 변경하고 bootstrap을 사용하였다.

 

package test.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

//3.
@WebServlet("/fortune2")
public class FortuneTeacher extends HttpServlet{//1. 
   
   /*
    *  FortuneServlet 객체가 언제 생성이 되지? 
    *  생성이 된다면 여러개가 생성이 될까? 
    *  아니면 하나만 생성해서 사용이 될까?
    */
   public FortuneTeacher() {
      //최초 요청시 객체가 생성이 되고 그 이후에는 생성된 객체를 다시 사용한다. 
      System.out.println("FortuneServlet 객체 생성됨!");
   }
   
   //2. 
   @Override
   protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      
      //오늘의 운세 5개를 미리 준비해 둔다.
      String[] list = {"비가 오지만 너무 좋은 날이에요!", "비가와서 슬퍼요", 
            "내일을 기약해요!", "오늘은 공부가 잘 되는 날!", "오늘은 공부가 잘 안 되는 날!"};
      //0~4 사이의 랜덤한 정수를 얻어내기
      int ranNum=new Random().nextInt(5);
      
      //응답 인코딩 설정
      resp.setCharacterEncoding("utf-8");
      //응답 컨텐트 설정
      resp.setContentType("text/html; charset=utf-8");
      //클라이언트의 웹브라우저에 문자열을 출력할수 있는 객체의 참조값 얻어내기
      PrintWriter pw = resp.getWriter();
      pw.println("<!doctype html>");
      pw.println("<html>");
      pw.println("<head>");
      pw.println("<meta charset=\"utf-8\">");
      pw.println("<title>오늘의 운세 페이지</title>");
      pw.println("<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" />");
      pw.println("</head>");
      pw.println("<body>");
      pw.println("<p class=\"alert alert-primary\">오늘의 운세:"+list[ranNum]+"</p>");
      pw.println("</body>");
      pw.println("</html>");
      //pw.flush();//방출
      pw.close();//닫아주기 (auto flush)
      
   }
}

 

fortune.html

같은 기능을 javascript로 작성했으며 java Servlet 페이지가 아닌 html 페이지로 작성했다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오늘의 운세 페이지</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />
</head>
<body>
   <p class="alert alert-primary">오늘의 운세 : <span id="fortune"></span></p>
   <script>
      //오늘의 운세를 배열에 미리 준비한다.
      const fortunes=["비가 오지만 너무 좋은 날이에요!", "비가와서 슬퍼요", 
         "내일을 기약해요!", "오늘은 공부가 잘 되는 날!", "오늘은 공부가 잘 안 되는 날!"];
      //0~4 사이의 랜덤한 정수를 얻어낸다
      const ranNum=Math.floor(Math.random()*5);
      //id 가 fortune 인 요소에 오늘의 운세를 출력한다.
      document.querySelector("#fortune").innerText=fortunes[ranNum];
   </script>
</body>
</html>

 

 

jsp 파일 만들기

 

jsp emmet 기능 활성화 하기

 

 

fortune.jsp (첫번째 jsp 파일)

기존 운세 페이지와 기능은 같다.

<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//오늘의 운세 5개를 미리 준비해 둔다.
	String[] list = {"비가 오지만 너무 좋은 날이에요!", "비가와서 슬퍼요", 
	      "내일을 기약해요!", "오늘은 공부가 잘 되는 날!", "오늘은 공부가 잘 안 되는 날!"};
	//0~4 사이의 랜덤한 정수를 얻어내기
	int ranNum=new Random().nextInt(5);
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fortune.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />
</head>
<body>
	<p class="alert alert-primary">오늘의 운세: <%=list[ranNum] %></p>
	<p class="alert alert-primary">오늘의 운세: <%out.print(list[ranNum]);%></p>
</body>
</html>

 

jsp 가 제공하는 기본 로컬 변수들을 활용해야한다. 기억해두면 좋다.

out 은 PrintWriter 기능과 같다.

 

<p class="alert alert-primary">오늘의 운세: <%=list[ranNum] %></p>
<p class="alert alert-primary">오늘의 운세: <%out.print(list[ranNum]);%></p>

위의 두 개의 코드는 같다. out.print()를 =으로 작성할 수 있는 것이다.