본문 바로가기

JSP, Servlet, MySQL/JSP - webmarket

JSP Servlet 웹 MVC : 게시판 만들기

728x90
반응형

01 MVC 의 개요

MVC 는 Model , View , Controller 의 약자로, 웹 애플리케이션을 비즈니스 로직, 프레젠테이션로직, 데이터로 분리하는 디자인 패턴이다. 웹 애플리케이션에서는 일반적으로 애플리케이션을 비즈니스 로직, 프레젠테이션, 요청 처리 데이터로 분류한다. 비즈니스로직은 애플리케이션의 데이터, 즉 고객, 제품, 주문정보의 조작에 사용되는 용어이고, 프레젠테이션은 애플리케이션이 사용자에게 어떻게 표시되는지 , 즉 위치, 폰트, 크기를 나타낸다. 그리고 요청 처리 데이터는 비즈니스 로직과 프레젠테이션 파트를 함께 묶는것을 말한다. 

 

MVC 패턴의 구성요소

 

컨트롤러

 

                                                                               

                                                         모델                                뷰

 

  • 모델 (model) : .애플리케이션의 데이터와 비즈니스 로직을 담는 객체이다. 
  • 뷰 (view) : 사용자에게 모델의 정보(데이터)를 보여주는 역할을 한다. 비즈니스 로직을  포함하지 않으며, 하나의 모델을 다양한 뷰에서 사용할 수 있다. 
  • 컨트롤러(controller) : 모델과 뷰 사이에 어떤 동작이 있을 때 조정하는 역할을 한다. 웹으로부터 받은 요청에 가장 적합한 모델을 생성하는 것을 처리하는 역할과 사용자에게 응답하는 적절한 뷰를 선택하여 해당 모델을 전달하는 역할을 한다. 

웹 애플리케이션에 MVC 패턴을 사용하면 유지보수가 용이하고 쉽게 확장 및 테스트를 할 수 있다. 또한 내비게이션 컨트롤이 중앙 집중화되어 있다. 

 

 

02 MVC 패턴 구조

웹 애플리케이션 개발을 시작하기 전에 개발 구조에 대한 기본 계획이 있어야 한다. 요청 처리가 이루어지는 위치(서블릿 또는 JSP )에 MVC의 모델은 두 가지가 있다. 웹 애플리케이션에서 MVC 패전인 JSP(뷰) 와 자바빈즈 (모델), 서블릿(컨트롤러)를 이용하면 쉽게 구현할 수 있다. 규모가 큰 프로젝트도 MVC 를 통해 훨씬 더 효율적으로 개발할 수 있다. 

 

2.1 모델1

모델 1 은 기존의 JSP로만 구현한 웹 애플리케이션으로 , 웹 브라우저의 요청을 JSP 페이지가 받아서 처리하는 구조이다. 즉 JSP 페이지에 비즈니스 로직을 처리하는 코드와 웹 브라우저에 결과를 출력하는 코드가 섞이는 것이다. 

 

모델 1 에서는 JSP 가 핵심 역할을 수행하며, 웹 브라우저가 요청한 작업을 자바빈즈나 서비스클래스를 사용하여 처리한다. JSP는 웹 브라우저의 요청을 수행하고 JSP 에 응답을 전달하는 자바빈즈 객체를 생성한 후 클라이언트에 응답을 보낸다. 모델 1 은 모델 2 와 달리 대부분의 처리가 JSP 자체에 의해 수행된다. 

 

모델 1 의 장단점

장점 단점
- 구조가 단순하여 개발자의 수준이 낮아도 쉽게 익힐 수 있어     구현이 용이하다. 
- 개발 초기에 복잡한 설정이 필요없어 빠른 개발이 가능하다. 
- 개발 속도가 빠르다. 
- 출력을 위한 뷰 코드와 로직 처리를 위한 자바 코드 (컨트롤       러) 가 섞여 있어 분업이 용이하지 않다. 
- 코드가 복합하여 유지보수가 어렵다. 
- 자바 코드와 JSP, HTML 이 섞이기 떄문에 코드가 복잡하다.

 

 

2.2 모델2

