view에대한 공부, modal -0627

웹프로그래밍 2022. 6. 28. 18:54

728x90

data mapper 즉 sql mapper로 해결해보겠다

ibaties가 그예이다. pulling system(?)왜 써야하는지

롬북을 사용하면서 realation 적용해보자

눌렀을때 회원정보 뜨도록 해보자

<td>
				<c:url value ="/member/memberView.do" var="viewURL">
					<c:param name="who" value="${member.memId }"/>
				</c:url>
				<a href="${viewURL}">
					${member['memName'] }
				</a>
				</td>

의존성 높은애부터 만들어야함 (VO -> 지금은 만들어져있으니까..)

/**
	 * 회원 상세 조회
	 * @param memId 조회할 회원의 아이디
	 * @return 존재하지 않는경우 null값을 반환
	 */
	public MemberVO selectMember(String memId);

@Override
public MemberVO selectMember(String memId) {
	StringBuffer sql = new StringBuffer();
	sql.append("SELECT MEM_ID, MEM_NAME, MEM_HP, MEM_ADD1, MEM_MAIL,MEM_MILEAGE FROM MEMBER ");
	sql.append("WHERE MEM_ID = ?" );
	MemberVO member = null;
	try (Connection conn = ConnectionFactory.getConnection();
			PreparedStatement stmt = conn.prepareStatement(sql.toString());) {
			stmt.setString(1, memId);
			ResultSet rs = stmt.executeQuery();
			while(rs.next()) {
				member =new MemberVO();
				member.setMemId(rs.getString("MEM_ID"));
	            member.setMemName(rs.getString("MEM_NAME"));
	            member.setMemHp(rs.getString("MEM_HP"));
	            member.setMemAdd1(rs.getString("MEM_ADD1"));
	            member.setMemMail(rs.getString("MEM_MAIL"));
	            member.setMemMileage(rs.getInt("MEM_MILEAGE"));
			}

		return member;
	} catch (SQLException e) {
		throw new RuntimeException(e);
	}
	
}

/**
	 * 회원 상세 조회
	 * @param memId 조회할 회원 아이디
	 * @return 존재하지 않는 경우 , {@link PKNotFoundException}발생
	 */
	public MemberVO retrieveMember(String memId);

@Override
	public MemberVO retrieveMember(String memId) {
		MemberVO member =memberDao.selectMember(memId);
		if(member==null) {
			throw new PKNotFoundException(String.format("%s 아이디를 가진 회원이 없음.",memId));
		}
		return member;
	}

null 이면 어떻게 하지 ? 커스텀 메시지 만들자

모든예외의 상위는 Throwable

하위들은 에러(절대로 처리하지않는 예외) , exception(처리하는 예외)

complieError도 우리가 직접 처리할 수 없음 코드를 바꾸지 않는 이상 !

예외(Throwable)
* Error : 시스템 폴트 상황으로 개발자가 직접 처리하지 않는 예외
* Exception : 필요에 의해 개발자가 직접 처리할 수 있는 예외
* Checked(Exception) : 예외가 발생하면 반드시 직접처리해야하는 예외(처리하지 않으면 컴파일 에러 발생)
* ex) IOException, SQLException
* UnChecked(RuntimeException) : 예외가 발생하고, 직접 처리하지않더라도, 예외에 대한 제어권이 호출구조를 타고 VM에게 전달되는 예외.
* ex) NullPointerException

<Error>

오류는 합리적인 응용 프로그램이 포착하려고 시도하지 않아야 하는 심각한 문제를 나타내는 Throwable의 하위 클래스입니다. 이러한 오류의 대부분은 비정상적인 조건입니다. ThreadDeath 오류는 "정상" 조건이기는 하지만 대부분의 응용 프로그램에서 오류를 포착하려고 시도하지 않아야 하기 때문에 오류의 하위 클래스이기도 합니다.

<exceotion> :이거 꼭처리해서 에러나면 못넘어가게 하고싶어

Exception 클래스와 그 하위 클래스는 합리적인 응용 프로그램이 잡을 수 있는 조건을 나타내는 Throwable 형식입니다

<rRuntimeException > 에러 톰켓에게 넘기고 싶어

그냥 객체 생성했다고 에러가 되지 않음 Throwable 하게 했기 때문에 throw던져줘야함

public class PKNotFoundException extends RuntimeException{

}

@Override
	public MemberVO retrieveMember(String memId) {
		MemberVO member =memberDao.selectMember(memId);
		if(member==null) {
			throw new PKNotFoundException();
		}
		return member;
	}

이렇게 했을때 빨간줄 안됨 상위가 달라졌기에 우리가 처리하지않더라도 호출구조를 타고 컨트롤러에 전달됨

throws가 있는것 처럼 작동 , 그럼 톰켓이 500에러로 바꾸겠지

->상위의 생성자 받음

