2021.10.05 수업일지(Spring Framework 시작)

- MVC(model view controller)

- model ; vo, dao(data access CURD)

- view ; page 출력

- controller ;

- Spring Framework

- spring legacy(설정이 어려움), spring boot(설정이 쉬움)

https://nesoy.github.io/articles/2017-02/JUnit

JUnit이란?

nesoy.github.io

- Spring tool suite을 이용해 작업하겠다. spring legacy를 하겠다.

1. c\data\(new)spring 폴더 생성

2. workspace를 해당 폴더로 지정

3. 웹서버는 톰캣을 이용

4. 신규 프로젝트를 생성

5. [해당 프로젝트를 선택] - [마우스 오른쪽 버튼] - [Properties]-[Project Facets]를 JDK 1.7 이상의 버전을 선택한다.

6. pom.xml에 아래 내용을 수정 한다.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.example</groupId>
	<artifactId>controller</artifactId>
	<name>ex01</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<java-version>1.8</java-version> <<<----
		<org.springframework-version>4.1.7.RELEASE</org.springframework-version> <<<----
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
    .....
    		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId> <<<---
			<version>3.1.0</version> <<<---
			<scope>provided</scope>
		</dependency>
        .....
        		<!-- Test -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version> <<<---
			<scope>test</scope>
		</dependency>    
        ....

7. 웹 구동 확인

8. hello world 위치

9. pom.xml에 필요한 새로운 라이브러리를 추가하겠다.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.example</groupId>
	<artifactId>controller</artifactId>
	<name>ex01</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<java-version>1.8</java-version>
		<org.springframework-version>4.1.7.RELEASE
		</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>
		<!-- 새로운 라이브러리 추가 시작 -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.35</version>
		</dependency>
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.2.8</version>
		</dependency>
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.2.2</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.5.4</version>
		</dependency>
		<dependency>
			<groupId>org.bgee.log4jdbc-log4j2</groupId>
			<artifactId>log4jdbc-log4j2-jdbc4</artifactId>
			<version>1.16</version>
		</dependency>
		<!-- 새로운 라이브러리 추가 종료 -->
        .....

프로젝트를 새로고침하여 라이브러리 추가를 확인한다.

10. MyBatis의 상세로그를 위해 [src/main/resources]-[log4jdbc.log4j2.properties] 파일(file)을 생성한다.

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator

해당 파일에 추가

11. [src/main/java]-[com.exmaple.mapper] 패키지를 생성한 후 [MysqlMapper.java] interface 파일을 생성한다.

package com.example.mapper;

public interface MysqlMapper {
	public String getTime();
}

12. [src/main/resources]아래에 [mapper] 폴더를 작성한 후 [MysqlMapper.xml] 파일을 생성한다.

<?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="com.example.mapper.MysqlMapper">
	<select id="getTime" resultType="string">
		select now()
	</select>
</mapper>

13. [src]-[main]-[webapp]-[WEB-INF]-[spring]-[root-context.xml]에 아래 내용을 추가한다. - Beans Graph 탭이 사라진 경우 xml 파일을 선택하고 우 클릭 한 후 [Spring Tools]-[Add as Bean Configuration] 선택한다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">

	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
		<property name="url" value="jdbc:log4jdbc:mysql://127.0.0.1:3306/boarddb"></property>
		<property name="username" value="board"></property> // 서버 유저 네임
		<property name="password" value="pass"></property> // 서버 비밀번호
	</bean>
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<property name="mapperLocations" value="classpath:/mapper/**/*.xml" />
	</bean>
	<bean id="mapper" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="com.example.mapper" />
		<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
	</bean>
</beans>

14. Mysql on - db 및 유저 생성

# 2021.10.05
create user 'board'@'localhost' identified by 'pass';
create database boarddb;
grant all privileges on boarddb.* to 'board'@'localhost';

15. [src]-[main]-[webapp]-[WEB-INF]-[web.xml]에 한글처리를 위해 아래 내용을 추가한다.

