스프링부트 게시판 만들기 제4강. 게시글 작성 페이지 boardarticleadd.jsp 만들기

스프링 부트 게시판 만들기

제4강 게시글 작성 페이지 boardarticleadd.jsp 만들기

Service 파일을 만든다고 했었는데~

흐름상 게시글 등록 페이지를 만들고 Service로 넘어가는 것이 맞을 듯 하여~ 급 전환

게시글 등록 페이지인 boardarticleadd.jsp 만들어보자!

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- jstl을 사용하기 위한 선언 -->

<!DOCTYPE html>
<html lang="ko">
<head>
	<!-- bootstrap을 css cdn -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
	
	<!-- jquery cdn -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div class="container">
		<!-- 나중에 파일 등록을 위해 enctype="multipart/form-data" 을 넣어둠 -->
		<form action="boardarticlein.sd" class="form-horizontal" id="frm" name="frm" method="post" enctype="multipart/form-data">
			
			<!-- class에 사용되는 form-group, row 등은 부트스트랩에서 사용되는 class -->
			<div class="form-group row">
				<label class="col-sm-2 col-xs-12 col-form-label" for="title">제목</label>
				<div class="col-sm-10 col-xs-12">
					<input class="form-control" id="title" name="title" placeholder="제목" type="text" value="" />
				</div>
			</div>
	
			<div class="form-group row">
				<label class="col-sm-2 col-xs-12 col-form-label" for="content">내용</label>
				<div class="col-sm-10 col-xs-12">
					<textarea rows="5" class="form-control" id="content" name="content" placeholder="내용"></textarea>
				</div>
			</div>
			
			<div class="form-group row">
				<label class="col-sm-2 col-xs-12 col-form-label" for="bfile">파일</label>
				<div class="col-sm-10 col-xs-12">
					<input class="form-control" id="bfile" name="bfile" type="file"/>
				</div>
			</div>
	
			<div class="form-group row">
				<div class="col-sm-12">
					<a class="btn btn-success" href="#" onclick="boardIn();return false;" role="button" title="저장"><i class="fa fa-save"></i> 저장</a>
					<a class="btn btn-primary" href="boardarticlelist.sd" role="button" title="리스트"><i class="fa fa-list-ul"></i> 리스트</a>
				</div>
			</div>
	
		</form>
	</div>

	<script type="text/javascript">
		function boardIn(){
			$('#frm').submit();
		}
	</script>

</body>
</html>

간단한 설명은 주석으로 설명했다.

3강에서 만든 BoardarticleCtrl의 내용을 살펴보자

@Controller
@RequestMapping("/boardarticle/*")
public class BoardarticleCtrl {

	//---* 등록
	@RequestMapping("boardarticleadd.sd")
	public String add( @RequestParam Map<String, Object> param, ModelMap model ){

		try{
//			boardarticleSvc.add( param, model );
		}catch( Exception e ){
			logger.error( e.toString(), e );
		}

		return "boardarticle/boardarticleadd";
	}

}

브라우저 주소창에 "http://localhost:port/boardarticle/boardarticleadd.sd"를 입력하면 위의 add() 메소드의 RequestMapping 조건에 해당하여 return 값으로 준 "boardarticle/boardarticleadd"로 이동된다.

실제 파일은 "/WEB-INF/views/boardarticle/boardarticleadd.jsp"이다.

다시 boardarticleadd.jsp을 살펴보자

<form action="boardarticlein.sd" class="form-horizontal" id="frm" name="frm" method="post" enctype="multipart/form-data">

<a class="btn btn-success" href="#" onclick="boardIn();return false;" role="button" title="저장"><i class="fa fa-save"></i> 저장</a>

<script type="text/javascript">
	function boardIn(){
		$('#frm').submit();
	}
</script>

저장 버튼을 누르면 자바스크립 함수 boardIn()이 실행된다. id값이 "frm"인 form을 submit 처리하는 함수다.

form의 action이 "boardarticlein.sd" 이기 때문에 submit이 실행되면,

다시 BoardarticleCtrl로 흐름이 넘어간다.

	//---* 저장
	@RequestMapping("boardarticlein.sd")
	public String in( HttpServletRequest request, @RequestParam Map<String, Object> param, ModelMap model ){

		try{
			boardarticleSvc.in( request, param, model );
		}catch( Exception e ){
			logger.error( e.toString(), e );
		}

		return "redirect:/boardarticle/boardarticlelist.sd";
	}

RequestMapping 조건에 해당하는 In() 메소드가 실행된다.

해당 메소드에서는 다시 Service 파일인 boardarticleSvc의 in() 메소드로 흐름을 넘긴다.

in() method의 처리가 끝난 후 return 값은 "redirect:/boardarticle/boardarticlelist.sd"다.

리다이렉트 시키는 이유는 새로고침을 통해서 글이 중복등록 되는 것을 방지하기 위해서다.

다른 메소드와 달리 in() Method에 HttpServletRequest request를 인자로 받은 이유는

회원가입이 없는 게시판에서 작성자의 ip를 등록하기 위해서다.

오늘은 boardarticleadd.jsp 파일을 만들고 컨트롤러(BoardarticleCtrl)의 흐름에 대해 살펴봤다.

나는 처음 회사 들어갔을 때 MVC 흐름도 잘 몰랐었다. 스프링도 쓰지 않을 때라 더 어려웠지만...

사실, 흐름만 알아도 코드를 수정해볼 수 있으니 실력이 빠르게 늘 수 있다.

다음은 Service 파일을 만들어 보는 시간이다~

HOME

Blog