package kr.or.ddit.exception;
/**
 * 예외(Throwable)
 * Error : 시스템 폴트 상황으로 개발자가 직접 처리하지 않는 예외
 * Exception : 필요에 의해 개발자가 직접 처리할 수 있는 예외
 * 		Checked(Exception) : 예외가 발생하면 반드시 직접처리해야하는 예외(처리하지 않으면 컴파일 에러 발생)
 * 				ex) IOException, SQLException
 * 		UnChecked(RuntimeException) : 예외가 발생하고, 직접 처리하지않더라도, 예외에 대한 제어권이 호출구조를 타고 VM에게 전달되는 예외.
 * 				ex) NullPointerException
 * @author 306-10
 *
 */
public class PKNotFoundException extends RuntimeException{

	public PKNotFoundException() {
		super();
		// TODO Auto-generated constructor stub
	}

	public PKNotFoundException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
		super(message, cause, enableSuppression, writableStackTrace);
		// TODO Auto-generated constructor stub
	}

	public PKNotFoundException(String message, Throwable cause) {
		super(message, cause);
		// TODO Auto-generated constructor stub
	}

	public PKNotFoundException(String message) {
		super(message);
		// TODO Auto-generated constructor stub
	}

	public PKNotFoundException(Throwable cause) {
		super(cause);
		// TODO Auto-generated constructor stub
	}

}

<MemberViewServlet.java>

컨트롤러는 검증해야함

package kr.or.ddit.member.web;

import java.io.IOException;

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 org.apache.commons.lang3.StringUtils;

import kr.or.ddit.member.service.MemberService;
import kr.or.ddit.member.service.MemberServiceImpl;
import kr.or.ddit.mvc.DelegatingViewResolver;
import kr.or.ddit.vo.MemberVO;
@WebServlet("/member/memberView.do")
public class MemberViewServlet extends HttpServlet {
	MemberService service = new MemberServiceImpl();
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String memId = req.getParameter("who");
		if(StringUtils.isBlank(memId)) {
			//클라이언트 요청 잘못됐어 400
			resp.sendError(HttpServletResponse.SC_BAD_REQUEST, "필수파라미터 누락");
			return;
		}
			
			MemberVO member=service.retrieveMember(memId);
			
			req.setAttribute("member", member);
			DelegatingViewResolver resolver =new DelegatingViewResolver();
			String viewName ="/member/memberView.tiles";
			resolver.viewResolve(viewName, req, resp);
			//new DelegatingViewResolver().viewResolve(viewName, req, resp);도 가능
		
		
	}
	
}

<memberView.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<h4>회원상세 조회페이지</h4>
<table border="1">
	<thead>
			<tr>
				<th>회원아이디</th>
				<th>회원명</th>
				<th>휴대폰</th>
				<th>거주지역</th>
				<th>이메일</th>
				<th>마일리지</th>
			</tr>
	</thead>
	<tbody>
	<tr>
		<td>
		 ${member.memId}
		</td>
		<td>
		 ${member.memName}
		</td>
		<td>
		 ${member.memHp}
		</td>
		<td>
		 ${member.memAdd1}
		</td>
		<td>
		 ${member.memMail}
		</td>
		<td>
		 ${member.memMileage}
		
		</td>
	</tr>
	
	
	</tbody>

</table>

이제 모달창으로 띄워보자

화면 전환이 아니므로 비동기 요청

TDD(테스트 주도형 개발) , EDD (이벤트로 발생시켜서 request가 시작됐다 종료됐다 리스너 이용해서 했었지..)

모든 명령이 이벤트로 발생을 한다...

EDD사용해보자!!!

1. 이벤트 취소시키고 모달을 띄워보자

data-bs-toggle="modal" : modal의 트리거역할

data-bs-target="#exampleModal" : 모달의 셀렉터실행할 모달 타켓을 아이디로

버튼을 없애고 저 위부분만 붙여서 a태그에 붙여주기

 <a href="${viewURL}" data-bs-toggle="modal" data-bs-target="#exampleModal">
					${member['memName'] }
				</a>

=> 부트스트랩 사이트 이런곳 눌러서 확인하기

<div class="modal-dialog-scrollable"> => 내용 길면 스크롤 적용시킴

show : 뜰때

shown :뜨고나서 상황

<확인해보기>

console.log(event.relatedTarget );

console.log(event.relatedTarget.href );

 console.log(event.relatedTarget.href)
 console.log(event.currentTarget);

<console.log(event)>했을때

relatedTarget에 a태그 있으니까 event.relatedTarget.href

-------------------------------------------------------------------

근데 타일즈 템플릿 겹쳐서 나오네

MemberViewServlet고치자

String viewName ="member/memberView"; => 인터널사용하도록

@다시 공부하기~~~@

1. currentTarget : jquery이벤트 객체 존재 html이벤트는 존재하지않음 2 . target

currentTarget말고 target을 쓰는 이유는 currentTarget는 jquery이벤트에는 존재하지만 html 이벤트에서는 존재하지 않음

currentTarget : 이벤트 리스너가 달린 요소
target : 실제 이벤트가 발생하는 요소

<예제>