.....
	<filter>
		<filter-name>encoding</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter
		</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encoding</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

</web-app>

16. 데이터베이스 연결 테스트를 위해 [src/test/java]-[MysqlTest.java] 파일을 생성한다.

package com.example.controller;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import com.example.mapper.MysqlMapper;

@RunWith(SpringJUnit4ClassRunner.class) // 먼저 SpringJUnit4ClassRunner.class
										// import한다.
@ContextConfiguration(locations={"file:src/main/webapp/WEB-INF/spring/**/*.xml"})
public class MysqlTest {
	// 자동으로 연결
	@Autowired
	private MysqlMapper mapper;

	// 연결해서 getTime을 테스트
	@Test
	public void getTime() {
		mapper.getTime();
	}
}

17. 해당 프로젝트를 복사하여 이름을 setup으로 변경하고 해당 프로젝트를 복사해서 이용하겠다.

- 기본적인 게시물 CRUD를 해보도록 하겠다.

- go to mysql

#테이블 생성
create table tbl_board(
	bno int not null auto_increment primary key,
    title nvarchar(200),
    content text,
    writer nvarchar(50),
    regdate datetime default now(),
    updatedate datetime default now()
);

#테이블 데이터 입력
insert into tbl_board(title,content,writer)
values('첫번째 게시물', '이것은 첫번째 게시물입니다.', 'user01');
insert into tbl_board(title,content,writer)
values('두번째 게시물', '이것은 두번째 게시물입니다.', 'user02');
insert into tbl_board(title,content,writer)
values('세번째 게시물', '이것은 세번째 게시물입니다.', 'user03');
insert into tbl_board(title,content,writer)
values('네번째 게시물', '이것은 네번째 게시물입니다.', 'user04');

#확인
select * from tbl_board;

- 테이블 관리를 위한 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="com.example.mapper.BoardMapper">
	<select id="list" resultType="string">
		select now()
	</select>
</mapper>

- 패키지를 새로 만들고 해당 패키지에 VO를 만들겠다.

package com.example.domain;

import java.util.Date;

public class BoardVO {
	private int bno;
	private String title;
	private String content;
	private String writer;
	private Date regdate;
	private Date updatedate;
    // get, set, tostring

- BoardMapper.xml에 아래와 같이 수정해준다.

<?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="com.example.mapper.BoardMapper">
	<select id="list" resultType="com.example.domain.BoardVO">
		select * from tbl_board order by bno desc
	</select>
</mapper>

- com.example.mapper에 BoardMapper interface를 생성한다.

package com.example.mapper;

import java.util.List;

import com.example.domain.BoardVO;

public interface BoardMapper {
	public List<BoardVO> list();
}

- MysqlText.java에 다음과 같이 추가해주고 콘솔에 찍히는지 확인해보자.

package com.example.controller;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import com.example.mapper.BoardMapper;
import com.example.mapper.MysqlMapper;

@RunWith(SpringJUnit4ClassRunner.class) // 먼저 SpringJUnit4ClassRunner.class
										// import한다.
@ContextConfiguration(locations={"file:src/main/webapp/WEB-INF/spring/**/*.xml"})
public class MysqlTest {
	// 자동으로 연결
	@Autowired
	private MysqlMapper mapper;
	
	// BoardMapper 인터페이스를 생성하고 아래와 같이 한다.
	@Autowired
	private BoardMapper bmapper;

	// 연결해서 getTime을 테스트
	@Test
	public void getTime() {
		mapper.getTime();
	}

