07. 개발 : 구독 OTT 정보 (FullCalendar에 DB내용 출력하기)

Project/OPOT_SPRING

07. 개발 : 구독 OTT 정보 (FullCalendar에 DB내용 출력하기)

개발개발빈이 2022. 7. 27. 18:25

○ 구독 OTT 정보

- 파티매칭 서비스에 가입하면 OTT 구독 정보가 DB에 저장되고,

이를 마이페이지에서 확인할 수 있는데,

FullCalendar를 이용해서 구독종료일을 한 눈에 확인할 수 있도록 보여주고자 함

○ FullCalendar 사용하기

- FullCalendar : 자바스크립트 기반 오픈소스 라이브러리

- 참고 : FullCalendar 공식 홈페이지

① CDN

<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js'></script>

② FullCalendar 표시될 영역

<div id='calendar-container'>    
  <div id='calendar'></div>  
</div>

③ FullCalendar 관련 설정

- 구독 정보를 dto가 담긴 arraylist로 들고오는데, <c:forEach> 반복문을 이용해서 출력해주면 됨

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      	initialView: 'dayGridMonth',//캘린더 형식
      	events: [//캘린더에 표시할 이벤트
      	    <c:forEach var="dto" items="${list}">
      	        {
      	            title : "${ dto.ott_name } 구독 종료" ,
      	            start : "${ fn:substring(dto.subscribe_end, 0, 10)}"
      	        }, 		
      		</c:forEach>
      	]      	
    });
    calendar.render();
    calendar.addEvent(events);
  });
</script>

○ 전체코드 : DAO/DTO

① SubscribeInfoDTO.java

package kr.co.opot.member;

public class SubscribeInfoDTO {

    private String subscribe_no;
    private String mem_id;
    private String party_id;
    private String party_role;
    private String subscribe_start;
    private String subscribe_end;
    private String ott_name;
    private int ott_price;
    private String ott_id;
    private String ott_pw;
    
    public SubscribeInfoDTO() {}
    
    //Getters Setters 생략    
    
}//class end

② SubscribeInfoDAO.java : mySubread(), totalPay()

public ArrayList<SubscribeInfoDTO> mySubread(String mem_id) {

    ArrayList<SubscribeInfoDTO> sublist=null;
    SubscribeInfoDTO dto=null;

    try {
        con=dbopen.getConnection();//DB연결
        sql=new StringBuilder();
        sql.append(" SELECT subscribe_no, A.mem_id, A.party_id, party_role, ");
        sql.append("        subscribe_start, subscribe_end, ott_name, ott_id, ott_pw, ott_price ");
        sql.append(" FROM subscribe_info A JOIN party_info B ");
        sql.append(" ON A.party_id=B.party_id ");
        sql.append(" WHERE A.mem_id=? ");
        pstmt = con.prepareStatement(sql.toString());
        pstmt.setString(1, mem_id);

        rs = pstmt.executeQuery();
        if(rs.next()) {
            sublist= new ArrayList<SubscribeInfoDTO>();
            do {
                dto = new SubscribeInfoDTO();
                dto.setSubscribe_no(rs.getString("subscribe_no"));	
                dto.setMem_id(rs.getString("A.mem_id"));
                dto.setParty_id(rs.getString("A.party_id"));
                dto.setParty_role(rs.getString("party_role"));
                dto.setSubscribe_start(rs.getString("subscribe_start"));
                dto.setSubscribe_end(rs.getString("subscribe_end"));

                dto.setOtt_name(rs.getString("ott_name"));
                dto.setOtt_id(rs.getString("ott_id"));
                dto.setOtt_pw(rs.getString("ott_pw"));
                dto.setOtt_price(rs.getInt("ott_price"));

                sublist.add(dto);
            }while(rs.next());
        }//if end

    }catch (Exception e) {
        System.out.println("구독정보 상세보기 실패: " + e);
    }finally{
        DBclose.close(con, pstmt, rs);
    }//try end
    return sublist;
}


public int totalPay(String mem_id) {
    int totalOttFee=0;
    try {
        con=dbopen.getConnection();//DB연결
        sql=new StringBuilder();
        sql.append(" SELECT SUM(ott_price) ");
        sql.append(" FROM subscribe_info A JOIN party_info B ");
        sql.append(" ON A.party_id=B.party_id ");
        sql.append(" WHERE A.mem_id=? ");
        pstmt = con.prepareStatement(sql.toString());
        pstmt.setString(1, mem_id);

        rs = pstmt.executeQuery();
        if(rs.next()) {
            totalOttFee=rs.getInt("SUM(ott_price)");
        }//if end

    }catch (Exception e) {
        System.out.println("총 이용금액 조회 실패: " + e);
    }finally{
        DBclose.close(con, pstmt, rs);
    }//try end
    return totalOttFee;
}

○ 전체코드 : 뷰단

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>    
    
<%@ include file="../header.jsp"%>

<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js'></script>

