Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
★ [JSP - (MVC)] 20231222 [프로그램 소스] - HelloSend01(html), HelloReceive01(jsp), HelloSend02(html), HelloReceive02(java), web.xml(Hello2), web.xml(Hello3), HelloSend03Controller(java), HelloSend03(html), HelloReceive03Controller(java), HelloR.. 본문
[JSP (MVC)]/Program source (JSP (MVC))
★ [JSP - (MVC)] 20231222 [프로그램 소스] - HelloSend01(html), HelloReceive01(jsp), HelloSend02(html), HelloReceive02(java), web.xml(Hello2), web.xml(Hello3), HelloSend03Controller(java), HelloSend03(html), HelloReceive03Controller(java), HelloR..
Jelly-fish 2023. 12. 26. 23:14
WebApp26
01
【HelloSend01.jsp】 - 최초 요청 페이지
HelloSend01.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloSend01.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>최초 요청 페이지</h1>
<h2>HelloSend01.html</h2>
<hr>
</div>
<div>
<form action="HelloReceive01.jsp" method="post">
First Name
<input type="text" name="firstName" class="txt"><br>
Last Name
<input type="text" name="lastName" class="txt"><br>
<br>
<button type="submit" class="btn">submit</button>
</form>
</div>
</body>
</html>
【HelloReceive01.jsp】 - 결과 수신 페이지
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%
String firstName = request.getParameter("firstName");
String lastName = request.getParameter("lastName");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloReceive01.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
</head>
<body>
<div>
<h1>결과 수신 페이지</h1>
<h2>HelloReceive01.jsp</h2>
<hr>
</div>
<div>
<ul>
<!-- <li><b>First Name : </b>길동</li> -->
<%-- <li><b>First Name : </b>${param.firstName }</li> --%>
<li><b>First Name : </b><%=firstName %></li>
<!-- <li><b>Last Name : </b>홍</li> -->
<%-- <li><b>Last Name : </b>${param.lastName }</li> --%>
<li><b>Last Name : </b><%=lastName %></li>
</ul>
</div>
</body>
</html>
WebApp27
web.xml을 통해 서블릿 controller(HelloSend02.java)로 입력 데이터 전송 후, servlet에서 HTML 작성
01
HelloSend02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloSend02.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>최초 요청 페이지</h1>
<h2>HelloSend02.html</h2>
<hr>
</div>
<div>
<!-- 서블릿 주소 요청 -->
<form action="helloreceive02" method="post">
First Name
<input type="text" name="firstName" class="txt"><br>
Last Name
<input type="text" name="lastName" class="txt"><br>
<br>
<button type="submit" class="btn">submit</button>
</form>
</div>
</body>
</html>
web.xml을 통해, HelloReceive02.java 클래스가 동작하도록 하기.
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>WebApp00</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></servlet-name>
<servlet-class></servlet-class>
</servlet>
<servlet-mapping>
<servlet-name></servlet-name>
<url-pattern></url-pattern>
</servlet-mapping>
-->
<!-- Helloreceive02 -->
<servlet>
<servlet-name>HelloReceive02</servlet-name>
<servlet-class>com.svt.HelloReceive02</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloReceive02</servlet-name>
<url-pattern>/helloreceive02</url-pattern>
</servlet-mapping>
</web-app>
이전 페이지(HelloSend02.html)에서 넘어온 `firstName`, `lastName` 을 수신한 후 HTML 작성하여 페이지에 표시.
HelloReceive02.java
/*========================
HelloReceive02.java
=========================*/
package com.svt;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloReceive02 extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
// 서블릿 관련 코딩
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
String title = "결과 수신 페이지";
String subTitle = "HelloReceive02.java";
String docType = "<!DOCTYPE html>";
out.print(docType + "\n"
+ "<html>\n"
+ "<head><title>" + title + "</title></head>\n"
+ "<body bgcolor=\"f0f0f0\">\n"
+ "<div><h1>" + title + "</h1>\n"
+ "<h2>" + subTitle + "</h2>\n"
+ "<hr></div>\n"
+ "<div>\n"
+ "<ul>\n"
+ "<li><b>First Name : </b>" + request.getParameter("firstName") + "</li>\n"
+ "<li><b>Last Name : </b>" + request.getParameter("lastName") + "</li>\n"
+ "</ul>\n"
+ "</div>\n"
+ "</body>\n"
+ "</html>\n");
}
}
WebApp28
【모델2 방식으로 firstName, lastName 수신 결과 페이지에 표시하기.】
▷ Model : `HelloReceive03Model.java`
▷ View : `HelloSend03.html`, `HelloReceive03.jsp`
▷ Controller : `HelloSend03Controller.jsp`
01
【진행 과정】
① `http://localhost:3306/WebApp28/hello` 로 클라이언트 접근
② web.xml에 의해 HelloSend03Controller.java 컨트롤러 클래스가 동작
<!-- SendController --> <servlet> <servlet-name>HelloSend03</servlet-name> <servlet-class>com.svt.HelloSend03Controller</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloSend03</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping>
③ HelloSend03Controller.java 에서, 클라이언트를 `HelloSend03.html`로 forwarding
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // GET 방식이든 POST 방식이든 // 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드 // View 객체에 대한 연결 RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/HelloSend03.html"); dispatcher.forward(request, response); }
④ `HelloSend03.html`에서 입력 폼 작성 후, `http://localhost:3306/WebApp28/receive` 페이지 요청
<div> <!-- 서블릿 주소 요청 --> <form action="receive" method="post"> First Name <input type="text" name="firstName" class="txt"><br> Last Name <input type="text" name="lastName" class="txt"><br> <br> <button type="submit" class="btn">submit</button> </form> </div>
⑤ web.xml에 의해 HelloReceive03Controller.java 동작.
<servlet> <servlet-name>HelloReceive03</servlet-name> <servlet-class>com.svt.HelloReceive03Controller</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloReceive03</servlet-name> <url-pattern>/receive</url-pattern> </servlet-mapping>
⑤ HelloSend03Controller.java 에서, HelloReceive03Model.java의 process 메소드 호출
⑥ 사용자 요청 페이지 `/WEB-INF/view/HelloReceive03.jsp` 페이지로 forwarding
【`HelloSend03Controller.java` - Model의 process 메소드 호출】
// 사용자 정의 메소드 protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // GET 방식이든 POST 방식이든 // 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드 request.setCharacterEncoding("UTF-8"); // Model 객체 연결 → 업무 로직 수행, View 정보 얻어내기 HelloReceive03Model model = new HelloReceive03Model(); String view = model.process(request, response); // View 객체 연결 RequestDispatcher dispatcher = request.getRequestDispatcher(view); dispatcher.forward(request, response); }
【`HelloReceive03Model.java ` - 업무 처리 종료 이후, View 페이지 url 문자열 반환】
▷ 도착할 View 페이지 : `HelloReceive03.jsp`
→ `String process(HttpServletRequest request, HttpServletResponse response)`
public String process(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException { String result = ""; // 『UnsupportedEncodingException』 // → 지원하지 않는 인코딩이어서 제대로 입력을 못 읽어들였을 때 처리할 예외. request.setCharacterEncoding("UTF-8"); // 데이터 수신 String firstName = request.getParameter("firstName"); String lastName = request.getParameter("lastName"); lastName = "["+ lastName + "]"; // 업무 처리가 완료된 데이터 전달 request.setAttribute("fName", firstName); request.setAttribute("lName", lastName); // 뷰(HelloReceive03.jsp)의 url 문자열 저장 후 반환 result = "/WEB-INF/view/HelloReceive03.jsp"; return result; }
⑦ 결과 수신 페이지 `HelloReceive03.jsp`에서 입력 페이지 `HelloSend03.html`에서 작성한 데이터 확인
<div> <h1>결과 수신 페이지</h1> <h2>HelloReceive03.jsp</h2> <hr> </div> <div> <ul> <!-- <li><b>First Name : </b>혜인</li> --> <li><b>First Name : </b>${fName }</li> <!-- <li><b>Last Name : </b>최</li> --> <li><b>Last Name : </b>${lName }</li> </ul> </div>
【web.xml】 - 클라이언트가 `http://localhost:3306/WebApp28/hello` 페이지를 요청할 경우 `HelloSend03.jsp`로 연결
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>WebApp00</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></servlet-name>
<servlet-class></servlet-class>
</servlet>
<servlet-mapping>
<servlet-name></servlet-name>
<url-pattern></url-pattern>
</servlet-mapping>
-->
<!-- SendController -->
<!-- HelloSend03Controller.java 클래스 동작 -->
<servlet>
<servlet-name>HelloSend03</servlet-name>
<servlet-class>com.svt.HelloSend03Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloSend03</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
<!-- ReceiveController -->
<!-- HelloReceive03Controller.java 클래스 동작 -->
<servlet>
<servlet-name>HelloReceive03</servlet-name>
<servlet-class>com.svt.HelloReceive03Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloReceive03</servlet-name>
<url-pattern>/receive</url-pattern>
</servlet-mapping>
</web-app>
【Controller】 - `HelloSend03Controller.java` (클라이언트를 `HelloSend03.jsp`로 이동시킨다.)
HelloSend03Controller.java
/*================================
HelloSend03Controller.java
=================================*/
package com.svt;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloSend03Controller extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
// View 객체에 대한 연결
RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/HelloSend03.html");
dispatcher.forward(request, response);
}
}
【View】 [최초 요청 페이지]
- `HelloSend03.jsp` (WebContent > WEB-INF > view 폴더 내부에 숨겨진 상태)
HelloSend03.jsp
▷ `form action="receive"` 에 의해 `http://localhost:3306/WebApp28/receive` url 요청.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloSend03.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>최초 요청 페이지</h1>
<h2>HelloSend03.html</h2>
<hr>
</div>
<div>
<!-- 서블릿 주소 요청 -->
<form action="receive" method="post">
First Name
<input type="text" name="firstName" class="txt"><br>
Last Name
<input type="text" name="lastName" class="txt"><br>
<br>
<button type="submit" class="btn">submit</button>
</form>
</div>
</body>
</html>
【web.xml】 - web.xml의 태그로 인해 `HelloReceive03Controller.java` 컨트롤러 클래스 동작
web.xml
<servlet>
<servlet-name>HelloReceive03</servlet-name>
<servlet-class>com.svt.HelloReceive03Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloReceive03</servlet-name>
<url-pattern>/receive</url-pattern>
</servlet-mapping>
【Controller】 - `HelloReceive03Controller.java` (`RequestDispatcher`를 통해 결과 확인 페이지로 forwarding 처리)
HelloReceive03Controller.java
/*======================================
HelloReceive03Controller.java
=======================================*/
package com.svt;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.test.HelloReceive03Model;
public class HelloReceive03Controller extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
request.setCharacterEncoding("UTF-8");
// Model 객체 연결 → 업무 로직 수행, View 정보 얻어내기
HelloReceive03Model model = new HelloReceive03Model();
String view = model.process(request, response);
// View 객체 연결
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}
【Model】 - `HelloReceive03Model.java` (요청 페이지에서 입력한 firstName, lastName 업무 처리, 뷰 url 반환)
HelloReceive03Model.java
/*==============================
HelloReceive03Model
==============================*/
package com.test;
import javax.servlet.http.HttpServletResponse;
import java.io.UnsupportedEncodingException;
import javax.servlet.http.HttpServletRequest;
public class HelloReceive03Model
{
// HelloReceive03Controller.java가 접근 가능한 접근제어지시자여야 한다.
public String process(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException
{
String result = "";
// 서블릿이 아니라, 자바이므로... 예외 처리가 발생.
// UTF-8이라는 인코딩이 운영체제에서 없을 수 있으므로
// 제대로 업무 수행을 못할 수 있기 때문에...
// 예외 처리를 해 주도록 한다.
// 『UnsupportedEncodingException』
// → 지원하지 않는 인코딩이어서 제대로 입력을 못 읽어들였을 때 처리할 예외.
request.setCharacterEncoding("UTF-8");
// 데이터 수신
String firstName = request.getParameter("firstName");
String lastName = request.getParameter("lastName");
// 업무 처리 코드 삽입 가능~!!!
lastName = "["+ lastName + "]";
// 업무 처리가 완료된 데이터 전달
request.setAttribute("fName", firstName);
request.setAttribute("lName", lastName);
// 여기서, 뷰 정보를 반환하면 Model과 view가 붙어버리는 것!
// 모델에서 특정한 뷰를 반환하게 되면 컨트롤러가 하는 일이 더 적어진다...
// 상황에 따른 뷰 선택(지정) 가능~!!!
result = "/WEB-INF/view/HelloReceive03.jsp";
return result;
}
}
【View】 [결과 수신 페이지]
- `HelloReceive03.jsp` (WebContent > WEB-INF > view 폴더 내부에 숨겨진 상태)
HelloReceive03.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloReceive03.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>결과 수신 페이지</h1>
<h2>HelloReceive03.jsp</h2>
<hr>
</div>
<div>
<ul>
<!-- <li><b>First Name : </b>혜인</li> -->
<li><b>First Name : </b>${fName }</li>
<!-- <li><b>Last Name : </b>최</li> -->
<li><b>Last Name : </b>${lName }</li>
</ul>
</div>
</body>
</html>