2022_04_10 - oneso123456789/2022 GitHub Wiki
모달창이 안나오던 오류 발생 해결한 방법은 div의 id나 클래스의 대소문자가 다른거 같음 확인결과
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
에서 id가 myModal에서 mymodal로 대문자가 누락됨
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
위처럼 대문자로 변경했더니 정상적으로 작동함
js는 에디터를 사용하던지 언제나 더 확실히 확인해야함
11.3.3모달(Modal)창 보여주기
최근 브라우저에서 경고창(alert)을 띄우는 방식보다 모달창(Modal)을 보여주는 방식을
많이 사용함
BootStrap은 모달창을 간단하게 사용할 수 있으므로 목록 화면에서 필요한 메시지를
보여주는 방법을 사용해 보겠음
최종적인 형태는 p247쪽 그림과 같은 모습이됨
모달은 기본적으로<div>를 화면에 특정위치에 보여주고, 배경이 되는 <div>에 배경색을 입혀서 처리함
모달창은 활성화된 <div>를 선택하지 않고는 다시 원래의 화면을 볼 수 없도록 막기 때문에 메시지를 보여주는데
효과적인 방식임
모달창에 대한 코드는 다운로드한 SBAdmin2의 pages 폴더 내 notifications.html 파일을 참고하면 됨
모달창을 처리하기 위해서는 우선 <div>를 이용해서 페이지의 코드에 추가해야함
list.jsp 내에 <table> 태그의 아래쪽에 모달창의 <div>를 추가함
</table><!-- table태그의 끝-->
<!-- Modal 추가 -->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">처리가 완료되었습니다.</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<-- 2022_04_09 Modal관련 div를 만들긴 했지만 아직 모달창을 보여주는 작업도 안하고 소스에 대한 디버깅도 안해서 오류가 있을수 있으니 10일에 고치도록 하겠음 -->
모달창을 보여주는 작업은 jQuery를 이용해서 처리함
<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");
}
});
</script>
checkModal()함수는 파라미터에 따라서 모달창을 보여주거나 내용을 수정한 뒤 보이도록 작성함
checkModal()에서는 새로운 게시글이 작성되는 경우 RedirectAttributes로 게시물의 번호가 전송되므로
이를 이용해서 모달창의 내용을 수정함
$("modal").modal('show')를 호출하면 위의 화면처럼 모달창이 보이게 됨
이제 'board/register'를 이용해서 새로운 게시물을 작성하고 나면 자동으로 'board/list로
이동하면서 모달창이 보이게됨
게시물의 작성과 목록 페이지로 이동이 정상적으로 동작했다면, 마지막으로 목록 페이지 상단에
버튼을 추가해서 등록 작업을 시작할 수 있게 처리해야함
우선은 list.jsp의 HTML구조를 아래와 같이 수정함
<div class="panel-heading">
Board List Page
<button id='regBtn' type="button" class="btn btn-xs pull-right">Register
New Board</button>
</div>
list.jsp 하단의 jQuery를 이용하는 부분에서 해당 버튼을 클릭했을 때의 동작을 정의함
<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").on("click", function() {
self.location = "/board/register"
});
});
</script>
화면에서 Register New Board버튼을 클릭하면 게시물의 등록 페이지로 이동 할 수 있음
게시물의 등록과 리스트 처리가 끝났다면 가장 중요한 틀은 완성되었다고 볼 수 있음
다음으로는 목록 페이지에서 링크를 통해서 GET 방식으로 특정한 번호의 게시물을
조회할 수 있는 기능을 작성함
조회 페이지는 입력 페이지와 거의 유사하지만 게시물의 번호(bno)가 출력된다는 점과
모든 데이터가 읽기 전용으로 처리된다는 점이 가장 큰 차이임
게시물의 조회는 BoardController에서 get()메서드로 구성되어 있음 ####com.crow.controller.BoardController클래스의 일부
@GetMapping("/get")
public void get(@RequestParam("bno") Long bno, Model model) {
log.info("BoardController /get");
model.addAttribute("board", service.get(bno));
}
views/board 폴더 내 get.jsp를 register.jsp를 복사해서 작성함
get.jsp는 게시물의 번호를 보여줄 수 있는 필드를 추가하고, 모든 데이터는 readonly를 지정해서 작성함
register.jsp에 있던
대신 마지막에 수정/삭제 페이지로 이동하거나 원래의 목록 페이지로 이동하는 버튼을 추가함
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Board Read Page</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group">
<label>Bno</label> <input class="form-control" name='bno'
value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>Title</label> <input class="form-control" name='title'
value='<c:out value="${board.title }" />' readonly="readonly">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3" name='content'
readonly="readonly"><c:out value="${board.content }" /></textarea>
</div>
<div class="form-group">
<label>Writer</label> <input class="form-control" name='writer'
value='<c:out value="${board.writer}"/>' readonly="readonly">
</div>
<button data-oper='modify' class="btn btn-default">
<a href="/board/modify?bno=<c:out value="${board.bno}"/>">Modify</a>
</button>
<button data-oper='list' class="btn btn-info">
<a href="/board/list">List</a>
</button>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-body -->
</div>
<!-- end panel -->
</div>
<!-- /.row -->
<%@ include file="../includes/footer.jsp"%>
브라우저에서는 /board/get?bno=1과 같이 게시물의 번호를 반드시 파라미터로 전달해줘야함
파라미터로 전달하는 bno 값이 존재한다면 아래와 같은 페이지를 보게됨(p253참고)
하면 하단의 버튼은 /board/list or /board/modify?bno=xx와 같이 이동하는 링크를 a태그를 이용해서 추가해줌
<button data-oper='modify' class="btn btn-default">
<a href="/board/modify?bno=<c:out value="${board.bno}"/>">Modify</a>
</button>
<button data-oper='list' class="btn btn-info">
<a href="/board/list">List</a>
</button>
254p 11.4.2 전까지 함