일시

2022.01.04 ~ 2022.01.05

프로젝트 개요

• 주제 : 유기견 입양 및 후원 사이트

• 프로젝트명(사이트명) & 팀명 : DDORI'S HOUSE

• 구현 내용(목표) : 로그인/회원가입, 마이페이지(사용자), 마이페이지(관리자), 각종 게시판(공지사항, 강아지 리스트, 자유게시판, 입양후기 등), 쇼핑몰(물건 판매, 결제 시스템), 매칭 시스템(질문에 대한 답변을 통해 적절한 유형 매칭)

• 네비게이션 구성 : about(각종 소개 및 공지사항), adopt(강아지 리스트, 강아지 매칭), donation(후원 안내, 물건 판매), volunteer(봉사 안내 게시판), community(입양후기, 자유게시판), contact(오시는길, 연락 등), login/join(로그인, 회원가입, 마이페이지 등)

• 맡은 역할 : DB 관리(모델링 및 테이블, 컬럼 등), 네비게이션바, login/join, Mapage

람쥐의 진행현황 3탄 !!!!!!

★ Mypage (USER)
1) 입양신청 현황 jsp 만들기
2) DB로 연동되어있는 입양신청 현황 갖고와서 값 출력하기
3) 페이징 처리하기
4) 현상태 바로 보이도록 (searchType:입양신청서확인중, 입양승인, 입양거절) 처리하기

구현화면

★Mypage

1) 사용자 입양신청 현황 jsp 만들기

2) DB로 연동되어있는 입양 신청현황 갖고와서 값 출력하기

(list 객체를 사용할꺼고) 입양신청현황 뿌려 줄 xml 작성

<select id="adoptList" parameterType="com.icia.web.model.Adopt" resultMap="adoptNowResultMap">
SELECT
    ADT_SEQ,
    USER_ID,
    DOG_SEQ,
    ADT_PERIOD,
    ADT_REASON,
    ADT_HOME,
    ADT_AGREE,
    ADT_PET,
    REG_DATE,
    ADT_STATUS,
    DOG_NAME
FROM(
    SELECT
    ROWNUM AS RNUM,
    ADT_SEQ,
    USER_ID,
    DOG_SEQ,
    ADT_PERIOD,
    ADT_REASON,
    ADT_HOME,
    ADT_AGREE,
    ADT_PET,
    REG_DATE,
    ADT_STATUS,
    DOG_NAME
FROM(
SELECT
    A.ADT_SEQ AS ADT_SEQ,
    NVL(A.USER_ID, '') AS USER_ID,
    NVL(A.DOG_SEQ, '') AS DOG_SEQ,
    NVL(A.ADT_PERIOD, '') AS ADT_PERIOD,
    NVL(A.ADT_REASON, '') AS ADT_REASON,
    NVL(A.ADT_HOME, '') AS ADT_HOME,
    NVL(A.ADT_AGREE,'') AS ADT_AGREE,
    NVL(A.ADT_PET, '') AS ADT_PET,
    NVL(TO_CHAR(A.REG_DATE, 'YYYY.MM.DD'), '') AS REG_DATE,
    NVL(A.ADT_STATUS, '') AS ADT_STATUS,
    NVL(B.DOG_NAME, '') AS DOG_NAME
FROM
    TBL_ADOPT A, TBL_DOG B
WHERE 
    A.DOG_SEQ = B.DOG_SEQ
AND 
     A.USER_ID = #{userId}
 
<if test='searchType != null and searchType !="" '>
<choose>
<when test='searchType == "B"'>
AND
   ADT_STATUS = 'B'
</when>
<when test='searchType == "Y"'>
AND
   ADT_STATUS = 'Y'
</when>
<when test='searchType == "N"'>
AND
   ADT_STATUS = 'N'
</when>
</choose>
</if>   
ORDER BY ADT_SEQ ASC))
WHERE RNUM <![CDATA[>=]]> #{startRow}
AND RNUM <![CDATA[<=]]> #{endRow}
</select>

(list 객체를 사용할꺼고) 입양신청현황 뿌려 줄 dao 작성

	//★★ 입양신청 리스트
	public List<Adopt> adoptList(Adopt adopt);

(list 객체를 사용할꺼고) 입양신청현황 뿌려 줄 service 작성

   //★★ 입양현황  리스트
   public List<Adopt> AdoptList(Adopt adopt)
   {
      List<Adopt> list = null;
      
      try
      {
         list = adoptDao.adoptList(adopt);
      }
      catch(Exception e)
      {
         logger.error("[AdoptService] dogList Exception", e);
      }
      
      return list;
   }

