[코드로 배우는 스프링 웹 프로젝트] ch11 화면 처리 2

https://bobo12.tistory.com/302

 

 

(3) jQuery 라이브러리 변경

   ▷ JSP 페이지 작성시 JavaScript로 브라우저 내 조작이 필요한 경우가 많음

   ▷ 예제는 jQuery를 이용할 것인데, 문제는 이전의 방식대로 처리했을 시 jQuery 라이브러리가 footer.jsp 내에 포함되어 있다는 점

   ▷ 성능의 손해가 있더라도 jQuery를 header.jsp에 선언하면 작성하는 JSP에서 자유롭게 사용할 수 있습니다.

 

◎ footer.jsp에 있던 jquery 문구를 삭제하고 header 마지막에 추가합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

◎ jQuery를 교체한 후 모바일 크기에서 새로 고침 시 메뉴가 펼쳐지는 문제가 발생

   ▷ fooder.jsp에 아래와 같은 코드 추가

...(생략)...
	<script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true
        });
        $(".sidebar-nav")
          .attr("class", "sidebar-nav navbar-collapse collapse")
          .attr("aria-expanded", 'false')
          .attr("style", "height:1px");
    });
    </script>

</body>

 

 

2. 목록 화면 처리

   ▷ list.jsp 페이지 일부를 include 하는 방식으로 처리했음에도 HTML의 내용들이 많이 존재하므로 최소한의 태그들만 적용

 

◎ list.jsp 내용 삭제 및 수정

   ▷ JSTL의 출력과 포맷을 적용할 수 있는 태그 라이브러리 추가

   ▷ 필요 없는 부분 삭제 및 내용 수정

<%@ 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">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</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 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 width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                
                                <c:forEach items="${list}" var="board">
                                   <tr>
                                      <td><c:out value="${board.bno}" /></td>
                                      <td><c:out value="${board.title}" /></td>
                                      <td><c:out value="${board.writer}" /></td>
                                      <td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.regdate}" /></td>
                                      <td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.updateDate}" /></td>
                                   </tr>                                
                                </c:forEach>
                                
                            </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="model-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 -->
                    
                </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");
      }         
   });
</script>

<%@include file="../includes/footer.jsp" %>

출력하면 아래와 같이 테이블의 전체 목록이 출력됩니다.

 

 

3. 등록 입력 페이지와 등록 처리

   ▷ 게시물 등록 작업은 POST 방식으로 처리하지만,

       화면에서 입력 받아야 하므로 GET 방식으로 입력 페이지 볼 수 있도록 BoardController에 메소드 추가

 

◎ BoardController 수정

 

...(생략)...
	@GetMapping("/register")
	public void register() {
		
	}
}

 

◎ src/main/webapp/WEB-INF/views/board → register.jsp 생성

   ▷ views 폴더에 includes 적용한 입력 페이지 작성

<%@ 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">
	<div class="col-lg-12">
		<h1 class="page-header">Board Register</h1>
	</div>
</div>
<!-- /.row -->

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
		
			<div class="panel-heading">Board Register</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
			
				<form role="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>text Area</label> 
						<textarea class="form-control" rows="3" name='content'></textarea>
					</div>
					
					<div class="form-group">
						<label>Writer</label> <input class="form-control" name="writer">
					</div>
					<button type="submit" class="btn btn-default">Submit Button</button>
					<button type="reset" class="btn btn-default">Reset Button</button>
				</form>			
			</div>		
			<!--  end panel-body -->
		</div>
		<!--  end panel-body -->
	</div>
	<!--  end panel -->
</div>
<!--  /.row -->
<%@include file="../includes/footer.jsp" %>​

register.jsp 페이지에서는 <form> 태그를 이용해서 필요한 데이터를 전송
<input>이나 <textarea> 태그의 name 속성은 BoardVO 클래스의 변수와 일치 시킴

 

게시글이 등록은 되지만 한글이 깨지는 문제가 발생

 

(1) 한글 문제와 UTF-8 필터 처리

   ▷ 브라우저에서 한글이 깨져서 전송되는지를 확인 함

   ▷ 문제가 없다면 스프링 MVC 쪽에서 한글을 처리하는 필터를 등록해야 함

 

◎ web.xml 수정

...(생략)...

	<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>

</web-app>

 

list.jsp 내용을 수정하면서 테이블값의 목록을 출력하며 새로운 값들을 등록할 수 있게 만들었습니다.

 

이어서 내용들을 추가해볼게요!!

 

많은 분들의 피드백은 언제나 환영합니다!  많은 댓글 부탁드려요~~