국비 교육 69일차 - 찜목록, 댓글 달기 수정 삭제

로그인 기능이 완성되었기 때문에 나머지 기능들도 차차 완성시켜주었다. 

 

일단 찜목록부터 구현해보자.

 

찜을 완성하기 위해서는 모든 상세보기 view에 찜하기 버튼을 만들어 두고, 그 버튼을 누르면 찜목록 테이블에 값이 넘어가게끔 만들어 주어야 한다. 우리조 프로젝트는 호텔찜, 여행지목록찜 테이블을 따로 만들었는데 

원래는 같은 테이블을 쓰되, 컬럼명을 다르게해서 각각 다른 카테고리의 찜 데이터들이 하나의 테이블에 저장되어 있어야 한다고 한다.. 

 

dao를 만들때 저장된 값들을 보고 조건문을 사용해서 각각 insert문장을 다르게 주면 되지 않을까 생각해봤다. 

그러면 하나의 VO에 여러 변수들이 한꺼번에 생겨서 복잡할것 같긴하다.. 

 

그래도 이게 실무에 더 가까운 프로그램이라고 하니.. 일단 나중에 생각하고 포스팅은 수업시간에 배운대로 찜목록 테이블을 2개로 나눠서 만들어 본 것으로 써보겠다. 

 

 

일단 view에서 로그인이 되었을 시에만 찜하기 버튼이 보일 수 있도록 만들어준다. 

 <c:if test="${sessionScope.id!=null }">
   						<c:if test="${count==0 }">
                        <a href="../trip/jjim.do?no=${tvo.no }"><button class="ripple" id="jjim">찜하기</button></a>
                        </c:if>
                        <c:if test="${count!=0 }">
                        <button class="ripple" id="jjim">찜완료</button>
                        </c:if>
                     </c:if>

앞으로 로그인 여부는 전부 세션에 아이디가 저장되어 있는지를 확인해준다. 

위의 count변수는 나중에 처리하는 거라 일단 무시하고, 찜하기 버튼을 누르면 jjim.do 파일로 넘어갈 수 있게 처리를 해둔다. 여기서 jjim.do 파일로 넘겨줄때 글 번호가 꼭 필요하기 때문에, no를 같이 지정을 해주고 넘겨준다. 

 

//찜하기
  @RequestMapping("trip/jjim.do")
  public String trip_jjim(HttpServletRequest request,HttpServletResponse response)
  {
     String no=request.getParameter("no");
     HttpSession session=request.getSession();
     String id=(String)session.getAttribute("id");
     
     TripDAO dao=TripDAO.newInstance();
     dao.TripJjimInsert(id, Integer.parseInt(no));
     return "redirect:../trip/trip_detail.do?no="+no;
  }

 model에서 처리해주는 찜 기능. 

 

일단 dao 메소드에서 글번호와 아이디를 이용해서 찜목록에 해당 데이터들을 저장해줄 예정이기 때문에, request 파라미터로 no를 받아오고, 세션에서는 id를 받아와서 저장해준다. 그리고 메소드를 만들어서 데이터를 테이블에 저장해주고 다시 detail로 화면을 redirect 시켜준다. 

 

package com.sist.vo;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter

public class TripJjimVO {
	private int no;
	private String id;
	private int cno;
}

 테이블은 간단하게 되어있다. 찜의 번호를 의미하는 no, 사용자 id, 그리고 글 번호를 의미하는 cno 이 세개의 변수를 일단 저장해둔다. 나머지 데이터들은 TripVO에서 받아올 것이기 때문에 굳이 따로 저장해줄 필요가 없다. 

 

 //찜하기
   public void TripJjimInsert(String id, int no){
     try{
      getConnection();
      String sql="INSERT INTO trip_jjim VALUES( "
           +"tjj_no_seq.nextval,?,?)";
      ps=conn.prepareStatement(sql);
      ps.setString(1,id);
      ps.setInt(2,no);
      ps.executeUpdate();
     }
     catch(Exception ex)
     {
      ex.printStackTrace();
     }
     finally
     {
      disConnection();
     }
      
   }

 id와 no를 매개변수로 받아오면 위와같이 inset문을 사용해서 저장해준다. 찜의 no값은 시퀀스를 사용해서 자동증가하게 만들어준다. 

 

그러면 이제 처리해줄 것은 view에서 찜이 되었는지 아닌지 확인을 해주는것이랑, 마이페이지에 가서 찜 데이터를 불러올 수 있게 하는 기능이다. 

 

//찜하기 체크
   public int TripJjimCheck(int cno,String id)
   {
     int count=0;
     try
     {
    	 
      getConnection();
      String sql="SELECT COUNT(*) FROM trip_jjim "
         +"WHERE cno=? AND id=?";
      ps=conn.prepareStatement(sql);
      ps.setInt(1,cno);
      ps.setString(2,id);
      ResultSet rs=ps.executeQuery();
      rs.next();
      count=rs.getInt(1);
      rs.close();
     }
     catch(Exception ex)
     {
      ex.printStackTrace();
     }
     finally
     {
      disConnection();
     }
     return count;
   }

 찜이 되어있는지 아닌지 여부를 체크해주는 메소드. 

