[스프링 강의] #4 JSP를 활용한 MVC 아키텍처 구축 :: 잡다한 프로그래밍
반응형

1. MVC 아키텍처란?

  • Model(Java Beans) 객체로 생각, 데이터를 나타냄
  • View (JSP) 사용자가 상태를 볼 수 있는 View page를 의미
  • Controller (Servlet) 뷰와 모델 사이에서 실질적으로 request를 처리하는 부분

MVC패턴

그림과 같은 MVC패턴은 다음과 같은 5가지 단계로 진행된다

1) 브라우저의 request를 Servlet으로 전달함

2) 객체를 생성하여 서블릿의 결과를 저장함

3) view페이지를 선택함

4) JSP 페이지에 객체를 전달함

5) JSP 페이지를 브라우저에 Response 함

2. MVC 패턴 실습하기

MVC패턴을 실제 프로젝트로 실습해 보자.

 

#1 프로젝트 생성

https://diqmwl-programming.tistory.com/18?category=740999의 프로젝트 생성 부분을 참고하여 MVCexample이라는 프로젝트를 생성한다

 

#2 index.jsp생성

다음 그림과 같이 WebContent폴더에 index.jsp를 생성한다

index.jsp생성

 

생성한 index.jsp는 로그인하기, 도움말이라는 링크를 제공하는 페이지로 다음과 같은 코드를 작성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>MVC Example</title>
</head>
<body>
MVC 예제 페이지 입니다.
	<p><a href="/MVCexample/home?action=login"> 로그인하기 </a></p>
	<p><a href="/MVCexample/home?action=help"> 도움말 </a></p>

</body>
</html>

 

코드를 생성하고 프로젝트를 실행한다면 index.jsp는 다음과 같이 실행된다.

index.jsp 실행

 

#3 Home 서블릿 생성

파일 작성을 완료하였다면 로그인하기, 도움말의 링크를 처리하기 위한 Home이라는 Servlet을 생성하기 위해 MVCeample >> Java Resources >> src >> controller라는 패키지를 생성한다.

패키지 생성을 완료하였다면 아래 그림과 같이 Home이라는 Servlet을 생성한다

서블릿 생성 1

 

index.jsp의 링크가 home으로 되어있으므로 URL Mapping을 다음과 같이 /home으로 수정한다

서블릿 생성 2
서블릿 생성 3

서블릿 생성이 완료되었다면 다음과 같이 코드를 작성한다.

코드를 살펴보면 action이라고 request 받은 데이터를 String action에 저장하고 이 값이 login일 경우 view폴더의 loginform.jsp를, help일 경우 help.jsp, 이외의 경우는 error.jsp를 경로로 저장하게 된다.

이후 RequestDispatcher을 이용하여 설정한 경로로 forward 시켜주는 방식이다

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;

/**
 * Servlet implementation class Home
 */
@WebServlet("/home")
public class Home extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Home() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String action = request.getParameter("action");
		String page = null;
		
		if(action.equals("login")) {
			page = "/view/loginform.jsp";
		}
		else if(action.equals("help")) {
			page = "/view/help.jsp";
		}
		else {
			page = "/view/error.jsp";
		}
		
		RequestDispatcher dispatcher = request.getRequestDispatcher(page);
		dispatcher.forward(request, response);
	}

}

 

#4 view폴더, loginform.jsp, help.jsp error.jsp 생성

코드를 작성하고 현재 view 폴더와 loginform.jsp, help.jsp, error.jsp를 만들지 않았으므로 생성해주도록 한다.

먼저 WebContent 아래에 view라는 폴더를 생성시킨다. 이후 아래 그림처럼 loginform.jsp, help.jsp, error.jsp를 생성하고 다음과 같은 코드를 작성한다

view 폴더 구성

loginform.jsp

//loginform.jsp
<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
</head>
<body>
This is Login Page.

<form action="/MVCexample/doLogin" method="get">
	customer ID(id1, id2, id3, id4, id5)<br/>
	<input type="text" name="customerId"/> <br/>
	
	<input type="submit" value="submit"/> <br/>
</form>
</body>
</html>

 

help.jsp

<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
</head>
<body>
This is help Page.
</body>
</html>

 

error.jsp

<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
</head>
<body>
This is error Page.
</body>
</html>

모두 작성을 완료하였다면 index.jsp에서 링크를 클릭 시 다음과 같이 forward 된 것을 확인할 수 있다.

loginform.jsp

 

#5 Model 작성

loginform에서 사용자가 입력하는 id의 실질적인 객체를 만들기 위해 Model을 생성한다 먼저 MVCexample >> Java Resources >> src >> model 패키지를 생성한다. 이후 아래 사진과 같이 Customer 클래스를 생성한다

 

model 생성

