Dev.GA

[spring/게시판] #4 게시판에 부트스트랩(bootstrap) 적용하기 본문

Dev.Project/project1-spring게시판

[spring/게시판] #4 게시판에 부트스트랩(bootstrap) 적용하기

Dev.GA 2017. 11. 27. 02:00



개발환경

Server OS : Windows10

Language : JAVA 1.6

Framework : Spring 3.1.1

WEB Server : Apache 

WAS Server : Tomcat 7

build tool : maven 2.5.1

DB : MySQL 5.7.16

ORM : mybatis 3.2.7


4. 게시판에 부트스트랩(bootstrap) 적용하기


이번에는 게시판의 형태를 갖추기 위하여 css요소를 추가하여 게시판을 꾸며보겠다.

간단하게 bootstrap을 적용하여 게시판을 꾸밀것이다.


본인이 자주 사용하던 무료 템플릿 AdminLTE라는 템플릿을 사용할 것이다.


● 무료 템플릿 다운로드 : https://themequarry.com/category/free


위의 경로에서 AdminLTE를 다운받을 수 있다.



우측에 Login to download 버튼을 클릭하여 로그인 후에 다운받을 수 있다.

회원가입 절차는 간단하니 쉽게 가입하여 다운받으면 된다.


이런 템플릿을 다운받는 이유는 해당 템플릿에 적용된 css, js 등등 여러가지 css와 js파일들과 폰트들을 다운받을 수 있기 때문이다.


AdminLTE 템플릿을 다운 받으면 다음과 같이 



가장 중점적으로 사용할 부트스트랩(bootstrap)부터 chart, jquery, font 등등 여러가지 파일들이 존재한다.


우선 그 중에서도 부트스트랩을 이용하여 간단하게 게시판을 꾸며보겠다.



4-1. bootstrap.css파일 import


다운받은 경로에서 \AdminLTE-2.4.2\bower_components\bootstrap\dist\css에 bootstrap.css파일과 bootstrap.min.css파일이 존재한다.

해당 파일을 아래와 같이 /webapp 하위에 /css, /js 폴더를 생성한 뒤 추가해준다.



위와 같이 bootstrap.css파일을 import 해주었으면, DispatcherServlet에서 mapping 할 수 있도록 해당 폴더를 추가해주어야 한다.


servlet-context.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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 http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://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/" />
    <resources mapping="/css/**" location="/css/"/>
    <resources mapping="/js/**" location="/js/"/>
    
    <!-- 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="com.ga" />
    
    
    
</beans:beans>
 
cs


/css 폴더와 /js 폴더를 추가했다.


이제 해당 jsp파일에서 bootstrap.css 파일을 선언해주고 해당 요소를 이용하여 게시판을 꾸며 보겠다.


boardList.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body>
<div class="container">
    <form id="boardForm" name="boardForm" method="post">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>날짜</th>
                    <th>조회수</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="result" items="${list }" varStatus="status">
                    <tr>
                        <td><c:out value="${result.code }"/></td>
                        <td><a href='#' onClick='fn_view(${result.code})'><c:out value="${result.title }"/></a></td>
                        <td><c:out value="${result.writer }"/></td>
                        <td><c:out value="${result.reg_datetime }"/></td>
                        <td></td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
        
        <div>            
            <a href='#' onClick='fn_write()' class="btn btn-success">글쓰기</a>            
        </div>
    </form>
</div>
<script>
//글쓰기
function fn_write(){
    
    var form = document.getElementById("boardForm");
    
    form.action = "<c:url value='/board/writeForm.do'/>";
    form.submit();
    
}
 
//글조회
function fn_view(code){
    
    var form = document.getElementById("boardForm");
    var url = "<c:url value='/board/viewContent.do'/>";
    url = url + "?code=" + code;
    
    form.action = url;    
    form.submit(); 
}
</script>
</body>
</html>
cs


상단 <head></head> 부분에 <link rel="stylesheet" href="/css/bootstrap.css">

구문을 삽입하여 bootstrap을 사용할 수 있게 되었다.


15번째 라인,

<table class="table table-striped table-hover"> 테이블을 striped 효과를 넣어주었다.


39번째 라인,

<a href='#' onClick='fn_write()' class="btn btn-success">글쓰기</a> 버튼에도 디자인 요소를 추가하였다.


이제 페이지를 다시 확인해보겠다.



bootstrap의 디자인 요소가 들어간 게시판 화면을 확인 할 수 있다.


오늘은 아주 간단하게 게시판을 꾸며보았으며, 앞으로 게시판 기능을 추가하며 디자인 요소도 조금씩 추가할 것이다.

크게 디자인을 신경 쓸 부분은 없을 것 같다.





'Dev.Project > project1-spring게시판' 카테고리의 다른 글

[spring/게시판] #6 게시판 페이징 처리하기  (19) 2018.02.23
[spring/게시판] #5 Interceptor를 이용한 로그인 처리  (3) 2018.02.02
[spring/게시판] #3 게시판 등록, 조회, 수정, 삭제하기  (15) 2017.11.21
[spring/게시판] #2 mybatis 연동하기  (2) 2017.11.14
[spring/게시판] #1 Spring 프로젝트 만들기  (1) 2017.11.08
'Dev.Project/project1-spring게시판' Related Articles more
Comments