[Spring] MyBatis와 연동하여 음악 게시판 만들기

 

 개념

 

현재 프로젝트의 MVC 처리 순서 입니다.

 

 

 

 

 예제

 

 

# Oracle에서 기존에 만들어놓은 genie_music 테이블에 hit 컬럼을 추가

-- 댓글 => 댓글 추가시마다 => hit 증가
ALTER TABLE genie_music ADD hit NUMBER DEFAULT 0;

 

 

 

# STS 환경 설정

[Properties] - [Java Compiler] →  1.8 버전
[Properties] - [Project Facets] → Java 1.8 버전

 

 

 

# pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.sist</groupId>
    <artifactId>web</artifactId>
    <name>SpringMyBatisProject</name>
    <packaging>war</packaging>
    <version>1.0.0-BUILD-SNAPSHOT</version>
    <properties>
       <!-- Spring 5 -->
        <java-version>1.8</java-version>
        <org.springframework-version>5.1.5.RELEASE</org.springframework-version>
        <org.aspectj-version>1.6.10</org.aspectj-version>
        <org.slf4j-version>1.6.6</org.slf4j-version>
    </properties>
    <repositories>
       <repository>
            <id>mesir-repo</id>
            <url>http://mesir.googlecode.com/svn/trunk/mavenrepo</url>
        </repository>
    </repositories>
    <dependencies>
        <!-- Spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${org.springframework-version}</version>
            <exclusions>
                <!-- Exclude Commons Logging in favor of SLF4j -->
                <exclusion>
                    <groupId>commons-logging</groupId>
                    <artifactId>commons-logging</artifactId>
                 </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${org.springframework-version}</version>
        </dependency>
        <!-- Jsoup -->
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.12.1</version>
        </dependency>    
        <!-- JSON -->
        <dependency>
            <groupId>com.googlecode.json-simple</groupId>
            <artifactId>json-simple</artifactId>
            <version>1.1.1</version>
        </dependency>
        <!-- JAXB -->
        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.3.1</version>
        </dependency>
        <!-- AspectJ -->
        <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-context-support</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.1.5.RELEASE</version>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
            <scope>provided</scope>
        </dependency>
      <!-- websocket -->
      <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>5.1.5.RELEASE</version>
        </dependency>
      
      <!-- <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-expression</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency> -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-jdbc</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-instrument</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-aspects</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <!-- <dependency>
         <groupId>com.oracle</groupId>
         <artifactId>ojdbc14</artifactId>
         <version>10.2.0.4.0</version>
      </dependency> -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-jms</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-orm</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-oxm</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-test</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency>
      <!-- <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-webmvc-portlet</artifactId>
         <version>5.1.5.RELEASE</version>
      </dependency> -->
      
      <dependency>
         <groupId>taglibs</groupId>
         <artifactId>standard</artifactId>
         <version>1.1.2</version>
      </dependency>
 
      <dependency>
         <groupId>org.nuiton.thirdparty</groupId>
         <artifactId>Rserve</artifactId>
         <version>1.7-3</version>
      </dependency>
      <dependency>
         <groupId>org.nuiton.thirdparty</groupId>
         <artifactId>REngine</artifactId>
         <version>1.7-3</version>
      </dependency>
      <!-- 
         @Select("<script>SELECT~~ <if test="">")
       -->
      <dependency>
         <groupId>org.mybatis</groupId>
         <artifactId>mybatis</artifactId>
         <version>3.2.8</version>
      </dependency>
      <dependency>
         <groupId>org.mybatis</groupId>
         <artifactId>mybatis-spring</artifactId>
         <version>1.2.0</version>
      </dependency>
      <dependency>
         <groupId>org.mongodb</groupId>
         <artifactId>mongo-java-driver</artifactId>
         <version>2.13.0-rc1</version>
      </dependency>
      <dependency>
         <groupId>org.nuiton.thirdparty</groupId>
         <artifactId>JRI</artifactId>
         <version>0.9-6</version>
      </dependency>
      <dependency>
         <groupId>com.github.lucarosellini.rJava</groupId>
         <artifactId>JRIEngine</artifactId>
         <version>0.9-7</version>
      </dependency>
      <dependency>
         <groupId>aopalliance</groupId>
         <artifactId>aopalliance</artifactId>
         <version>1.0</version>
      </dependency>
      <dependency>
         <groupId>asm</groupId>
         <artifactId>asm</artifactId>
         <version>3.3.1</version>
      </dependency>
      <dependency>
         <groupId>c3p0</groupId>
         <artifactId>c3p0</artifactId>
         <version>0.9.1.2</version>
      </dependency>
      <dependency>
         <groupId>cglib</groupId>
         <artifactId>cglib</artifactId>
         <version>3.1</version>
      </dependency>
      <dependency>
         <groupId>cglib</groupId>
         <artifactId>cglib-nodep</artifactId>
         <version>3.1</version>
      </dependency>
      <dependency>
         <groupId>commons-collections</groupId>
         <artifactId>commons-collections</artifactId>
         <version>3.2.1</version>
      </dependency>
      <dependency>
         <groupId>commons-dbcp</groupId>
         <artifactId>commons-dbcp</artifactId>
         <version>1.4</version>
      </dependency>
      <dependency>
         <groupId>commons-fileupload</groupId>
         <artifactId>commons-fileupload</artifactId>
         <version>1.3.1</version>
      </dependency>
      <dependency>
         <groupId>commons-io</groupId>
         <artifactId>commons-io</artifactId>
         <version>2.4</version>
      </dependency>
      <dependency>
         <groupId>commons-logging</groupId>
         <artifactId>commons-logging</artifactId>
         <version>1.2</version>
      </dependency>
      <dependency>
         <groupId>commons-pool</groupId>
         <artifactId>commons-pool</artifactId>
         <version>1.6</version>
      </dependency>
      <dependency>
         <groupId>org.javassist</groupId>
         <artifactId>javassist</artifactId>
         <version>3.18.2-GA</version>
      </dependency>
      
      <dependency>
         <groupId>org.nuiton.thirdparty</groupId>
         <artifactId>Rserve</artifactId>
         <version>1.7-3</version>
      </dependency>
      <dependency>
         <groupId>org.nuiton.thirdparty</groupId>
         <artifactId>REngine</artifactId>
         <version>1.7-3</version>
      </dependency>
      <dependency>
            <groupId>org.twitter4j</groupId>
            <artifactId>twitter4j-core</artifactId>
            <version>4.0.2</version>
        </dependency>
        <dependency>
            <groupId>org.twitter4j</groupId>
            <artifactId>twitter4j-stream</artifactId>
            <version>4.0.2</version>
        </dependency>
        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>1.1.0.Final</version>
        </dependency>
       <!--  <dependency>
            <groupId>com.oracle</groupId>
            <artifactId>ojdbc14</artifactId>
            <version>10.2.0.4.0</version>
        </dependency> -->
         <dependency>
            <groupId>com.oracle</groupId>
            <artifactId>ojdbc14</artifactId>
            <version>10.2.0.4.0</version>
            <scope>system</scope>
            <systemPath>${project.basedir}/src/main/webapp/WEB-INF/lib/ojdbc14.jar</systemPath>
        </dependency>
        <!-- End -->    
        <!-- AspectJ -->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjrt</artifactId>
            <version>${org.aspectj-version}</version>
        </dependency>    
         <!-- AOP -->
      <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.6.5</version>
        </dependency>
      <!-- AOP -->
      <dependency>
         <groupId>aopalliance</groupId>
         <artifactId>aopalliance</artifactId>
         <version>1.0</version>
      </dependency>
      <!-- AOP -->
      <dependency>
        <groupId>asm</groupId>
        <artifactId>asm</artifactId>
        <version>3.1</version>
    </dependency>
        <!-- tiles  -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-core</artifactId>
            <version>2.2.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-jsp</artifactId>
            <version>2.2.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-api</artifactId>
            <version>2.2.2</version>
        </dependency>
        
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>2.2.2</version>
        </dependency>
        
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.9.2</version>
        </dependency>
        
        <dependency>
            <groupId>commons-digester</groupId>
            <artifactId>commons-digester</artifactId>
            <version>2.1</version>
        </dependency>
        
        <dependency>
            <groupId>org.antlr</groupId>
            <artifactId>antlr-runtime</artifactId>
            <version>3.5.2</version>
        </dependency>
        <!-- XML -->
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-core</artifactId>
            <version>2.2.11</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-impl</artifactId>
            <version>2.2.11</version>
        </dependency>
 
        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.2.11</version>
        </dependency>
        
        <!-- 
           jaxb-core
           jaxb-impl
           jaxb-api
           
           json-simple
           commons-lang
           ezmorph
         -->
        <!-- JSON -->
        <dependency>
            <groupId>com.googlecode.json-simple</groupId>
            <artifactId>json-simple</artifactId>
            <version>1.1.1</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>
        <dependency>
            <groupId>net.sf.ezmorph</groupId>
            <artifactId>ezmorph</artifactId>
            <version>1.0.6</version>
        </dependency>
        
        <!-- Logging -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>${org.slf4j-version}</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jcl-over-slf4j</artifactId>
            <version>${org.slf4j-version}</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>${org.slf4j-version}</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.15</version>
            <exclusions>
                <exclusion>
                    <groupId>javax.mail</groupId>
                    <artifactId>mail</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>javax.jms</groupId>
                    <artifactId>jms</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>com.sun.jdmk</groupId>
                    <artifactId>jmxtools</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>com.sun.jmx</groupId>
                    <artifactId>jmxri</artifactId>
                </exclusion>
            </exclusions>
            <scope>runtime</scope>
        </dependency>
 
        <!-- @Inject -->
        <dependency>
            <groupId>javax.inject</groupId>
            <artifactId>javax.inject</artifactId>
            <version>1</version>
        </dependency>
                
        <!-- Servlet -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    
        <!-- Test -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.7</version>
            <scope>test</scope>
        </dependency>  
              
    </dependencies>
 
    <build>
        <plugins>
            <plugin>
                <artifactId>maven-eclipse-plugin</artifactId>
                <version>2.9</version>
                <configuration>
                    <additionalProjectnatures>
                        <projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
                    </additionalProjectnatures>
                    <additionalBuildcommands>
                        <buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
                    </additionalBuildcommands>
                    <downloadSources>true</downloadSources>
                    <downloadJavadocs>true</downloadJavadocs>
                </configuration>
            </plugin>
            <plugin>
                <!-- Spring 5 -->
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.7.0</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <compilerArgument>-Xlint:all</compilerArgument>
                    <showWarnings>true</showWarnings>
                    <showDeprecation>true</showDeprecation>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <configuration>
                    <mainClass>org.test.int1.Main</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>
    

 

 

 

