이안의 평일코딩

Spring 14일차 - Tiles 본문

Back-end/Spring

Spring 14일차 - Tiles

이안92 2020. 11. 16. 11:58
반응형

2020.11.16(월)

 

startbootstrap.com/theme/sb-admin-2

 

SB Admin 2 - Free Bootstrap Admin Theme

A free Bootstrap admin theme, dashboard, or web application UI. All Start Bootstrap templates are free to download and open source.

startbootstrap.com

SpringTilesProject

jdk 1.8로 수정

pom.xml, web.xml 복붙

 

pom.xml에서 tiles최신버젼으로 변경해줘야 404오류가 안뜸!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- tiles  -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-core</artifactId>
            <version>3.0.8</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-jsp</artifactId>
            <version>3.0.8</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-api</artifactId>
            <version>3.0.8</version>
        </dependency>
        
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>3.0.8</version>
        </dependency>
 cs

 

WEB-INF/config폴더생성 NEW Spring Bean Definition file

application-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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:c="http://www.springframework.org/schema/c"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:task="http://www.springframework.org/schema/task"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:util="http://www.springframework.org/schema/util"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
        http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
        http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-4.3.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.3.xsd">
    <context:component-scan base-package="com.sist.*"/>
    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver"
        p:prefix="/"
        p:suffix=".jsp"
        p:order="1"
    />
    <!-- 
        return "main/main"; => viewResolver 적용
        return "main"; => tilesResolver 적용
        <definition name="main" template="/WEB-INF/main/main.jsp"> 리턴형 name값 "main"
        order 0번부터 우선순위 0->1 먼저 tiles형식을 찾고 viewResolver을 찾음
     -->
    <bean id="tilesResolver"
        class="org.springframework.web.servlet.view.UrlBasedViewResolver"
        p:requestContextAttribute="requestContext"
        p:viewClass="org.springframework.web.servlet.view.tiles3.TilesView"
        p:order="0"
    />
    <bean id="tilesConfigurer"
        class="org.springframework.web.servlet.view.tiles3.TilesConfigurer"
        p:definitions="/WEB-INF/tiles.xml"
    />
        
</beans>
 cs

 

main/webapp/WEB-INF/main 폴더생성

main.jsp (bootstrap은 container클래스 div를 만들어줘야함)

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row{
    margin: 0px auto;
    width:1200px;
}
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <table class="table" height="900">
                <tr>
                    <td colspan="2" height="100"></td>
                        <tiles:insertAttribute name="header"/>
                </tr>
                <tr>
                    <td width=20% height="700">
                        <tiles:insertAttribute name="menu"/>
                    </td>
                    <td width=80% height="700" name="content">
                        <tiles:insertAttribute name="content"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" height="100" name="footer">
                        <tiles:insertAttribute name="footer"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
 cs

 

menu.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
        <a href="../board/list.do">게시판</a><br>
        <a href="../notice/list.do">공지사항</a>
        
    </center>
</body>
</html>
 cs

 

header.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
        Header
    </center>
</body>
</html>
 cs

footer.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
        Footer
    </center>
</body>
</html>
 cs

 

content.jsp (화면이 바뀌는 곳)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
        Content
    </center>
</body>
</html>
 cs

 

WEB-INF/notice

list.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
        <h1>공지사항</h1>
    </center>
</body>
</html>
 cs

 

WEB-INF/board

list.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
        <h1>게시판</h1>
    </center>
</body>
</html>
 cs

 

WEB-INF new->other->xml

tiles.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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
    <definition name="main" template="/WEB-INF/main/main.jsp">
        <put-attribute name="header" value="/WEB-INF/main/header.jsp"></put-attribute>
        <put-attribute name="menu" value="/WEB-INF/main/menu.jsp"></put-attribute>
        <put-attribute name="content" value="/WEB-INF/main/content.jsp"></put-attribute>
        <put-attribute name="footer" value="/WEB-INF/main/footer.jsp"></put-attribute>
    </definition>
    
    <!-- <definition name="board/list" extends="main"> main구조 상속 content자리를 board/list로 바꿈
        <put-attribute name="content" value="/WEB-INF/board/list.jsp"></put-attribute>
    </definition>
    <definition name="notice/list" extends="main">
        <put-attribute name="content" value="/WEB-INF/notice/list.jsp"></put-attribute>
    </definition> -->
    
    <definition name="*/*" extends="main"> <!-- 1에 * / 2에 * 넣음 -->
        <put-attribute name="content" value="/WEB-INF/{1}/{2}.jsp"></put-attribute>
    </definition>
    <definition name="*/*/*" extends="main"> <!-- 경로명 3개일 때 -->
        <put-attribute name="content" value="/WEB-INF/{1}/{2}/{3}.jsp"></put-attribute>
    </definition>
    
