프로젝트 설명 전 서블릿과 jsp 템플릿 설명.











Servlet을 작성 할 때 오버라이드 할 메소드들이 정말 길었다.


하지만 위와 같이 메소드들을 골라서 한번에 추가 할 수있다.


생성된 java 파일(servlet 기능들이 임포트 된)은 정말 복잡해 보이는데


주석을 전부 지워버리면 보기 쉬워진다.


JSP에 대한 정보는 https://qdgbjsdnb.tistory.com/205?category=727563 에 설명







다음은 jsp 생성







위와 같이 생성되는데 필요없는 문구는 설정에서 다음과 같이 바꾸면 템플릿을 바꿀 수 있다.











JSP는 서블릿의 단점을 보안하기 위해 나왔다.


예제 1, 2를 보면 out.println와 같이 전부 "" 를 쓰면서 HTML 구문을 입력하여 페이지에 띄워 줬다


간단한 프로그램임에도 불구하고 정말 귀찮은 작업이다.


하지만 JSP는 HTML 문서에 자바 코드들을 직접 입력해서 구현할 수 있다.


testPerson1 은 get 방식을 이용한 정보 전달과 기존의 방법으로 servlet을 구현한다.


testPerson2의 경우는 JSP 방식으로 맵핑된 testPerson2 파일에서 result.jsp를 연결시킨다.


폴더구조는 다음과 같다.




index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>서블릿 테스트</h1>
	<h2><a href="views/testPerson1.html">1. 개인 취향 테스트(get)</a></h2>
	<h2><a href="views/testPerson1.html">2. 개인 취향 테스트(post)</a></h2>
	
	
	
</body>
</html>


testPerson1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>개인 취향 테스트(GET)</h2>
	당신의 취향을 테스트 합니다.<br>
	데이터를 입력 후 확인 버튼을 누르세요<br>
	
	<form action="/w3/testPerson" name="personFrm" method="get">	
		<ul style="list-style: none; line-height: 200%">
			<li>이름은?
				<input type="text" name="name" size="10">
			</li>
			<li>좋아하는 색?
				<input type="radio" name="color" value="빨강" id="red">
				<label for="red">빨강</label>
				<input type="radio" name="color" value="파랑" id="blue">
				<label for="blue">파랑</label>
				<input type="radio" name="color" value="노랑" id="yellow">
				<label for="yellow">노랑</label>
				<input type="radio" name="color" value="초록" id="green">
				<label for="green">초록</label>
			</li>
			<li>좋아하는 동물은?
				<select name="animal">
					<option value="강아지">강아지</option>
					<option value="고양이">고양이</option>
					<option value="병아리">병아리</option>
				</select>
			</li>
			<li>좋아하는 음식?(모두 고르세요)
				<input type="checkbox" name="food" id="food1" value="짜장면">
				<label for="food1">짜장면</label>
				<input type="checkbox" name="food" id="food2" value="짬뽐">
				<label for="food1">짬뽐</label>
				<input type="checkbox" name="food" id="food3" value="탕수육">
				<label for="food1">탕수육</label>
				<input type="checkbox" name="food" id="food4" value="양장피">
				<label for="food1">양장피</label>
				<input type="checkbox" name="food" id="food5" value="팔보채">
				<label for="food1">팔보채</label>
			</li>
			<li>
				<br>
				<input type="submit" name="btnOk" id="btnOk" value="확인">
				&nbsp; &nbsp;
				<input type="reset" value="취소">
			</li>
			
		
		</ul>
	</form>
</body>
</html>


TestPersonServlet.java




package controller;

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("/testPerson")
public class TestPersonServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
      
    public TestPersonServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 첫 번째 파라미터인 HttpServletRequest는
        // 웹 브라우저에서 사용자가 요청한 내용을 받아주는 용도로 쓰인다.
        // 두 번째 파라미터인 HttpServletResponse는
        // 첫 번째 파라미터에서 처리한 결과를 웹 브라우저를 통해 사용자에게 보여주기 위한 용도로 쓰인다.
       
        String name = request.getParameter("name");
        String color = request.getParameter("color");
        String animal = request.getParameter("animal");
       
        String[] foodArr = request.getParameterValues("food");
       
        System.out.println("name : " + name + "\r\n" +
                            "color : " + color + "\r\n" +
                            "animal : "+ animal);
       
        for (int i = 0; i < foodArr.length; i++) {
            System.out.println("foodArr [" + i + "] : " + foodArr[i]);
        }
       
        // Response 핸들링 : 화면출력
        response.setContentType("text/html; charset=UTF-8");
       
        PrintWriter out = response.getWriter();
       
        out.println("<html>"
                + "<head>"
                + "<title>개인 취향 테스트 결과 화면</title>"
                + "</head>"
                + "<body>"
                + "<h2 style='color: red;'>개인 취향 테스트 결과(GET)</h2>");
        out.printf("<span style='color: lightblue;'>%s</span>님의 개인 취향은 <br><br>", name);
        out.printf("<span style='color: lightgreen; font-weight: bold;'>%s</span>, <span style='color: lightred; font-weight: bold;'>%s</span>를 좋아합니다<br><br>", color, animal);
        out.println("좋아하는 음식은 ");
        for (int i = 0; i < foodArr.length; i++) {
            if (i == 0) {
                out.printf("%s", foodArr[i]);
            } else {
                out.printf(", %s", foodArr[i]);
            }
        }
        out.println("입니다."
                + "</body>"
                + "</html>");
       
       
       
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}