# MusicVO.java

package com.sist.dao;
 
public class MusicVO {
    private int mno;
    private String title;
    private String singer;
    private String poster;
    private String album;
    private String state;
    private int idcrement;
    private String key;
    private int hit;
    
    public int getHit() {
        return hit;
    }
    public void setHit(int hit) {
        this.hit = hit;
    }
    public int getMno() {
        return mno;
    }
    public void setMno(int mno) {
        this.mno = mno;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getSinger() {
        return singer;
    }
    public void setSinger(String singer) {
        this.singer = singer;
    }
    public String getPoster() {
        return poster;
    }
    public void setPoster(String poster) {
        this.poster = poster;
    }
    public String getAlbum() {
        return album;
    }
    public void setAlbum(String album) {
        this.album = album;
    }
    public String getState() {
        return state;
    }
    public void setState(String state) {
        this.state = state;
    }
    public int getIdcrement() {
        return idcrement;
    }
    public void setIdcrement(int idcrement) {
        this.idcrement = idcrement;
    }
    public String getKey() {
        return key;
    }
    public void setKey(String key) {
        this.key = key;
    }
       
}

 

 

 

# MusicMapper.java

package com.sist.dao;
 
import org.apache.ibatis.annotations.Select;
import java.util.*;
public interface MusicMapper {
 