</tiles-definitions>
 cs

실무는 include가 아닌 tiles(화면이동, 디폴트) / viewResolver(팝업창띄움)

 

src/main/java

com.sist.web

MainController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.sist.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class MainController {
    @RequestMapping("main/main.do")
    public String main_main(){
        return "main";
    }
    @RequestMapping("board/list.do")
    public String board_list(){
        return "board/list";
    }
    @RequestMapping("notice/list.do")
    public String notice_list(){
        return "notice/list";
    }
}
 
 cs

 

SpringTilesProject2

 

www.w3schools.com/bootstrap/bootstrap_theme_company.aspwww.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation

 

Tryit Editor v3.6

Bootstrap Theme Company Page body { font: 400 15px Lato, sans-serif; line-height: 1.8; color: #818181; } h2 { font-size: 24px; text-transform: uppercase; color: #303030; font-weight: 600; margin-bottom: 30px; } h4 { font-size: 19px; line-height: 1.375em; c

www.w3schools.com

 

기본셋팅후

WEB-INF/

config폴더생성

application-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
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
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:c="http://www.springframework.org/schema/c"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.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-4.3.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
    
    <context:component-scan base-package="com.sist.*"/>
    
    <!-- DB -->
    
    <!-- DataSource 생성 : database의 정보 (driver,username,password,url...) -->
    <bean id="ds"
        class="org.apache.commons.dbcp.BasicDataSource"
        p:driverClassName="oracle.jdbc.driver.OracleDriver"
        p:url="jdbc:oracle:thin:@localhost:1521:XE"
        p:username="hr"
        p:password="happy"
    />
    
    <!-- DataSource => Transaction 설정 -->
    
    <!-- SqlSessionFactory : 마이바티스에서 DB연결(getConnection, disConnection) ds -->
    <bean id="ssf"
        class="org.mybatis.spring.SqlSessionFactoryBean"
        p:dataSource-ref="ds"
    />
    
    <!-- interface 구현(PreparedStatement, ResultSet : MapperFactoryBean(ssf) -->
    <bean id="mapper"
        class="org.mybatis.spring.mapper.MapperFactoryBean"
        p:sqlSessionFactory-ref="ssf"
        p:mapperInterface="com.sist.mapper.MovieMapper"
    />
    
    <!-- ViewResolver tiles우선순위0번 -->
    <bean id="tilesViewResolver"
        class="org.springframework.web.servlet.view.UrlBasedViewResolver"
        p:requestContextAttribute="requestContext"
        p:viewClass="org.springframework.web.servlet.view.tiles3.TilesView"
        p:order="0"
    />
    
    <bean id="tilesConfigurer"
        class="org.springframework.web.servlet.view.tiles3.TilesConfigurer"
        p:definitions="/WEB-INF/tiles.xml"
    />
    
    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver"
        p:prefix="/"
        p:suffix=".jsp"
    />
</beans>
 
 cs

 

WEB-INF/

tiles.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
    <definition name="main" template="/WEB-INF/main/main.jsp">
        <put-attribute name="header" value="/WEB-INF/main/header.jsp"/>
        <put-attribute name="content" value="/WEB-INF/main/content.jsp"/>
        <put-attribute name="footer" value="/WEB-INF/main/footer.jsp"/>
    </definition>
    <definition name="*/*" extends="main">
        <put-attribute name="content" value="/WEB-INF/{1}/{2}.jsp"/>
    </definition>
    <definition name="*/*/*" extends="main">
        <put-attribute name="content" value="/WEB-INF/{1}/{2}/{3}.jsp"/>
    </definition>
    <!-- <definition name="login" template="/WEB-INF/member/login.jsp"> 상속대신 template쓰면 단독으로 띄움
    </definition>
    <definition name="join" template="/WEB-INF/member/join.jsp">
    </definition> -->
</tiles-definitions>
 cs

 

webapp폴더에 file생성 (css는 webapp폴더에 WEB-INF는 환경설정)

style.css

(<style></style>사이 태그를 복붙해서 저장)

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
  }
  h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
  }
  h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
  }  
  .jumbotron {
    background-color: #f4511e;
    color: #fff;
    padding: 100px 25px;
    font-family: Montserrat, sans-serif;
  }
  .container-fluid {
    padding: 60px 50px;
  }
  .bg-grey {
    background-color: #f6f6f6;
  }
  .logo-small {
    color: #f4511e;
    font-size: 50px;
  }
  .logo {
    color: #f4511e;
    font-size: 200px;
  }
  .thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
  }
  .thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }
  .carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #f4511e;
  }
  .carousel-indicators li {
    border-color: #f4511e;
  }
  .carousel-indicators li.active {
    background-color: #f4511e;
  }
  .item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
  }
  .item span {
    font-style: normal;
  }
  .panel {
    border: 1px solid #f4511e; 
    border-radius:0 !important;
    transition: box-shadow 0.5s;
  }
  .panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }
  .panel-footer .btn:hover {
    border: 1px solid #f4511e;
    background-color: #fff !important;
    color: #f4511e;
  }
  .panel-heading {
    color: #fff !important;
    background-color: #f4511e !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .panel-footer {
    background-color: white !important;
  }
  .panel-footer h3 {
    font-size: 32px;
  }
  .panel-footer h4 {
    color: #aaa;
    font-size: 14px;
  }
  .panel-footer .btn {
    margin: 15px 0;
    background-color: #f4511e;
    color: #fff;
  }
  .navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
  }
  .navbar li a, .navbar .navbar-brand {
    color: #fff !important;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
  }
  .navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
  }
  footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
  }
  .slideanim {visibility:hidden;}
  .slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
      width: 100%;
      margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
    .logo {
      font-size: 150px;
    }
  }
 cs

 