(list 객체를 사용할꺼고) 입양신청현황 뿌려 줄 model 작성 (선언, 초기화, get+set 추가)

(게시글 수를 담기위한 객체 사용할꺼고) 입양신청 총 count 해줄 xml 작성

<select id="adoptListCount" parameterType="String" resultType="long"> 
SELECT
    COUNT(ADT_SEQ) AS CNT
FROM
    TBL_ADOPT
WHERE 
    USER_ID=#{value}
</select>

(게시글 수를 담기위한 객체 사용할꺼고) 입양신청 총 count 해줄 dao 작성

	//★★ 입양신청 총 수 시작
	public long adoptListCount(String cookieUserId);

(게시글 수를 담기위한 객체 사용할꺼고) 입양신청 총 count 해줄 servcie 작성

   //★★ 입양신청 총 수
   public long adoptListCount(String cookieUserId)
   {
      long count = 0;
      
      try
      {
         count = adoptDao.adoptListCount(cookieUserId);
      }
      catch(Exception e)
      {
         logger.error("[AdoptService] adoptListCount Exception", e);
      }
      
      return count;
   }

(게시글 수를 담기위한 객체 사용할꺼고) 입양신청 총 count 해줄 model 작성 -> 추가할거 없음

3) 페이징 처리하기

adopting.jsp에서 페이징을 위해 필요한 태그 작성

   <div class="row mt-5">
      <div class="col text-center">
         <div class="block-27">
            <ul style="padding: 15px;">
               <c:if test="${!empty paging}">
                  <c:if test="${paging.prevBlockPage gt 0}">
                     <li><a href="javascript:void(0)" onclick="fn_list(1)">&lt;&lt;</a></li>
                     <li><a href="javascript:void(0)"
                        onclick="fn_list(${paging.prevBlockPage})">&lt;</a></li>
                  </c:if>
                  <c:forEach var="i" begin="${paging.startPage}"
                     end="${paging.endPage}">
                     <c:choose>
                        <c:when test="${i ne curPage}">
                           <li><a href="javascript:void(0)" onclick="fn_list(${i})">${i}</a></li>
                        </c:when>
                        <c:otherwise>
                           <li class="active"><a href="javascript:void(0)">${i}</a></li>
                        </c:otherwise>
                     </c:choose>
                  </c:forEach>
                  <c:if test="${paging.nextBlockPage gt 0}">
                     <li><a href="javascript:void(0)"
                        onclick="fn_list(${paging.nextBlockPage})">&gt;</a></li>
                     <li><a href="javascript:void(0)"
                        onclick="fn_list(${paging.totalPage})">&gt;&gt;</a></li>
                  </c:if>
               </c:if>
            </ul>
         </div>
      </div>
   </div>

(list 객체를 사용할꺼고) 입양신청현황 뿌려 줄 + (게시글 수를 담기위한 객체 사용할꺼고) 입양신청 총 count 해줄 + 페이칭처리 해줄 controller 작성

	//페이지 처리할 상수 추가
	private static final int LIST_COUNT = 3;		//한 페이지의 게시물 수
	private static final int PAGE_COUNT = 5;		//페이징 수
    
    //★★입양신청현황 리스트
    @RequestMapping(value="/user/adoptIng")
    public String adoptList(ModelMap model, HttpServletRequest request, HttpServletResponse response)
    {
       String cookieUserId = CookieUtil.getHexValue(request, AUTH_COOKIE_NAME);
      //조회항목(B:확인중, Y:입양승인, N:입양거절)
      String searchType = HttpUtil.get(request, "searchType", "");
      
      //현재 페이지
      long curPage = HttpUtil.get(request, "curPage", (long)1);
      //게시글 수를 담기 위한 객체
      long totalCount = 0;
      //리스트에 띄울 내용을 list로 받기 위한 게시물 리스트 객체
      List<Adopt> list = null;
      //페이징 객체
      Paging paging = null;
      //조회 객체
      Adopt search = new Adopt();
      //관리자 여부
      User user = null;
      
      //view에서 넘어온 searchType과 searchValue과 값이 있는지 확인하여 있으면 조회 객체에 값을 넣어줌
      if(!StringUtil.isEmpty(searchType))
      {
         search.setSearchType(searchType);

      }
      else   //없으면 그냥 ""처리
      {
         searchType = "";
      }
      //서비스에 생성한 조회객체를 넘겨서 게시글 수 조회(여기서 만약 searchType과 searchValue가 없다면 전체 게시글 수, 있다면 해당 타입과 밸류에 맞는 게시글 수만 조회)
      totalCount = adoptService.adoptListCount(cookieUserId);
      
      user = userService.userSelect(cookieUserId);
      
      logger.debug("totalCount : " + totalCount);
      
      //실제 게시물이 존재할때
      if(totalCount > 0)
      {
         //페이징 처리 추가, 객체 생성시 생성자를 통해 페이징 처리까지 수행
         paging = new Paging("/user/adoptIng", totalCount, LIST_COUNT, PAGE_COUNT, curPage, "curPage");
         
         paging.addParam("searchType", searchType);
         paging.addParam("curPage", curPage);
         
         search.setStartRow(paging.getStartRow());
         search.setEndRow(paging.getEndRow());
         search.setUserId(cookieUserId);
         
         //실제 각 게시물 별 정보를 담은 Dog 객체를 list 객체에 담음
         list = adoptService.AdoptList(search);
       
      }
      
      logger.debug("list : " + list);
      
      //view 페이지로 넘길때 이용할 수 있게 각 키별로 값을 담아줌
      model.addAttribute("list", list);
      model.addAttribute("searchType", searchType);
      model.addAttribute("curPage", curPage);
      model.addAttribute("paging", paging);
      model.addAttribute("user", user);
      model.addAttribute("totalCount", totalCount);
      
      return "/user/adoptIng";
   }