	@Test
	public void getList(){
		bmapper.list();
	}
}

- 이제 insert 할 수 있도록 해보겠다.

- BoardMapper.xml

<?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="com.example.mapper.BoardMapper">
	<select id="list" resultType="com.example.domain.BoardVO">
		select * from tbl_board order by bno desc
	</select>
	<insert id="insert">
		insert into tbl_board(title,content,writer)
		values(#{title},#{content},#{writer})
	</insert>
</mapper>

- 실행을 위한 인터페이스 안에 넣어주겠다.

- BoardMapper.java

package com.example.mapper;

import java.util.List;

import com.example.domain.BoardVO;

public interface BoardMapper {
	public List<BoardVO> list();
	public void insert(BoardVO vo);
}

- 이제 Test 해보겠다.

- MysqlTest.java

.....
	@Test
	public void insert(){
		BoardVO vo = new BoardVO();
		vo.setTitle("다섯번째 게시물");
		vo.setContent("이것은 다섯번째 게시물입니다.");
		vo.setWriter("user05");
		bmapper.insert(vo);
	}
}

- 이제 update를 test 해보겠다.

- BoardMapper.xml

.....
	<update id="update">
		update tbl_board
		set title=#{title}, content=#{content}
		where bno=#{bno}
	</update>
</mapper>

- 메서드를 생성해주겠다.

- BoardMapper.java

package com.example.mapper;

import java.util.List;

import com.example.domain.BoardVO;

public interface BoardMapper {
	public List<BoardVO> list();
	public void insert(BoardVO vo);
	public void update(BoardVO vo);
}

- update를 테스트해보겠다.

- MysqlTest.java

.....
	@Test
	public void update(){
		BoardVO vo = new BoardVO();
		vo.setTitle("수정된 게시물");
		vo.setContent("이것은 수정된 게시물입니다.");
		vo.setBno(5);
		bmapper.update(vo);
	}
}

- 이제 특정 bno를 가지는 정보를 읽어오겠다.

- BoardMapper.xml

.....
	<select id="read" resultType="com.example.domain.BoardVO">
		select * from tbl_board where bno=#{bno}
	</select>
</mapper>

- BoardMapper.java

package com.example.mapper;

import java.util.List;

import com.example.domain.BoardVO;

public interface BoardMapper {
	public List<BoardVO> list();
	public void insert(BoardVO vo);
	public void update(BoardVO vo);
	public void read(int bno);
}

- MysqlTest.java

.....
	@Test
	public void read(){
		bmapper.read(3);
	}
		
}

- 이제 데이터를 삭제할 수 있도록 하겠다.

- BoardMapper.xml

.....
	<delete id="delete">
		delete from tbl_board where bno=#{bno}
	</delete>
</mapper>

- BoardMapper.java

package com.example.mapper;

import java.util.List;

import com.example.domain.BoardVO;

public interface BoardMapper {
	public List<BoardVO> list();
	public void insert(BoardVO vo);
	public void update(BoardVO vo);
	public void read(int bno);
	public void delete(int bno);
}

- MysqlTest.java

.....
	@Test
	public void delete(){
		bmapper.delete(3);
	}
		
}

- 새로운 컨트롤러를 만들겠다.

- com.exampler.controller\BoardController.java

package com.example.controller;

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

import com.example.mapper.BoardMapper;

@Controller
public class BoardController {
	@Autowired
	BoardMapper mapper;
	
	@RequestMapping("/list")
	public String list(Model model){
		model.addAttribute("array",mapper.list());
		return "list";
	}
}

- 위의 루트에 list.jsp를 생성하겠다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<title>게시판목록</title>
</head>
<body>
	<h1>[게시판 목록]</h1>
	<c:forEach items="${array}" var="vo">
		<div>${vo.bno}:${vo.title}</div>
	</c:forEach>
</body>
</html>

- 인코딩 문제로 list.jsp를 삭제하고 한글설정하는걸 다시 해보겠다.

- 인코딩 후 새로운 list.jsp를 만들겠다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!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=UTF-8">
<title>게시판 관리</title>
</head>
<body>
	<h1>[게시판 관리]</h1>
	<table border=1>
		<tr class="title">
			<td width=100>No.</td>
			<td width=300>제목</td>
			<td width=100>작성자</td>
			<td width=200>작성일</td>
		</tr>
		<!-- var ; 넣고자 하는 변수명 -->
		<c:forEach items="${array}" var="vo">
			<tr class="row">
				<td>${vo.bno}</td>
				<td>${vo.title}</td>
				<td>${vo.writer}</td>
				<td>${vo.regdate}</td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

