Spring:9 게시판 리스트생성, DB연결, 글등록폼 생성 -1

Spring:4 spring(maven project)를 Mybatis, Mysql과 연결하기(환경설정)-1

Spring:5 spring(maven project)기본 스타일 지정하기-2

Spring:6 로그인 회원가입폼 구현 하고 회원가입 DB연결-3

Spring:7 로그인(DB연동), 로그아웃, 회원정보수정(DB연동)-4

Spring:8 아이디 중복검사(ajax 이용)-5

1. DB 생성

1. board 테이블 모델링

2. 외래키 생성

member table의 userid를 연결시킨다. 

3. 상단 메뉴 탭 database > Forward Engineer > board 테이블 생성하기

member 테이블은 이미 있기 때문에 board만 생성한다.

2. VO, Controller, DAO, Service, ServiceImpl, Mapper.xml 만들기

각 패키지에 BulletinBrdVO, BulletinBrdController, BulletinBrdDAO 인터페이스, BulletinBrdService 인터페이스, BulletinServiceImpl, bltnBrdMapper.xml 파일 생성!

bltnBrdMapper.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.mycampus.myappy.dao.BulletinBrdDAO">
</mapper>

3.메뉴탭에서 게시판을 누르면 게시판 리스트를 보이게 하기 위해 bulletinBrdList.jsp 생성

- src > main > webabb > WEB-INF > views > board 폴더 생성 > bulletinBrdList.jsp 생성

4. view페이지 작성(header.jspf)

header.jspf

/myappy => <%=request.getContextPath( )%>

<li><a href="/myappy/board/bulletinBrdList">게시판</a></li>

5. controller로 bulletinBrdList 주소를 Mapping 한다. 

package com.mycampus.myappy.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController // @Controller + @ResponseBody
@RequestMapping("/board/*")
public class BulletinBrdController {

	// board/bulletinBrdList 맵핑주소
	@GetMapping("bulletinBrdList")
	public ModelAndView boardList() {
		ModelAndView mav = new ModelAndView();
		mav.setViewName("board/bulletinBrdList");
		// WEB-INF/views/board/bulletinBrdList.jsp -> servlet-context.xml에서 설정
		return mav;
	}
	
}

@Controller와는 다르게 @RestController는 리턴값에 자동으로 @ResponseBody가 붙게되어 별도 어노테이션을 명시해주지 않아도 HTTP 응답데이터(body)에 자바 객체가 매핑되어 전달 된다.

@Controller인 경우에 바디를 자바객체로 받기 위해서는 @ResponseBody 어노테이션을 반드시 명시해주어야한다. 

- 상단에 @RequestMapping이 하위 메서드들에게 맵핑할 때 /board/를 알아서 붙여준다.

6. bulletinBrdList.jsp 파일 폼 만들기 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link rel="stylesheet" href="/myappy/css/bulletinBrdListStyle.css" type="text/css"/>
<div class="container">
	<h1>게시판 목록</h1>
	<div><a href="<%=request.getContextPath()%>/board/bulletinBrdWrite">글쓰기</a></div>
	<br>
	<ul class="boardList">
		<li>번호</li>
		<li>제목</li>
		<li>작성자</li>
		<li>조회수</li>
		<li>등록일</li>

		<li>번호2</li>
		<li>제목asdkfdjsdkflajljkajegoegjaoeij</li>
		<li>red</li>
		<li>조회수</li>
		<li>등록일</li>

		<li>번호3</li>
		<li>제목ㅁㄴㅇㄹㅁㄴㅇㄹㄴㅇㄹㅇㄹㅁㅇㄴㅁ</li>
		<li>orange</li>
		<li>조회수</li>
		<li>등록일</li>
	</ul>
</div>

bulletinBrdListStyle.css

@charset "UTF-8";
/*리스트*/
.boardList>li{
	float:left;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ddd;
	width:10%;
}
.boardList>li:nth-child(5n+2){  /*제목*/
	width:60%;
	white-space:nowrap;       /*줄안바꿈*/
	overflow:hidden;         /*넘치는 제목내용은 지우기*/
	text-overflow:ellipsis;  /*넘칠경우 ...표시*/
}

7. 글쓰기를 누르면 글등록폼 보이게 한다.

7-1. 글등록폼(/board/bulletinBrdWrite.jsp 생성)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- checkEditor 사용하기 -->
<script src="//cdn.ckeditor.com/4.17.2/standard/ckeditor.js"></script>
<style>
	#subject{width:99%;}
	#boardFrm li{padding:10px;}
</style>
<script>
	$(function(){
		CKEDITOR.replace("content");
		
		$("#boardFrm").submit(function(){
			if($("#subject").val()==''){
				alert("글제목을 입력하세요");
				return false;
			}
			if(CKEDITOR.instances.content.getData()==''){
				alert("글내용을 입력하세요");
				return false;
			}
		});
	});
</script>
<div class="container">
	<h1>글 등록 폼</h1>
	<form method="post" action="/myappy/board/bulletinBrdWriteOk" id="boardFrm">
		<ul>
			<li><input type="text" name="subject" id="subject"></li>
			<li><textarea name="content" id="content"></textarea></li>
			<li><input type="submit" value="등록"/></li>
		</ul>
	</form>
</div>

 

7-2. Controller에서 주소를 Mapping한다.

DB처리를 하지 않기 떄문에 아직까지는 @Autowired가 필요하지 않다. 

package com.mycampus.myappy.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController // @Controller + @ResponseBody
@RequestMapping("/board/*")
public class BulletinBrdController {
	
	@GetMapping("bulletinBrdWrite")
	public ModelAndView boardWrite() {
		ModelAndView mav = new ModelAndView();
		mav.setViewName("board/bulletinBrdWrite");
		return mav;
	}
	
}