프로젝트

가전제품 대여 웹사이트 (세숫대여) - 자유게시판 글 작성 기능 구현

sejin2 2023. 9. 27. 23:21

게시판에서 게시글 작성버튼을 누르면 게시글을 작성할 수 있는 화면이 나타나고, 

저장을 누르면 DB에 게시글이 작성되는 기능을 구현하였다.

 

게시글 작성 화면 

- src/main/webapp/WEB-INF/views/freeboard에 freeboardwrite.jsp 생성

freeboardwrite.jsp 

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Argon Dashboard - Free Dashboard for Bootstrap 4 by
	Creative Tim</title>
<link href="/rental-project/resources/img/brand/favicon.png" rel="icon"
	type="image/png">
<link
	href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
	rel="stylesheet">
<link href="/rental-project/resources/js/plugins/nucleo/css/nucleo.css"
	rel="stylesheet" />
<link
	href="/rental-project/resources/js/plugins/@fortawesome/fontawesome-free/css/all.min.css"
	rel="stylesheet" />
<link href="/rental-project/resources/css/argon-dashboard.css?v=1.1.2"
	rel="stylesheet" />
</head>

<body class="">
	<jsp:include page="/WEB-INF/views/modules/navbar-vertical.jsp" />
	<div class="main-content">
		<jsp:include page="/WEB-INF/views/modules/navbar-top.jsp" />
		<jsp:include page="/WEB-INF/views/modules/navbar-content.jsp" />
		<div class="container-fluid mt--7">
			<div class="row">
				<div class="col-xl-12 mb-5 mb-xl-0">
					<div class="card bg-secondary shadow">
						<div class="card-header border-0">
							<div class="row align-items-center">
								<div class="col-8">
									<h3 class="mb-0">자유게시글쓰기</h3>
								</div>
							</div>
						</div>
						<div class="card-body">
							<form action="freeboardwrite" method="post"
								enctype="multipart/form-data">
								<div class="pl-lg-4">
									<div class="row">
										<div class="col-lg-12">
											<div class="form-group">
												<label class="form-control-label" for="input-freeBoardTitle">제목</label>
												<input type="text" id="input-freeBoardTitle"
													name="freeBoardTitle"
													class="form-control form-control-alternative"
													placeholder="제목을 입력하세요" />
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="form-group">
												<label class="form-control-label" for="input-memberNo">작성자</label>
												${ sessionScope.loginuser.memberId } <input type="hidden"
													id="input-memberNo" name="memberNo"
													class="form-control form-control-alternative"
													value="${ loginuser.memberId }">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="form-group">
												<label class="form-control-label"
													for="input-freeBoardAttach">첨부파일</label> <input type="file"
													id="attach" class="btn btn-sm btn-primary"
													class="form-control form-control-alternative" name="attach"
													style="width: 200px">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="form-group">
												<label class="form-control-label"
													for="input-freeBoardContent">글내용</label>
												<textarea name="freeBoardContent"
													id="input-freeBoardContent" style="resize: none;" rows="15"
													placeholder="내용을 입력하세요"
													class="form-control form-control-alternative"></textarea>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="text-right">
												<input type="submit" class="btn btn-primary" value="글쓰기">
												<input type="button" class="btn btn-primary" id="btnCancel"
													value="취소">
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Dto

FreeBoardDto.java

@Data
public class FreeBoardDto {  
	private int freeBoardNo;
	private int adminId;
	private String freeBoardTitle;
	private String freeBoardContent;
	private Date freeBoardDate;
	private int freeBoardViewCount;
	private boolean freeBoardDelete; 
}

Controller

- 게시글 작성화면을 불러오는 메서드 

- 게시글 등록하는 기능을 하는 메서드 

두 가지의 메서드를 작성 !!

 

FreeBoardController.java

// 자유게시글 작성 화면 불러오기
	@GetMapping(path= {"/freeboardwrite"})
	public String writeFreeBoardForm() { 
		return "freeboard/freeboardwrite";
	}
	
	// 자유게시글 등록하기
	@PostMapping(path= {"/freeboardwrite"})
		public String writeFreeBoard(FreeBoardDto freeboard, HttpServletRequest req) throws Exception { 
		freeBoardService.writeFreeBoard(freeboard);
		return "redirect:freeboardlist";
	}

Service

FreeBoardService.java

public interface FreeBoardService {
	void writeFreeBoard(FreeBoardDto freeboard) throws Exception;
}

FreeBoardServiceImpl.java

public class FreeBoardServiceImpl implements FreeBoardService{
	
	@Autowired
	private FreeBoardMapper freeboardMapper;
	
	@Autowired
	private FreeBoardReviewMapper freeBoardReviewMapper;
	
	@Override
	public void writeFreeBoard(FreeBoardDto freeBoard) throws Exception {
		freeboardMapper.writeFreeBoard(freeBoard);  // 자유게시판에 게시글 저장
		}
	}

Mapper

FreeBoaradMapper.java

@Mapper
public interface FreeBoardMapper { 
	@Insert("insert into FreeBoard (freeBoardTitle, freeBoardContent) "        // 자유게시판 게시글 작성 데이터 
			+ "values (#{ freeBoardTitle }, #{ freeBoardContent })")  
	@Options(useGeneratedKeys = true, keyProperty = "freeBoardNo")             // insert 후 생성된 자동증가 번호 DTO에 저장
	void writeFreeBoard(FreeBoardDto freeboard) throws Exception;

 

실행결과 

DB에도 데이터가 잘 들어오는 것을 확인할 수 있다.