[Spring] Spring Tiles(스프링 타일즈) 활용 - 영화 리스트 페이지 출력하기

 예제

 

# 환경 설정

qh5944.tistory.com/105

[Spring] Spring Tiles (스프링 타일즈) 연결하고 사용해보기

 - 앞 포스팅 참고하여 web.xml / pom.xml 동일하게 해주시면 됩니다

 - Tiles 개념 또한 위에서 확인하면 됩니다 ^^

 

 

 

# MovieVO.java

package com.sist.vo;
 
public class MovieVO {
    private int no;
    private int cateno;
    private String poster;
    private String title;
    private String regdate;
    private String grade;
    private String genre;
    private String actor;
    private String score;
    private String director;
    private String story, key;
    private int hit;
    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 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;
    }
    public int getHit() {
        return hit;
    }
    public void setHit(int hit) {
        this.hit = hit;
    }
}

 

 

 

# MovieMapper.java

package com.sist.mapper;
 
import java.util.List;
import java.util.Map;
 
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();
   
}

 

 

 

# MovieDAO.java

package com.sist.dao;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.sist.mapper.MovieMapper;
import com.sist.vo.MovieVO;
 
import java.util.*;
 
@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> movieTopHot(){
        return mapper.movieTop5Hit();
    }
}

 

 

 

# MainController.java

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 java.util.*;
import com.sist.vo.*;
import com.sist.dao.*;
 
@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()>20){
              s=s.substring(0,17)+"...";
              vo.setTitle(s);
          }
      }
      int totalpage=dao.movieTotalPage();
      List<MovieVO> tList=dao.movieTopHot();
      
      
      // content.jsp
      model.addAttribute("curpage", curpage);
      model.addAttribute("totalpage", totalpage);
      model.addAttribute("mList", mList);
      model.addAttribute("tList", tList);
      return "main";
  }
}

 

 

 

# style.css

@CHARSET "UTF-8"; 
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;
    }
  }

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

Tryit Editor v3.6

 - 위 링크에서 css 가져왔습니다~

 

 

 

# application-context.xml

<?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:@211.238.142.181:1521:XE"
        p:username="hr"
        p:password="happy"
        />
    <!-- DataSource => Transaction 설정 -->
    <!-- SqlSessionFactory : MyBatis에서 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 -->
    <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>
 

 

 

 

# tiles.xml

<?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">
  </definition>
  <definition name="join" template="/WEB-INF/member/join.jsp">
  </definition>
</tiles-definitions>

 

 

 

# index.jsp

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

 

 

 

# content.jsp

<%@ 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-3">
            <div class="thumbnail">
              <a href="#">
                <img src="${vo.poster }" alt="Lights" style="width:100%">
                <div class="caption">
                  <p style="font-size:8pt">${vo.title }</p>
                </div>
              </a>
            </div>
          </div>
      </c:forEach>
      <div>
          <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>
    <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>

 

 

 

# footer.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<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>

 

 

 

# header.jsp

<%@ 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="../recommand/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>

 

 

 

# main.jsp

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

 

 

 

# Oracle daum_movie 테이블에 조회수 증가

CREATE TABLE trigger_reply(
    no NUMBER,
    mno NUMBER,
    name VARCHAR2(34),
    msg CLOB,
    regdate DATE
);
 
CREATE OR REPLACE TRIGGER movie_trigger
AFTER INSERT ON trigger_reply
FOR EACH ROW
DECLARE
BEGIN
    UPDATE daum_movie SET
    hit=hit+1
    WHERE no=:NEW.mno;
END;
/
 
UPDATE daum_movie SET
hit=10
WHERE no=1;
COMMIT;
 
SELECT * FROM daum_movie
WHERE no=1;
 
 
UPDATE daum_movie SET
hit=5
WHERE no=2;
COMMIT;
 
 
UPDATE daum_movie SET
hit=4
WHERE no=7;
COMMIT;
 
 
UPDATE daum_movie SET
hit=2
WHERE no=10;
COMMIT;
 

 

 

 

 

 

 

 

#출력 화면

노트북이 13인치라 답답한 감이 없지않아 있네요