모델 2는 클라이언트의 요청 처리, 응답 처리, 비즈니스 로직 처리 부분을 모듈화한 구조이다. 웹 브라우저의 요청이 들어오면 모든 처리를 JSP 페이지가 담당하는 모델 1 과 달리, 요청에 대한 로직을 처리할 자바빈즈나 자바 클래스인 모델, 요청 결과를 출력하는 JSP 페이지인 뷰, 모든 흐름을 제어는 서블릿인 컨트롤러로 나뉘어 웹 브라우저가 요청한 작업을 처리한다. 

 

모델2 에서는 서블릿이 중요한 역할을 하며, 웹 브라우저가 요청한 모든 작업을 하나의 서블릿이 처리한다. 서블릿은 웹 브라우저의 요청을 알맞게 처리한 후 그 결과를 보여줄 JSP 페이지로 포워딩하고, 이를 통해 요청 흐름을 받은 JSP 패이지는 결과 화면을 웹 브라우저에 전송한다. 즉 서블릿이 비즈니스 로직 부분을 처리한다. 

 

모델 2의 구조와 요청 처리 흐름

1. 웹 브라우저가 웹 서버에 웹 애플리케이션 실행을 요청하면 웹 서버는 요청을 처리할 수 있는 컨트롤러(서블릿)를 찾아서 요청을 전달한다. 

2. 컨트롤러(서블릿)는 모델 자바 객체의 메소드를 호출한다. 

3. 데이터를 가공하여 값 객체를 생성하거나 JDBC를 사용하여 데이터베이스와의 인터렉션을 통해 값 객체를 생성한다. 

4. 업무 수행을 마친 결과 값을 컨트롤러에 반환한다. 

5. 컨트롤러는 모델로부터 받은 결과 값을 뷰에 전달한다. 

6. JSP 는 전달받은 값을 찹조해서 출력할 결과를 만들어 웹 서버에 전달하고, 웹 브라우저는 웹 서버로부터 결과 값을 받아 화면에 출력한다. 

 

모델2의 장단점

장점 단점
- 출력을 위한 뷰 코드와 로직  처리를 위한 자바 코드를 분리하기 때문에 모델 1 보다 코드가 간결하다. 
- 뷰와 로직 처리에 대한 분업이 용이하다. 
- 기능에 따라 분리되어 있기 때문에 유지보수가 용이하다. 
- 확장이 용이하다. 
- 구조가 복잡하여 습득하기 어렵고 작업량이 많다. 
-  개발 초기에 설정이 필요한 부분이 모델 1 보다 많기 때문에 실질적인 작업을 시작하기까지 시간이 걸린다. 
- 코드가 분리됨으로써 관리해야 할 파일이 많아진다. 

 

03 MVC 패턴 구현 방법

3.1 web.xml 파일에 서블릿 구성하기

웹MVC 에서는 클라이언트로부터 컨트롤러인 서블릿을 통해 요청을 받아야 한다. 이를 위해 웹 애플리케이션(톰캣 기반)의 /WEB-INF/ 폴더에 있는 환경 설정 파일인 web.xml 에 서블릿 클래스와 웹 브라우저의 요청 URL 패턴을 등록해야 한다. 

 

<servlet> 요소로 서블릿 클래스를 등록하기

<servlet>은 웹 애플리케이션에서 사용될 기본 서블릿 객체와 매개변수를 설정하는 요소로 형식은 다음과 같다. 

<servlet>
	<servlet-name>서블릿 이름</servlet-name>
    <servelt-class>서블릿 클래스(패키지 이름.클래스)</servelt-class>
    [<init-param>
    	<param-name>매개변수 이름</param-name>
        <param-value>매개변수 값</param-value>
    </init-param>]
</servlet>

 

다음은 <servlet>요소에 서블릿 이름 myController 와 패키지를 포함한 서블릿을 구현한 자바클래스 이름 MyController를 설정하는 예이다. 서블릿 이름은 자바 클래스 이름과 같지 않아도 된다. 

 

[<servlet> 요소로 서블릿 클래스를 등록한 예]

<web-app>
<servlet>
	<servlet-name>myController</servlet-name>
    <servelt-class>ch18.com.controller.MyController</servelt-class>
</servlet>
</web-app>

 

 

<servlet-mapping> 요소로 요청 URL 패턴 설정하기