   @Select("SELECT mno,title,singer,poster,album,state,idcrement,key,num "
          +"FROM (SELECT mno,title,singer,poster,album,state,idcrement,key,rownum as num "
          +"FROM (SELECT mno,title,singer,poster,album,state,idcrement,key "
          +"FROM genie_music ORDER BY mno ASC ))"
          +"WHERE num BETWEEN #{start} AND #{end}")   
   public List<MusicVO> musicListData(Map map);
 
   @Select("SELECT * FROM genie_music "
          +"WHERE mno=#{mno}")
   public MusicVO musicDetailData(int mno);
 
   @Select("SELECT CEIL(COUNT(*)/10.0) FROM genie_music")
   public int musicTotalPage();
}

  - @Select 어노테이션을 사용함으로써 이전에 귀찮았던 MyBatis코드가 훨씬 간결해진걸 볼 수 있습니다.

  - @Select 어노테이션 자세한 곳 : examples.javacodegeeks.com/enterprise-java/mybatis/how-use-select-mybatis-annotation/

 

 

 

# MusicDAO.java

package com.sist.dao;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.*;
 
@Repository
public class MusicDAO {
    @Autowired
    private MusicMapper mapper;
    public List<MusicVO> musicListData(Map map)
    {
        return mapper.musicListData(map);
    }
    public MusicVO musicDetailData(int mno)
    {
        return mapper.musicDetailData(mno);
    }
    public int musicTotalPage()
    {
        return mapper.musicTotalPage();
    }
} 

