인프런 나프_2탄 26일차 : Spring WEB MVC_03버전_04~06 게시판 서비스 계층 구현, 게시판 웹 계층 구현, 등록 UI 구현

2021. 7. 5. 21:11

# Spring WEB MVC_03버전_04 게시판 서비스 계층 구현

## BoardService 인터페이스 생성

src/main/java > kr.inflean.service 우 클릭 > New > interface > BoardService 이름으로 생성

package kr.inflearn.service;

import java.util.List;

import kr.inflearn.model.BoardVO;

public interface BoardService {
	public List<BoardVO> getList();		// 게시물 리스트 가져오기
	public void register(BoardVO board);	// 게시물 등록
	public BoardVO get(int bno);		// 게시물 상세보기
	public int remove(int bno);			// 게시물 삭제
	public int modify(BoardVO board);	// 게시물 수정
}

## BoardServiceImpl 생성

구현 클래스 생성
src/main/java > kr.inflean.service 우 클릭 > New > class > BoardServiceImpl 이름으로 생성

package kr.inflearn.service;

import java.util.List;

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

import kr.inflearn.mapper.BoardMapper;
import kr.inflearn.model.BoardVO;

@Service
public class BoardServiceImpl implements BoardService {
	
	@Autowired
	private BoardMapper mapper;		// DI (의존성 주입)
	
	@Override
	public List<BoardVO> getList() {
		return mapper.getList();
	}

	@Override
	public void register(BoardVO board) {
		mapper.insert(board);
	}

	@Override
	public BoardVO get(int bno) {
		return mapper.read(bno);
	}

	@Override
	public int remove(int bno) {
		return mapper.delete(bno);
	}

	@Override
	public int modify(BoardVO board) {
		return mapper.update(board);
	}

	
}

## root-context

root-context에 아래 component-scan 추가.

<context:component-scan base-package="kr.inflearn.service" />

# Spring WEB MVC_03버전_05 게시판 웹 계층 구현

## BoardController

게시물 리스트 작업

package kr.inflearn.web;

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 kr.inflearn.model.BoardVO;
import kr.inflearn.service.BoardService;

@Controller
public class BoardController {

	@Autowired
	private BoardService service;
	
	@RequestMapping("/list.do")
	public String list(Model model) {
		List<BoardVO> list = service.getList();		
		model.addAttribute("list", list);
		return "boardList";
	}
	
}

## servlet-context 수정

설정되어 있는 prefix views > board로 변경

<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <beans:property name="prefix" value="/WEB-INF/board/" />
  <beans:property name="suffix" value=".jsp" />
</beans:bean>

## web.xml

요청 mapping 변경 기존 / > *.do 로 변경

<servlet-mapping>
  <servlet-name>appServlet</servlet-name>
  <url-pattern>*.do</url-pattern>
</servlet-mapping>

## boardList.jsp 생성

프로젝트 > src > main > webapp > WEB-INF > board 우 클릭 > New > JSP File > boardList.jsp 생성
부트스트랩 (https://www.w3schools.com/bootstrap/bootstrap_panels.asp) > BS Panels > Panel Heading 이용

<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>

부트스트랩 (https://www.w3schools.com/bootstrap/bootstrap_tables.asp) > BS Tables > Responsive Tables 이용

<div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>메인화면</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Spring WEB MVC 게시판 만들기</div>
    <div class="panel-body">
		<div class="table-responsive">          
			<table class="table table-hover">
				<thead>
					<tr>
						<th>게시물 번호</th>
						<th>제목</th>
						<th>조회수</th>
						<th>등록자</th>
						<th>등록일</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="vo" items="${list}">
						<tr>
							<td>${vo.idx}</td>
							<td>${vo.title}</td>
							<td>${vo.count}</td>
							<td>${vo.writer}</td>
							<td>${vo.indate}</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
    </div>
    <div class="panel-footer">메인화면 JSP</div>
  </div>
</div>

</body>
</html>

## 작업내역 검토

# Spring WEB MVC_03버전_06 게시판 웹 계층 구현 (등록 UI 작업)

## BoardVO

기존 indate 타입을 String > Date로 변경

package kr.inflearn.model;

import java.util.Date;

public class BoardVO {
	private int idx;
	private String title;
	private String contents;
	private int count;
	private String writer;
	private Date indate;
	
	public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getContents() {
		return contents;
	}
	public void setContents(String contents) {
		this.contents = contents;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	public String getWriter() {
		return writer;
	}
	public void setWriter(String writer) {
		this.writer = writer;
	}
	public Date getIndate() {
		return indate;
	}
	public void setIndate(Date indate) {
		this.indate = indate;
	}	
}

## 글쓰기 기능 작업

### boardList.jsp

fmt taglib 추가 후 fmt사용하여 표시되는 데이터 형식 변경

<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#regBtn").click(()=>{
			location.href="<c:url value='/register.do'/>";
		});
	});