4) 현상태 바로 보이도록 (searchType:입양신청서확인중, 입양승인, 입양거절) 처리하기

adopting.jsp에 JSTL <c:choose>, <c:when> 사용

         <div class="col-md-9">
            <section class="ftco-section">
               <div class="container">
                  <div class="row">
                     <div class="col-lg-9 pr-lg-4">
                        <div class="row">
                           <c:if test="${totalCount gt 0}">
                              <c:forEach var="dog" items="${list}" varStatus="status">
                                 <div class="col-md-6 col-lg-4 ftco-animate">
                                    <div class="project">
                                       <div class="img">
                                          <a href="javascript:void(0)"
                                             onclick="fn_view(${dog.adtSeq})"><img
                                             src="/resources/images/dog/${dog.dogSeq}.jpg"
                                             class="img-fluid" alt="Colorlib Template"
                                             style="width: 300px; height: 250px;"></a>
                                       </div>
                                       <div class="text">
                                          <h3 class="fontsss">
                                             <a href="javascript:void(0)"
                                                onclick="fn_view(${dog.adtSeq})">${dog.dogName}</a>
                                          </h3>
                                       </div>
                                       <a href="/resources/images/dog/${dog.dogSeq}.jpg"
                                          class="icon image-popup d-flex justify-content-center align-items-center">
                                          <span class="icon-expand"></span>
                                       </a>
                                       <div class="col-md-9 ftco-animate pb-4"
                                          style="margin: 0; padding: 0;">
                                          <p>
                                             <a href="javascript:void(0)"
                                                onclick="fn_view(${dog.adtSeq})"
                                                class="btn btn-black py-2 px-4"> <c:choose>
                                                   <c:when test="${dog.adtStatus eq 'B'}"> 신청서 확인중 </c:when>
                                                   <c:when test="${dog.adtStatus eq 'Y'}"> 입양승인 </c:when>
                                                   <c:when test="${dog.adtStatus eq 'N'}"> 입양거절 </c:when>
                                                </c:choose>
                                             </a>
                                          </p>
                                       </div>
                                    </div>
                                 </div>
                                 <input type="hidden" name="adtSeq${dog.adtSeq}"
                                    id="adtSeq${dog.adtSeq}" value="${dog.adtSeq}" />
                              </c:forEach>
                           </c:if>
                        </div>
                     </div>

                  </div>
               </div>
            </section>
            <!--★★입양신청이나 입양완료 X 경우 -->
            <div class="container">
               <div class="col-md-12">
                  <div class="row">
                     <div class="col-md-9">
                        <c:if test="${totalCount eq 0}">
                           <div>
                              <img src="/resources/images/noAdopt.jpg"
                                 style="width: 1500px; height: 500px;">
                           </div>
                           <br>
                           <div class="project">
                              <h4 class="fontss3 text-center"><b>입양신청이나 입양완료 이력이 없어요...</b></h4>
                              <!-- Buttons -->
                              <div class="text-right">
                                 <p>
                                    <a href="/adopt/dogList" class="btn btn-black py-2 px-4 fontssss">또리보러가기</a>
                                 </p>
                              </div>
                           </div>
                        </c:if>
                     </div>
                     <div class="col-md-3"></div>
                  </div>
               </div>
            </div>
         </div>