Spring 홈페이지 - (9) 게시판 등록 페이지 작업

이번 시간은 게시판 등록 페이지를 만들어보겠습니다.

등록페이지의 특징은 컨트롤러를 Get방식하나, Post방식하나 해서 총 2개의 컨트롤러를 만들어야합니다.

get방식은 등록페이지를 보여주는 화면과 Post방식은 자료를 등록하기 위한 컨트롤러입니다.

작업순서는 아래의 순서로 진행하겠습니다.

Controller 생성
jsp 생성
service > serviceImpl > mapper > mapper.xml

먼저 리스트 페이지에 등록 버튼을 생성해줍니다.

list.jsp

 <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Position</th>
                                            <th>Office</th>
                                            <th>Age</th>
                                            <th>Start date</th>
                                            <th>Salary</th>
                                        </tr>
                                    </thead>
                                    <c:forEach var="list" items="${boardList}">
                                    	<tr>
                                    		<td><c:out value="${list.board_idx}" /></td>
                                    		<td><c:out value="${list.board_title}" /></td>
                                    		<td><c:out value="${list.board_content}" /></td>
                                    		<td><c:out value="${list.board_writer}" /></td>
                                    		<td><c:out value="${list.board_regdate}" /></td>
                                    		<td><c:out value="${list.board_updatedate}" /></td>
                                    	</tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                                <a href="/board/create" class="btn btn-primary" >등록</a>
                            </div>
                        </div>
                    </div>
                </div>

그리고 화면을 확인하고자 간단한 컨트롤러부터 생성합니다.

Controller

@RequestMapping(value = "/board/create", method = RequestMethod.GET)
	public String create(@ModelAttribute("searchVO") boardVO searchVO, Model model) {
		
		
		return "/board/create";
	}

JSP

그리고 create라는 jsp 파일를 생성한 다음, 등록 화면을 꾸며줍니다.

(jsp 생성하는건 지난 글에 다 정리하였기에 생략하겠습니다.)

디자인은 크게 신경쓰지 않겠습니다................

여기서 중요한 부분은 작성자나 제목, 내용 등의 name 값은 데이터베이스의 각각의 컬럼값을 넣어야 값이 들어갑니다!

<%@ 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/fmt" prefix="fmt"%>


<%@include file="../includes/header.jsp"%>

<div class="row" style="margin-bottom:20px; margin-left:1px;">
<div class="col-lg-12">
<h1 class="page-header">등록 페이지</h1>
</div>
</div>

<div class="panel" style="margin-left:1px;">
<div id="contAreaBox">
<div class="panel">
<div class="panel-body">
<form role="form" action="/board/create_action" method="post">
<div class="table-responsive" style="text-align:center;">
	<table id="datatable-scroller"
		class="table table-bordered tbl_Form">
		<caption></caption>
		<colgroup>
			<col width="250px" />
			<col />
		</colgroup>
		<tbody>
			<tr>
				<th class="active" >작성자</th>
				<td class="form-inline"><input type="text" id="board_writer"
					name="board_writer" class="form-control" style="width: 200px" />
				</td>
			</tr>
			<tr>
				<th class="active">제목</th>
				<td class="form-inline"><input type="text" id="board_title"
					name="board_title" class="form-control" style="width: 840px" />
				</td>
			</tr>
			<tr>
				<th class="active" >내용</th>
				<td class="form-inline"><textarea 
						id="board_content" name="board_content" cols="100" rows="10"
						class="form-control"></textarea></td>
			</tr>
		</tbody>
	</table>
</div>
<div style="margin-left:1px;">
	<button type="submit" class="btn btn-primary">등록</button>
	<a href="/board/list" class="btn btn-danger">취소</a>
</div>
</form>
</div>
</div>
</div>
</div>

<%@include file="../includes/footer.jsp"%>

이젠 리스트에 대해 코드를 작성해보겠습니다.

Controller > service > serviceimpl > mapper > xml 순으로 작성하겠습니다.

BoardController.java

등록화면에는 나타낼 데이터가 없기 때문에 기존 GET으로 만든 컨트롤러를 사용하면 됩니다.