- BoardController에서 특정 루트를 지정해주겠다.

package com.example.controller;

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

import com.example.mapper.BoardMapper;

@Controller
@RequestMapping("/board")
public class BoardController {
	@Autowired
	BoardMapper mapper;
	
	@RequestMapping("/list")
	public String list(Model model){
		model.addAttribute("array",mapper.list());
		return "list";
	}
}

- 새로운 CSS 파일을 아래의 루트에 만들도록 하겠다.

- (new)home.css

@CHARSET "UTF-8";
.title{
	background: gray;
	color: white;
	text-align: center;
}

- 날짜 format을 주도록 하겠다.

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%> <<<---
<!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=UTF-8">
<link rel="stylesheet" href="/resources/home.css"/>
<title>게시판 관리</title>
</head>
<body>
	<h1>[게시판 관리]</h1>
	<table border=1>
....
		<c:forEach items="${array}" var="vo">
			<tr class="row">
....
				<td><f:formatDate value="${vo.regdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

home.css

@CHARSET "UTF-8";
h1{
	text-align: center;
}
table{
	border-collapse: collapse;
	margin: 0px auto;
}
td{
	border: 1px solid gray;
}
.title {
	background: gray;
	color: white;
	text-align: center;
}

.row:hover {
	cursor: pointer;
	background: gray;
	color: white;
}

- 이제 테이블에 값을 입력(insert)하도록 하겠다. get을 위한 mapper를 만들도록 하겠다.

BoradController.java

.....
	@RequestMapping("/insert")
	public String getInsert(){
		return "insert";
	}
}

- views\insert.jsp를 만들도록 하겠다.

- insert.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>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="/resources/home.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게시글 작성</title>
</head>
<body>
	<h1>[게시글 작성]</h1>
	<form name="frm" method="post" action="insert">
		<table>
			<tr>
				<td><input type="text" name="title" size=75 placeholder="제목"></td>
			</tr>
			<tr>
				<td><textarea rows="10" cols="80" name="content"></textarea></td>
			</tr>
		</table>
		<div>
			<input type="submit" value="글등록" /> <input type="reset" value="등록취소" />
		</div>
	</form>
</body>
<script>
	$(frm).on("submit", function(e) {
		e.preventDefault();
		if ($(frm.title).val() == "") {
			alert("제목을 입력하세요.");
			return;
		}
		;
		if ($(frm.content).val() == "") {
			alert("내용을 입력하세요.");
			return;
		}
		;
		if (!confirm("등록하시겠습니까?"))
			return;
		frm.submit();
	});
</script>
</html>

BoardController.java

.....
	@RequestMapping(value="/insert", method=RequestMethod.POST)
	public void postInsert(BoardVO vo){
		System.out.println("insert post......"+vo.toString());
	}
}

- 이제 mapper 의 insert method를 이용하겠다.

BoardController.java

....
	@RequestMapping(value="/insert", method=RequestMethod.POST)
	public String postInsert(BoardVO vo){
		vo.setWriter("user03");
		mapper.insert(vo);
		System.out.println("insert post......"+vo.toString());
//		입력 후 list 페이지로 가겠다.
		return "redirect:/board/list";
	}
}

- insert.jsp

.....
<body>
	<h1>[게시글 작성]</h1>
	<form name="frm" method="post" action="insert">
		<table>
			<tr>
				<td><input type="text" name="title" size=75 placeholder="제목"></td>
			</tr>
			<tr>
				<td><textarea rows="10" cols="80" name="content"></textarea></td>
			</tr>
		</table>
		<div>
			<input type="submit" value="글등록" /> <input type="reset" value="등록취소" />
			<input type="button" value="목록이동" onClick="location.href='list'"/> <----
		</div>
	</form>
</body>
.....

- list.jsp

