Spring :: Spring MVC 프로젝트 실습 03 (데이터 송수신)

💫 Mvc03

■■■ Spring MVC 프로젝트 실습 03 ■■■

○ Perspective
   : JavaEE

○ 다이나믹 웹 프로젝트 생성 (비STS 버전)
   : Mvc03

○ 기본 환경 구성 및 라이브러리 설정
   : Mvc00 (우리가 임의로 구성해둔 샘플)로 부터
     src, WebContent 디렉터리 복사 & 덮어쓰기

○ 실습 성격
   : 데이터 송수신 관련 실습(Spring MVC 버전)
     JDBC 모듈 추가 활용
     SimpleDriverDataSource 클래스(객체) 활용

○ 기능 구현
   : 사용자로부터 이름, 전화번호 정보를 입력받아 데이터베이스에 저장
     저장된 이름, 전화번호 항목을 데이터베이스로부터 읽어 화면에 구성

○ 사전 작업
   - TBL_MEMBERLIST 테이블 생성
   - MEMBERLISTSEQ 시퀀스 생성
   - 샘플 데이터 입력 및 조회

○ 기본 레이아웃(페이지 화면 구성)
   이름 [        ]	→ <input type="text">
   전화 [        ]	→ <input type="text">
    < 회원 추가 >	→ <button type="button">

   전체 인원 수 : 2명	→ <p>...</p>
   ------------------	→ <table>...</table>
   번호  이름  전화
    1    노..  010...
    2    김..  010...
   ------------------


○ 물리적 파일 구성
   - Mvc03_scott.sql		→ 데이터베이스 관련 객체 구성 및 실습 데이터 준비

   - MemberDTO.java		→ 사용자 정의 자료형 클래스(DTO 활용)

   - IMemberDAO.java		→ 인터페이스
   - MemberDAO.java		→ 데이터베이스 액션 처리 클래스
                                   Connection 객체에 대한 의존성 주입
                                   (의존성 주입을 위한 준비 필요)

   - MemberListController.java	→ 사용자 정의 컨트롤러 클래스
                                   리스트 출력 액션
       			           DAO 객체에 대한 의존성 주입
       			           (의존성 주입을 위한 준비 필요)

   - MemberList.jsp		→ 리스트 출력용 뷰
				   회원 데이터 입력(추가) 폼 화면 구성

   - MemberInsertController.java→ 사용자 정의 컨트롤러 클래스
                                   회원 데이터 추가 액션
       			           DAO 객체에 대한 의존성 주입
       			           (의존성 주입을 위한 준비 필요)

   - web.xml			→ DispatcherServlet 객체 등록
				   URL 매핑 주소 등록

   - dispatcher-servlet.xml	→ 컨트롤러 객체 등록
				   URL 매핑 주소 등록
				   SimpleDriverDataSource 객체 등록
				   의존 객체 주입 설정
				   DAO 객체 등록

   - memberlist.do		→ 이클립스 실행 과정에서 요청을 위한 빈 파일

○ 사용자 최초 요청 주소
   http://localhost:3306/Mvc03/memberlist.do

 

# Mvc03_scott.sql

테이블 생성, 시퀀스 생성, 쿼리문 준비하는 과정! 코드 생략!

 

# MemberDTO.java

package com.test.mvc;

public class MemberDTO
{
	// 주요 속성 구성
	private int mid;
	private String name, telephone;
	
	// 사용자 정의 생성자 없음 → default 생성자 자동 삽입
	
	// getter/setter 구성
	
	public int getMid()
	{
		return mid;
	}
	public void setMid(int mid)
	{
		this.mid = mid;
	}
	public String getName()
	{
		return name;
	}
	public void setName(String name)
	{
		this.name = name;
	}
	public String getTelephone()
	{
		return telephone;
	}
	public void setTelephone(String telephone)
	{
		this.telephone = telephone;
	}
}

 

# IMemberDAO.java

인터페이스

package com.test.mvc;

import java.sql.SQLException;
import java.util.ArrayList;

public interface IMemberDAO
{
	// 회원 데이터 추가(등록) 메소드 선언
	public int add(MemberDTO member) throws SQLException;
		
	// 전체 인원 수 확인 메소드 선언
	public int count() throws SQLException;
	
	// 회원 리스트 확인 메소드 선언
	public ArrayList<MemberDTO> list() throws SQLException;
}

 

# MemberDAO.java

- 데이터베이스 액션 처리

- IMemberDAO 인터페이스 구현

package com.test.mvc;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import javax.sql.DataSource;