<servlet-mapping>은 웹 브라우저에서 요청되는 URL과 서블릿 클래스를 매핑하기 위해 URL 패턴을 설정하는 요소로 형식은 다음과 같다. 

<servlet-mapping>
	<servlet-name>서블릿 이름</servlet-name>
    <url-pattern>요청할 URL 패턴</url-pattern>
</servlet-mapping>

 

다음은<servlet-mapping> 요소에 웹 브라우저의 모든 요청 URL과 서블릿 클래스를 매핑하도록 URL 패턴 '/' 로 설정하는 예이다. 만약 웹 브라우저의 요청 URL 이 http://localhost:8080/JSPBook/home 이라면 <url-pattern> 요소에서 설정한 URL 패턴 '/' 값은 루트 경로인 http://localhost:8080/JSPBook/의 모든 하위 경로에 해당되고 이를 서블릿 클래스가 처리한다. 

 

[<servlet-mapping> 요소로 요청 URL 패턴을 등록한 예]

<servlet-mapping>
	<servlet-name>myController</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

 

NOTE_ 웹 브라우저의 요청 URL 과 서블릿 클래스를 매핑하는 <url-pattern> 설정방법

  • 웹 브라우저의 요청 URL 입력 시 확장자가 .jsp 인 요청을 처리하는 경우
<servlet-mapping>
	<servlet-name>myController</servlet-name>
    <url-pattern>*.jsp</url-pattern>
</servlet-mapping>

요청 URL 의 예 : http://localhost:8080/JSPBook/home.jsp

  • 웹 브라우저의 요청 URL 입력 시 확장자가 .do인 요청을 처리하는 경우
<servlet-mapping>
	<servlet-name>myController</servlet-name>
    <url-pattern>*.do</url-pattern>
</servlet-mapping>

요청 URL의 예 : http://localhost:8080/JSPBook/home.do

 

 

3.2 컨트롤러 생성하기

컨트롤러는 뷰와 모델 간의 인터페이스 역할을 하여 웹 브라우저의 모든 요청 URL을 받아들이고 요청 URL과 함께 전달되는 요청 파라미터를 받아 처리하는 서블릿 클래스이다. 컨트롤러는 요청된 데이터를 처리하기 위해 모델로 보내고 처리된 결과를 받아서 응답할 JSP 페이지로 이동한다. 

 

서블릿 클래스 생성하기

서블릿 클래스는 HttpServlet 클래스를 확장하여 생성하며 형식은 다음과 같다. 생성된 서블릿 클래스는 웹 브라우저에서 전송되는 GET 방식과 POST 방식에 따라 각각 doGet(), doPost() 메소드를 통해 요청 작업을 수행한 후 브라우저에 응답한다. 

public class 서블릿 이름 extends HttpServlet{
	@Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	//Get 방식으로 전송되는 요청을 처리 
    }
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	//Post 방식으로 전송되는 요청을 처리 
    }
}

 

만약 웹 브라우저로의 전송 방식이 GET 방식이든 POST 방식이든 상관없이 처리하려 한다면 doGet() [또는doPost()]  메소드에 doPost [또는 doGet()] 메소드를 포함하여 설정하거나 임의의 메소드를 만들어 doGet(), doPost() 메소드 내에 각각 설정해도 된다. 

 

페이지 이동하기

서블릿 클래스에서 웹 브라우저로부터 요청된 처리 결과를 보여줄 응답 페이지로 이동하는 형식은 다음과 같다. 이때 현재 뷰 페이지에서 이동할 뷰 페이지에 요청 정보를 그대로 전달하며, 뷰 페이지가 이동해도 처음에 요청된 URL 을 계속 유지하기 위해 포워딩 방식을 사용한다. 

RequestDispacher dispatcher = request.getRequestDispacher("JSP 페이지");
dispacher.forword(request, response);

 

[컨트롤러인 서블릿 클래스 MyController 생성 예]

public class MyController extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    request.setAttribute("message","Hello! JAva Server Page.");
    RequestDispatcher rd = request.getRequestDispatcher("vies.jsp");
    rd.forward(request, response);
    }
}

 

 

3.3 모델 생성하기