cno와 (글번호), id를 받아와서 갯수를 카운트해준다. 만약에 카운트가 1이상이면 (찜이 되어 있으면) return값으로 1을 반환하고 그렇지 않으면 0을 반환한다. 

 

tripModel detail.do 페이지에서 아래와 같이 count변수를 받아준다. 

 int count=dao.TripJjimCheck(Integer.parseInt(no),id);
     request.setAttribute("count", count);

 리퀘스트에 값을 저장한뒤 넘겨주면, 

<c:if test="${sessionScope.id!=null }">
   						<c:if test="${count==0 }">
                        <a href="../trip/jjim.do?no=${tvo.no }"><button class="ripple" id="jjim">찜하기</button></a>
                        </c:if>
                        <c:if test="${count!=0 }">
                        <button class="ripple" id="jjim">찜완료</button>
                        </c:if>
                     </c:if>

  위와 같이 찜전/후를 나눠서 처리해줄 수 있다. count가 0이어야 찜하기 버튼이 보이고, 아니라면 찜이 완료되었다는 버튼을 보이게 해준다. 

 

그리고 마이페이지에 가서 출력을 해주면 된다. 

 

 <div class="row zzz" >
                <c:forEach var="hvo" items="${hList }" varStatus="s">
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="single-place mb-30" >
                            <div class="place-img">
                               <a href="../hotel/detail.do?no=${hvo.no }"><img src="${hvo.poster }" alt=""></a> 
                            </div>
                            <div class="place-cap">
                                <div class="place-cap-top" >
                                    <h3><a href="../hotel/detail.do?no=${hvo.no }">${hvo.title }</a></h3>
                                    <p class="dolor">${hvo.price }/일</p>
                                </div>
                                <div class="place-cap-bottom">
                                    <ul>
                                 	<li>${hvo.addr }</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    </c:forEach>
                   </div>

 일단 view는 이렇게 만들어뒀는데 이걸 이해하려면 dao부터 다시 살펴봐야 한다. 

 

//찜목록
   public List<TripJjimVO> TripJjimListData(String id)
   {
     List<TripJjimVO> list=new ArrayList<TripJjimVO>();
     try
     {
      getConnection();
      String sql="SELECT no,cno " 
         +"FROM trip_jjim "
         +"WHERE id=?";
      ps=conn.prepareStatement(sql);
      ps.setString(1,id);
      ResultSet rs=ps.executeQuery();
      while(rs.next())
      {
         TripJjimVO vo=new TripJjimVO();
         vo.setNo(rs.getInt(1));
         vo.setCno(rs.getInt(2));
         list.add(vo);
      }
      rs.close();
     }
     catch(Exception ex)
     {
      ex.printStackTrace();
     }
     finally
     {
      disConnection();
     }
     return list;
   }

 마이페이지에 찜목록을 출력시키기 위한 메소드. 

 

마이페이지에 출력을 해야하기 때문에 id를 매개변수로 받아주고, 찜에 있는 no와 cno를 가져와서 TripJjimVO 리스트에 저장을 해준다. 그리고 그 리스트를 반환해주고 메소드는 마무리 된다. 

 

HttpSession session=request.getSession();
String id=(String)session.getAttribute("id");

// 여행 찜목록
		TripDAO tdao=TripDAO.newInstance();
		
		List<TripJjimVO> tList=tdao.TripJjimListData(id);
		List<TripVO> trList=new ArrayList<TripVO>();
		for(TripJjimVO vo:tList)
		{
			TripVO tvo=tdao.TripDetailData(vo.getCno());
			trList.add(tvo);
		}
		int tripCount=tdao.tripJjimCount(id);
        
        request.setAttribute("tList", tList);
		request.setAttribute("trList", trList);
		
		request.setAttribute("id", id);

 모델에서는 id를 세션에서 받아와서 찜목록을 불러온다. 

 

여기서 잘 생각해야할 점은 찜테이블에는 찜번호와 찜한 글 번호만 저장되어 있다는 점이다. 

나머지 정보들은 이미 만들어 두었던 TripVO에 채워서 가져와야한다. 

 

일단 찜목록 리스트에 값을 받아온 다음, tripDetailData에 찜의 cno (글의 no)를 받아와서 TripVO에 값을 채워준다. 

그리고 나서 TripVO의 값을 받아 넣어주는 trList를 반환하고 이것을 request 값으로 넘겨줘야 한다. 

 

아마 찜에서 조금 복잡하다면 이부분이지 않을까 싶다. 

 

글번호의 no는 찜목록에서 cno였다는 것, 그리고 따로 리스트를 만들어 각각의 리스트를 넘겨줘야 한다는 것. 

 

이점을 잘 기억해야한다. 

 

