- url 조건
- MySQL 테이블
- DTO
- 시작페이지 Index
header - nav - section - footer로 나눴고 nav에는 글작성 , 글목록으로 이동할 수 있게 링크가 걸려있음
<nav>
<ul>
<li style="display: inline-block;list-style-type: none">
<a href="/board/save" style="text-decoration: none">글작성</a></li>
<li style="display: inline-block;list-style-type: none">
<a href="/board/" style="text-decoration: none">글목록</a></li>
</ul>
</nav>
- 글 작성 페이지
<section>
<div>
<h2 style="text-align: center;">나는야 세이브</h2>
<form action="/board/save" method="post">
<table>
<tr>
<th><label for="boardWriter">작성자:</label>
<input type="text" id="boardWriter" name="boardWriter"></th>
<th><label for="boardPass">글비밀번호:</label>
<input type="text" id="boardPass" name="boardPass"></th>
<th><label for="boardTitle">글제목</label>
<input type="text" id="boardTitle" name="boardTitle"></th>
<tr>
<th colspan="6"><label for="boardContents">내용</label></th>
</tr>
<tr>
<td colspan="6"><textarea id="boardContents" name="boardContents" COLS="104" ROWS="40"></textarea>
</td>
</tr>
<tr>
<th colspan="6">
<input type="submit" style="display: inline" value="등록">
<input type="button" style="display: inline" value="취소" onclick="goindex()">
</th>
</tr>
</table>
</form>
</div>
</section>내용을 작성할 공간은 textarea로 만들어 주었음 clos rows를 이용하여 가로 세로 크기도 정해줌
이렇게 입력된 게시글 내용은 post로 controller의 /board/save에 넘어가게된다
- Controller
@Controller
@RequestMapping("/board") // 공통 주소값으로 설정
public class BoardController {
@Autowired
private BoardService boardService;
@GetMapping("/save") // /board/save
public String BoardSave(){
return "boardPages/boardSave";
}
@PostMapping("/save") // /board/save
public String BoardSave(@ModelAttribute BoardDTO boardDTO){
boardService.BoardSave(boardDTO);
return "redirect:/board/";
}Controller에서 RequestMapping을 이용하여 /board를 공통 주소값으로 설정했다
이렇게 공통주소값이 설정된다면 /board는 자동으로 입력되기 때문에 생략 가능하다
이렇게 Controller - Service - Repository - Mapper를 통하여 서버에 저장된다
- 글 목록 페이지
<table>
<tr>
<th>글번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성시간</th>
<th>조회수</th>
</tr>
<c:forEach items="${bList}" var="s">
<tr>
<td style="border: 1px solid black;text-align: center;padding: 5px">
<a style="text-decoration: none;color: black" href="/board?id=${s.id}">${s.id}</a></td>
<td style="border: 1px solid black;text-align: center;padding: 5px">
<a style="text-decoration: none;color: black" href="/board?id=${s.id}">${s.boardTitle}</a></td>
<td style="border: 1px solid black;text-align: center;padding: 5px">
<a style="text-decoration: none;color: black" href="/board?id=${s.id}">${s.boardWriter}</a></td>
<td style="border: 1px solid black;text-align: center;padding: 5px">
<a style="text-decoration: none;color: black" href="/board?id=${s.id}">
<fmt:formatDate value="${s.boardCreateDate}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
</a></td>
<td style="border: 1px solid black;text-align: center;padding: 5px">
<a STYLE="text-decoration: none;color: black">${s.boardHits}</a></td>
</tr>
</c:forEach>
</table>롬북의 c태그를 사용하여 forEach문을 통해 Model에 담긴 값을 뿌려준모습
List는 SAVE와 반대로 서버에서 값을 가져온다
- Repository
public List<BoardDTO> BoardList() {
return sql.selectList("Board.List");
}Mapper를 통해 DB에서 가져온 List 정보를 jsp까지 넘겨준다
- 글 상세 페이지
List에서 글을 누르게 되면 내용을 볼 수 있고
수정 삭제가 가능하다 , 수정과 삭제는 게시글 작성시 받은 비밀번호가 필요하다
<table>
<tr>
<th colspan="6">제목</th>
</tr>
<tr>
<td colspan="6"><textarea cols="104" name="boardTitle" readonly>${boardDTO.boardTitle}</textarea></td>
</tr>
<tr>
<th>글번호</th>
<th>작성자</th>
<th>작성시간</th>
<th>조회수</th>
</tr>
<tr>
<th>${boardDTO.id}</th>
<th>${boardDTO.boardWriter}</th>
<th>
<fmt:formatDate value="${boardDTO.boardCreateDate}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
</th>
<%-- <th>${boardDTO.boardCreateDate}</th>--%>
<th>${boardDTO.boardHits}</th>
</tr>
<tr>
<td colspan="6"><textarea id="boardContents" name="boardContents"
COLS="104" ROWS="38" readonly>${boardDTO.boardContents}</textarea></td>
</tr>
<tr>
<th colspan="6">
<input type="button" value="수정" onclick="goUpdate(${boardDTO.id})">
<input type="button" value="삭제" onclick="goDelete(${boardDTO.id})">
<input type="button" value="뒤로" onclick="goList()">
</th>
</tr>
</table>
- Controller
@GetMapping
public String boardDetail(@RequestParam("id") Long id , Model model){
boardService.updateHits(id);
BoardDTO boardDTO = boardService.boardDetail(id);
model.addAttribute("boardDTO",boardDTO);
return "boardPages/boardDetail";
}상세 페이지의 컨트롤러에서는 조회수 증가까지 함께 해준다
조회수를 1올리고 db에서 파리미터로 받은 id값의 정보를 찾아 화면에 출력한다
- 상세 페이지 - 수정 / 삭제
수정
<script>
const updateForm = document.getElementById('updateForm');
updateForm.addEventListener("submit",function (e){
e.preventDefault();
let promptResult = prompt("기존 비밀번호 확인", "입력바랍니다");
if('${boardDTO.boardPass}' != promptResult){
alert("비밀번호가 틀립니다");
}else{
alert("수정 완료!");
updateForm.submit();
}
})
</script>updateform에서 서브밋 이벤트가 실행되는 경우 이를 막고 prompt를 실행합니다
이후 prompt에서 받은 값과 기존 비밀번호가 맞는 경우 서브밋을하고 맞지 않는다면 서브밋을 하지 않습니다
삭제
<script>
const deleteFrom = document.getElementById('deleteForm');
const passwordResult = document.getElementById('passwordResult');
deleteFrom.addEventListener("submit",function (e){
e.preventDefault();
if(passwordResult.value != ${boardDTO.boardPass}){
alert("비밀번호가 틀립니다");
}else{
alert("삭제 완료!")
deleteFrom.submit();
}
})
</script>서브밋이 발생되엇을때 preventDefault를 사용하여 이벤트를 막아주고
조건문을 실행합니다 입력받은 값이 기존 비밀번호와 같다면 서브밋을하고
맞지 않다면 삭제를 진행하지 않습니다