모델은 웹 애플리케이션의 비즈니스 로직을 포함하는 데이터로 웹 애플리케이션의 상태를 나타낸다. 모델은 데이터베이스에서 데이터를 가져오거나, 웹 애플리케이션에 필요한 서비스를 수행하는 간단한 자바 클래스로 자바빈즈를 의미한다. 자바빈즈는 데이터를 담을 멤버 변수인 프로퍼티와 데이터를 가져오거나 저장하는  Getter/Setter() 메소드로 구성된다. 

 

(자바빈즈)

 

3.4 뷰 생성하기

뷰는 웹 브라우저의 요청을 처리한 결과를 사용자에게 보여주는 JSP 페이지를 의미한다. 뷰는 JSP가 제공하는 태그를 사용하여 컨트롤러가 전송한 모델 데이터를 웹 브라우저에 출력한다. 다음은 앞의 예에서 작성한 컨트롤러 MyController 클래스로부터 뷰 페이지에 전달된 message 속성 값을 출력하는 예이다. 

 

[뷰인 view.jsp 페이지 생성 예]

//view.jsp
<%@ page contentType="text/html; charset=utf-8"%>
<%
	String msg = (String)request.getAttribute("message");
    out.println(msg);
%>

 

예제- -MVC 를 적용한 로그인 인증하기

 

1. 프로젝트 생성하기

 

2. web.xml 파일에 서블릿 구성하기

JSPBook/WebContent/WEB-INF/web.xml

..(생략)..
<servlet>
  	<servlet-name>myController</servlet-name>
  	<servlet-class>ch18.com.controller.ControllerServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>myController</servlet-name>
  	<url-pattern>/ch18/ControllerServlet</url-pattern>
  </servlet-mapping>
</web-app>

 

 

3. 모델 생성하기

 

JSPBook/src/ch18/com/model/LoginBean.java

package ch18.com.model;

public class LoginBean{
	private String id;
	private String password;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
	public boolean validate() {
		if(password.equals("admin"))
			return true;
		else 
			return false;
	}
}

 

 

 

4. 컨트롤러 생성하기

 

JSPBook/src/ch18/com/controller/ControllerServlet.java

package ch18.com.controller;

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 ch18.com.model.LoginBean;

public class ControllerServlet extends HttpServlet{
	
	private static final long serialVersionUID = 1L;
	
	protected void doPost(HttpServletRequest request , HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		
		String id = request.getParameter("id");
		String password = request.getParameter("passwd");
		
		LoginBean bean = new LoginBean();
		bean.setId(id);
		bean.setPassword(password);
		request.setAttribute("bean", bean);
		
		boolean status = bean.validate();
		
		if(status) {
			RequestDispatcher rd = request.getRequestDispatcher("mvc_success.jsp");
			rd.forward(request, response);
		}else {
			RequestDispatcher rd = request.getRequestDispatcher("mvc_error.jsp");
			rd.forward(request, response);
		}
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		doPost(req, resp);
	}
}

 

 

5. 뷰 생성하기 

 

JSPBook/WebContent/ch18/mvc.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>MVC</title>
</head>
<body>
	<form method="post" action="ControllerServlet">
		<p> ID : <input type="text" name="id">
		<p> PASSWORD : <input type="password" name="passwd">
		<p> <input type="submit" value="submit">
	</form>
</body>
</html>

 

 

 

JSPBook/WebContent/ch18/mvc_success.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="ch18.com.model.LoginBean" %>
<html>
<head>
<title>MVC</title>
</head>
<body>
	<p> 로그인 성공했습니다. 
	<p><%
		LoginBean bean = (LoginBean) request.getAttribute("bean");
		out.print("아이디 : " + bean.getId());
	%>
</body>
</html>

 

 

JSPBook/WebContent/ch18/mvc_error.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>MVC</title>
</head>
<body>
	<p> 아이디와 비밀번호를 확인해주세요.
	<%@ include file="mvc.jsp" %>
</body>
</html>

 

 

admin/admin 을 입력해준다.

 

 

로그인 성공시 화면 모습!

 

아이디와 비밀번호를 확인해달라는 문자가 나오고, 아래에는 include 로 불러온 mvc.jsp 가 나오는것을 확인할 수 있다. !

 

728x90
반응형