그리고 view에서 출력만 해주면 완성이다. 

 

 <c:forEach var="tvo" items="${trList }" varStatus="s">
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="single-place mb-30">
                            <div class="place-img">
                                <img src="${tvo.poster }" alt="">
                            </div>
                            <div class="place-cap">
                                <div class="place-cap-top">
                                    <h3><a href="../trip/trip_detail.do?no=${tvo.no }">${tvo.title }</a></h3>
                                    <p class="dolor">${tvo.category }</p>
                                </div>
                                <div class="place-cap-bottom">
                                    <ul>
                                       
                                        <li>${tvo.addr }</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                   </c:forEach>

 이렇게 trList를 받아와서 값을 채워넣어준다. 별로 어렵진 않다. 

 

// 찜목록 몇개인지 
   public int tripJjimCount (String id)
   {
	   int count =0;
	   try
	   {
		   getConnection();
		   String sql="SELECT COUNT(*) FROM trip_jjim "
				   +"WHERE id=?";
		   ps=conn.prepareStatement(sql);
		   ps.setString(1, id);
		   ResultSet rs=ps.executeQuery();
		   rs.next();
		   count=rs.getInt(1);
	   } 
	   catch (Exception ex)
	   {
		   ex.printStackTrace();
	   }
	   finally
	   {
		   disConnection();
	   }
	   return count;
   }

 이거는 그냥 가볍게 찜목록에 몇개가 저장되어 있는지 확인해주는 메소드. 

이렇게 다 해주고 나면 결과가 이렇게 출력된다. 

 

 

그리고 댓글 수정 삭제

 

일단 view는 이렇다 

 <!-- 댓글 영역 -->
         
          <div class="row">
          <!-- 댓글 쓰기 -->
         <!--  <h4>댓글 달기</h4><br> -->
          <div class="comments">
           <c:if test="${sessionScope.id!=null }"> 
           
		<div class="comment-wrap">
		<form action="../board/board_reply_insert.do" method=post>
				<div class="comment-block">
						<textarea name="msg" id="id" cols="100" rows="3" placeholder="Add comment..."></textarea>
						<input type="hidden" name=pno value="${no }">
				</div>
				<div style="height:20px"></div>
				 <button class="ripple -dark center">댓글 등록</button>
			</form>
			</div>
			
		</c:if>
		<!-- 댓글 출력 -->
		 <c:forEach var="rvo" items="${rList }">
		<div class="comment-wrap">
				<div class="comment-block">
						<p class="comment-text">${rvo.pbr_msg }</p>
						<p class="comment-text" style="font-size:10px;">작성자:&nbsp;${rvo.pbr_name }</p>
						<div class="bottom-comment">
								<div class="comment-date">${rvo.dbday }</div>
								<!-- 수정, 삭제 -->
								<c:if test="${sessionScope.id==rvo.pbr_id }">
								<ul class="comment-actions">
									<li class="complain updateBtn" data-no="${rvo.pbr_no }">수정</li>
								    <li class="reply delBtn" data-no="${rvo.pbr_no }" data-pno="${no }">삭제</li>
								    
								</ul>
								
								
								
								<div class="comment-wrap updateli" style="display:none" id="m${rvo.pbr_no }">
								<form action="../board/board_reply_update.do" method="post">
								<div class="comment-block">
								<textarea name="msg" id="id" cols="50" rows="3" placeholder="${rvo.pbr_msg }"></textarea>
									<input type="hidden" name=pno value="${no }">
									 <input type="hidden" name=no value="${rvo.pbr_no }">
									</div>
								<div style="height:10px"></div>
				 				<button type="submit" class="ripple -dark center">댓글 수정</button>
				 				</form>	
										</div>
								
								</c:if>
							</div>
						</div>
					</div>
					</c:forEach> 	
				</div>
			</div>
			</div>
			<!-- --------------------------댓글 영역 끝----------------------------- -->

ajax를 이용해서 버튼을 누르면 수정창이 뜨게끔 설정했다. 

 

$('.updateBtn').click(function(){
		$('.updateli').hide();
		$('.updateBtn').text("수정");
		let no=$(this).attr("data-no");
		if(i==0)
		{
			$(this).text("취소");
			$('#m'+no).show("slow");
			i=1;
		}
		else
		{
			$(this).text("수정");
			$('#m'+no).hide("slow");
			i=0;
		}
		
	});

버튼을 눌러야 수정창이 나오게 해주고, 다시 취소버튼을 누르면 수정창을 가려준다. 

 

@RequestMapping("food/food_reply_update.do")
  public String food_reply_update(HttpServletRequest request,HttpServletResponse response)
  {
	  try
	  {
		  request.setCharacterEncoding("UTF-8");
	  }catch(Exception ex) {}
	  String msg=request.getParameter("msg");
	  String no=request.getParameter("no");
	  String cno=request.getParameter("cno");
	  FoodReplyVO vo=new FoodReplyVO();
	  vo.setNo(Integer.parseInt(no));
	  vo.setMsg(msg);
	  FoodDAO dao=FoodDAO.newInstance();
	  dao.foodReplyUpdate(vo);
	  return "redirect:../food/food_detail.do?no="+cno;
  }

 받아온 매개변수들은 이렇게 저장을 따로 해준다. 그리고 오라클에 연결하면 dao 에서 만든 메소드가 값을 받아서 업데이트 해준다.