다연이네

[days04] accordion, tabs, select로 선택한 부서의 사원 정보 출력 본문

JSP

[days04] accordion, tabs, select로 선택한 부서의 사원 정보 출력

　다연　 2020. 12. 28. 18:49
반응형

 

re01.jsp -> Review01.java(서블릿) 포워딩 -> te00.jsp

 

re01.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
<a href="/jspPro/review.html">review01.html</a><br>
<a href="/jspPro/re01/te01.jsp">/jspPro/re01/te01.jsp</a><br>
</body>
</html>

Review01.java

package days04;

import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.LinkedHashMap;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.util.DBConn;

import days03.DeptDTO;
import days03.EmpDTO;

/**
 * Servlet implementation class Review01
 */
@WebServlet("/review.html")
public class Review01 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Review01() {
        super();
        
       
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String sql = 
				"select d.*,(select count(*) from emp where deptno = d.deptno)cnt "
					+" from dept d ";
	
	Connection con = null;
	Statement stmt = null, stmtEmp=null;
	ResultSet rs = null, rsEmp=null;
	
	
	ArrayList<EmpDTO> listEmp = null;
	LinkedHashMap<DeptDTO, 	ArrayList<EmpDTO>> ht = new LinkedHashMap<>();
	
	DeptDTO dto = null;
	EmpDTO dtoEmp = null;
	
	int deptno;
	String dname, loc;
	int cnt;
	
	
	
	con = DBConn.getConnection(); 
	
	try {
		stmt = con.createStatement();
		rs = stmt.executeQuery(sql); 
		
		String sqlEmp = null; 
		
		if(rs.next()) {
			
			do {
				
				deptno =rs.getInt("deptno"); //"컬럼명"
				dname= rs.getString("dname");
				loc =rs.getString("loc");
				cnt = rs.getInt("cnt"); //alias를 cnt로 줬으니까
				
				dto = new DeptDTO(deptno, dname, loc);
				dto.setCnt(cnt);
				
				
				sqlEmp = "select rank() over(Order by sal DESC) no ,empno, ename, sal "
								+	" from emp  " 
								+ " where deptno= "+deptno +"ORDER BY DEPTNO ASC";
				
				stmtEmp = con.createStatement();
				rsEmp = stmtEmp.executeQuery(sqlEmp);
				
				listEmp = new ArrayList<EmpDTO>(); 
				
				if(rsEmp.next()) {
					//listEmp = new ArrayList<EmpDTO>();
					
					do {
						int no = rsEmp.getInt("no");
						int empno = rsEmp.getInt("empno");
						String ename = rsEmp.getString("ename");
						double sal = rsEmp.getDouble("sal");
						
						dtoEmp = new EmpDTO();
						dtoEmp.setNo(no);
						dtoEmp.setEmpno(empno);
						dtoEmp.setEname(ename);
						dtoEmp.setSal(sal);
						
						listEmp.add(dtoEmp);
						
					}while(rsEmp.next());
					
				}
				ht.put(dto, listEmp); 
				//부서정보(key) - 어레이리스트(value) 들어감
				
				stmtEmp.close();
				rsEmp.close();
				
			}while(rs.next());
		}
		
	} catch (SQLException e) {
		e.printStackTrace();
	}finally {
	
			try {
				rs.close();
				stmt.close();
				DBConn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		
	}
		
		request.setAttribute("ht", ht);
		String path = "/re01/te00.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(path);
		dispatcher.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

te00.jsp

 

 1. accordion 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
	href="https://jqueryui.com/ui/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$(document).ready(function() {
		$("#accordion").accordion({
			collapsible : true
		});
		
	});
</script>
<style>
#accordion {
	width: 60%;
}


</style>
</head>
<body>
	<h3>Accordian</h3>
	<div id="accordion">
	  <c:forEach items="${ht}" var="entry">
	   <h3>${entry.key }</h3>
	   <div>
		<c:set value="${entry.value }" var="list"></c:set>
		  <c:choose>
			<c:when test="${list eq null }">
			  <li>no exist</li>
			</c:when>
			<c:otherwise>
			  <c:forEach items="${list}" var="dto">
				<li>${dto.no }-${dto.empno }/${dto.ename }/${dto.sal }</li>
			  </c:forEach>
			</c:otherwise>
		</c:choose>
	 </div>
	</c:forEach>
</div>
	
</body>
</html>

<c:when test="${ list eq null }">  : no exist 안출력

<c:when test="${empty list }">    : no exist 출력

 

 2. tabs 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
	href="https://jqueryui.com/ui/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$(document).ready(function() {
		$("#tabs").tabs();
	});
</script>
<style>
#accordion {
	width: 60%;
}


</style>
</head>
<body>
	<h3>tabs</h3>
	<!-- https://jqueryui.com/tabs/ -->
	<div id="tabs">
	  <ul>
		<c:forEach items="${ ht }" var="entry" varStatus="status">
		 <c:set value="${ entry.key }" var="deptDto"></c:set>
		   <li><a href="#tabs-${ status.count }">${ deptDto.dname }(${ deptDto.deptno })</a></li>
		</c:forEach>
	 </ul>
	 <c:forEach items="${ ht }" var="entry" varStatus="status">
		<div id="tabs-${ status.count }">
		  <c:set value="${ entry.value }" var="list"></c:set>
		  <c:choose>
		    <c:when test="${ list eq null  }">
			 <li>no exist</li>
			</c:when>
			<c:otherwise>
			  <c:forEach items="${ list }" var="dto">
				<li>${ dto.no }-${ dto.empno }/${ dto.ename }/${ dto.sal }</li>
			  </c:forEach>
			  </c:otherwise>
		  </c:choose>
			</div>
		</c:forEach>
	</div>
</body>
</html>

 

 3. select 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
	href="https://jqueryui.com/ui/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$(document).ready(function() {
		$("#employees").selectmenu({
			change:function(event, data){
				alert( data.item.value );
			}
		});
	});
</script>
<style>
fieldset {
	border: 0;
}

label {
	display: block;
	margin: 30px 0 0 0;
}

.overflow {
	height: 200px;
}
</style>
</head>
<body>
<form action="#">
 <fieldset>
  <label for="employees"><h3>Select a Employee</h3></label>
   <select name="employees"	id="employees">
	<c:forEach items="${ ht }" var="entry">
	 <optgroup label="${ entry.key.dname }">
	  <c:set value="${ entry.value }" var="list"></c:set>
	  <c:choose>
		<c:when test="${ list eq null  }">
		 <option value="">no exist</option>
		</c:when>
		<c:otherwise>
		  <c:forEach items="${ list }" var="dto">
			<option value="${ dto.empno }">${ dto.ename }</option>
		  </c:forEach>
		</c:otherwise>
	  </c:choose>					 
	 </optgroup>
	</c:forEach> 
   </select>
  </fieldset>
 </form>
</body>
</html>

 

반응형
저작자표시 비영리

'JSP' 카테고리의 다른 글

[days04] 출력 버퍼, 배포  (0) 2020.12.28
[days04] 해당 사원 정보 테이블로 출력, 버튼 클릭시 사원번호 넘기기  (0) 2020.12.28
[days03] DB연결 (알집부터) (DBConn, DeptDTO, EmpDTO)  (0) 2020.12.24
[days03] 리다이렉트 + 포워딩 + 서블릿 복습 / 히든(hidden)  (0) 2020.12.24
[days02] 리다이렉트(redirect)와 포워딩(forward)의 차이점  (0) 2020.12.23
'JSP' Related Articles more
Comments