.....
<body>
	<h1>[게시판 관리]</h1>
	<table border=1>
		<a onClick="location.href='insert'">글쓰기</a>
		<tr class="title">
			<td width=100>No.</td>
			<td width=300>제목</td>
			<td width=100>작성자</td>
			<td width=200>작성일</td>
		</tr>
		<!-- var ; 넣고자 하는 변수명 -->
		<c:forEach items="${array}" var="vo">
			<tr class="row">
				<td>${vo.bno}</td>
				<td>${vo.title}</td>
				<td>${vo.writer}</td>
				<td><f:formatDate value="${vo.regdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
			</tr>
		</c:forEach>
	</table>
</body>
.....

- 이제 READ 작업을 해보도록 하겠다.

- boardmapper.java

package com.example.mapper;

import java.util.List;

import com.example.domain.BoardVO;

public interface BoardMapper {
	public List<BoardVO> list();
	public void insert(BoardVO vo);
	public void update(BoardVO vo);
	public BoardVO read(int bno);
	public void delete(int bno);
}

- boardcontroller.java

.....
	@RequestMapping("/read")
	public String read(int bno, Model model){
		model.addAttribute("vo",mapper.read(bno));
		return "read";
	}
}

- read.jsp - insert.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>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="/resources/home.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게시글 조회</title>
</head>
<body>
	<h1>[게시글 조회]</h1>
	<form name="frm" method="post" action="insert">
		<table>
			<tr>
				<td><input type="text" name="title" size=75 value="${vo.title }"></td>
			</tr>
			<tr>
				<td><textarea rows="10" cols="80" name="content">${vo.content }</textarea></td>
			</tr>
		</table>
		<div>
			<input type="submit" value="글수정" /> <input type="reset" value="수정취소" />
			<input type="button" value="목록이동" onClick="location.href='list'"/>
		</div>
	</form>
</body>
<script>
	$(frm).on("submit", function(e) {
		e.preventDefault();
		if ($(frm.title).val() == "") {
			alert("제목을 입력하세요.");
			return;
		}
		;
		if ($(frm.content).val() == "") {
			alert("내용을 입력하세요.");
			return;
		}
		;
		if (!confirm("등록하시겠습니까?"))
			return;
		frm.submit();
	});
</script>
</html>

- list.jsp

.....
		<c:forEach items="${array}" var="vo">
			<tr class="row" onClick="location.href='read?bno=${vo.bno }'"> <<<---
				<td>${vo.bno}</td>
				<td>${vo.title}</td>
				<td>${vo.writer}</td>
				<td><f:formatDate value="${vo.regdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
			</tr>
		</c:forEach>
.....

- 수정(update)을 위해서 다음과 같이 바꿔준다.

read.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>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="/resources/home.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게시글 조회</title>
</head>
<body>
	<h1>[게시글 조회]</h1>
	<form name="frm" method="post" action="update">
		<input type="hidden" value="${vo.bno}" name="bno"/>
		<table>
			<tr>
				<td><input type="text" name="title" size=75 value="${vo.title }"></td>
			</tr>
			<tr>
				<td><textarea rows="10" cols="80" name="content">${vo.content }</textarea></td>
			</tr>
		</table>
		<div>
			<input type="submit" value="글수정" />
			<input type="button" value="글삭제" id="btnDelete"/>			
			<input type="reset" value="수정취소" />
			<input type="button" value="목록이동" onClick="location.href='list'"/>
		</div>
	</form>
</body>
<script>
	$(frm).on("submit", function(e) {
		e.preventDefault();
		if ($(frm.title).val() == "") {
			alert("제목을 입력하세요.");
			return;
		}
		;
		if ($(frm.content).val() == "") {
			alert("내용을 입력하세요.");
			return;
		}
		;
		if (!confirm("수정하시겠습니까?"))
			return;
		frm.submit();
	});
</script>
</html>

- boardController.java

.....
	@RequestMapping(value="/update", method=RequestMethod.POST)
	public String postUpdate(BoardVO vo){
		vo.setWriter("user03");
		mapper.update(vo);
		System.out.println("update post......"+vo.toString());
//		입력 후 list 페이지로 가겠다.
		return "redirect:/board/list";
	}
}

