Other

디버깅

모달창이 안나오던 오류 발생 해결한 방법은 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>를 추가함

list.jsp 페이지의 수정

</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">&times;</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를 이용해서 처리함

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");
				}
			});
</script>

checkModal()함수는 파라미터에 따라서 모달창을 보여주거나 내용을 수정한 뒤 보이도록 작성함
checkModal()에서는 새로운 게시글이 작성되는 경우 RedirectAttributes로 게시물의 번호가 전송되므로
이를 이용해서 모달창의 내용을 수정함
$("modal").modal('show')를 호출하면 위의 화면처럼 모달창이 보이게 됨

이제 'board/register'를 이용해서 새로운 게시물을 작성하고 나면 자동으로 'board/list로
이동하면서 모달창이 보이게됨

11.3.4 목록에서 버튼으로 이동하기

게시물의 작성과 목록 페이지로 이동이 정상적으로 동작했다면, 마지막으로 목록 페이지 상단에
버튼을 추가해서 등록 작업을 시작할 수 있게 처리해야함

우선은 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를 이용하는 부분에서 해당 버튼을 클릭했을 때의 동작을 정의함

list.jsp 하단의 script

<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버튼을 클릭하면 게시물의 등록 페이지로 이동 할 수 있음

11.4 조회 페이지와 이동

게시물의 등록과 리스트 처리가 끝났다면 가장 중요한 틀은 완성되었다고 볼 수 있음
다음으로는 목록 페이지에서 링크를 통해서 GET 방식으로 특정한 번호의 게시물을
조회할 수 있는 기능을 작성함

11.4.1 조회 페이지 작성

조회 페이지는 입력 페이지와 거의 유사하지만 게시물의 번호(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에 있던

태그는 조회 페이지에서는 그다지 필요하지 않음 따라서 제거하고
대신 마지막에 수정/삭제 페이지로 이동하거나 원래의 목록 페이지로 이동하는 버튼을 추가함

get.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태그를 이용해서 추가해줌

get.jsp 하단의 button

<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 전까지 함

2022_04_10 - oneso123456789/2022 GitHub Wiki

Other

디버깅

어제 마지막 내용

list.jsp 페이지의 수정

list.jsp 내 jQuery처리

11.3.4 목록에서 버튼으로 이동하기

list.jsp 하단의 script

11.4 조회 페이지와 이동

11.4.1 조회 페이지 작성

get.jsp의 일부

get.jsp 하단의 button

⚠️ GitHub.com Fallback ⚠️

2022_04_10 - oneso123456789/2022 GitHub Wiki

Other

디버깅

어제 마지막 내용

list.jsp 페이지의 수정

list.jsp 내 jQuery처리

11.3.4 목록에서 버튼으로 이동하기

list.jsp 하단의 script

11.4 조회 페이지와 이동

11.4.1 조회 페이지 작성

get.jsp의 일부

get.jsp 하단의 button

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️