Spring 블로그 만들기 - 4.글쓰기 화면 만들기

개발/Spring 블로그 만들기

by 똘똘이박사 2019. 1. 21. 16:17

이 포스팅의 샘플 게시판 개발 환경은 MAC OS, STS, OpenJDK11 입니다.

게시판 글쓰기 화면을 만들기 위해 이번 포스팅에서 진행할 내용입니다.

Service 수정하기(Boardservice)
Controller 수정하기(BoardController)
글쓰기 화면 만들기(boardForm)
공통부분 나누기

블로그 만들기 - 4. 글쓰기 화면 만들기

Service 만들기(BoardService)

게시판의 리스트를 불러오는 것과 마찬가지로 중간 연결 역활을 합니다.

게시판 글쓰기폼 이동시에는 데이터베이스에 접속할 일이 없기 때문에

게시판에 작성한 글을 저장 할때 호출할 Service 만 작성합니다.

아직은 Service 단계에서 복잡한 기능을 수행하지 않습니다.

BoardService.java 추가 내용

public Map<String, Object> insertBoard(BoardVO boardVO) throws Exception;

BoardServiceImpl.java 추가 내용

@Override

public void insertBoard(BoardVO boardVO) throws Exception {

boardDAO.insertBoard(boardVO);

}

Controller 수정하기(BoardController)

글쓰기 화면 역시 Controller을 통해 불러 와야 합니다.

따라서 리스트 화면에서 [글쓰기] 버튼 클릭시 호출 한 주소 /board/boardForm 를 컨트롤러에 전달해야 합니다.

Controller는 그 주소 값을 받아 처리 할 수 있도록 아래와 같이 관련 내용을 추가해야 합니다.

@RequestMapping("/boardForm")

public String boardForm() {

return "board/boardForm";

}

그리고 글을 쓰기 위해선 또 하나의 메소드가 필요한데

글을 쓰고 저장할때 호출 할 부분 입니다.

그 부분은 아래와 같이 추가 합니다.

@RequestMapping(value = "/saveBoard", method = RequestMethod.POST)

public String saveBoard(@ModelAttribute("BoardVO") BoardVO boardVO

, RedirectAttributes rttr) throws Exception {

boardService.insertBoard(boardVO);

return "redirect:/board/getBoardList";

}

위 소스는 글을 작성한 후 글을 저장할때 호출될 컨트롤러입니다.

여기서 주위 깊게 볼 부분은 인자로 사용한 두 가지 파라미터 입니다.

@ModelAttribute("BoardVO") BoardVO boardVO 와 RedirectAttributes rttr 인데

첫번째 인자는 화면에서 넘겨주는 값을 BoardVO 와 매칭시켜 데이터를 받아 오게 됩니다.

(ModelAttribute에 대해서는 더 할 이야기가 있지만 여기서는 이 정도만 알고 넘어가도록 합니다.)

따라서 화면을 만들때 각 입력상자의 name 값은 BoardVO와 연결시킬 수 있도록 동일한 값으로 설정을 합니다.

두번째 인자 RedirectAttributes 는 글쓰기 이후 돌가야할 할 페이지를에 데이터를 전달하기 위한 인자 입니다.

이 샘플 게시판에서는 글을 작성 후 리스트로 돌아갈 예정입니다.

따라서 return에 "redirect:/board/getBoardList"; 라고 하여 돌아갈 곳이 게시판의 리스트 주소로 지정합니다.

RedirectAttributes 를 사용하는 또 다른 이유는 브라우저의 '뒤로가기' 버튼에 대한 대응책 입니다.

글을 쓰고 저장 버튼을 눌러 리스트 화면까지 보이는 단계를 생각해 보면

글쓰기화면 => 저장 단계(서버) => 리스트 화면 입니다.

따라서 '뒤로가기' 버튼을 클릭하면 다시 한 번 '저장하기' 단계로 가게 됩니다.

이 말은 일명 '게시물 도배'의 여지를 남겨 둘 수 있는 길이 됩니다.

이와 같은 일을 방지하기 위해 RedirectAttributes를 하게 되면 '저장단계' 를 지나 글쓰기 폼으로 돌아 가게 됩니다.

따라서 글을 자동으로 도배할 수 없도록 할 수 있습니다.

글쓰기 화면 만들기(boardForm)

우선 가장 간단한 형태로 화면을 만들어 봅니다.

우리는 아래와 같은 화면을 만들 것입니다.

아래 그림과 같이

WBN-INF/views/board 디렉토리 아래에 boardForm.jsp 파일을 만듭니다.

소스는 아래와 같습니다.

boardForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

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

<!DOCTYPE html>

