Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- 오라클
- abstract
- 메소드오버로딩
- 정수형타입
- 인터페이스
- 제네릭
- cursor문
- 어윈 사용법
- NestedFor
- EnhancedFor
- 참조형변수
- 한국건설관리시스템
- 객체 비교
- 집합_SET
- 생성자오버로드
- 컬렉션프레임워크
- 다형성
- GRANT VIEW
- exception
- 자바
- 컬렉션 타입
- 대덕인재개발원
- 환경설정
- 예외처리
- 사용자예외클래스생성
- 자동차수리시스템
- 추상메서드
- 예외미루기
- Java
- oracle
Archives
- Today
- Total
거니의 velog
(3) 회원 조회 페이지 본문
[empListView.jsp]
<%@page import="kr.or.ddit.vo.EmployeeVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
EmployeeVO loginSession = (EmployeeVO) session.getAttribute("loginSession");
System.out.println("loginSession : " + loginSession.toString());
List<EmployeeVO> empList = (List<EmployeeVO>) request.getAttribute("empList");
System.out.println("화면단 empList : " + empList.toString());
%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="four guys" />
<meta name="copyright" content="대덕인재개발원_306호" />
<meta name="description" content="전사적 자원 관리 시스템, ERP 입니다." />
<meta name="keywords" content="StockERP, Stock, ERP, 전사적자원관리시스템" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>StockERP 사원정보 리스트</title>
<link href="<%= request.getContextPath() %>/css/common.css" rel="stylesheet" />
<link href="<%= request.getContextPath() %>/images/favicon.ico" rel="shortcut icon" />
<script src="<%= request.getContextPath() %>/js/jquery-3.7.1.min.js"></script>
<script defer src="<%= request.getContextPath() %>/js/script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(function(){
// 사원 이미지 종횡비
var mainEmpBox = $(".empWel>div:first-of-type");
var mainEmpImg = $(".empWel img")
$.ratioBoxH(mainEmpBox, mainEmpImg);
// 이미지가 변경될 때 실행
$(mainEmpImg).on("load", function() {
// 이미지가 로드될 때마다 함수 실행
$.ratioBoxH(mainEmpBox, mainEmpImg);
});
// mainIcon 클릭 이벤트
var slideMenuClickToken = 0; // 처음에는 서브 메뉴가 숨겨진 상태
var slideMenuIdx = 0;
$(".slideMenu").click(function(){
var thisIs = $(this);
slideMenuIdx = thisIs.index();
var subNav = thisIs.parents("#mainPageContainerBox").find(".subNav");
subNav.stop().animate({
"left" : "-140px"
}, 200);
if(slideMenuClickToken == 0){ // 서브 메뉴가 숨겨진 상태
subNav.eq(slideMenuIdx-3).stop().animate({
"left" : "60px"
}, 200, function(){
slideMenuClickToken = 1; // 서브 메뉴가 보여진다고 표시
});
}else if(slideMenuClickToken == 1){ // 서브 메뉴가 보여진 상태
subNav.eq(slideMenuIdx-3).stop().animate({
"left" : "-140px"
}, 200, function(){
slideMenuClickToken = 0; // 서브 메뉴가 안보여진다고 표시
});
}
console.log("slideMenuClickToken : " + slideMenuClickToken);
console.log("slideMenuIdx : " + slideMenuIdx);
});
$(".mainIcon:first-of-type").click(function(){
location.href = "<%= request.getContextPath() %>/main/mainPage.jsp";
});
$("#logoutBtn").click(function(){
location.href = "<%= request.getContextPath() %>/LogoutServlet.do";
});
$(".empAdd").click(function(){
location.href = "<%= request.getContextPath() %>/main/empRegister.jsp";
});
// 사원 리스트 페이지 추가 스크립트
// 슬라이드 기능
function slickSlideHeight(){
var slickSlideH = $(".slickSlide").height();
//console.log("slickSlideH : " + slickSlideH);
$(".slideEl").height(slickSlideH);
}
slickSlideHeight();
$(window).resize(function(){
slickSlideHeight();
});
$(".slickSlide").slick({
prevArrow: "<button type='button' class='slick-prev'><</button>",
nextArrow: "<button type='button' class='slick-next'>></button>",
dots: true,
infinite: true,
speed: 500
});
$(".empList li[role=presentation] button").text("");
// 멀티 이미지 종횡비 맞추기
$(".empCard").each(function(i, v) {
var thisIs = $(this);
var multiEmpListBox = thisIs.find(".cardLeft>div"); // 이미지를 감싸는 요소
var multiEmpListImg = thisIs.find(".cardLeft>div>img"); // 이미지 자체
var img = new Image();
img.src = multiEmpListImg.attr('src');
img.onload = function() {
var imgW = img.width;
var imgH = img.height;
var imgRatio = imgH / imgW;
var listBoxW = multiEmpListBox.width();
var listBoxH = multiEmpListBox.height();
var listBoxRatio = 1; // 박스의 종횡비를 1로 유지하여 정사각형으로 만듭니다.
if (imgRatio < listBoxRatio) {
// 이미지의 종횡비가 더 작으므로 이미지를 가득 채우고 높이를 조정
multiEmpListImg.height(listBoxH);
multiEmpListImg.width("auto");
} else {
// 박스의 종횡비가 더 작으므로 이미지를 가득 채우고 너비를 조정
multiEmpListImg.width(listBoxW);
multiEmpListImg.height("auto");
}
// 이미지와 박스를 원 모양으로 자르기 위한 CSS 속성 설정
multiEmpListImg.css({
"border-radius": "50%",
"clip-path": "circle(50% at 50% 50%)"
});
multiEmpListBox.css({
"border-radius": "50%",
"overflow": "hidden"
});
};
});
// 사원 카드를 클릭했을 때 사원 모달창 띄우기
$(".empCard>div").click(function(){
var thisIs = $(this);
var empno = thisIs.find("#getEmpno").val();
var empname = thisIs.find("#getEmpname").val();
var empemail = thisIs.find("#getEmpemail").val();
var empjob = thisIs.find("#getEmpjob").val();
var empjobTxt = "";
switch(empjob){
case "10" :
empjobTxt = "인사팀";
break;
case "20" :
empjobTxt = "개발팀";
break;
case "30" :
empjobTxt = "사업관리팀";
break;
default :
empjobTxt = "잘못된 부서 기입";
}
var emppos = thisIs.find("#getEmppos").val();
var empposTxt = "";
switch(emppos){
case "10" :
empposTxt = "사원";
break;
case "20" :
empposTxt = "대리";
break;
case "30" :
empposTxt = "과장";
break;
case "40" :
empposTxt = "차장";
break;
case "50" :
empposTxt = "부장";
break;
case "60" :
empposTxt = "임원";
break;
default:
empposTxt = "잘못된 직급 기입";
}
var emphp = thisIs.find("#getEmphp").val();
var empphoto = thisIs.find("#getEmpphoto").val();
var emppercol = thisIs.find("#getEmppercol").val();
$("#empCardModal").fadeIn();
$("#empCardModal .empPrevCont").animate({
"marginTop" : "0px",
"opacity" : "1"
}, 400, "linear");
var findEmpPreAuto = $(".empPreview").find(".empPreAuto");
findEmpPreAuto.eq(0).find("span").eq(1).text("");
findEmpPreAuto.eq(0).find("span").eq(1).text(empno);
findEmpPreAuto.eq(1).find("span").eq(1).text("");
findEmpPreAuto.eq(1).find("span").eq(1).text(empname);
findEmpPreAuto.eq(2).find("span").eq(1).text("");
findEmpPreAuto.eq(2).find("span").eq(1).text(empemail);
findEmpPreAuto.eq(3).find("span").eq(1).text("");
//findEmpPreAuto.eq(3).find("span").eq(1).text(empjob);
findEmpPreAuto.eq(3).find("span").eq(1).text(empjobTxt);
findEmpPreAuto.eq(4).find("span").eq(1).text("");
//findEmpPreAuto.eq(4).find("span").eq(1).text(emppos);
findEmpPreAuto.eq(4).find("span").eq(1).text(empposTxt);
findEmpPreAuto.eq(5).find("span").eq(1).text("");
findEmpPreAuto.eq(5).find("span").eq(1).text(emphp);
$(".empPreview").find("img").attr("src", "<%= request.getContextPath() %>/images/imgView.do?fileno=" + empphoto);
var empCardBox = $(".empPreview .empPrevCont>div:first-of-type>div");
var empCardImg = $(".empPreview .empPrevCont>div:first-of-type>div img");
$.ratioBoxH(empCardBox, empCardImg);
// 이미지가 변경될 때 실행
$(empCardImg).on("load", function() {
// 이미지가 로드될 때마다 함수 실행
$.ratioBoxH(empCardBox, empCardImg);
});
var tempClass = $(".empPreview").find(".empPrevCont").attr("class");
tempClass = tempClass.split(" ");
tempClass = tempClass[0].trim();
//console.log("tempClass : " + tempClass);
//console.log("emppercol : " + emppercol);
$(".empPreview>div>div").removeClass();
$(".empPreview>div>div").addClass(tempClass).addClass(emppercol);
});
$(".closeBtn").click(function(){
$("#empCardModal").fadeOut();
$("#empCardModal .empPrevCont").animate({
"marginTop" : "30px",
"opacity" : "0"
}, 400, "linear");
});
$(window).keyup(function(e){
//console.log("키코드 : " + e.keyCode);
if(e.keyCode == 27) { // esc 키를 눌렀을 때
$(".closeBtn").trigger("click");
}
});
});
</script>
</head>
<body>
<div id="mainPageContainerBox">
<!-- gnb -->
<header>
<a href="<%= request.getContextPath() %>/main/mainPage.jsp">
<img src="<%= request.getContextPath() %>/images/logo.png" alt="로고 이미지" />
</a>
<div>
<div class="empWel">
<div>
<%-- <img src="<%= request.getContextPath() %>/images/<%= loginSession.getEmpno() %>/emp_<%= loginSession.getEmpno() %>.jpg" alt="사원 이미지" /> --%>
<img src="<%= request.getContextPath() %>/images/imgView.do?fileno=<%= loginSession.getEmpphoto() %>" alt="사원 이미지" />
</div>
<p>
[<%= loginSession.getEmpname() %>] 님 환영합니다!
</p>
</div>
<div class="logoutCont">
<button id="logoutBtn" class="btn btn-info btn-sm" type="button">LOGOUT</button>
</div>
</div>
</header>
<!-- lnb -->
<nav class="mainNav">
<ul class="mainIcon">
<li class="main">
<i class="fas fa-home"></i>
<span>HOME</span>
</li>
</ul>
<ul class="mainIcon empAdd">
<li class="main">
<i class="material-icons" style="font-size: 2.2em;">person_add</i>
<span>ADD</span>
</li>
</ul>
<ul class="mainIcon">
<li class="main">
<i class="fa fa-volume-up"></i>
<span>NOTI</span>
</li>
</ul>
<ul class="mainIcon slideMenu">
<li class="main">
<i class="fa fa-id-card"></i>
<span>INFO</span>
</li>
</ul>
<ul class="mainIcon slideMenu">
<li class="main">
<i class="fas fa-clipboard"></i>
<span>SIGN</span>
</li>
</ul>
<ul class="mainIcon slideMenu">
<li class="main">
<i class="fa fa-list-alt"></i>
<span>DOCU</span>
</li>
</ul>
</nav>
<nav class="subNav">
<ul>
<li>사원정보 확인</li>
<li><a href="<%= request.getContextPath() %>/empList.do">사원 리스트</a></li>
<li><a href="<%= request.getContextPath() %>/main/empUpdate.jsp">사원 정보 수정</a></li>
<li><a href="<%= request.getContextPath() %>/main/empResign.jsp">회원 탈퇴</a></li>
</ul>
</nav>
<nav class="subNav">
<ul>
<li>전자결재</li>
<li><a href="javascript:void(0)">소메뉴 1</a></li>
<li><a href="javascript:void(0)">소메뉴 2</a></li>
<li><a href="javascript:void(0)">소메뉴 3</a></li>
<li><a href="javascript:void(0)">소메뉴 4</a></li>
</ul>
</nav>
<nav class="subNav">
<ul>
<li>결재서류 확인</li>
<li><a href="javascript:void(0)">소메뉴 1</a></li>
<li><a href="javascript:void(0)">소메뉴 2</a></li>
<li><a href="javascript:void(0)">소메뉴 3</a></li>
<li><a href="javascript:void(0)">소메뉴 4</a></li>
</ul>
</nav>
<!-- mainPage -->
<section class="empList">
<div class="bgContainer">
<div class="slickSlide">
<%
// 6개씩 1페이지 갯수 구하기
int cardLen = empList.size(); // 총 카드 갯수
//System.out.println("총 카드 갯수 : " + cardLen);
int empCardLen = 6; // 한 페이지에 보여줄 카드 갯수
//System.out.println("한 페이지에 보여줄 카드 갯수 : " + empCardLen);
int slideLoc = cardLen / empCardLen; // 슬라이드 위치
//System.out.println("슬라이드 위치 : " + slideLoc);
int modCardLen = cardLen % empCardLen; ; // 페이지당 카드를 집어 넣고 남은 갯수
//System.out.println("남은 카드 갯수 : " + modCardLen);
int slideLen = slideLoc;
if(modCardLen > 0) { // 남은 카드 갯수가 있으면 슬라이드 갯수를 하나 증가시킴
slideLen++;
}
//System.out.println("남은 카드 갯수를 계산한 슬라이드 갯수 : " + slideLen);
%>
<%
int empLoc = 0; // 사원의 위치
for(int i=0; i<slideLen; i++) { // 슬라이드 처리
%>
<div class="slideEl">
<%
if(slideLoc == i) { // i번째 슬라이드와 마지막 페이지 위치가 일치할 경우...
for(int j=0; j<modCardLen; j++) { // 페이지당 남은 카드 주기
%>
<article class="empCard">
<div class="<%= empList.get(empLoc).getEmppercol() %>">
<div class="cardLeft">
<div>
<img src="<%= request.getContextPath() %>/images/imgView.do?fileno=<%= empList.get(empLoc).getEmpphoto() %>" alt="사원 이미지" />
</div>
</div>
<div class="cardRight">
<div>
<span><%= empList.get(empLoc).getEmpno() %></span>
</div>
<div>
<span><%= empList.get(empLoc).getEmpname() %></span>
</div>
<input id="getEmpno" type="hidden" value="<%= empList.get(empLoc).getEmpno() %>" />
<input id="getEmpname" type="hidden" value="<%= empList.get(empLoc).getEmpname() %>" />
<input id="getEmpemail" type="hidden" value="<%= empList.get(empLoc).getEmpemail() %>" />
<input id="getEmpjob" type="hidden" value="<%= empList.get(empLoc).getEmpjob() %>" />
<input id="getEmppos" type="hidden" value="<%= empList.get(empLoc).getEmppos() %>" />
<input id="getEmphp" type="hidden" value="<%= empList.get(empLoc).getEmphp1() %>-<%= empList.get(empLoc).getEmphp2() %>-<%= empList.get(empLoc).getEmphp3() %>" />
<input id="getEmpphoto" type="hidden" value="<%= empList.get(empLoc).getEmpphoto() %>" />
<input id="getEmppercol" type="hidden" value="<%= empList.get(empLoc).getEmppercol() %>" />
</div>
</div>
</article>
<%
empLoc++;
}
}else {
for(int j=0; j<empCardLen; j++) { // 페이지당 6개씩 카드 주기
%>
<article class="empCard">
<div class="<%= empList.get(empLoc).getEmppercol() %>">
<div class="cardLeft">
<div>
<img src="<%= request.getContextPath() %>/images/imgView.do?fileno=<%= empList.get(empLoc).getEmpphoto() %>" alt="사원 이미지" />
</div>
</div>
<div class="cardRight">
<div>
<span><%= empList.get(empLoc).getEmpno() %></span>
</div>
<div>
<span><%= empList.get(empLoc).getEmpname() %></span>
</div>
<input id="getEmpno" type="hidden" value="<%= empList.get(empLoc).getEmpno() %>" />
<input id="getEmpname" type="hidden" value="<%= empList.get(empLoc).getEmpname() %>" />
<input id="getEmpemail" type="hidden" value="<%= empList.get(empLoc).getEmpemail() %>" />
<input id="getEmpjob" type="hidden" value="<%= empList.get(empLoc).getEmpjob() %>" />
<input id="getEmppos" type="hidden" value="<%= empList.get(empLoc).getEmppos() %>" />
<input id="getEmphp" type="hidden" value="<%= empList.get(empLoc).getEmphp1() %>-<%= empList.get(empLoc).getEmphp2() %>-<%= empList.get(empLoc).getEmphp3() %>" />
<input id="getEmpphoto" type="hidden" value="<%= empList.get(empLoc).getEmpphoto() %>" />
<input id="getEmppercol" type="hidden" value="<%= empList.get(empLoc).getEmppercol() %>" />
</div>
</div>
</article>
<%
empLoc++;
}
}
%>
</div>
<% } %>
</div>
</div>
</section>
</div>
<section id="empCardModal">
<div class="closeBtn">
<div></div>
<div></div>
</div>
<article class="empPreview">
<div>
<div class="empPrevCont perColPri">
<div>
<div>
<img src="images/default_profile.png" alt="기본 프로필 이미지" />
</div>
</div>
<div class="empPreAuto">
<span>사원번호</span>
<span>2023101001</span>
</div>
<div class="empPreAuto">
<span>사원명</span>
<span>홍길동</span>
</div>
<div class="empPreAuto">
<span>이메일</span>
<span>test01@test.com</span>
</div>
<div class="empPreAuto">
<span>담당부서</span>
<span>인사팀</span>
</div>
<div class="empPreAuto">
<span>직급</span>
<span>사원</span>
</div>
<div class="empPreAuto">
<span>전화번호</span>
<span>
<span class="empno1">010-</span>
<span class="empno2">0000-</span>
<span class="empno3">0000</span>
</span>
</div>
</div>
</div>
</article>
</section>
</body>
</html>[EmpList.java]
package kr.or.ddit.controller;
import java.io.IOException;
import java.util.List;
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 javax.servlet.http.HttpSession;
import kr.or.ddit.service.CommonServiceImpl;
import kr.or.ddit.service.ICommonService;
import kr.or.ddit.vo.EmployeeVO;
@WebServlet("/empList.do")
public class EmpList extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
// 사원 리스트 파라미터 전달
ICommonService service = CommonServiceImpl.getInstance();
List<EmployeeVO> empList = service.getAllEmpList();
System.out.println("서블릿 단 empList : " + empList.toString());
request.setAttribute("empList", empList);
request.getRequestDispatcher("/main/empListView.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
'대덕인재개발원_2nd project' 카테고리의 다른 글
| (6) common.css (0) | 2023.10.20 |
|---|---|
| (5) 회원 삭제 페이지 (0) | 2023.10.20 |
| (4) 회원 수정 페이지 (0) | 2023.10.20 |
| (2) 회원 가입 페이지 (0) | 2023.10.20 |
| (1) 로그인 페이지 (0) | 2023.10.20 |
'대덕인재개발원_2nd project' Related Articles
more