  - 어노테이션을 사용하여 이전보다 DAO코드도 훨씬 간결하다.

 

 

 

# MusicController.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.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
 
import java.util.*;
import com.sist.dao.*;
 
@Controller
public class MusicController {
   @Autowired
   private MusicDAO dao;
   // GET , POST (form,ajax)
   @GetMapping("music/list.do")
   public String music_list(String page,Model model)
   {
       if(page==null)
           page="1";
       int curpage=Integer.parseInt(page);
       Map map=new HashMap();
       int rowSize=10;
       int start=(rowSize*curpage)-(rowSize-1);
       int end=rowSize*curpage;
       map.put("start", start);
       map.put("end", end);
       List<MusicVO> list=dao.musicListData(map);
       int totalpage=dao.musicTotalPage();
       // 전송 
       model.addAttribute("list", list);
       model.addAttribute("curpage", curpage);
       model.addAttribute("totalpage", totalpage);
       return "music/list";//ViewResolver prefix="/"리턴값Suffix=".jsp"
   }
   @RequestMapping("movie2/main.do")
   public String movie2_main()
   {
       return "movie2/main";
   }
}

 

 

 

# MusicRestController

package com.sist.web;
 
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
@CrossOrigin("http://localhost")
public class MusicRestController {
   @RequestMapping("movie2/movie_data.do")
   public String movie2_main(String no)
   {
       String result="";
       String url="http://www.kobis.or.kr/kobis/business/main/";
       if(no==null)
           no="1";
       int type=Integer.parseInt(no);
       switch(type)
       {
       case 1:
           url+="searchMainDailyBoxOffice.do";
           break;
       case 2:
           url+="searchMainRealTicket.do";
           break;
       case 3:
           url+="searchMainDailySeatTicket.do";
           break;
       case 4:
           url+="searchMainOnlineDailyBoxOffice.do";
           break;
       }
       
       try
       {
           Document doc=Jsoup.connect(url).get();
           //System.out.println(doc.toString());
           String temp=doc.toString();
           temp=temp.substring(temp.indexOf("["),temp.lastIndexOf("]")+1);
           
           result+=temp;
           System.out.println(result);
           result=result.replace("<", "");
           result=result.replace(">", "");
           result=result.replace("\r", "");
           result=result.replace("\n", "");
       }catch(Exception ex){}
       return result;
   }
}

 

 

 

# list.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>
<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:900px;
}
</style>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    //$( "#dialog" ).dialog();
    $('.btns').click(function(){
        let title=$(this).attr("value");
        let key=$(this).attr("key");
        let site="http://youtube.com/embed/"+key
        //$('#dialog').attr("title",title);
        $('#movie').attr("src",site);
        $("#dialog").dialog({ 
             autoOpen: true, 
             width: 430, 
             height:350,
             modal: true,
             title:title
        });
    
      });
  });
  </script>
</head>
<body>
  <div class="container">
    <div class="row">
      <h3 class="text-center">뮤직 Top200</h3>
      <table class="table table-striped">
        <tr class="info">
          <th class=text-center>순위</th>
          <th class=text-center></th>
          <th class=text-center></th>
          <th class=text-center>곡명</th>
          <th class=text-center>가수명</th>
          <th class="text-center"></th>
        </tr>
        <c:forEach var="vo" items="${list }">
          <tr>
            <td class="text-center">${vo.mno }</td>
            <td class="text-center">
              <c:if test="${vo.state=='상승' }">
                <font color="blue">▲</font>&nbsp;${vo.idcrement}
              </c:if>
              <c:if test="${vo.state=='하강' }">
                <font color="red">▼</font>&nbsp;${vo.idcrement}
              </c:if>
              <c:if test="${vo.state=='유지' }">
                <font color="gray">-</font>
              </c:if>
            </td>
            <td class="text-center"><img src="${vo.poster }" width=35 height=35></td>
            <td class="text-center">${vo.title }</td>
            <td class="text-center">${vo.singer }</td>
            <td class="text-center">
              <span class="btn btn-sm btn-primary btns" value="${vo.title }" key="${vo.key }">실행</span>
            </td>
          </tr>
        </c:forEach>
      </table>
    </div>
    <div class="row">
      <div class="text-center">
        <a href="list.do?page=${curpage>1?curpage-1:curpage }" class="btn btn-sm btn-success">이전</a>
          ${curpage } page / ${totalpage } pages
        <a href="list.do?page=${curpage<totalpage?curpage+1:curpage }" class="btn btn-sm btn-warning">다음</a>
      </div>
    </div>
    <div id="dialog" title="" style="display:none">
     <iframe id="movie" src="" width="370" height="280"></iframe>
    </div>
  </div>
</body>
</html>

 - jqueryui.com/ 사이트에서 코드 참고하여 작성하였습니다.

 

 

 

 

메인 출력 화면

 

 

 

[실행] 버튼 누르면 다음 창이 뜨면서 동영상 시청이 가능합니다.