Day61_Eclipse STS로 MVC C(Insert) 프로젝트 만들기

다 배웠던 내용인데 한 달 넘게 프론트 위주로 작업을 하다보니 다 까먹었다.

 

 

프로젝트 생성

우선 프로젝트를 먼저 생성해줘야하는데,

Cmd + N을 눌러 Spring Legacy Project를 생성해준다.

 

프로젝트명을 입력하고 Spring MVC Project로 설정한 후

Next를 눌러준다.

 

여기서는 com.---.--- 형태로 이름을 설정해줘야한다.

나는 com.project.wave로 설정했다.

 

그럼 프로젝트 → src/main/java → com.multi.wave.review

의 형태로 폴더가 생성된다.

MVC 프로젝트에서는 이 부분이 백엔드 부분이다.

 

사진에서는 Controller, DAO, Service, VO 파일이 추가되어있는데

우선은 무시하고 넘어간다.

 

---

 

프로젝트 초기 세팅

 

프로젝트를 클릭하고 Opt + Enter 단축키를 누르면

Properties가 열린다.

Project Facets → Java 버전을 설치된 버전으로 수정해준다.
나는 1.6으로 되어있던 걸 1.8로 수정해줬다.

 

다음으로 우측 상단의 Runtimes을 눌러

서버를 연결해주는데, 나는 Tomcat 8.5 서버를 연결해줬다.

 

추가로 Java Build Path에 들어가
서버 연결이 제대로 되어있나 확인해보는 것도 좋다.

 

다음으로 폴더 가장 하단에 있는 pom.xml을 열어준다.

여기서 자바 버전과 스프링 프레임워크 버전을 변경해준다.

 

그리고 <dapendencies> 사이 마지막 부분에

아래 코드를 추가해준다.

<!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j -->
		<dependency>
  		  <groupId>com.mysql</groupId>
   		 <artifactId>mysql-connector-j</artifactId>
  		  <version>8.0.31</version>
		</dependency>

MySQL을 사용하기 위한 초기 세팅이다.

 

MyBatis를 사용하기 위해서는

똑같이 <dependencies> 태그 안에 아래 코드를 입력해준다.

<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.31</version>
        </dependency>

<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.0</version>
        </dependency>
        
<!-- https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp -->
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.4</version>
        </dependency>

<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.0.1.RELEASE</version>
        </dependency>

<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.2</version>
        </dependency>

 

다음으로 src → main → webapp → WEB-INF → spring → appServlet 에서

root-context.xml 파일을 열어준다.

 

여기서 <beans> 태그 사이 하단에 아래 코드를 추가해준다.

<!-- myBatis의 싱글톤 객체 생성 -->
	<bean id="my" class="org.mybatis.spring.SqlSessionTemplate">
   	 <constructor-arg ref="config"></constructor-arg>
	</bean>

	<!-- myBatis의 설정 객체 생성 -->
	<bean id="config" class="org.mybatis.spring.SqlSessionFactoryBean">
	    <property name="dataSource" ref="dbcp"></property>
	    <property name="configLocation" value="classpath:mybatis-config.xml"></property>
	</bean>

	<!-- dbcp의 싱글톤 객체 생성 -->
	<!-- db프로그램의 2단계까지 담당. driver설정, db연결 -->
	<bean id="dbcp" class="org.apache.commons.dbcp.BasicDataSource">
	    <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"></property>
	    <property name="url" value="jdbc:mysql://localhost:3306/shop?characterEncoding=UTF-8"></property>
	    <property name="username" value="root"></property>
	    <property name="password" value="1234"></property>
	</bean>

 

여기까지 초기 세팅이다.

 

---

 

UI 구상

우선 어떤 페이지를 만들 지 대충 UI를 구상해봤다.

 

 

Festival과 Show를 분류하여 각각의 리뷰를 볼 수 있게 디자인했다.

 

---

 

DB Schema 만들기

 

Review 페이지를 위한 스키마를 먼저 만들었다.

다른 DB 컬럼들과 어떻게 관계가 되는 지도 미리 구상했다.

 

DBeaver에 와서 새로운 review 테이블을 만들고

그 아래 컬럼들을 추가해준다.

 

예시로 데이터를 하나 입력해줬다.

 

---

 

MVC 패턴을 활용한 insert 만들기

 

파일들을 만들기 전에 전체적인 흐름을 먼저 보면

webapp → Controller → Service → DAO → MyBatis → Mapper → DB 연동 

흐름이다.

 

백엔드 부분을 작성할 수 있도록

Controller, DAO, Service, VO 클래스를 만들어준다.

 

com.multi.wave.review 를 클릭한 상태로 Cmd + N 단축키를 눌러

Class 파일을 만들어서 이름 설정을 해주면 된다.

 

---

 

이제 Class 파일 안에 코드를 입력해야하는데,

우선 데이터를 DB에 전달하는 가방 역할을 하는 VO 먼저 작성해준다.

package com.multi.wave.review;

public class ReviewVO {
	
	private int review_id;
	private String mem_id;
	private int fsv_id;
	private String show_id;
	private String review_title;
	private String review_content;
	private String review_image;
}

 

DB에서 설정한 데이터 타입에 유의하여 작성한다.

그리고 Getter&Setter와 toString() 을 자동으로 생성한다.

package com.multi.wave.review;

public class ReviewVO {
	