</script>
</head>
<body>
 
<div class="container">
  <h2>메인화면</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Spring WEB MVC 게시판 만들기
    	<button id="regBtn" type="button" class="btn btn-xs pull-right btn-primary">게시물작성</button>
    </div>
    <div class="panel-body">
		<div class="table-responsive">          
			<table class="table table-hover">
				<thead>
					<tr>
						<th>게시물 번호</th>
						<th>제목</th>
						<th>조회수</th>
						<th>등록자</th>
						<th>등록일</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="vo" items="${list}">
						<tr>
							<td>${vo.idx}</td>
							<td>${vo.title}</td>
							<td>${vo.count}</td>
							<td>${vo.writer}</td>
							<td><fmt:formatDate pattern="yyyy-MM-dd" value="${vo.indate}"/></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
    </div>
    <div class="panel-footer">메인화면 JSP</div>
  </div>
</div>

</body>
</html>

### BoardController

@RequestMapping(value="/register.do", method=RequestMethod.GET)

-> value : 넘어오는 요청 경로
-> method : GET, POST 방식 설정

동일한 url이더라도 GET, POST 방식에 따른 처리 분류

@RequestMapping(value="/register.do", method=RequestMethod.GET)
public String registerGET() {
	return "register";			// 게시물 등록 화면.(register.jsp)
}

@RequestMapping(value="/register.do", method=RequestMethod.POST)
public String registerPOST() {			// 게시물 등록
	return "redirect:/list.do";		// 등록 후 게시물 보기로 이동.
}


=> @GetMapping("/register.do")
=> @PostMapping("/register.do")
등의 방법으로도 가능.

### register.jsp 생성

프로젝트 > src > main > webapp > WEB-INF > board 우 클릭 > New > JSP File > register.jsp 생성
부트스트랩 (https://www.w3schools.com/bootstrap/bootstrap_panels.asp) > BS Panels > Panel Heading 이용

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>

</body>
</html>

부트스트랩 (https://www.w3schools.com/bootstrap/bootstrap_forms.asp) > BS Forms > Bootstrap Verical Form 이용

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
	<h2>Board Register</h2>
	<div class="panel panel-default">
		<div class="panel-heading">Board Register</div>
		<div class="panel-body">
			<form action="<c:url value='/register.do'/>" method="post">
				<div class="form-group">
					<label>Title</label>
					<input type="text" class="form-control" name="title">
				</div>
				<div class="form-group">
					<label>Text area</label>
					<textarea rows="3" class="form-control" name="contents" ></textarea>
				</div>
				<div class="form-group">
					<label>Writer</label>
					<input type="text" class="form-control" name="writer">
				</div>
				<button type="submit" class="btn btn-default">등록</button>
				<button type="reset" class="btn btn-default">취소</button>
			</form>
		</div>
		<div class="panel-footer">게시물 쓰기 JSP</div>
	</div>
</div>

</body>
</html>

## 작업내역 확인

저작자표시

'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글

인프런 나프_2탄 27일차 : Spring WEB MVC_03버전_05~07 게시판 웹 계층 구현(등록 및 조회 / 수정 페이지 / 수정, 삭제 기능 / 조회수 카운트) (0)	2021.07.06
인프런 나프_2탄 25일차 : Spring WEB MVC_03버전_02~03 게시판 만들기, 게시판 영속계층 구현 (0)	2021.07.04
인프런 나프_2탄 24일차 : Spring WEB MVC_03버전_01 Tier 방식 (0)	2021.07.04
인프런 나프_2탄 23일차 : Spring WEB MVC_02버전_05~08 다중 파일 업로드, 다운로드 구현(UI, 서버) (0)	2021.07.04
인프런 나프_2탄 22일차 : Spring WEB MVC_02버전_04 Spring WEB_MVC와 Ajax 통신(@ResponseBody) (0)	2021.07.04

New 병아리 개발자

인프런 나프_2탄 26일차 : Spring WEB MVC_03버전_04~06 게시판 서비스 계층 구현, 게시판 웹 계층 구현, 등록 UI 구현

# Spring WEB MVC_03버전_04 게시판 서비스 계층 구현

## BoardService 인터페이스 생성

## BoardServiceImpl 생성

## root-context

# Spring WEB MVC_03버전_05 게시판 웹 계층 구현

## BoardController

## servlet-context 수정

## web.xml

## 작업내역 검토

# Spring WEB MVC_03버전_06 게시판 웹 계층 구현 (등록 UI 작업)

## BoardVO

## 글쓰기 기능 작업

### boardList.jsp

### BoardController

## 작업내역 확인

'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글

+ Recent posts

티스토리툴바