위와 같이 입력하면 힘들지만 결과는 잘 나오긴 한다.


하지만 간단한 페이지에도 불구하고 고된 작업이 요구된다.


JSP를 사용하면 해결된다.










testPerson2.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h2>개인 취향 테스트(POST)</h2>
    당신의 취향을 테스트 합니다.<br>
    데이터를 입력 후 확인 버튼을 누르세요<br>
   
    <form action="/w3/testPerson2" name="personFrm" method="post">   
        <ul style="list-style: none; line-height: 200%">
            <li>이름은?
                <input type="text" name="name" size="10">
            </li>
            <li>좋아하는 색?
                <input type="radio" name="color" value="빨강" id="red">
                <label for="red">빨강</label>
                <input type="radio" name="color" value="파랑" id="blue">
                <label for="blue">파랑</label>
                <input type="radio" name="color" value="노랑" id="yellow">
                <label for="yellow">노랑</label>
                <input type="radio" name="color" value="초록" id="green">
                <label for="green">초록</label>
            </li>
            <li>좋아하는 동물은?
                <select name="animal">
                    <option value="강아지">강아지</option>
                    <option value="고양이">고양이</option>
                    <option value="병아리">병아리</option>
                </select>
            </li>
            <li>좋아하는 음식?(모두 고르세요)
                <input type="checkbox" name="food" id="food1" value="짜장면">
                <label for="food1">짜장면</label>
                <input type="checkbox" name="food" id="food2" value="짬뽐">
                <label for="food1">짬뽐</label>
                <input type="checkbox" name="food" id="food3" value="탕수육">
                <label for="food1">탕수육</label>
                <input type="checkbox" name="food" id="food4" value="양장피">
                <label for="food1">양장피</label>
                <input type="checkbox" name="food" id="food5" value="팔보채">
                <label for="food1">팔보채</label>
            </li>
            <li>
                <br>
                <input type="submit" name="btnOk" id="btnOk" value="확인">
                &nbsp; &nbsp;
                <input type="reset" value="취소">
            </li>
           
           
        </ul>
    </form>
</body>
</html>





TestPersonServlet2.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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("/testPerson2")
public class TestPersonServlet2 extends HttpServlet {
    private static final long serialVersionUID = 1L;
      
    public TestPersonServlet2() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // request 문자셋 변경
        // 넘겨받은 데이터가 한글일 경우(영어가 아닐 경우) 인코딩 처리를 해야 한다.
        // [중요] request.getParameter()보다 먼저 기술해야 한다.
        request.setCharacterEncoding("UTF-8");
       
        String name = request.getParameter("name");
        String color = request.getParameter("color");
        String animal = request.getParameter("animal");
       
        String[] foodArr = request.getParameterValues("food");
       
        String foods = "";
       
        for (int i = 0; i < foodArr.length; i++) {
            if (i == 0) {
                foods += foodArr[i];
            } else {
                foods += ", " + foodArr[i];
            }
        }
       
       
        // 사용자가 좋아하는 색을 기준으로 상품을 추천해 줌
        String recommendation = "";
        switch (color) {
        case "빨강":
            recommendation = "빨간 페라리";
            break;
        case "노랑":
            recommendation = "노란 카레";
            break;
        case "초록":
            recommendation = "초록 붕어빵";
            break;
        case "파랑":
            recommendation = "파란 캔디바";
            break;
        }
       
        response.setContentType("text/html; charset=UTF-8");
       
        request.setAttribute("name", name);
        request.setAttribute("color", color);
        request.setAttribute("animal", animal);
        request.setAttribute("foods", foods);
        request.setAttribute("recommendation", recommendation);
       
        RequestDispatcher view
                = request.getRequestDispatcher("views/result.jsp");
        view.forward(request, response);
       
       
       
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}






result.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String name = (String)request.getAttribute("name");
    String color = (String)request.getAttribute("color");
    String animal = (String)request.getAttribute("animal");
    String foods = (String)request.getAttribute("foods");
    String recommendation = (String)request.getAttribute("recommendation");
%>

<!DOCTYPE html>
<!-- 꺽쇠 + % 키워드로 자바 코드를 입력할 수 있다. -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h2>개인 취향 테스트 결과(POST) - jsp</h2>
    <span style="color: lightblue; font-weight: bold;"><%= name %></span>님의 개인 취향은
    <br><br>
    <span style="color: lightgreen; font-weight: bold;"><%= color %></span>색을 좋아하고
    <span style="color: lightred; font-weight: bold;"><%= animal %></span>를 좋아합니다.
    <br><br>
    좋아하는 음식은 <%= foods %>입니다.
    <br>
    <h3>둘리의 추천!</h3>
    <p><%= recommendation %> 어떠세요?</p>