	private int review_id;
	private String mem_id;
	private int fsv_id;
	private String show_id;
	private String review_title;
	private String review_content;
	private String review_image;
	public int getReview_id() {
		return review_id;
	}
	public void setReview_id(int review_id) {
		this.review_id = review_id;
	}
	public String getMem_id() {
		return mem_id;
	}
	public void setMem_id(String mem_id) {
		this.mem_id = mem_id;
	}
	public int getFsv_id() {
		return fsv_id;
	}
	public void setFsv_id(int fsv_id) {
		this.fsv_id = fsv_id;
	}
	public String getShow_id() {
		return show_id;
	}
	public void setShow_id(String show_id) {
		this.show_id = show_id;
	}
	public String getReview_title() {
		return review_title;
	}
	public void setReview_title(String review_title) {
		this.review_title = review_title;
	}
	public String getReview_content() {
		return review_content;
	}
	public void setReview_content(String review_content) {
		this.review_content = review_content;
	}
	public String getReview_image() {
		return review_image;
	}
	public void setReview_image(String review_image) {
		this.review_image = review_image;
	}
	
	@Override
	public String toString() {
		return "ReviewVO [review_id=" + review_id + ", mem_id=" + mem_id + ", fsv_id=" + fsv_id + ", show_id=" + show_id
				+ ", review_title=" + review_title + ", review_content=" + review_content + ", review_image="
				+ review_image + "]";
	}
}

 

---

 

다음으로 데이터를 입력받을 review_insert.jsp 파일을 만들어준다.

jsp 파일은 프론트를 담당하는 src → main → webapp

아래에 review 폴더를 만든 후 추가해줬다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review Insert Page</title>
<!--     <link rel="stylesheet" href="header.css"> -->
<style>
	form {
		padding-top: 170px;
		padding-left: 30px;
	}
</style>
</head>
<body>
    <jsp:include page="../header.jsp" />
      <div class="main">
        <form action="insert">
        <%-- <% value = "${mem_id}" %> --%>
        	mem_id : <input type="text" name="mem_id" value="apple"> <br>
        	fsv_id : <input type="text" name="fsv_id" value="1786"> <br>
        	<!-- show_id : <input type="text" name="mem_id" value="apple"> <br> -->
        	review_title : <input type="text" name="review_title" value="good"> <br>
        	review_content : <input type="text" name="review_content" value="Gooooooood"> <br>
        	review_image : <input type="text" name="review_image" value="apple.jsp"> <br>
        	<button>Festival</button>
        	<button>Show</button>
        </form>
      </div>
      <div class="footer">
      	
      </div>
</body>
</html>

 

---

 

ReviewController.java 파일이다.

package com.multi.wave.review;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ReviewController {

	@Autowired
	ReviewService reviewService;
	
	@RequestMapping("review/insert")
	public void insert(ReviewVO reviewVO) {
		reviewService.insert(reviewVO);
	}
}

@Controller 어노테이션을 먼저 설정해주고,

@Autowired에 Service를 껴준다.

 

---

 

다음으로 ReviewService.java 파일이다.

package com.multi.wave.review;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ReviewService {
	
	@Autowired
	ReviewDAO reviewDAO;
	
	public void insert(ReviewVO reviewVO) {
		reviewDAO.insert(reviewVO);
	}
}

마찬가지로 @Service 어노테이션 해주고,

@Autowired에 DAO를 껴준다.

 

---

 

다음으로 ReviewDAO.java 파일이다.

package com.multi.wave.review;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class ReviewDAO {
	
	@Autowired
	SqlSessionTemplate my;
	
	public void insert(ReviewVO reviewVO) {
		my.insert("review.insert", reviewVO);
	}
}

여기도 똑같은데, 다른 점이 있다면

DAO는 처리를 혼자 다 하지 않고, MyBatis를 사용한다.

따라서 SqlSessionTemplate으로 마이바티스를 선언한다.

 

---

 

다음으로 reviewMapper.xml 파일이다.

위치는 src/main/resources → mapper 폴더 안에 만들어주면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="review">
	<insert id="insert" parameterType="reviewVO"
		useGeneratedKeys="true" keyProperty="review_id">
		insert into review
		values (null, #{mem_id}, #{fsv_id}, #{show_id}, #{review_title}, #{review_content}, #{review_image})
	</insert>

	<delete id="delete" parameterType="reviewVO">
		delete from review where review_id = #{review_id}
	</delete>

	<update id="update">
		update faq
		set faq_title=#{faq_title},
		faq_question=#{faq_question}, img=#{img},
		faq_create_date=DATE_FORMAT(NOW(), '%Y-%m-%d %H:%i:%s')
		where faq_id=#{faq_id}
	</update>

	<select id="one" parameterType="map" resultType="FaqVO">
		select * from faq
		where faq_id = #{faq_id} and faq_title = #{faq_title}
	</select>

	<select id="oneById" resultType="FaqVO">
		select * from faq where faq_id=#{faq_id}
	</select>

	<select id="all" resultType="FaqVO">
		select * from faq
	</select>
</mapper>

 

---

 

마지막으로 데이터를 입력했을 때

데이터가 정상적으로 DB에 전송됐다는 결과를 알려줄 페이지를 만든다.

 

앞서 나왔듯이 프론트를 담당하는

src → main → webapp 에 insert.jsp 파일을 만들어준다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body {
		background-color: lightblue;
	}
</style>
</head>
<body>
	Review가 등록되었습니다.
</body>
</html>

이렇게 뜬다.