- boardmapper.xml

<?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="com.example.mapper.BoardMapper">
	<select id="list" resultType="com.example.domain.BoardVO">
		select * from tbl_board order by bno desc
	</select>
	<insert id="insert">
		insert into tbl_board(title,content,writer)
		values(#{title},#{content},#{writer})
	</insert>
	<update id="update">
		update tbl_board
		set title=#{title}, content=#{content}, updatedate=now()
		where bno=#{bno}
	</update>
	
	<select id="read" resultType="com.example.domain.BoardVO">
		select * from tbl_board where bno=#{bno}
	</select>
	
	<delete id="delete">
		delete from tbl_board where bno=#{bno}
	</delete>
</mapper>

- 이제 삭제 작업을 해보도록 하겠다.

read.jsp

.....
		<div class="btn">
			<input type="submit" value="글수정" />
			<input type="button" value="글삭제" id="btnDelete"/>			
			<input type="reset" value="수정취소" />
			<input type="button" value="목록이동" onClick="location.href='list'"/>
		</div>
	</form>
</body>
<script>
	// 삭제 버튼을 클릭할 경우
	$("#btnDelete").on('click',function(){
		if(!confirm("삭제하시겠습니까?")) return;
		frm.action="delete";
		frm.submit();
	});
.....

- boardcontroller.java

.....
	@RequestMapping(value="/delete", method=RequestMethod.POST)
	public String delete(int bno){
		mapper.delete(bno);
		return "redirect:/board/list";
	}
}

- 입력한 데이터를 json 형식으로 출력할 수 있도록 하겠다.

- boardcontroller.java

package com.example.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.domain.BoardVO;
import com.example.mapper.BoardMapper;

@Controller
@RequestMapping("/board")
public class BoardController {
	@Autowired
	BoardMapper mapper;
	// json data
	@RequestMapping("/list.json")
	@ResponseBody
	public List<BoardVO> getListJSON(){
		return mapper.list();
	}
.....

- 위의 날짜 포맷을 VO에서 주도록 하겠다.

boardVO.java

package com.example.domain;

import java.util.Date;

import com.fasterxml.jackson.annotation.JsonFormat;

public class BoardVO {
	private int bno;
	private String title;
	private String content;
	private String writer;
	
	@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss", timezone="Asia/Seoul")
	private Date regdate;
	@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss", timezone="Asia/Seoul")
	private Date updatedate;
.....

- 이제 json 을 가지고 데이터를 출력하는 페이지를 만들겠다.

- boardcontroller.java

package com.example.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.domain.BoardVO;
import com.example.mapper.BoardMapper;

@Controller
@RequestMapping("/board")
public class BoardController {
	@Autowired
	BoardMapper mapper;
	
	@RequestMapping("/list.json")
	@ResponseBody
	public List<BoardVO> getListJSON(){
		return mapper.list();
	}
	