다만, 등록 부분을 처리하도록 POST방식의 메서드가 하나 더 필요합니다.

이름은 create_action으로 하죠!

새롭게 등록된 게시물의 번호를 전달하기 위해 redirectattributes를 사용하며 리턴할때에는

redirect 를 사용하면 됩니다.

여기서 특이한점은 자바에서 가지고 있는 데이터 객체를 사용한다는 점입니다.

등록일을 적용해야하기 때문이죠!

먼저 format1을 만들어서 원하는 데이터 형태를 만든다음

데이터 객체를 불러서

포맷에 넣어서 변수 time1에 넣어줍니다.

최종적으로 searchVO 안에 board_regdate에 time1을 넣어줘서 insert되도록 설정합니다.

@RequestMapping(value = "/board/create_action", method = RequestMethod.POST)
public String create_action(@ModelAttribute("searchVO") boardVO searchVO, RedirectAttributes redirect) {
	
	SimpleDateFormat format1 = new SimpleDateFormat ("yyyy-MM-dd");
			
	Date time = new Date();
			
	String time1 = format1.format(time);
	searchVO.setBoard_regdate(time1);
	
	boardService.insertBoard(searchVO);
	
	redirect.addFlashAttribute("redirect", searchVO.getBoard_idx());
	
	return "redirect:/board/list";
}

BoardService.java

서비스 인터페이스를 만들어줍니다.

void insertBoard(boardVO searchVO);

BoardServiceimpl.java

매퍼로 보내기 위한 작업을해줍니다.

여기서 등록이나 수정/ 삭제 등은 return을 하지 않기 때문에 return값을 선언하지 않습니다.

@Override
	public void insertBoard(boardVO searchVO) {
		mapper.insertBoard(searchVO);
	}}

BoardMapper.java

public void insertBoard(boardVO searchVO);

BoardMapper.xml

xml에서는 등록을 위한 insert 작업을 해줍니다.

<insert id="insertBoard">
	insert into tbl_board
	(
	board_title
	,board_content
	,board_writer
	,board_regdate
	)
	values
	(
	#{board_title}
	,#{board_content}
	,#{board_writer}
	,#{board_regdate}
	)
</insert>

이젠 한번 테스트를 해보죠!!

글을 작성합니다!

등록을 누르면 정상적으로 화면에 나타나는 것을 알 수 있습니다.

디비에서도 정상적으로 나오네요

2021년 2월 코드 추가

BoardController.java

등록버튼을 눌렀을때와 등록을 완료했을때 알림창이 나오도록 하는 코드를 추가하겠습니다.

우선 create컨트롤러에서 기존소스에 예외처리를 위해 try / catch를 선언하여 코드를 안에 넣어줍니다.

그리고 redirect에 성공과 오류 시, 메세지가 나올 수 있도록 처리해줍니다.

@RequestMapping(value = "/board/create_action", method = RequestMethod.POST)
public String create_action(@ModelAttribute("searchVO") boardVO searchVO, HttpServletRequest request, RedirectAttributes redirect){
	
	try {
		
		SimpleDateFormat format1 = new SimpleDateFormat ("yyyy-MM-dd");
		Date time = new Date();
		String time1 = format1.format(time);
		searchVO.setBoard_regdate(time1);
		
		boardService.insertBoard(searchVO);
		
		redirect.addFlashAttribute("redirect", searchVO.getBoard_idx());
		redirect.addFlashAttribute("msg", "등록이 완료되었습니다.");
		
	} catch (Exception e) {
		
		redirect.addFlashAttribute("msg", "오류가 발생되었습니다.");
		
	}
	
	return "redirect:/board/list";
}

그리고 list 컨트롤러에서 request를 통해 받은 다음 model에 넣는 코드를 추가합니다.

