코드를 작성하고 현재 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 한다.
기본적인 흐름을 알기 위한 코드로 form 안에 username을 입력하기 위한 input과 password를 입력하기 위한 input이 존재한다 form은 POST방식으로 전달하기 위해 method = POST이며, action은 실제 서블릿에서 DoLogin이라는 함수에서 처리한다는 의미이다.
#3. index.html 결과 화면
html 결과
만약 html을 성공적으로 작성하고 실행하였다면 다음과 같은 결과가 확인된다.
이때 사용자가 제출 버튼을 누르게 된다면 다음과 같은 오류 화면이 발생할 것이다.
error 화면
왜냐하면 /DoLogin을 처리해줄 서블릿이 존재하지 않기 때문이다 따라서 /DoLogin을 처리해줄 서블릿을 생성해보자.
#4. 서블릿 생성 하기
서블릿 패키지 생성
생성된 프로젝트에Src를 우클릭하여 다음과 같이Package를생성한다. 패키지명은 원하는 명으로 해도 상관없으나 이 프로젝트에서는 servlet이라고 패키지명을 작성하였다.
서블릿 생성
생성된 패키지를 우클릭하여 New > Servlet을 클릭하여 서블릿을 생성한다
서블릿 생성
서블릿 명은 DoLogin으로 작성 하였다 (이는 html form에서 action을 DoLogin으로 지정했기 때문)
서블릿 생성
다음은 자동으로 URL이 /DoLogin으로 매핑되어있으므로 건드리지 않고 넘어간다.
서블릿 생성
다음은 재정의 하여 사용할 함수의 목록을 보여준다 아래에 현재 doPost와 doGet이 체크되어있지만 실습에서는 POST를 사용하기로 하였으므로 doPost만 체크하고 서블릿 생성을 완료한다.
생성된 DoLogin 서블릿의 코드는 다음과 같다.
package servlet;
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;
/**
* Servlet implementation class DoLogin
*/
@WebServlet("/DoLogin") //URL에노테이션으로 되어 있음
public class DoLogin extends HttpServlet { //HttpServlet상속 받아야함
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DoLogin() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter out = response.getWriter();
String htmlResponse = "<html>";
htmlResponse += "<h2> Your name is : " + username + "<br/>";
htmlResponse += "<h2> Your password is : " + password + "<br/>";
htmlResponse += "</html>";
out.println(htmlResponse);
}
}
String username = request.getParameter("username")으로 form의 username input이 보낸 value를 저장하고
PrintWriter를 사용해 html을 response해준다.
@WebServlet("/DoLogin")이 부분이 form에서 /DoLogin으로 요청을 보낸 부분을 처리하겠다고 명시해주는 에노테이션 부분이다. 에노테이션에 대한 자세한 설명은 ~~에서 확인할 수 있다.
#5. 프로젝트 실행 결과
다음과 같이 서블릿을 생성을 완료하고 이전과 같이 html을 제출하였다면 다음과 같은 화면이 보이게 될 것이다.
프로젝트 성공
5. 설명
코드 구조
프로젝트에서 작성한 구성을 그림으로 표현하면 다음과 같다 사용자는 html폼을 이용하여 POST방식으로 /DoLogin이라는 요청을 보내고 서블릿에서는 DoLogin 클래스의 재정의된 doPost를 사용하여 이를 처리하여 사용자에게 다시 반환하는 방식이다.
