TestController
package egovframework.example.test.web;
import java.io.File;
import java.util.HashMap;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FilenameUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import egovframework.example.test.domain.Search;
import egovframework.example.test.domain.TestVO;
import egovframework.example.test.service.TestService;
@Controller
public class TestController {
@Autowired
private TestService testServiceImpl;
@RequestMapping(value = "/testList.do")
public String testListView() {
return "test/testList";
}
@RequestMapping(value = "/getTestList.do", produces = "application/json")
@ResponseBody
public ResponseEntity<HashMap<String, Object>> testListDo(Search search) throws Exception {
HashMap<String, Object> result = new HashMap<>();
// 전체 게시글 개수를 얻어와 listCnt에 저장
int listCnt = testServiceImpl.getBoardListCnt(search);
// 검색
search.pageInfo(listCnt);
// 페이징
result.put("pagination", search);
// 게시글 화면 출력
result.put("list", testServiceImpl.selectTest(search));
return ResponseEntity.ok(result);
}
// 글 작성 버튼 구현
@RequestMapping(value = "/insertTest.do", produces = "application/json")
@ResponseBody
public ResponseEntity<TestVO> write(TestVO testVO) throws Exception {
String fileName = null;
MultipartFile uploadFile = testVO.getUploadFile();
if (uploadFile != null && !uploadFile.isEmpty()) {
String originalFileName = uploadFile.getOriginalFilename();
String ext = FilenameUtils.getExtension(originalFileName); // 확장자 구하기
UUID uuid = UUID.randomUUID(); // UUID 구하기
fileName = uuid + "." + ext;
uploadFile.transferTo(new File("C:\\upload\\" + fileName));
}
testVO.setFileName(fileName);
int testId = testServiceImpl.insertTest(testVO);
testVO.setTestId(testId);
testVO = testServiceImpl.selectDetail(testVO);
return ResponseEntity.ok(testVO);
}
// 글 작성 클릭시 글 작성 페이지로 이동
@RequestMapping(value = "/testRegister.do")
public String testRegister() {
return "test/testRegister";
}
// 제목 클릭 시 상세보기
@RequestMapping(value = "/testDetail.do")
public String viewForm(@ModelAttribute("testVO") TestVO testVO, Model model, HttpServletRequest request)
throws Exception {
int testId = Integer.parseInt(request.getParameter("testId"));
testVO.setTestId(testId);
TestVO resultVO = testServiceImpl.selectDetail(testVO);
model.addAttribute("result", resultVO);
return "test/testDetail";
}
// 수정하기
@RequestMapping(value = "/updateTest.do", produces = "application/json")
@ResponseBody
public ResponseEntity<TestVO> updateTest(TestVO testVO) throws Exception {
// 파일 업로드 처리
String fileName = null;
MultipartFile uploadFile = testVO.getUploadFile();
if (uploadFile != null && !uploadFile.isEmpty()) {
String originalFileName = uploadFile.getOriginalFilename();
String ext = FilenameUtils.getExtension(originalFileName); // 확장자 구하기
UUID uuid = UUID.randomUUID(); // UUID 구하기
fileName = uuid + "." + ext;
uploadFile.transferTo(new File("C:\\upload\\" + fileName));
}
testVO.setFileName(fileName);
System.out.println(testVO);
testServiceImpl.updateTest(testVO);
testVO = testServiceImpl.selectDetail(testVO);
return ResponseEntity.ok(testVO);
}
// 삭제하기
@RequestMapping(value = "/deleteTest.do", produces = "application/json")
@ResponseBody
public ResponseEntity<TestVO> deleteTest(TestVO testVO) throws Exception {
testVO = testServiceImpl.selectDetail(testVO);
testServiceImpl.deleteTest(testVO);
return ResponseEntity.ok(testVO);
}
}
testRegister
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<h1>글쓰기</h1>
</thead>
<tbody>
<!-- enctype="multipart/form-data" 이 부분을 사용해 줘야지만 파일을 전송할 수 있다. -->
<form id="form_test" action="insertTest.do" method="post"
encType="multipart/form-data">
<tr>
<th>제목:</th>
<td><input type="text" placeholder="제목을 입력하세요. "
name="testTitle" id="testTitle" class="form-control" /></td>
</tr>
<tr>
<th>내용:</th>
<td><textarea placeholder="내용을 입력하세요 . " id="testContent"
name="testContent" class="form-control" style="height: 200px;"></textarea></td>
</tr>
<tr>
<th>첨부파일:</th>
<td><input type="file" id="uploadFile" name="uploadFile"></td>
</tr>
<tr>
<td colspan="2">
<button id="btn_register" type="button" class="btn btn_register">등록</button>
<button id="btn_previous" type="button" class="btn btn_previous">이전</button>
</tr>
</form>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
//글쓰기
$(document).on('click', '#btn_register', function(e) {
//데이터를 담아내는 부분 상수 const로
//jquery val() : Form Element 의 값을 받아오는데 쓰인다. (주로 input 이나 textarea 정도?)- 주의해야할 점은 Form Element 이외의 값은 받아오질 못한다는 점.
//문자열 좌우에서 공백을 제거하는 함수가 trim() 함수 입니다.
const testTitle = $("#testTitle").val().trim();
const testContent = $("#testContent").val().trim();
const uploadFile = $("#uploadFile")[0].files[0];
//'==' 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교
//'==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> true). 변수를 비교하거나 어떤 비교를 위해 항상 '===' 연산자를 사용 할 것을 권장한다.
if (testTitle === '') {
alert('제목을 입력해주세요.');
return;
}
if (testContent === '') {
alert('내용을 입력해주세요.');
return;
}
//ajax 통신을 사용해 서버에 데이터를 전송하기 위해
//폼데이터 객체를 생성함
//jquery의 append를 통해서 프로퍼티에 바인딩이 가능하도록 세팅한다..append()선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
var formData = new FormData();
formData.append("testTitle", testTitle);
formData.append("testContent", testContent);
//만약 uploadFile이 undifined거나 null일 경우 폼데이터에 보내지 않도록 한다.
//이부분 체크하지 않을 경우 undifined가 데이터로 보내지기 때문에 서버에서 에러가 발생한다.
if (uploadFile)
formData.append("uploadFile", uploadFile);
//ajax로 파일전송 폼데이터를 보내기위해
//enctype, processData, contentType 이 세가지를 반드시 세팅해야한다.
$.ajax({
enctype : 'multipart/form-data',
processData : false,
contentType : false,
cache : false,
url : "./insertTest.do",
data : formData,
type : "POST",
success : function(res) {
alert('게시글 등록 완료');
location.href = "./testList.do";
}
});
});
//이전 클릭 시 testList로 이동
$("#btn_previous").click(function javascript_onclikc() {
$(location).attr('href', 'testList.do');
});
</script>
</html>
testDetail
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link href="/css/test/test.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<h1>글 상세보기 Detail</h1>
</thead>
<tbody>
<form action="updateTest.do" id="viewForm" method="post"
encType="multipart/form-data">
<tr>
<th>글번호:</th>
<td><input name="testId" id="testId" type="text" value="${result.testId}"
class="form-control" readonly /></td>
</tr>
<tr>
<th>제목:</th>
<td><input type="text" value="${result.testTitle}"
id="testTitle" class="form-control" /></td>
</tr>
<tr>
<th>내용:</th>
<td><textarea id="testContent" class="form-control"
style="height: 200px;">${result.testContent}</textarea></td>
</tr>
<tr>
<c:if test="${result.fileName ne null}">
<tr>
<td>다운로드</td>
<td><a href="fileDownload.do?fileName=${result.fileName}">
<input type="text" id="asd" value="${result.fileName}"
name="fileName" class="form-control" readonly />
</a>
<button id="asdasd" type="button" class="btn_previous">파일지우기</button>
</tr>
</c:if>
</tr>
<tr>
<th>첨부파일:</th>
<td><input type="file" id="uploadFile"></td>
</tr>
<tr>
<td colspan="2">
<button id="btn_previous" type="button" class="btn_previous">이전</button>
<button id="btn_delete" type="button" class="btn_previous">삭제</button>
<button id="btn_modify" type="button" class="btn_register">수정</button>
</tr>
</form>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
const testId = $("#testId").val();
$(document).on('click', '#btn_modify', function(e) {
if (confirm("정말 수정하시겠습니까 ?") == true) {
//데이터를 담아내는 부분
const testTitle = $("#testTitle").val().trim();
const testContent = $("#testContent").val().trim();
const uploadFile = $("#uploadFile")[0].files[0];
if(testTitle === ''){
alert('제목을 입력해주세요.');
return;
}
if(testContent === ''){
alert('내용을 입력해주세요.');
return;
}
//ajax 통신을 사용해 서버에 데이터를 전송하기 위해
//폼데이터 객체를 생성함
//append를 통해서 프로퍼티에 바인딩이 가능하도록 세팅한다.
var formData = new FormData();
formData.append("testId",testId);
formData.append("testTitle",testTitle);
formData.append("testContent",testContent);
//만약 uploadFile이 undifined거나 null일 경우 폼데이터에 보내지 않도록 한다.
//이부분 체크하지 않을 경우 undifined가 데이터로 보내지기 때문에 서버에서 에러가 발생한다.
if(uploadFile)
formData.append("uploadFile",uploadFile);
//ajax로 파일전송 폼데이터를 보내기위해
//enctype, processData, contentType 이 세가지를 반드시 세팅해야한다.
$.ajax({
enctype: 'multipart/form-data',
processData: false,
contentType: false,
cache: false,
url : "./updateTest.do",
data : formData,
type : "POST",
success : function(res){
alert('수정 완료');
location.href='./testList.do';
}
})
}
});
$(document).on('click', '#btn_delete', function(e) {
if (confirm("정말 삭제하시겠습니까 ?")) {
$.ajax({
url : "./deleteTest.do",
type : "POST",
data : {
testId : testId
},
success : function(res){
alert('삭제 완료');
location.href='./testList.do';
}
})
}
});
//이전 클릭 시 testList로 이동
$("#btn_previous").click(function javascript_onclikc() {
$(location).attr('href', 'testList.do');
});
$("#asdasd").click(function javascript_onclikc() {
$('#asd').val(null);
});
</script>
</html>
github.com/jodongyeon/boardTestMiso
jodongyeon/boardTestMiso
게시판 formsubmit방식과AJAX비동기방식. Contribute to jodongyeon/boardTestMiso development by creating an account on GitHub.
github.com
게시판연습 깃허브주소
'Spring Framework > 게시판 연습' 카테고리의 다른 글
| 6. ajax게시판 만들기(list,페이징,검색,selectbox)(JSON형태로 AJAX비동기 통신) (0) | 2020.10.19 |
|---|---|
| 5. 게시판 만들기(파일 업로드 다운로드) (1) | 2020.09.25 |
| 4. 게시판 만들기 (페이징, 검색, 페이지 목록 갯수 변경하기) (0) | 2020.09.25 |
| 3. 게시판 만들기 CRUD 게시물 작성 수정 삭제 (2) | 2020.09.24 |
| 2. 게시판 만들기 maria DB 연결 (0) | 2020.09.22 |