</body>
</html>













TestPersonServlet2.java 서블릿 파일을 보면 아래의 부분이 있다.


        request.setAttribute("name", name);
        request.setAttribute("color", color);
        request.setAttribute("animal", animal);
        request.setAttribute("foods", foods);
        request.setAttribute("recommendation", recommendation);
       
        RequestDispatcher view
                = request.getRequestDispatcher("views/result.jsp");
        view.forward(request, response);




이 부분에서 JSP 파일로 전송할 변수들, 그리고 JSP의 위치를 지정해서 연결하게 된다.


JSP에서는 <% %> 키워드를 이용해서 기본 선언이나 속성 불러오기, 함수 사용등을 한다.


















JSP의 실행 코드는 클라이언트에서 볼 수 없다는 특징을 가진다. 주석 또한 마찬가지이다.






이 예에서 나온 <%%> 키워드는 다른 게시글에서 설명한다.












어노테이션을 이용한 방법


간단하지만 그만큼 파일이 많아지고 유지보수를 하기 위해서 찾기가 힘들어 질 수 있다.










xml에 mapping하는 방법은 xml파일에 전부 모아서 볼 수 있기 때문에 한눈에 들어오지만


코드가 길어 번거롭다.




이번에는 form 태그에 action 속성을 주어 method의 GET POST 방식이 어떤 차이가 있나 확인하고


화면에 결과를 띄우는 예이다.


구조는 다음과 같다.








--------- index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1 align="center">My First Web Project</h1>
   
    <!-- action에는 서블릿 주소를 -->
    <!-- method get은 정보를 url로 넘긴다. -->
    <!-- post의 경우는 한글이 깨지므로 따로 처리를 해야 한다. -->
    <form action="/w2/test" method="post">
        <table align="center">
            <tr>
                <td>아이디</td>
                <td><input type="text" name="userId"></td>
                <td rowspan="2"><button type="submit" style="height: 50px;">로그인</button></td>
            </tr>
            <tr>
                <!-- password 타입은 한글을 지원하지 않는다, 자동으로 영문으로 변경 -->
                <td>비밀번호</td>
                <td><input type="password" name="password"></td>
            </tr>
           
       
       
        </table>
    </form>
</body>
</html>



post 부분을 get으로 바꿔가며 직접 실행해보자.




--------- TestServlet.java


package controller;

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

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

public class TestServlet extends HttpServlet{

    public TestServlet() {}
   
   
   
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 한글이 깨지는 경우
        /*
        System.out.println("잘 왔다");
        String userId = request.getParameter("userId");
        String password = request.getParameter("password");
       
        System.out.println("ID : " + userId);
        System.out.println("Password : " + password);
        */
       
        // 한글 깨짐 방지(throw 필요)
        // 1. 전송 값에 한글이 있을 경우 처리할 수 있도록 인코딩 처리를 함
        request.setCharacterEncoding("utf-8");
        // 보내는 페이지의 <meta charset="UTF-8"> 형식과 같아야함
        // 새로 열릴 페이지 역시 utf 8 설정을 위해 아래와 같은 문구를 사용
        response.setContentType("text/html; charset=UTF-8");
        // 반드시 값을 꺼내오기 전에 명시를 해야함
       
        // 2. view 에서 보낸 전송값을 꺼내서 변수에 저장하기
        String userId = request.getParameter("userId");
        String password = request.getParameter("password");
       
        System.out.println("ID : " + userId);
        System.out.println("Password : " + password);
       
        // 3. 웹페이지에 스트림 연결(throw 필요)
        PrintWriter out = response.getWriter();
       
        // 4. 스트림을 통해 출력
        out.println("<html>"
                + "<head>"
                + "</head>"
                + "<body>"
                + "아이디 : " + userId + "<br>"
                + "패스워드 : " + password
                + "</body>"
                + "</html>");
        out.close();
    }
   
   
   
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        doGet(request, response);
    }
   
}



이번에는 어노테이션을 사용하지 않고 xml을 통해서 mapping을 진행한다.


또한 html 문서를 작성할 때 입력하는 charset utf-8을


java에서는 어떻게 입력하는지 Set Character Encoding 을 찾아 확인해보자.


--------- web.xml



<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>web-02</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
 
 
  <servlet>
    <servlet-name>test</servlet-name>
    <servlet-class>controller.TestServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>test</servlet-name>
    <url-pattern>/test</url-pattern>
  </servlet-mapping>
 
 
</web-app>




  <servlet>
    <servlet-name>test</servlet-name>
    <servlet-class>controller.TestServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>test</servlet-name>
    <url-pattern>/test</url-pattern>
  </servlet-mapping>


이 부분이 java와 html이 mapping되는 부분이다. 폴더 구조를 확인하면서 어떻게 쓰였는지 확인해보자.










+ Recent posts