src/main/webapp/WEB-INF/main

main.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
 
<!-- Header 영역 -->
<tiles:insertAttribute name="header"/>
 
<!-- Content 영역 -->
<tiles:insertAttribute name="content"/>
 
<!-- Footer 영역 -->
<tiles:insertAttribute name="footer"/>
 
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
 
      // Store hash
      var hash = this.hash;
 
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
  
  $(window).scroll(function() {
    $(".slideanim").each(function(){
      var pos = $(this).offset().top;
 
      var winTop = $(window).scrollTop();
        if (pos < winTop + 600) {
          $(this).addClass("slide");
        }
    });
  });
})
</script>
 
</body>
</html>
 cs

header.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#myPage">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../main/main.do">홈</a></li>
        <li><a href="../member/login.do">로그인</a></li>
        <li><a href="../board/list.do">커뮤니티</a></li>
        <li><a href="../recipe/list.do">레시피</a></li>
        <li><a href="../food/list.do">맛집</a></li>
        <li><a href="../recommend/list.do">추천</a></li>
      </ul>
    </div>
  </div>
</nav>
 
<div class="jumbotron text-center">
  <h1>Company</h1> 
  <p>We specialize in blablabla</p> 
  <form>
    <div class="input-group">
      <input type="email" class="form-control" size="50" placeholder="Email Address" required>
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger">Subscribe</button>
      </div>
    </div>
  </form>
</div>
</body>
</html>
 cs