@RequestMapping(value = "/board/list", method = RequestMethod.GET)
	public String list(@ModelAttribute("searchVO") boardVO searchVO, HttpServletRequest request, Model model) {
		
		Map<String, ?> inputFlashMap = RequestContextUtils.getInputFlashMap(request);
	    if(null != inputFlashMap) {
	    	
	    	model.addAttribute("msg",(String) inputFlashMap.get("msg"));
	    	
	    }
		
		List<boardVO> boardList = boardService.getList(searchVO);
		
		model.addAttribute("boardList",boardList);
		
		return "/board/list";
	}

create.jsp

create.jsp로 와서 해더 인크루드 상단에 스크립트를 넣어줍니다.

폼안에 onsubmit 함수를 선언하고 스크립트에서 confirm을 통해 등록여부를 묻는 창을 추가합니다.

여기서 유효성 검사도 추가하여 빈칸일 경우 알림창을 뛰어주도록 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<<script type="text/javascript">

function _onSubmit(){

if($("#board_writer").val() == ""){
  	alert("작성자를 입력해주세요");
	$("#board_writer").focus();
	return false;
  }

if($("#board_title").val() == ""){
  	alert("제목을 입력해주세요");
	$("#board_title").focus();
	return false;
  }

if($("#board_content").val() == ""){
  	alert("내용을 입력해주세요");
	$("#board_content").focus();
	return false;
  }

if(!confirm("등록하시겠습니까?")){
return false;
}
}

</script>




<%@include file="../includes/header.jsp"%>

<div class="row" style="margin-bottom:20px; margin-left:1px;">
<div class="col-lg-12">
<h1 class="page-header">등록 페이지</h1>
</div>
</div>

<div class="panel" style="margin-left:1px;">
<div id="contAreaBox">
<div class="panel">
	<div class="panel-body">
		<form role="form" action="/board/create_action" method="post" onsubmit="return _onSubmit();">

list.jsp

list.jsp로 와서 해더 인크루드 상단에 스크립트를 넣어줍니다.

메세지가 빈칸이 아닐경우 alert를 통해 메세지를 출력해줍니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<<script type="text/javascript">

$(document).ready(function() {
	
	var msg = "${msg}";
	
	if(msg != ""){
		alert(msg);	
	}
	
});

</script>

정상적으로 알림창이 뜨는것을 확인할 수 있습니다.

항목을 클릭하시면 해당 페이지로 이동합니다.
Spring 웹 홈페이지 개발 과정 리스트	(1) 자바설치 및 환경변수 설정
	(2) 이클립스 및 스프링 설치
	(3) 톰캣설치 방법
	(4) 이클립스 자바 환경설정 및 인코딩 설정방법
	(5) 데이터베이스(Mysql) 설치
	(6) 프로젝트 환경설정
	(7) 홈페이지 디자인 적용
	(8) 게시판 목록 페이지 작업
	(9) 게시판 등록 페이지 작업
	(10) 게시판 상세보기 페이지 작업
	(11) 게시판 수정/삭제 페이지 작업
	(12) 게시판 검색 페이지 작업
	(13) 게시판 페이징 작업
	(14) 게시판 페이징 쿼리스트링 작업
	(15) 회원가입 작업 (feat.아이디 중복체크/비밀번호 암호화)
	(16) 로그인/로그아웃 작업 (feat.아이디 기억하기)
	(17) 아이디&비밀번호 찾기
	(18) 마이페이지 정보&비밀번호 수정

저작자표시

'Website Production' 카테고리의 다른 글

pring 홈페이지 - (11) 게시판 수정/삭제 페이지 작업 (0)	2021.02.01
Spring 홈페이지 - (10) 게시판 상세보기 페이지 작업 (0)	2021.01.31
Spring 홈페이지 - (8) 게시판 목록 페이지 작업 (0)	2021.01.16
Spring 홈페이지 - (7) 게시판 디자인 적용 (1)	2021.01.10
Spring 홈페이지 - (6) 프로젝트 환경설정 (0)	2021.01.10

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Life-Journey

Spring 홈페이지 - (9) 게시판 등록 페이지 작업

'Website Production' 카테고리의 다른 글

댓글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

Spring 홈페이지 - (9) 게시판 등록 페이지 작업

'Website Production' 카테고리의 다른 글

관련글

댓글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역