스프링 - Part 3 - 기본적인 웹 게시물 관리 05 (화면처리-01)

Spring

스프링 - Part 3 - 기본적인 웹 게시물 관리 05 (화면처리-01)

록's 2023. 3. 23. 12:31

728x90

화면처리

목록 페이지 작업과 includes

스프링 MVC의 JSP를 처리하는 설정은 servlet-context.xml에 아래와 같이 작성되어 있다.

servlet-context.xml 의 일부

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<context:component-scan base-package="org.codehows.controller" />
	
	
	
</beans:beans>

스프링 MVC의 설정에서 화면 설정은 ViewResolver라는 객체를 통해서 이루어지는데 위의 설정을 보면 /WEB-INF/views 폴더를 이용하는 것을 볼 수 있다.

WEB-INF 경로는 브라우저에서 직접 접근할 수 없는 경로이므로 반드시 Controller를 이용하는 모델 2방식에서는 기본적으로 사용하는 방식이다.

게시물 리스트의 URL은 /board/list이므로 최종적인 /WEB-INF/views/board/list.jsp가 된다

// list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>List Page</h1>
</body>
</html>

설정

SB Admin2 페이지 적용하기

정상적으로 /board/list 페이지가 동작한다면 SB Admin2의 pages 폴더에 있는 tables.html의 내용을 list.jsp의 내용으로 그대로 복사해서 수정하고 실행한다.

수정 할 때는 list.jsp의 상단에 JSP의 Page 지시자는 지우지 않아야한다.

list.jsp

https://rogi221.tistory.com/150

list.jsp

list.jsp Toggle navigation SB Admin v2.0 John Smith Yesterday Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend... John Smith Yesterday Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend... John Smit

rogi221.tistory.com

브라우저에서는 CSS등이 완전히 깨진 상태이므로 텍스트만 출력되는 것을 볼 수 있다.

list.jsp 수정

includes 적용

현재 프로젝트 views 폴더에 includes 폴더를 작성하고, header.jsp와 footer.jsp를 선언한다.

header.jsp 적용

header.jsp는 페이지에서 핵심적인 부분이 아닌 영역 중에서 윗쪽의 HTML 내용을 처리하기 위해서 작성한다.

브라우저에서 검사 기능을 활용하면 특정한 <div>가 어떤 부분을 의미하는지 확인 할 수있다.

(list의 Line 1 ~ Line 376 오려서 붙혀넣기)

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

footer.jsp

(list의 Line745 ~ 마지막줄까지 오려서 붙혀넣기)

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

jQuery 라이브러리 변경

// footer.jsp

<!-- jQuery -->
    <script src="/resources/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/resources/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="/resources/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- DataTables JavaScript -->
    <script src="/resources/vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/resources/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="/resources/vendor/datatables-responsive/dataTables.responsive.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="/resources/dist/js/sb-admin-2.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true
        });
    });
    </script>

</body>

</html>

header.jsp

// header.jsp

... 생략 ...

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

footer.jsp의 일부

// footer.jsp

... 생략 ...

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <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>

목록 화면 처리

list.jsp 수정(필요없는 부분삭제)

// 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" %>

            <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">
                            DataTables Advanced Tables</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                               
                                </table>
                            </div>
                            <!-- end panel-body -->
                        </div>
                        <!-- end panel -->
                    </div>                
                </div>            
            </div>
            <!-- /.row -->

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

Model에 담긴 데이터 출력

/board/list를 실행했을 때 이미 BoardController는 Model을 이용해서 게시물의 목록을 list라는 이름으로 담아서 전달했으므로 list.jsp에서는 이를 출력한다. 출력은 JSTL을 이용해서 처리한다.

list.jsp 내에 <tbody> 태그와 각 <tr>을 작성한다.

 // list.jsp
 
 ... 생략 ...
  
 			<!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <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>

결과

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

게시물의 등록 작업은 POST 방식으로 처리하지만, 화면에서 입력을 받아야 하므로 GET 방식으로 입력 페이지를 볼 수 있도록 BoardController에 메서드를 추가한다.

BoardController.java

// BoardController.java

... 생략 ...

	@GetMapping("/register")
	public void register() {
		
	}
}

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

<input>이나 <textarea> 태그의 name 속성은 BoardVO 클래스의 변수와 일치 시켜준다.

출력되는지 확인한다.

화면이 정상적으로 보인다면 입력 항목을 넣어서 새로운 게시물이 등록되는지를 확인한다

BoardController 의 POST 방식으로 동작하는 register()는 redirect 시키는 방식을 이용하므로 게시물의 등록후 다시 /board/list로 이동한다.

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

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

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

재전송(redirect) 처리

등록 과정에서 POST 방식으로 데이터가 처리되는 과정을 그림으로 표현하면 다음과 같다.

728x90

'Spring' 카테고리의 다른 글

스프링 - Part 3 - 기본적인 웹 게시물 관리 06 (오라클 데이터베이스 페이징 처리) (0)	2023.03.27
스프링 - Part 3 - 기본적인 웹 게시물 관리 05 (화면처리-02) (0)	2023.03.27
list.jsp (0)	2023.03.23
스프링 - Part 3 - 기본적인 웹 게시물 관리 04 (프레젠테이션(웹) 계층의 CRUD 구현) (0)	2023.03.22
스프링 - Part 3 - 기본적인 웹 게시물 관리 03 (비즈니스 계층) (0)	2023.03.22

현재글스프링 - Part 3 - 기본적인 웹 게시물 관리 05 (화면처리-01)

Today :
Yesterday :

250x250

c#, 코딩, 닷넷, 할 수 있다., 예외처리,

Today :
Yesterday :

코딩하는 록's