content.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="about" class="container-fluid">
  <div class="row">
    <div class="col-sm-10">
      <c:forEach var="vo" items="${mList }">
          <div class="col-md-2">
            <div class="thumbnail">
              <a href="#">
                <img src="${vo.poster }" alt="Lights" style="width:100%">
                <div class="caption">
                  <p>${vo.title }</p>
                </div>
              </a>
            </div>
          </div>
      </c:forEach>
      <div class="text-center">
          <a href="main.do?page=${curpage>1?curpage-1:curpage }" class="btn btn-sm btn-success">이전</a>
              ${curpage } page / ${totalpage } pages
          <a href="main.do?page=${curpage<totalpage?curpage+1:curpage }" class="btn btn-sm btn-info">다음</a>
      </div>
    </div>
    <div class="col-sm-2">
      <table class="table table-striped">
      <caption>댓글이 많은 영화</caption>
          <c:forEach var="vo" items="${tList }">
              <tr>
                  <td>
                      <img src="${vo.poster }" width=25 height=25>
                  </td>
                  <td style="font-size:7pt">${vo.title }</td>
              </tr>
          </c:forEach>
      </table>
    </div>
  </div>
</div>
 
<div class="container-fluid bg-grey">
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-globe logo slideanim"></span>
    </div>
    <div class="col-sm-8">
      <h2>Our Values</h2><br>
      <h4><strong>MISSION:</strong> Our mission lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br>
      <p><strong>VISION:</strong> Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>
</body>
</html>
 cs

footer.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <footer class="container-fluid text-center">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
  <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p>
</footer>
</body>
</html>
 cs

src/main/java

com.sist.web

MainController

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
package com.sist.web;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.sist.vo.*;
import com.sist.dao.*;
import java.util.*;
 
@Controller
public class MainController {
    // DAO
    @Autowired
    private MovieDAO dao;
    @RequestMapping("main/main.do")
    public String main_main(String page, Model model){
        if(page==null)
            page="1";
        int curpage=Integer.parseInt(page);
        Map map=new HashMap();
        int rowSize=12;
        int start=(rowSize*curpage)-(rowSize-1);
        int end=rowSize*curpage;
        map.put("start", start);
        map.put("end", end);
        List<MovieVO> mList=dao.movieListData(map);
        for(MovieVO vo:mList){
            String s=vo.getTitle();
            if(s.length()>15){
                s=s.substring(0,15)+"..";
                vo.setTitle(s);
            }
        }
        int totalpage=dao.movieTotalPage();
        List<MovieVO> tList=dao.movieTop5Hit();
        
        // content.jsp로 데이터 전송
        model.addAttribute("curpage",curpage);
        model.addAttribute("totalpage",totalpage);
        model.addAttribute("mList",mList);
        model.addAttribute("tList",tList);
        return "main";
    }
}
 
 cs

src/main/webapp폴더에

index.jsp (실행파일 => main.do로 자동전환)

1
2
3
4
5
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    response.sendRedirect("main/main.do");
%>
 cs

src/main/webapp/WEB-INF/board

list.jsp

src/main/webapp/WEB-INF/recipe

list.jsp

src/main/webapp/WEB-INF/food

list.jsp

src/main/webapp/WEB-INF/recommend (추천)

list.jsp

src/main/webapp/WEB-INF/member

login.jsp

 

 

src/main/java

com.sist.web

BoardController

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.sist.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class BoardController {
    @RequestMapping("board/list.do")
    public String board_list(){
        return "board/list";
    }
}
 
 cs

RecipeController

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.sist.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class RecipeController {
    @RequestMapping("recipe/list.do")
    public String recipe_list(){
        return "recipe/list";
    }
}
 
 cs

FoodController

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.sist.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class FoodController {
    @RequestMapping("food/list.do")
    public String food_list(){
        return "food/list";
    }
}
 
 cs

RecommendController

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.sist.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class RecommendController {
    @RequestMapping("recommend/list.do")
    public String recommend_list(){
        return "recommend/list";
    }
}
 
 cs

MemberController

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.sist.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class MemberController {
    @RequestMapping("member/login.do")
    public String member_login(){
        return "login";
    }
}
 
 cs

 

src/main/java

com.sist.vo

