27번 영상 : 게시물 등록 화면 처리
JSTL
JAVA코드를 JSP에 바로 이식할 수 있게 해주는 코드
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
위의 코드를 jsp 상단에 입력해야만 JSTL을 사용할 수 있다
from Post, Get 방식으로 사용할 때
<form action="/board/register" method="post">
<div class="form-group">
<label>Title</label>
<input class="form-control" name="title">
</div>
<div class="form-group">
<label>Content</label>
<textarea rows="5" cols="50" name="content" class="form-control"></textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input class="form-control" name="writer">
</div>
Submit Button
Reset Button
</form>일 때 의 방식을 설명하겠다
1. form 태그로 인해서 action = "url" 즉, 해당 url로 method의 방식에 맞게 한다
2. method의 방식은 Post, 즉 데이터를 보내면 Post 방식으로 처리한다
3. 어떠한 데이터 들을 넣어준다, 이 데이터 들은 name의 변수에 담아져서 보내지게된다(title, content, writer)
4. Submit시 해당 Action의 url로 해당 데이터를 보낸다
라는 방식이다 이렇게 되면 우리가 만들어 놓은 Controller에 의해 어떻게 처리 될 것인지를 정하게 된다
@GetMapping("/register")
public void registerGET() {
}
@PostMapping("/register")
public String register(BoardVO board, RedirectAttributes rttr) {
log.info("board : " + board);
service.register(board);
// 처음 보낼 때 한번만 전송하는것
rttr.addFlashAttribute("result", 1);
// 계속 데이터가 남음
rttr.addAttribute("result2", 2);
return "redirect:/board/list";
}위와 같이 Get Post가 같이 사용되는 메소드의 경우에는
1. 해당 데이터들이 Board에 담기게 된다
2. 해당 데이터를 service객체의 register 메소드로 인해 DB에 저장한다
3. String 반환형이기에 이동할 url을 redirect로 정해서 강제 이동한다
위와 같은 형식으로 이루어 진다
28번 영상 : 한글 필터 처리 및 내용 추가 팝업 창
UTF-8 설정
Web.xml에 해당 Filter 추가
<filter>
<filter-name>encoding</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encoding</filter-name>
<servlet-name>appServlet</servlet-name>
</filter-mapping>C:out을 사용하는 이유
Alert와 같은 창 생성(확인창 생성)
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var result = '<c:out value="${result}"/>';
checkModal(result);
function checkModal(result){
if(result == ''){
return;
}
if(parseInt(result) > 0){
$(".modal-body").html(
"게시글 " + parseInt(result) + " 번이 등록되었습니다.");
}
$("#myModal").modal("show");
}
$("#regBtn").click(function(){
self.location = "/board/register";
})
})
</script>
해당 코드를 확실하게 알아두도록 하자
특히 Javascript 부분은 많이 중요해보인다
29번 영상 : 조회 처리와 페이지 이동
<td><a href='/board/get?bno=<c:out value="${board.bno }"/>'>
<c:out value="${board.title }"/></a></td>해당 코드의 이해 해당 라인의 리스트 번호를 받아서 그것에 대한 title을 보여준다
세션 정리
$(document).ready(function(){
var result = '<c:out value="${result}"/>';
checkModal(result);
history.replaceState({},null,null);
function checkModal(result){
if(result == '' || history.state){
return;
}
if(parseInt(result) > 0){
$(".modal-body").html(
"게시글 " + parseInt(result) + " 번이 등록되었습니다.");
}
$("#myModal").modal("show");
}
https://developer.mozilla.org/ko/docs/Web/API/History/replaceState
해당 코드에서 주목해야 할 코드는 2가지이다
1. history.replaceState({}, null,null)
2. hisotry.state
1번 코드의 경우 저장 되어 있는 세션을 클린해주는 코드
2번 코드의 경우 해당 세션에 뭔가 저장 되어 있는지 확인하는 코드이다
즉 해당 JavaScript에 무언가가 저장되어 있거나 저장되고 나면 출력하고 난 뒤 해당 코드를 클린시켜줘서 뒤로 돌아가기 등을 했을 때 다시 출력되지 않게 하는 코드이고
2번 코드는 무언가 저장 되어있으면 그냥 return 해주는 코드이다