<!-- 본문시작 mysubscribe.jsp -->
<!-- 구독OTT/파티 관리 -->
<div class="container text-center">

  <div class="pagetitle">
    <br>
    <span><img src="/images/pot_icon.png" alt="OPOT" width="50px"></span>
    <span><strong> 구독OTT/파티정보 </strong></span>
    <br>
  </div>

  <h4><strong>${ s_mem_id }</strong> 님의 구독정보입니다 </h4>
		
  <div id='calendar-container'>    
    <div id='calendar'></div>  
  </div>
  <hr>
    <table class="table">
    <tr>
      <th>구독OTT</th>
      <th>이용금액</th>
      <th>이용역할</th>
      <th>구독시작일</th>
      <th>구독종료일</th>
      <th>OTT계정ID</th>
      <th>OTT계정PW</th>
      <th>파티탈퇴하기</th>			
    </tr>		

    <c:set var="savedFee" value="${ 0 }"></c:set>		
    <c:forEach var="dto" items="${list}"> 			
      <c:choose>
        <c:when test="${dto.party_role eq '파티장' }">
          <c:set var="serviceFee" value="${ 400 }"></c:set>
        </c:when>
        <c:when test="${dto.party_role eq '파티원' }">
          <c:set var="serviceFee" value="${ 500 }"></c:set>
        </c:when>
      </c:choose>
      <tr>
        <td>${ dto.ott_name }</td>
        <td>${ fn:substringBefore(dto.ott_price/4+serviceFee, '.') }</td>
        <td>${ dto.party_role }</td>
        <td>${ dto.subscribe_start }</td>
        <td>${ dto.subscribe_end }</td>
        <td>${ dto.ott_id }</td>
        <td>${ dto.ott_pw }</td>
          <c:choose>
            <c:when test="${dto.party_role eq '파티장' }">
              <td>
                <form name="frm" id="frm" action="partyexit.do" method="post" onsubmit="return IDlog()">
                  <input type="submit" value="파티장 탈퇴"  class="btn btn-default">
                  <input type="hidden" id="party_id" name="party_id" value="${ dto.party_id }">
                  <input type="hidden" id="mem_id" name="mem_id" value="${ s_mem_id }">
                  <input type="hidden" id="ott_name" name="ott_name" value="${ dto.ott_name }">
                </form>	
              </td>
            </c:when>
            <c:when test="${dto.party_role eq '파티원' }">
              <td>
                <form name="frm" id="frm" action="partymemexit.do" method="post" onsubmit="return IDlog()">
                  <input type="submit" value="파티원 탈퇴"  class="btn btn-default">
                  <input type="hidden" id="party_id" name="party_id" value="${ dto.party_id }">
                  <input type="hidden" id="mem_id" name="mem_id" value="${ s_mem_id }">
                </form>	
              </td>
            </c:when>
          </c:choose>
      </tr>			
      <tr style="display: none;">
        <td colspan="8">${ savedFee=savedFee+dto.ott_price/4+serviceFee }</td>
      </tr>			
    </c:forEach>
		
    <tr>
      <td colspan="3">혼자 사용시 결제했을 금액</td>
      <td colspan="5">${ totalOttFee }</td>
    </tr>
    <tr>
      <td colspan="3">OPOT 파티에서 결제한 금액</td>
      <td colspan="5">${ fn:substringBefore(savedFee, '.') }</td>
    </tr>
    <tr>
      <td colspan="3">OPOT으로 절약한 금액</td>
      <td colspan="5">
        <strong>${ fn:substringBefore(totalOttFee-savedFee, '.') }</strong>
      </td>
    </tr>		
    </table>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      	initialView: 'dayGridMonth',
      	events: [
      		<c:forEach var="dto" items="${list}">
				{
					title : "${ dto.ott_name } 구독 종료" ,
					start : "${ fn:substring(dto.subscribe_end, 0, 10)}"
				}, 		
			</c:forEach>
      	]      	
    });
    calendar.render();
    calendar.addEvent(events);
  });
</script>
	
</div>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

○ 전체코드 : 컨트롤러 (MemberCont.java)

@RequestMapping({"/m_manage/mysubscribe.do", "/mysubscribe.do"})
public ModelAndView mysubscribe(HttpServletRequest req, HttpServletResponse resp, SubscribeInfoDTO dto) {
    ModelAndView mav = new ModelAndView();
    SubscribeInfoDAO subdao =new SubscribeInfoDAO();

    HttpSession session = req.getSession();

    String mem_id=(String) session.getAttribute("s_mem_id");

    mav.addObject("totalOttFee", subdao.totalPay(mem_id));
    mav.addObject("list", subdao.mySubread(mem_id));
    mav.addObject("dto", dto);
    mav.setViewName("m_manage/mysubscribe");
    return mav;
}

○ 프로젝트 전체 보기

https://github.com/jaebin0817/SOLDESK_FinalProject

GitHub - jaebin0817/SOLDESK_FinalProject

Contribute to jaebin0817/SOLDESK_FinalProject development by creating an account on GitHub.

github.com

http://opot.cafe24.com/home.do

OPOT

#어드벤처 #사랑스러운 #한획을 그은 #속도감있는 #스릴러 #예능 #애니메이션 #휴먼 볼까말까 고민된다면⁉ 오늘 이거 볼까요? 👀 범죄도시2 ★★★☆☆ 3.2 종이의 집

opot.cafe24.com

저작자표시 비영리 변경금지