[Spring] 프로젝트 커뮤니티,블로그 만들기(#4)-게시판 작성,수정,삭제(CRUD) 만들기
안녕하세요 무작정 일단 따라 해 보는 Spring 커뮤니티 만들기 4탄 시작합니다.
환경
Eclipse 2019-9 Jee
JDK 1.8_231
Apache Tomcat 8.5.47
MariaDB 10.4.10
MyBatis 3.2.2
+ JSTL 1.2
+ jackson 2.9.4오늘의 할 일
1.URL 8080,프로젝트 명 제거
2.JSTL,EL 설정
3.게시판 CRUD 기능 만들기
시작하기에 앞서 지금 상태에서 Run on Server를 하시면
http://localhost:8080/springEx01/ 이렇게 8080이랑 springEx01이라는 프로젝트명이 붙는걸 보시게 되는데요
이걸 안보이게 하려면 설정을 조금 해줘야합니다.
8080 포트와 프로젝트명 URL에서 없애기
이클립스 하단 Servers 탭 클릭 -> Tomcat v8.5 Server at localhost 더블 클릭 -> Overview 탭 클릭 -> HTTP/1.1 PortNumber 8080에서 80으로 변경
그리고 저장 후 바로 Modules 탭 클릭 -> 해당 프로젝트 클릭 후 Edit… 버튼 클릭 -> Path에 프로젝트명 지우고 "/" 만 남기고 저장 "/"는 남겨야 합니다.
짜잔! URL이 깔끔해진 모습
index.jsp에 a 태그 href도 <a href="/view/dashboard">대시보드 보러가기</a> 이렇게 변경해줍니다.
현재 인덱스 페이지와 대시보드 페이지만 존재하고 있는데요.
일단 대시보드 페이지에 게시판 리스트를 보여주고 작성,수정,삭제는 다른 페이지에서 진행하겠습니다.
로그인은 다음 5장에서 다룹니다.
먼저 JSP에서 Java 코드<%= %>를 쓴다면 가독성이 매우 떨어지므로 저희는 JSTL & EL ${} 이라는걸 사용하겠습니다.
새로운 라이브러리를 추가할 땐? 정답! pom.xml
pom.xml 디펜던시<dependency> 추가
<!-- jstl dependecy -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency><dependency> 추가 후
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 이 문구를 JSTL & EL 태그를 사용 할 때
JSP 파일 최상단에 넣어주면 되는데요. Prefix="c"말고도 여러 개가 있으므로
include 전용 JSP를 만들어줍니다.
views -> jstlHeader.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
이제 JSTL,EL 태그를 사용할 JSP 페이지 <!DOCTYPE html> 위에 넣어주시면 됩니다.
<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>
자 그럼 준비가 끝났으니 본격적으로 게시판 만들기 CRUD를 시작합니다.
먼저 CRUD 중 R(read)부터 만들겠습니다.
대시보드에 들어가면 제일 먼저 게시판 리스트가 보이도록 만들 예정입니다.
리스트를 보여주려면 먼저 DB에서 데이터를 Select 해와야겠죠
ViewController.java
@RequestMapping("view/dashboard")
public ModelAndView dashboard() {
List result = boardService.getBoardList();
ModelAndView mav = new ModelAndView();
mav.addObject("result",result);
return mav;
}BoardService.java
List getBoardList();BoardServiceImpl.java
public List<Board> getBoardList() {
return boardDAO.getBoardList(); }BoardDAO.java
public List<Board> getBoardList() {
return sqlSession.selectList("getBoardList"); }board-Mapper.xml
<select id="getBoardList" resultType="board">
SELECT * FROM board order BY id DESC;
</select>
원래 작성 순서는 Mapper -> DAO -> Service -> Controller 순이지만 일단 익숙지 않은 분들을 위해 Controller부터 작성하였습니다.
dashboard.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dashboard</title>
<style>
table {
width: 100%;
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
}
</style>
</head>
<body>
<p>dashboard</p>
<div>게시글 리스트</div>
<table>
<thead><tr>
<td>제목</td>
<td>조회수</td>
<td>좋아요</td>
<td>첨부파일</td>
<td>글 작성 날짜</td>
</tr></thead>
<c:forEach var="b" items="${result }">
<fmt:formatDate value="${b.create_time}" pattern="yyyy-MM-dd HH:MM:ss" var="dateFormat_cr"/>
<tr>
<td>${b.subject }</td>
<td>${b.views }</td>
<td>${b.likes }</td>
<td>${b.attachments }</td>
<td>${dateFormat_cr }</td>
</tr>
</c:forEach>
</table>
<div> <a href="/view/boardwrite">글 작성하기</a></div>
</body>
</html>
UI는 아직 허접하지만 일단 게시판 리스트가 잘 출력되는 모습입니다.
이제 글 작성하기 링크를 누르면 글을 작성할 수 있게 C(Create)를 만들어봅시다.
먼저 작성을 다 한 후 jQuery ajax를 이용한 POST 방식을 사용할 겁니다.
views -> view -> boardwrite.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>글 작성</title>
<script type="text/javascript">
function boardValidation(){
var subject = $("#subject").val();
var content = $("#content").val();
if(!subject){
alert("제목 입력은 필수입니다.");
$("#subject").focus();
return false;
}else if(!content){
alert("내용 입력은 필수 입니다.");
$("#content").focus();
return false;
}else {
boardWrite(subject,content);
}
}
function boardWrite(sub,con){
$.ajax({
url : "/jquery/boardwrite",
type:'POST',
data : {
subject : sub,
context : con
},
success:function(data){
if(data == 1){
alert("글 등록이 완료되었습니다.");
location.href="/view/dashboard";
}else {
alert("글 등록 실패");
}
},error:function(){
console.log("error");
}
})
}
</script>
</head>
<body>
<form>
<table>
<caption>게시판 글쓰기 </caption>
<tbody>
<tr>
<th>제목: </th>
<td><input type="text" placeholder="제목을 입력하세요. " id="subject"/></td>
</tr>
<tr>
<th>내용: </th>
<td><textarea cols="30" rows="10" placeholder="내용을 입력하세요. " id="content"></textarea></td>
</tr>
<!-- <tr>
<th>첨부파일: </th>
<td><input type="text" placeholder="파일을 선택하세요. " name="filename"/></td>
</tr> -->
<tr>
<td colspan="2">
<input type="button" value="등록" onclick="boardValidation()"/>
<input type="button" value="뒤로" onclick="javascript:location.href='dashboard'"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>jQuery 플러그인이 필요하겠죠 저희는 *CDN 방식으로 받겠습니다.
boardwrite.jsp <head></head>안에 넣어줍니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>*CDN :콘텐츠 전송 네트워크(Content delivery network)는 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다. 인터넷 서비스 제공자에 직접 연결되어 데이터를 전송하므로, 콘텐츠 병목을 피할 수 있는 장점이 있다
하지만 Spring 입장에선 boardwrite.jsp를 못 찾겠죠?
무조건 jsp를 view로 등록할 땐 Controller에서 받아줘야 합니다.
ViewController.java
@RequestMapping(value="view/boardwrite",method = RequestMethod.GET)
public ModelAndView boardwrite() {
ModelAndView mav = new ModelAndView();
return mav; }그리고 위에 boardWrite() 메서드를 보시면 URL를 /jquery/boardwrite로 보내고 있죠
저희는 Controller의 용도를 나눠서 가독성이 좋도록 할 겁니다.
ViewController.java : View를 보여주는(연결해주는) Controller
JqueryController.java : jquery + ajax를 이용한 메서드들
자 그럼 JqueryController.java를 만들어야겠죠
src/main/java -> controller -> JqueryController.java 생성
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.company01.springEx01.logic.Board;
import com.company01.springEx01.service.BoardService;
@Controller
@RequestMapping("jquery/*")
public class JqueryController {
@Autowired
BoardService boardService;
@RequestMapping(value="jquery/boardwrite",method = RequestMethod.POST)
@ResponseBody
public int boardwrite(Board board) {
int result = 0;
result = boardService.boardwrite(board);
return result;
}
}
@ResponseBody : json으로 응답해주는 어노테이션
여기서 보면 boardwrite 메서드의 리턴 타입이 int라고 돼있는데
어라? 저는 int로 리턴하면 String or Object로 리턴하라고 에러가 나던데요? 네 맞습니다.
원래 스프링은 Model 객체를 리턴해 "view"를 보여주려고 하는 성질이 존재하는데,
갑자기 int를 리턴해버리면 처음부터 형태가 맞지 않다며 예외를 뱉습니다.
그럼 아예 값을 리턴해주는 JSON 형태로 던져주면 어떨까요? 네 바로 그 작업을 하는 것입니다.
pom.xml
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.4</version>
</dependency>BoardService.java
int boardwrite(Board board);BoardServiceImpl.java
@Override
public int boardwrite(Board board) {
return boardDAO.boardwrite(board);}BoardDAO.java
public int boardwrite(Board board) {
return sqlSession.insert("boardwrite",board);
}board-Mapper.xml
<insert id="boardwrite">
insert into board (id,subject,context,attachments,likes,views,create_time,update_time)
values(#{id},#{subject},#{context},#{attachments},#{likes},#{views},now(),null);
</insert>만들었으니 한번 해볼까요?
대시보드에 있는 글 작성하기 버튼(링크)을 클릭합니다.
글 작성 UI
일단 첨부파일은 로직이 조금 필요하므로 나중에 하고 제목, 내용만 입력하도록 하였습니다.
글 작성 후 등록
대시보드
짠! 잘 들어왔죠 이제 저 글 제목을 클릭하면 내용을 볼 수 있고, 조회수가 1씩 증가하도록 해보겠습니다.
dashboard.jsp
제목 부분에 a 태그 링크 추가
<td><a href="/view/boardDetail?id=${b.id }">${b.subject }</a></td>/view/boardDetail 페이지가 없죠? 새로운 페이지 추가 Controller는 뭐였죠??
네 맞습니다!!
ViewController.java
@RequestMapping(value="view/boardDetail",method = RequestMethod.GET)
public ModelAndView boardDetail(int id) {
boardService.viewsUpdate(id);
Board result = boardService.getBoardDetail(id);
ModelAndView mav = new ModelAndView();
mav.addObject("result",result);
return mav;
}매개변수 int id : get으로 넘어오는 "id" 매개변수를 받는다.
viewUpdate : 조회수 추가 메서드
getBoardDetail : 특정 글 하나의 데이터를 조회하는 메서드
views -> view -> boardDetail.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 내용</title>
<style>
table {
width: 100%;
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
}
</style>
<script type="text/javascript">
function boardDelete(){
}
function boardUpdate(){
}
</script>
</head>
<body>
<form>
<table>
<caption>게시판 글 내용 </caption>
<tbody>
<tr>
<th>제목: </th>
<td>${result.subject}</td>
</tr>
<tr>
<th>내용: </th>
<td>${result.context}</td>
</tr>
<tr>
<th>조회수: </th>
<td>${result.views}</td>
</tr>
<tr>
<th>좋아요: </th>
<td>${result.likes}</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="수정" onclick="boardDelete()"/>
<input type="button" value="삭제" onclick="boardUpdate()"/>
<input type="button" value="목록보기" onclick="javascript:location.href='dashboard'"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
BoardService.java
Board getBoardDetail(int id);
void viewsUpdate(int id);BoardServiceImpl.java
@Override
public Board getBoardDetail(int id) {
return boardDAO.getBoardDetail(id);}
@Override
public void viewsUpdate(int id) {
boardDAO.viewUpdate(id);}BoardDAO.java
public Board getBoardDetail(int id) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("id",id);
return sqlSession.selectOne("getBoardDetail",map);
}
public void viewUpdate(int id) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("id",id);
sqlSession.update("viewUpdate", map);
}board-Mapper.xml
<select id="getBoardDetail" resultType="board">
SELECT * FROM board where id = #{id};
</select>
<!-- update -->
<update id="viewUpdate">
UPDATE board SET views = views+1 WHERE id = #{id}
</update>대시보드
제목에 클릭할 수 있는 링크가 생겼습니다.
글 내용(boardDetail)
내용 페이지에서 새로고침을 하게 되면 조회수가 1씩 증가하는 걸 볼 수 있습니다.
삭제와 수정은 아무나 하면 안 되기 때문에 다음 글인 로그인 구현하기를 하고 진행하도록 하겠습니다.
귀찮아서 그런 거 아닙니다.
그럼 다음은 회원가입 그리고 로그인 후 세션 저장까지 해보겠습니다.
최종 Project Explorer
'Spring > 커뮤니티(블로그) 프로젝트' 카테고리의 다른 글
| [Spring] 프로젝트 커뮤니티,블로그 만들기(#5)-회원가입,로그인,로그아웃 구현하기 (5) | 2019.12.08 |
|---|---|
| [Spring] 프로젝트 커뮤니티,블로그 만들기(#3)-DB 연결+MyBatis 설정하기 (1) | 2019.11.24 |
| [Spring] 프로젝트 커뮤니티,블로그 만들기(#2)-package 생성 및 설정 (Feat.Controller,Service,DAO) (4) | 2019.11.17 |
| [Spring] 프로젝트 커뮤니티,블로그 만들기(#1)-프로젝트 생성 및 톰캣 설정,인코딩 설정 (0) | 2019.11.17 |