본문 바로가기

JSP,Servlet

Servlet - 데이터 전송/이미지 띄우기 실습

서버로 데이터 전송하기 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   <h1>서버로 데이터 전송하기</h1>
   
   <!-- 사용자가 입력한 데이터를 서버프로그램(Servlet)으로 전송 -->
   <!-- ★서버로 데이터를 전송하기 위한 3가지 요소
   1.action속성 : 서버의 경로
   2.name속성 : 데이터의 이름
   3.submit버튼 : 서버로 데이터를 전송하는 역할  
   -->
   <form action="DataSend">
      데이터 입력: <input type="text" name="data">
      <input type="submit" value="전송">
   </form>
   
</body>
</html>

위에 실습에 대한 HTML 소스 코드 

- Data란 Mapping 값을 갖는 파일로 데이터를 전송

- data라는 데이터를 입력받는다

 

package com.smhrd.servlet1230;

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

   protected void service(HttpServletRequest request, HttpServletResponse response)
         throws ServletException, IOException {

      response.setContentType("text/html; charset=utf-8");

      PrintWriter out = response.getWriter();

      System.out.println("서버에 요청이 들어옴..!");

      // 사용자가 입력한 데이터 가져오기!
      String data = request.getParameter("data");
      System.out.println("전달받은 값>> " + data);
      out.print("<html><head><title>응답결과</title></head>");
      out.print("<body>서버에서 보낸 값: "+data+"</body></head>");
   }

}

- 데이터를 가져오기 위해  request.getParameter라는 명령어 사용

- response.setContentType("text/html; charset = utf-8); 은 MIME Type 대한 내용

- PrintWriter out = response.getWriter();

  PrintWriter라는 객체를 불러와서 Server를 통해 데이터를 전달할 수 있음

 

-위에 코드로 실행을 시켜서 크롬창 데이터 입력에 숫자 12를 입력해보면

 console창에 입력한 12 값이 그대로 출력이 됩니다!!

 


실습 - 이미지 선택하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex05Image</title>
</head>
<body>
   <h1>원하는 사진의 번호를 입력해주세요</h1>
   
   <form action="Ex05ImageView">
      <p>보기: 1.cat.jfif | 2.d1.jpg | 3.d2.jpg</p>
      <input type="text" name="num">
      <input type="submit" value="보기">
   </form>
</body>
</html>

이미지 실습에 대한 HTML파일 코드

package com.smhrd.servlet1231;

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

   
   protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      
      response.setContentType("text/html; charset=utf-8");
      PrintWriter out = response.getWriter();
      
      int num = Integer.parseInt(request.getParameter("num"));
      
      String src = "";
      
      if(num==1) {
         src= "img/cat.jfif";
      }
      else if(num==2) {
         src= "img/d1.jpg";
      }
      else
         src="img/d2.jpg";
      
      out.print("<html>");
      out.print("<html><head><title>고양이 이미지</title></head>");
      out.print("<body>");
      out.print("<img src='"+src+"' alt='해당 이미지를 불러올 수 없습니다.'>");
      
      out.print("</body>");
      out.print("</html>");
      
   }

}

JAVA파일의 호출한 Library

우선 이미지 파일 3개를 다운 받아서 

img 폴더를 만들어서 그 안에 넣어 놓는다 

 

이미지에 순번을 메겨서 

if문/else if문을 써서 

1번 / 2번 / 3번 입력시 

관련된 이미지 파일을 나타내도록 하였다.

 

실습 결과