<html>

<head>

<title>board</title>

$(document).on('click', '#btnSave', function(e){

e.preventDefault();

$("#form").submit();

});

$(document).on('click', '#btnList', function(e){

e.preventDefault();

location.href="${pageContext.request.contextPath}/board/getBoardList";

});

</script>

<style>

body {

padding-top: 70px;

padding-bottom: 30px;

}

</style>

</head>

<body>

<h2>board Form</h2>

</div>

</div>

</div>

</div>

</form>

<div >

</div>

</article>

</body>

</html>

[저장]과 [실행] 버튼은 모두 jQuery를 이용한 자바스크립트로 처리 하였습니다.

[저장] 버튼 부분을 잠시 살펴보면 아래와 같이 되어 있습니다.

$(document).on('click', '#btnSave', function(e){

$("#form").submit();

});

이 코드의 의미는 #btnSave 라는 id를 가지고 있는 버튼을 'click' 하게 되면 동작하는 스크립트 입니다.

$('#form').submit(); 는 form 이라는 id를 가진 객체(여기서는 form 자체가 됩니다.)을 submit(전송) 하는 내용입니다.

그리고 위 소스를 유심히 살펴 보면

이전 게시판 리스트 화면 소스와 겹치는 내용이 등장 합니다.

가장 대표적으로 부트스트랩과 jQuery의 CDN과 스타일시트 등이 똑같이 들어 갑니다.

이런 부분은 사이트 전체적으로 동일하게 적용 되기 때문에 수정 시 에도 모든 사이트에 동일하게 적용되어야 하는 부분입니다.

따라서 이렇게 공통으로 들어 가는 부분은 별도로 관리하는게 좋습니다.

위의 공통된 부분은 따로 모아 header.jsp 라는 페이지를 만들고

기존의 페이지에는 header.jsp 를 참조하도록 코드를 수정해 봅니다.

게시판만해도 4개 화면(리스트, 상세, 작성, 수정 등) 입니다.

그런데 이런 부분이 각 페이지 마다 존재 하게 된다면 한 개를 수정 할때 4번의 작업을 해야 합니다.

만약 프로그램의 갯수가 2개라면 8번의 작업을... 3개라면 12번의 작업을 해야 합니다.

따라서 저런 공통된 코드는 따로 모아 관리를 해야 수정 사항 발생 시 누락되는 부분 없이 한 번에 관리가 가능합니다.

공통부분 나누기

우선 아래 그림과 같이 두개의 폴더를 만듭니다.

src/main/webapp/resources : 공통 자원 관리 ( 이미지, 자바스크립트, CSS 등과 같은 것들)
src/main/webapp/WEB-INF/views/layout : header.jsp 같이 페이지에 여러 공통으로 사용될 페이지

header.jsp

이전 소스에서 JQuery 부분과 BootStrap의 CDN 부분만 뽑아 왔습니다.

그리고 새롭게 사용자가 만든 CSS 를 참조 할 수 있도록 링크를 추가 하였습니다.

common.css

body {

padding-top: 70px;

padding-bottom: 30px;

}

이 부분은 위의 소스에서 <style>..</style> 로 감싸 있던 부분입니다.

별도의 스타일시트 파일로 작성 할때 <style></style> 태그는 사용하지 않아도 됩니다.

index.jsp 와 boardForm.jsp 상단

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

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

<%@ include file="/WEB-INF/views/layout/header.jsp"%>

<!DOCTYPE html>

<html>

... 이하 생략

붉은 색 부분이 새롭게 추가된 부분 입니다.

CDN 부분과 <style></style> 부분이 사라지고 <%@ include file="~"%> 부분이 새롭게 추가된것을 확인 할 수 있습니다.

여기까지 하고 저장 한 뒤 다시 새로고침을 하여 글쓰기 페이지가 이전과 같이 정상적으로 로딩 되는지 확인 합니다.

정상적으로 화면이 열린다면 이제 글 저장을 테스트해 봅니다.

블로그 만들기 포스팅 리스트

※ 포스팅에 오타나 잘못된 부분, 추가적으로 더 알고 싶은 부분이 있으면 댓글 주세요~

저작자표시 비영리 변경금지

'개발 > Spring 블로그 만들기' 카테고리의 다른 글

Spring 블로그 만들기 - 6.수정 및 삭제 (27)	2019.02.20
Spring 블로그 만들기 - 5.상세조회 화면 만들기 (4)	2019.02.18
Spring 블로그 만들기 - 3. 게시판 리스트 화면 만들기 (6)	2019.01.18
Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.2 (31)	2019.01.18
Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.1 (17)	2019.01.15