수업/스프링
[Spring] 9일차
분홍야자
2023. 4. 21. 09:20
모달 추가
<!-- Modal 추가 -->
<div class="modal fade" id="myModal" tapindex="-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>
</div>
</div>
list.jsp - 스크립트 추가
게시물 등록 이동버튼 추가
<button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
총합 - list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp" %>
<c:set var="contextPath" value="${pageContext.request.contextPath == '/' ? '' : pageContext.request.contextPath }" scope="application"/> <!-- 변수 생성 - 루트 자동으로 읽어들이기 -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<dcon iv class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Board List Page
<button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="board">
<tr>
<td>${board.bno}</td>
<td><a href="/board/read/?bno=${board.bno}">${board.title}</a></td>
<td>${board.writer}</td>
<td><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${board.regdate}"/></td>
<td><span class="badge bg-ref">${board.viewcnt}</span></td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- Modal 추가 -->
<div class="modal fade" id="myModal" tapindex="-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>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<script type="text/javascript">
$(document).ready(function() { //$(document).ready() : 위 html 문서가 컴파일 준비가 다 되었다면
var result = "${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() { // function() : 익명함수 (즉시실행함수) : 이름이 없는 함수
self.location = "${contextPath}/board/register"; // self.location : 이동시켜버림
});
</script>
<%@include file="../includes/footer.jsp"%>
read.jsp 파일 만들기 - 상세 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@include file="../includes/header.jsp"%>
<div class="row">
<c:set var="contextPath" value="${pageContext.request.contextPath == '/' ? '' : pageContext.request.contextPath }" scope="application" />
<div class="col-lg-12">
<h1 class="page-header">Board Read</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<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="${board.bno }" readonly="readonly">
</div>
<div class="form-group">
<label>Title</label> <input class="form-control" name="title" value="${board.title }" readonly="readonly">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3" name="content" readonly="readonly">${board.content }</textarea>
</div>
<div class="form-group">
<label>Writer</label> <input class="form-control" name="writer" value="${board.writer }" readonly="readonly">
</div>
<!-- html의 data- 속성 이용 -->
<button data-oper="modify" class="btn btn-default">
<a href="${contextPath }/board/modify?bno=${board.bno}">Modify</a>
</button>
<button data-oper="list" class="btn btn-default">
<a href="${contextPath }/board/list">List</a>
</button>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-body -->
</div>
<!-- end panel -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp"%>
다중 맵핑 - BoardController
두 컨트롤러 모두 똑같다 이럴 때 다중매핑 사용하여 하나로 만들기
@RequestMapping(value = {"/read","/modify"}, method = RequestMethod.GET)
public void modifyGET(@RequestParam("bno") int bno, Model model) throws Exception {
model.addAttribute("board", service.read(bno));
}
modify.jsp 페이지 - 수정페이지 만들기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@include file="../includes/header.jsp"%>
<div class="row">
<c:set var="contextPath" value="${pageContext.request.contextPath == '/' ? '' : pageContext.request.contextPath }" scope="application" />
<div class="col-lg-12">
<h1 class="page-header">Board Modify</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Board Modify Page</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form action="${contextPath}/board/modify" method="post" role="form">
<div class="form-group">
<label>Bno</label> <input class="form-control" name="bno" value="${board.bno }" readonly="readonly">
</div>
<div class="form-group">
<label>Title</label> <input class="form-control" name="title" value="${board.title }">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3" name="content">${board.content }</textarea>
</div>
<div class="form-group">
<label>Writer</label> <input class="form-control" name="writer" value="${board.writer }" readonly="readonly">
</div>
<!-- html의 data- 속성 이용 -->
<button type="button" data-oper="modify" class="btn btn-default">Modify</button>
<button type="button" data-oper="remove" class="btn btn-danger">Remove</button>
<button type="button" data-oper="list" class="btn btn-info">List</button>
</form>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-body -->
</div>
<!-- end panel -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp"%>
data-* 속성사용하기