	@RequestMapping("/jlist")
	public String jlist(Model model){
//		ajax으로 데이터를 가지고 올거라 생략
//		model.addAttribute("array",mapper.list());
		return "jlist";
	}
    .....

- 뷰에 jlist.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=UTF-8">
<title>게시판 관리</title>
<link rel="stylesheet" href="/resources/home.css"/>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script> 
</head>
<body>
	<h1>[게시판 관리]</h1>
	<table id="tbl">
	</table>
	<script id="temp" type="text/x-handlebars-template">
		<tr class="title">
			<td width=100>No.</td>
			<td width=300>제목</td>
			<td width=100>작성자</td>
			<td width=200>작성일</td>
			<td width=200>수정일</td>
		</tr>
	{{#each .}}
		<tr class="row">
			<td>{{bno}}</td>
			<td>{{title}}</td>
			<td>{{writer}}</td>
			<td>{{regdate}}</td>
			<td>{{updatedate}}</td>
		</tr>
	{{/each}}
	</script>
</body>
<script>
	getList();
	function getList(){
		$.ajax({
			type:'get',
			url:'/board/list.json',
			dataType:'json',
			success: function(data){
				var temp = Handlebars.compile($('#temp').html());
				$("#tbl").html(temp(data));
			}
		})
	}
</script>
</html>

- 이제 검색을 할 수 있게 해보겠다.

jlist.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=UTF-8">
<title>게시판 관리</title>
<link rel="stylesheet" href="/resources/home.css"/>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script> 
</head>
<body>
	<h1>[게시판 관리]</h1>
	<select id="key">
		<option value="title">제목</option>
		<option value="content">내용</option>
		<option value="writer">작성자</option>
	</select>
	<input type="text" placeholder="검색어입력" id="word"/>
	<hr/>
	<table id="tbl">
	</table>
	<script id="temp" type="text/x-handlebars-template">
		<tr class="title">
			<td width=100>No.</td>
			<td width=300>제목</td>
			<td width=100>작성자</td>
			<td width=200>작성일</td>
			<td width=200>수정일</td>
		</tr>
	{{#each .}}
		<tr class="row">
			<td>{{bno}}</td>
			<td>{{title}}</td>
			<td>{{writer}}</td>
			<td>{{regdate}}</td>
			<td>{{updatedate}}</td>
		</tr>
	{{/each}}
	</script>
</body>
<script>
	getList();
	$("#word").on("keypress",function(e){
		if(e.keyCode==13){
			getList();
		}
	});
	
	function getList(){
		var key = $('#key').val();
		var word = $('#word').val();
		$.ajax({
			type:'get',
			url:'/board/list.json',
			dataType:'json',
			data:{"key":key, "word":word},
			success: function(data){
				var temp = Handlebars.compile($('#temp').html());
				$("#tbl").html(temp(data));
			}
		})
	}
</script>
</html>

- boardcontroller.java

package com.example.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.domain.BoardVO;
import com.example.mapper.BoardMapper;

@Controller
@RequestMapping("/board")
public class BoardController {
	@Autowired
	BoardMapper mapper;
	
	@RequestMapping("/list.json")
	@ResponseBody
	public List<BoardVO> getListJSON(String key, String word){
		System.out.println(key+"/"+word);
		return mapper.list();
	}
.....

- 새로운 mapper를 만들겠다.

boardmapper.java

package com.example.mapper;

import java.util.HashMap;
import java.util.List;

import com.example.domain.BoardVO;

public interface BoardMapper {
	public List<BoardVO> list();
	public void insert(BoardVO vo);
	public void update(BoardVO vo);
	public BoardVO read(int bno);
	public void delete(int bno);
	public List<BoardVO> jlist(HashMap<String, Object> map);
}

boardcontroller.java

값을 두개를 못받아서 hashmap에 담아서 넘기도록 하겠다.

package com.example.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.domain.BoardVO;
import com.example.mapper.BoardMapper;

@Controller
@RequestMapping("/board")
public class BoardController {
	@Autowired
	BoardMapper mapper;
	
	@RequestMapping("/list.json")
	@ResponseBody
	public List<BoardVO> getListJSON(String key, String word){
//		System.out.println(key+"/"+word);
		HashMap<String, Object> map = new HashMap<>(); <<<---
		map.put("key", key); <<<---
		map.put("word", word); <<<---		
		return mapper.jlist(map); <<<---
	}
.....

boardmapper.xml

.....
	<select id="jlist" resultType="com.example.domain.BoardVO">
		select * from tbl_board
		<if test="key=='title'">
			where title like concat('%',#{word},'%')
		</if>
		<if test="key=='content'">
			where content like concat('%',#{word},'%')
		</if>
		<if test="key=='writer'">
			where writer like concat('%',#{word},'%')
		</if>
		order by bno desc
	</select>
.....

- 이번에는 페이지 버튼을 만들어보도록 하겠다.

- 우선 데이터가 많이 필요하니 자가 복사하도록 하겠다.

- go to Mysql

insert into tbl_board(title,content,writer)
select title,content,writer from tbl_board;

select count(*) from tbl_board;

- jlist.jsp

.....
	<div class="btn">
		<button id="pre">이전</button>
		<span id="page"></span>
		<button id="next">이후</button>
	</div>
</body>
<script>
	var page = 1;
	getList();
	
	$("#word").on("keypress",function(e){
		if(e.keyCode==13){
			getList();
		}
	});

	$("#pre").on("click",function(){
		page--;
		getList();
	})
	
	$("#next").on("click",function(){
		page++;
		getList();
	})
	
	function getList(){
		var key = $('#key').val();
		var word = $('#word').val();
		$.ajax({
			type:'get',
			url:'/board/list.json',
			dataType:'json',
			data:{"key":key, "word":word, "page":page},
			success: function(data){
				var temp = Handlebars.compile($('#temp').html());
				$("#tbl").html(temp(data));
				$("#page").html(page);
			}
		})
	}
</script>
</html>

boardcontroller.java

package com.example.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.domain.BoardVO;
import com.example.mapper.BoardMapper;

@Controller
@RequestMapping("/board")
public class BoardController {
	@Autowired
	BoardMapper mapper;
	
	@RequestMapping("/list.json")
	@ResponseBody
	public List<BoardVO> getListJSON(String key, String word, int page){
		HashMap<String, Object> map = new HashMap<>();
		int start=(page-1)*10;
		System.out.println(start);
		map.put("key", key);
		map.put("word", word);
		map.put("start", start);
		return mapper.jlist(map);
	}
	 
.....

- boardmapper.xml

.....
	<select id="jlist" resultType="com.example.domain.BoardVO">
		select * from tbl_board
		<if test="key=='title'">
			where title like concat('%',#{word},'%')
		</if>
		<if test="key=='content'">
			where content like concat('%',#{word},'%')
		</if>
		<if test="key=='writer'">
			where writer like concat('%',#{word},'%')
		</if>
		order by bno desc
		limit #{start},10
		
	</select>
.....

저작자표시 (새창열림)

'ICIA 수업일지' 카테고리의 다른 글

2021.10.07 수업일지(Spring Framework 연습) (0)	2021.10.07
2021.10.06 수업일지(Spring Framework 이용 게시판 만들기) (0)	2021.10.06
2021.10.01 수업일지 (안드로이드 기초, MySQL, Web Server) (0)	2021.10.01
2021.09.30 수업일지(안드로이드 개발 기초, Firebase) (0)	2021.09.30
2021.09.29 수업일지(안드로이드 개발 기초, Kakao API, Google API) (0)	2021.09.29

나의 웹 공부 이야기

2021.10.05 수업일지(Spring Framework 시작)

- Spring Framework

- Spring tool suite을 이용해 작업하겠다. spring legacy를 하겠다.

- 기본적인 게시물 CRUD를 해보도록 하겠다.

- 이제 테이블에 값을 입력(insert)하도록 하겠다. get을 위한 mapper를 만들도록 하겠다.

- 이제 READ 작업을 해보도록 하겠다.

- 수정(update)을 위해서 다음과 같이 바꿔준다.

- 이제 삭제 작업을 해보도록 하겠다.

'ICIA 수업일지' 카테고리의 다른 글

티스토리툴바

2021.10.05 수업일지(Spring Framework 시작)

- Spring Framework

- Spring tool suite을 이용해 작업하겠다. spring legacy를 하겠다.

- 기본적인 게시물 CRUD를 해보도록 하겠다.

- 이제 테이블에 값을 입력(insert)하도록 하겠다. get을 위한 mapper를 만들도록 하겠다.

- 이제 READ 작업을 해보도록 하겠다.

- 수정(update)을 위해서 다음과 같이 바꿔준다.

- 이제 삭제 작업을 해보도록 하겠다.

'ICIA 수업일지' 카테고리의 다른 글

관련글

티스토리툴바