public class MemberDAO implements IMemberDAO
{
	// ※ Connection 객체에 대한 의존성 주입을 위한 준비
	//    ① 인터페이스 형태의 데이터타입을 취하는 속성 구성
	private DataSource dataSource;

	// 	  ② setter 구성
	public void setDataSource(DataSource dataSource)
	{
		this.dataSource = dataSource;
	}

	// ※ IMemberDAO 인터페이스의 메소드 오버라이딩
	
	@Override
	public int add(MemberDTO member) throws SQLException
	{
		int result = 0;
		
		Connection conn = dataSource.getConnection();
		
		String sql = "INSERT INTO TBL_MEMBERLIST(MID, NAME, TELEPHONE) VALUES(MEMBERLISTSEQ.NEXTVAL, ?, ?)";
		
		PreparedStatement pstmt = conn.prepareStatement(sql);
		
		pstmt.setString(1, member.getName());
		pstmt.setString(2, member.getTelephone());
		
		result = pstmt.executeUpdate();
		
		pstmt.close();
		
		return result;
	}

	@Override
	public int count() throws SQLException
	{
		int result = 0;
		
		Connection conn = dataSource.getConnection();
		
		String sql = "SELECT COUNT(*) AS COUNT FROM TBL_MEMBERLIST";
		
		PreparedStatement pstmt = conn.prepareStatement(sql);
		ResultSet rs = pstmt.executeQuery();
		
		while(rs.next())
		{
			result = rs.getInt("COUNT");
		}
		
		rs.close();
		pstmt.close();
		
		return result;
	}

	@Override
	public ArrayList<MemberDTO> list() throws SQLException
	{
		ArrayList<MemberDTO> result = new ArrayList<MemberDTO>();
		
		Connection conn = dataSource.getConnection();
		
		String sql = "SELECT MID, NAME, TELEPHONE FROM TBL_MEMBERLIST ORDER BY MID";
		
		PreparedStatement pstmt = conn.prepareStatement(sql);
		ResultSet rs = pstmt.executeQuery();
		
		while(rs.next())
		{
			MemberDTO dto = new MemberDTO();
			
			dto.setMid(rs.getInt("MID"));
			dto.setName(rs.getString("NAME"));
			dto.setTelephone(rs.getString("TELEPHONE"));
			
			result.add(dto);
		}
		rs.close();
		pstmt.close();
		
		return result;
	}
}

 

# MemberList.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>MemberList.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
	*{inline-height: 150%}
	#customers td {text-align: center;}
	#submitBtn
	{
		height: 150%;
		width: 250px;
		font-size: 18px;
		font-weight: bold;
		font-family: 맑은 고딕;
		color: #343;
		margin: 10px;
	}
	#err
	{
		color: red;
		font-size: small;
		display: none;
	}
	
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

	$(document).ready(function()
	{
		$("#submitBtn").click(function()
		{
			$("#err").css("display", "none");
			
			if($("#name").val()=="" || $("#telephone").val()=="")
			{
				$("#err").css("display", "inline");
				return;
			}
			
			$("#memberForm").submit();
		});
	});

</script>
</head>
<body>

<div>
	<h1>회원 관리</h1>
	<hr />
</div>

<div>
	<form action="memberinsert.do" method="post" id="memberForm">
	이름 <input type="text" name="name" id="name" class="control" required="required">
	<br>
	전화 <input type="text" name="telephone" id="telephone" class="control" required="required">
	<br>
	<button type="button" id="submitBtn">회원 추가</button>
	<span id="err">모든 항목을 입력해야 합니다.</span>
	
	</form>

	<p>전체 인원 수 : ${count }명</p>
	
	<table id="customers" style="width: 500px;" class="table">
		<tr>
			<th>번호</th><th>이름</th><th>전화번호</th>
		</tr>
		
		<c:forEach var="member" items="${memberList }">
			<tr>
				<td>${member.mid }</td>			
				<td>${member.name }</td>			
				<td>${member.telephone }</td>			
			</tr>
		</c:forEach>
	</table>

</div>

</body>
</html>

 

# MemberListController.java

- memberlist.do 가 요청되면 연결되는 컨트롤러

- 전체 회원 리스트, 인원 수 확인 액션 수행

package com.test.mvc;

import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

// ※ Spring 의 『Controller』 인터페이스를 구현하는 방법을 통해
//    사용자 정의 컨트롤러 클래스를 구성한다.
//    cf. Controller Annotation 활용
public class MemberListController implements Controller
{
	// 인터페이스 자료형을 취하는 속성 구성
	private IMemberDAO dao;


