[Day52][Bootstrap] Carousel

-- New - Dinamic Web Project(MyMVC) - Default output folder(build\WEB-INF\classes) - Generate web.xml deployment descriptor 체크하고 생성

 

-- 싱글톤 패턴의 기법을 사용하면 많은 사용자들이 동시에 접속할 경우 과부하가 걸린다. 따라서 싱글톤 패턴 기법보다 Connection을 여러 개 만드는 Connection Pooling 기법을 사용한다.

 

-- http://tomcat.apache.org/tomcat-8.5-doc/jndi-datasource-examples-howto.html#Oracle_8i,_9i_&_10g

Apache Tomcat 8 (8.5.47) - JNDI Datasource How-To

-- 위의 링크를 참고하여 환경을 설정한다.

 

<Resource name="jdbc/myoracle" auth="Container"
type="javax.sql.DataSource" driverClassName="oracle.jdbc.OracleDriver"
url="jdbc:oracle:thin:@127.0.0.1:1521:mysid"
username="scott" password="tiger" maxTotal="20" maxIdle="10"
maxWaitMillis="-1"/>

-- ip는 자신의 주소로 설정되어 있는데, 만약 DB가 다른 컴퓨터에 있을 경우 ip 설정을 다시 해 주어야 한다.

-- SID, username, password는 자신이 oracle에서 설정한 값으로 변경해 주어야 한다.

 

-- BS Carousel : 일정 시간 지나면 화면 넘기기

-- BS Modal : 팝업 띄우기

 

---

-- MyMVC - new Folder(SQL) - new File(MyMVC.sql) 생성

 

(Oracle) MyMVC.sql

create table bootstrap_image
(imgno      number not null
,imgfilename    varchar2(100) not null
,constraint PK_bootstrap_image primary key(imgno)
);

create sequence seq_bootstrap_image
start with 1
increment by 1
nomaxvalue
nominvalue
nocycle
nocache;

insert into bootstrap_image(imgno, imgfilename) values(seq_bootstrap_image.nextval, '미샤.png');
insert into bootstrap_image(imgno, imgfilename) values(seq_bootstrap_image.nextval, '원더플레이스.png');
insert into bootstrap_image(imgno, imgfilename) values(seq_bootstrap_image.nextval, '레노보.png');
insert into bootstrap_image(imgno, imgfilename) values(seq_bootstrap_image.nextval, '동원.png');

commit;

select imgno, imgfilename
from bootstrap_image
order by imgno asc;

 

-- MyMVC - new Folder(images) 생성

-- 파일명에 맞는 images 폴더 안에 이미지 넣기

 

-- MyMVC - Java Resources - New Package(test.bootstrap.controller, test.bootstrap.model) 생성

-- Package(test.bootstrap.model)에 Class(ImageVO) 생성

 

test.bootstrap.model ImageVO.java

private int imgno;
	private String imgfilename;
	
	public int getImgno() {
		return imgno;
	}
	public void setImgno(int imgno) {
		this.imgno = imgno;
	}
	
	public String getImgfilename() {
		return imgfilename;
	}
	public void setImgfilename(String imgfilename) {
		this.imgfilename = imgfilename;
	}

 

-- Package(test.bootstrap.model)에 Interface(InterImageDAO) 생성

 

test.bootstrap.model InterImageDAO.java

List<ImageVO> selectAll() throws SQLException;

 

-- Package(test.bootstrap.model)에 Class(ImageDAO) 생성

 

test.bootstrap.model ImageDAO.java

private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	private DataSource ds;
	
	public ImageDAO() {
		try {
			Context initContext = new InitialContext();
			Context envContext  = (Context)initContext.lookup("java:/comp/env");
			ds = (DataSource)envContext.lookup("jdbc/myoracle");
		} catch (NamingException e) {
			e.printStackTrace();
		} 
	}
	
	public void close() {
		try {
			
			if(rs != null) {
				rs.close();
				rs = null;
			}
			
			if(pstmt != null) {
				pstmt.close();
				pstmt = null;
			}
			
			if(conn != null) {
				conn.close();
				conn = null;
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
	
	
	@Override
	public List<ImageVO> selectAll() 
			throws SQLException {
		
		List<ImageVO> imgList = null;
		
		try {
			conn = ds.getConnection();
			
			String sql = "select imgno, imgfilename\n"+
						 "from bootstrap_image\n"+
						 "order by imgno asc";
			
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			
			int cnt = 0;
			while(rs.next()) {
				cnt++;
				
				if(cnt == 1) {
					imgList = new ArrayList<ImageVO>();
				}
				
				ImageVO imgvo = new ImageVO();
				
				imgvo.setImgno(rs.getInt("IMGNO"));
				imgvo.setImgfilename(rs.getString("IMGFILENAME"));
					
				imgList.add(imgvo);
			}
			
		} finally {
			close();
		}
		
		return imgList;
	}

 

-- Package(test.bootstrap.controller)에 Sevlet(ImageCtrl) 생성

 

test.bootstrap.controller ImageCtrl.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		excute(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		excute(request, response);
	}


	private void excute(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		
		InterImageDAO dao = new ImageDAO();
		
		try {
			List<ImageVO> imgList = dao.selectAll();
			
			request.setAttribute("imgList", imgList);
			
			RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/bootstrapTest/imgFile.jsp");
			dispatcher.forward(request, response);

		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

 

---

 

bootstrapTest imgFile.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
    
<%
	String cxtPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
	<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:50%;">
  
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    	<c:forEach var="imgVO" items = "${imgList}" varStatus="status">
    		<c:if test="${status.index == 0}">
    			<div class="item active" >
        		<img src="<%= cxtPath%>/images/${imgVO.imgfilename}" style="width:100%;">
      			</div>
      		</c:if>	
      		
      		<c:if test="${status.index > 0}">
    			<div class="item">
        		<img src="<%= cxtPath%>/images/${imgVO.imgfilename}" style="width:100%;">
      			</div>
      		</c:if>	
    	</c:forEach>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
	
</body>
</html>