event.target은 자식 요소인 span을 리턴하고, event.currentTarget은 부모 요소인 button을 반환하는 것을 알 수 있다.

즉

currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다!
즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.

<%@page import="java.util.Locale"%>
<%@page import="kr.or.ddit.vo.MemberVO"%>
<%@page import="java.util.List"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

   <table class="table table-bordered">
      <thead>
         <tr>
            <th>회원아이디</th>
            <th>회원명</th>
            <th>휴대폰</th>
            <th>거주지역</th>
            <th>이메일</th>
            <th>마일리지</th>
         </tr>
      </thead>
      <tbody>
      
         <c:choose>
            <c:when test="${not empty memberList }">
               <c:forEach items="${memberList }" var="member">
                  <tr>
                     <td>${member['memId'] }</td>
                     <c:url value="/member/memberView.do" var="viewURL">
                        <c:param name="who" value="${member['memId'] }"></c:param>
                     </c:url>
<!--                      TDD, EDD -->
                     <td><a href="${viewURL}" data-bs-toggle="modal" data-bs-target="#exampleModal">
                     ${member['memName'] }</a></td>
                     
                     <td>${member['memHp'] }</td>
                     <td>${member.memAdd1 }</td>
                     <td>${member.memMail }</td>
                     <td>
                     <fmt:setLocale value="<%=Locale.US %>"/>
                     <fmt:formatNumber value="${member.memMileage }" type="currency" />
                     
                     </td>
                  </tr>
               </c:forEach>
            </c:when>
            <c:otherwise>
               <tr>
                  <td colspan="6">회원이 아직 없음.</td>
               </tr>
            </c:otherwise>
         </c:choose>

      </tbody>
   </table>
   


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">회원 상세 정보</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
let exampleModal = $('#exampleModal').on('show.bs.modal', function(event){
//    console.log(event.relatedTarget.href)
	  console.log(event.currentTarget);
   let url = event.relatedTarget.href;
   
   $.ajax({
      url : url,
      dataType : "html",
      success : function(resp, status, jqXHR) {
         exampleModal.find(".modal-body").html(resp)
      },
      error : function(jqXHR, status, error) {
         console.log(jqXHR);
         console.log(status);
         console.log(error);

      	}
  	});
   
	}).on("hidden.bs.modal", function(){
		console.log(event.target);  //이벤트가 발생한 요소를 반환해준다.  즉 모달에 쓰인 div이런거 다 가져오더라
		$(event.target).find(".modal-body").empty();
});

</script>

<console.log(event.target); //이벤트가 발생한 요소를 반환해준다. >

<memberView.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h4>회원 상세 조회 페이지</h4>
<table class="table table-bordered">
	<tr>
		<th>회원아이디</th>
		<td>${member.memId }</td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td>${member.memPass }</td>
	</tr>
	<tr>
		<th>회원명</th>
		<td>${member.memName }</td>
	</tr>
	<tr>
		<th>주민번호1</th>
		<td>${member.memRegno1 }</td>
	</tr>
	<tr>
		<th>주민번호2</th>
		<td>${member.memRegno2 }</td>
	</tr>
	<tr>
		<th>생일</th>
		<td>${member.memBir }</td>
	</tr>
	<tr>
		<th>우편번호</th>
		<td>${member.memZip }</td>
	</tr>
	<tr>
		<th>주소1</th>
		<td>${member.memAdd1 }</td>
	</tr>
	<tr>
		<th>주소2</th>
		<td>${member.memAdd2 }</td>
	</tr>
	<tr>
		<th>집전화번호</th>
		<td>${member.memHometel }</td>
	</tr>
	<tr>
		<th>회사번호</th>
		<td>${member.memComtel }</td>
	</tr>
	<tr>
		<th>휴대폰</th>
		<td>${member.memHp }</td>
	</tr>
	<tr>
		<th>이메일</th>
		<td>${member.memMail }</td>
	</tr>
	<tr>
		<th>직업</th>
		<td>${member.memJob }</td>
	</tr>
	<tr>
		<th>취미</th>
		<td>${member.memLike }</td>
	</tr>
	<tr>
		<th>기념일</th>
		<td>${member.memMemorial }</td>
	</tr>
	<tr>
		<th>기념일자</th>
		<td>${member.memMemorialday }</td>
	</tr>
	<tr>
		<th>마일리지</th>
		<td>${member.memMileage }</td>
	</tr>
	<tr>
		<th>탈퇴여부</th>
		<td>${member.memDelete }</td>
	</tr>
</table>

728x90

'웹프로그래밍' 카테고리의 다른 글

myBatis(2),Lombok-22.06.28 (0)	2022.06.28
MyBatis, DBCP(DataBase Connection Pool)-0627(2) (0)	2022.06.28
번외 ) grid적용하는 예제 이해하기 (0)	2022.06.27
tiles를 적용한 후 에러잡기 (0)	2022.06.25
EL, JSTL 프레임워크 -0624 (0)	2022.06.24

ABOUT ME

하루복습 하루복습

'웹프로그래밍' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'웹프로그래밍' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바