	// setter 메소드 구성
	public void setDao(IMemberDAO dao)
	{
		this.dao = dao;
	}


	@Override
	public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		// 액션 코드
		
		ModelAndView mav = new ModelAndView();
		
		int count = 0;
		ArrayList<MemberDTO> memberList = new ArrayList<MemberDTO>();
		
		try
		{
			count = dao.count();
			memberList = dao.list();
		}
		catch (Exception e) 
		{
			System.out.println(e.toString());
		}
		
		mav.setViewName("/WEB-INF/view/MemberList.jsp");
		mav.addObject("count", count);
		mav.addObject("memberList", memberList);
		
		return mav;
		
	}
}

 

# MemberInsertController.java

- memberinsert.do 가 요청되면 연결되는 컨트롤러

- 회원 추가 액션 수행

package com.test.mvc;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

// ※ Spring 의 『Controller』 인터페이스를 구현하는 방법을 통해
//    사용자 정의 컨트롤러 클래스를 구성한다.
//    cf. Controller Annotation 활용
public class MemberInsertController implements Controller
{
	private IMemberDAO dao;
	
	public void setDao(IMemberDAO dao)
	{
		this.dao = dao;
	}

	@Override
	public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		// 액션 코드
		ModelAndView mav = new ModelAndView();
		
		request.setCharacterEncoding("UTF-8");
		
		String name = request.getParameter("name");
		String tel = request.getParameter("telephone");
		
		try
		{
			MemberDTO member = new MemberDTO();
			
			member.setName(name);
			member.setTelephone(tel);
			
			dao.add(member);
		}
		catch (Exception e) 
		{
			System.out.println(e.toString());
		}
		
		mav.setViewName("redirect:memberlist.do");
		
		return mav;
	}
}

➰체크➰

1. redirect:memberlist.do

데이터가 입력되면 다시 리스트 페이지로 이동하는데, 

처음 요청하던 것 처럼 "/WEB-INF....." 이렇게 요청하면 안된다!

그러면 입력받은 데이터를 가지고 클라이언트를 만날 수 없다. 리다이렉트로 불러주자!!!!

 

# Web.xml

.do로 요청받은 url 이 있으면 dispatcher-servlet 너가 일하렴!

	<servlet>
		<servlet-name>dispatcher</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>dispatcher</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>

 

# dispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
				http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
				http://www.springframework.org/schema/context
				http://www.springframework.org/schema/context/spring-context-3.0.xsd">
	<context:component-scan base-package="org.springframework.samples.petclinic.web" />
	
	<!-- ※ 사용자 정의 Controller 객체 등록 및 URL 매핑 주소 등록 -->
	<!--    - 『name=""』 속성에 매핑 주소를 등록한다. -->
	<!--      이 과정에서 Front Controller 가 갖고있는 확장자의 형태로 구성한다. -->
	<!--    - 『class= ""』 속성은 --> 
	<!--      Controller 객체의 패키지 경로가 포함된 클래스 이름을 등록한다. -->
	
	<!-- DataSource → SimpleDriverDataSource -->
	<bean id="localDataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
		<property name="driverClass" value="oracle.jdbc.driver.OracleDriver"></property>
		<property name="url" value="jdbc:oracle:thin:@211.238.142.173:1521:xe"></property>
		<property name="username" value="scott"></property>
		<property name="password" value="tiger"></property>
	</bean>
	
	<!-- DataSource → SimpleDriverDataSource -->
	<bean id="remoteDataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
		<property name="driverClass" value="oracle.jdbc.driver.OracleDriver"></property>
		<property name="url" value="jdbc:oracle:thin:@211.238.142.174:1521:xe"></property>
		<property name="username" value="scott"></property>
		<property name="password" value="tiger"></property>
	</bean>
	
	<!-- MemberDAO -->
	<bean id="memberDAO" class="com.test.mvc.MemberDAO">
		<property name="dataSource">
			<ref bean="localDataSource"></ref>
			<!-- <ref bean="remoteDataSource"></ref> -->
		</property>
	</bean>
	
	<!-- MemberListController -->
	<bean name="/memberlist.do" class="com.test.mvc.MemberListController">
		<property name="dao">
			<ref bean="memberDAO"></ref>
		</property>
	</bean>
	
	<!-- MemberInsertController -->
	<bean name="/memberinsert.do" class="com.test.mvc.MemberInsertController">
		<property name="dao">
			<ref bean="memberDAO"></ref>
		</property>
	</bean>

</beans>