MovieVO

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
package com.sist.vo;
/*
이름       널?       유형            
-------- -------- ------------- 
NO       NOT NULL NUMBER        
CATENO            NUMBER        
TITLE    NOT NULL VARCHAR2(200) 
POSTER   NOT NULL VARCHAR2(300) 
REGDATE           VARCHAR2(200) 
GENRE    NOT NULL VARCHAR2(100) 
GRADE    NOT NULL VARCHAR2(100) 
ACTOR             VARCHAR2(100) 
SCORE             VARCHAR2(20)  
DIRECTOR NOT NULL VARCHAR2(100) 
STORY             CLOB          
KEY               VARCHAR2(50)  
HIT               NUMBER  
 */
public class MovieVO {
    private int no, cateno, hit;
    private String poster, title, regdate, grade, genre, actor, score, director, story, key;
    public int getNo() {
        return no;
    }
    public void setNo(int no) {
        this.no = no;
    }
    public int getCateno() {
        return cateno;
    }
    public void setCateno(int cateno) {
        this.cateno = cateno;
    }
    public int getHit() {
        return hit;
    }
    public void setHit(int hit) {
        this.hit = hit;
    }
    public String getPoster() {
        return poster;
    }
    public void setPoster(String poster) {
        this.poster = poster;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getRegdate() {
        return regdate;
    }
    public void setRegdate(String regdate) {
        this.regdate = regdate;
    }
    public String getGrade() {
        return grade;
    }
    public void setGrade(String grade) {
        this.grade = grade;
    }
    public String getGenre() {
        return genre;
    }
    public void setGenre(String genre) {
        this.genre = genre;
    }
    public String getActor() {
        return actor;
    }
    public void setActor(String actor) {
        this.actor = actor;
    }
    public String getScore() {
        return score;
    }
    public void setScore(String score) {
        this.score = score;
    }
    public String getDirector() {
        return director;
    }
    public void setDirector(String director) {
        this.director = director;
    }
    public String getStory() {
        return story;
    }
    public void setStory(String story) {
        this.story = story;
    }
    public String getKey() {
        return key;
    }
    public void setKey(String key) {
        this.key = key;
    }
}
 
 cs

com.sist.dao

MovieDAO

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
package com.sist.dao;
 
import java.util.*;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.sist.mapper.MovieMapper;
import com.sist.vo.MovieVO;
 
@Repository
public class MovieDAO {
    @Autowired
    private MovieMapper mapper;
    public List<MovieVO> movieListData(Map map){
        return mapper.movieListData(map);
    }
    public int movieTotalPage(){
        return mapper.movieTotalPage();
    }
    public List<MovieVO> movieTop5Hit(){
        return mapper.movieTop5Hit();
    }
}
 
 cs

com.sist.mapper

MovieMapper(interface)

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
package com.sist.mapper;
import java.util.*;
 
import org.apache.ibatis.annotations.Select;
 
import com.sist.vo.MovieVO;
public interface MovieMapper {
    @Select("SELECT no,title,poster,num "
            +"FROM (SELECT no,title,poster,rownum as num "
            +"FROM (SELECT no,title,poster "
            +"FROM daum_movie)) "
            +"WHERE num BETWEEN #{start} AND #{end}")
    public List<MovieVO> movieListData(Map map);
    
    @Select("SELECT CEIL(COUNT(*)/12.0) FROM daum_movie")
    public int movieTotalPage();
    
    @Select("SELECT no,title,poster,rownum "
            +"FROM (SELECT no,title,poster "
            +"FROM daum_movie "
            +"ORDER BY hit DESC) "
            +"WHERE rownum<=5")
    public List<MovieVO> movieTop5Hit();
}
 
 cs

 

인라인뷰를 통해 상위5개 추출

1
SELECT no,title,hit,rownum FROM (SELECT no,title,hit FROM daum_movie ORDER BY hit DESC) WHERE rownum<=5;
 cs

 

Mapper => DAO => Controller

 

반응형

'Back-end > Spring' 카테고리의 다른 글

Spring 16일차 - Transaction 게시판 만들기 / 쿠키  (1) 2020.11.18
Spring 15일차 - AOP  (0) 2020.11.17
Spring 13일차 - Mybatis연동, JSON  (0) 2020.11.13
Spring 12일차 - PL/SQL Procedure 게시판 만들기  (0) 2020.11.12
Spring 11일차 - React  (0) 2020.11.11
'Back-end/Spring' Related Articles more
Comments