생성한 Class의 코드는 다음과 같다 id, name, email을 가지고 있으며 Customer이라는 생성자와, 각각의 게터, 세터 메소드가 정의되어있다.

package model;

public class Customer {

	private String id;
	private String name;
	private String email;
	
	public Customer(String id, String name, String email) {
		this.id = id;
		this.name = name;
		this.email = email;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
	
}

 

#6 Service 생성

실제로 만든 모델에 데이터를 저장하거나, 데이터를 읽어오거나 하는 함수들이 정의된 서비스이다. 사용자의 요청이 들어왔을 때 서블릿에서 이를 처리하는 함수를 구현해도 상관없으나 Service로 분리하여 보다 보기 좋은 코드를 구현한다

model 생성과 같은 방법으로 MVCexample >> Java Resources >> src >> service 패키지를 생성한다. 이후 다음 그림처럼 CustomerService 클래스를 생성한다

service 생성

실제 코드는 다음과 같다. 먼저 CustomerService를 생성하면 customers라는 Map을 생성한다 이때 String은 id, 값으로는 Customer 모델을 받고 customers 객체가 생성될 때 id1~id5의 정보를 미리 저장해 놓는다. 또한 DoLogin 서블릿에서 사용할 findCustomer함수를 정의한다 이는 검색한 아이디가 있을 경우 id의 cusomer을 반환하고 없을 경우 null을 반환한다.

 

package service;

import java.util.HashMap;
import java.util.Map;

import model.Customer;

public class CustomerService {
	
	private Map<String, Customer> customers;

	public CustomerService() {
		customers = new HashMap<String, Customer>();
		
		addCustomer( new Customer("id1", "test1", "test1@naver.com"));
		addCustomer( new Customer("id2", "test2", "test2@naver.com"));
		addCustomer( new Customer("id3", "test3", "test3@naver.com"));
		addCustomer( new Customer("id4", "test4", "test4@naver.com"));
		addCustomer( new Customer("id5", "test5", "test5@naver.com"));
	}
	
	public void addCustomer(Customer customer) {
		customers.put(customer.getId(), customer);
	}
	
	public Customer findCustomer(String id) {
		if(id != null) {
			return (customers.get(id.toLowerCase()));
		}
		else{
			return null;
		}
	}
	
}

 

#6 DoLogin 서블릿 작성

loginform.jsp에서 사용자가 정해진 id를 입력하면 이를 실질적으로 처리할 서블릿인 DoLogin 서블릿을 생성한다.

다음 그림과 같이 URL Mapping을 /doLogin으로 생성한다.

DoLogin 서블릿 생성

DoLogin의 코드는 다음과 같다. loginform.jsp에서 사용자가 입력한 customerId의 값을 저장하고

CustomerService의 객체를 선언한다. 다음으로 findCustomer함수를 사용하여 사용자가 입력한 결과를 Customer라는 Model객체에 저장하여 이를 setAttribute라는 함수를 통해 customer라는 이름으로 저장하여 success.jsp로 forward 한다.

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;

import model.Customer;
import service.CustomerService;

/**
 * Servlet implementation class DoLogin
 */
@WebServlet("/doLogin")
public class DoLogin extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public DoLogin() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		String customerId = request.getParameter("customerId");
		
		CustomerService service = new CustomerService();
		Customer customer = service.findCustomer(customerId);
		request.setAttribute("customer", customer);
		
		String page;
		if(customer == null) {
			page = "/view/error.jsp";
		}
		else {
			page = "/view/success.jsp";
		}
		
		RequestDispatcher dispatcher = request.getRequestDispatcher(page);
		dispatcher.forward(request, response);
	
	}

}

 

#7 success.jsp생성

view폴더에 success.jsp를 생성하고 다음과 같은 코드를 작성한다. ${}는 JSP EL으로서 변수를 사용하는 방법이다.

넘겨받은 customer를 다음과 같이 화면에 출력하는 코드이다

<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
</head>
<body>
This is Login Success page.

<ul>
<li> Name : ${customer.id }</li>
<li> Name : ${customer.name }</li>
<li> Name : ${customer.email }</li>
</ul>
</body>
</html>

모두 완료하였을 경우 다음과 같은 결과 화면을 확인할 수 있다

success.jsp

반응형

'프로그래밍 > Spring' 카테고리의 다른 글

[스프링 강의] #6 의존성 주입, DI(Dependency Injection) 2번째 Annotation활용하기  (0) 2019.12.22
[스프링 강의] #5 의존성 주입, DI(Dependency Injection)란?  (2) 2019.12.16
[스프링 강의] #3 JSP(Java Server Pages)란? / JSP와 Servlets의 차이  (0) 2019.12.08
[스프링 강의] #2 Servlet(서블릿) 이란?  (0) 2019.12.04
[스프링 강의] #1 스프링 프레임 워크란?  (0) 2019.11.28

+ Recent posts

티스토리툴바