[요리 후기 조회] Ajax로 요리 후기 조회 기능 구현

* 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다.

당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다.

 

이번 포스팅은 요리 후기 조회 기능 구현입니다.

요리 후기의 경우 조회하기는 Ajax를 이용해서, 작성하기는 Servlet을 이용해서 기능 구현했습니다.

 

---

대략적인 UI는 다음과 같습니다. 

 

1. SQL

	<entry key="selectReviewList">
		SELECT 
		    REVIEW_NO
		    ,NICKNAME
		    ,REVIEW_CONTENT
		    ,STAR
		    ,IMG_NAME
		    ,R.ENROLL_DATE ENROLL_DATE
		   ,PROFILE_IMG
		    
		FROM REVIEW R
		JOIN MEMBER USING(USER_NO)
		WHERE RECIPE_NO = ?
		ORDER BY ENROLL_DATE DESC
	</entry>

요리 후기 조회 시 필요한 정보는

레시피 번호 / 후기 작성자의 닉네임 / 요리 후기 내용 / 별점 / 요리 후기 이미지/  작성일 / 작성자의 프로필 이미지 경로 총 7개입니다. 

이때 어떤 레시피에 담긴 댓글인지를 확인하기 위해 RECIPE_NO을 ?로 두었습니다.

 

---

2. View

 

<div id="review-detail"  align="center">

  <table style="width: 500px;">

    <div id="image_container"> <!-- 이미지 마크업 생성 공간 --> </div>


    <tbody>

   		 <!-- ajax로 받아온 리뷰 데이터가 데이터가 출력되는 곳 -->

    </tbody>

  </table>

</div>

아이디가 review-detail인 div를 생성 후, 결과 값을 받아줄 공간을 세팅했습니다. 

 

댓글 조회와 마찬가지로 기본적으로 요소들이 다 생성된 이후에 바로 selectReviewList()라는 함수를 호출하도록 구현했습니다.

$(function(){
  selectReplyList();
  setInterval(selectReplyList,1000);
  selectReviewList();
})

 

이때 호출되는 selectReviewList()함수는 다음과 같습니다. 

function selectReviewList(){

  $.ajax({
    url: "list.review"
    ,data : {recipeNo : <%=rc.getRecipeNo()%>}
    ,success : function(list){
              var result = "";
              for(var i in list){

              result += 
              "<br>" + 
              "<tr>" + 
                "<td rowspan='3'>" +
                  "<div class='box' style='background: #BDBDBD;''>" + 
                  "<img class='profile' src='"  + list[i].profileImg +  "'>" + 
                  "</div>" +
                "</td>" + 
                "<td>"+"<b>"+ list[i].reviewWriter+"</b>"+"</td>" +
                "<td>"+ list[i].enrollDate+"</td>" +
                "<td rowspan='3' >" + 
                  "<img src='" + "<%=contextPath%>" +"/"+list[i].reviewImg +"'"+"class='review-detail-img' id='review-modal-btn'>" +
                "</td>" + 
              "</tr>" + 
              
              "<tr>" +
             	 "<td colspan='2'>" +  list[i].reviewContent + "</td>" + 
              "</tr>" + 
              
              "<tr>" + 
             	 "<td colspan='2'>" + list[i].star + "</td>" + 
              "</tr>"
              
              + "<br>" 
    }
   		 $("#review-detail tbody").html(result);
    }
  })
}

url은 실행시 구동되는 Servlet의 맵핑 값을 적었습니다.

data는 SQL에서 필요했던 ?인 recipeNo을 넘겨주었습니다. recipeNo은 레시피 상세보기 페이지에서 조회할 때 Recipe라는 객체에 recipeNo이라는 필드에 담겨있습니다.

 

success에는 성공 시 호출되는 함수를 기입했습니다. result라는 비어있는 문자열을 생성하고 그 뒤에 반복문을 돌려서 list에 담긴 값들( 요리 후기 조회 시 필요한 정보들)을 모두 조회할 예정입니다.

 

반복문이 끝난 후 아이디가 review-detail의 tbody요소 안에 result를 담아줍니다.

 

---

3. Controller

int recipeNo = Integer.parseInt(request.getParameter("recipeNo"));
ArrayList <Review> list = new RecipeService().selectReviewList(recipeNo);

response.setContentType("application/json;charset=utf-8");
new Gson().toJson(list,response.getWriter());

Ajax를 이용했기 때문에 요청 시 보이는 화면은 따로 설정하지 않았습니다. 

recipeNo는 파싱을 해줍니다.

RecipeService()에 있는 selectReviewList() 메서드를 실행합니다. 이때 recipeNo을 매개변수로 전달합니다. 

ArrayList <Review> list에 조회되어 올 결괏값들을 담아줍니다.

 

파싱을 하는 이유에 대해서는 하단의 포스팅을 참고하시면 좋을 것 같습니다. 

[댓글조회] Ajax로 댓글 조회 기능 구현

 

 

---

4. Service

	public ArrayList<Review> selectReviewList(int recipeNo){
		
		
		Connection conn = getConnection();
		ArrayList<Review> list = new RecipeDao().selectReviewList(conn,recipeNo);
		
		close(conn);
		return list;
		
		
	}

service단은 크게 다르지 않습니다. 생성된 Connection 객체와 recipeNo을 dao단으로 보내줍니다.

단순하게 조회만 했기 때문에 이때는 commit과 rollback을 따로 하지 않습니다. 

 

---

5. DAO

	public ArrayList<Review> selectReviewList(Connection conn,int recipeNo ){
		
		ArrayList<Review> list = new ArrayList<>();
		PreparedStatement pstmt = null;
		ResultSet rset = null;
		String sql = prop.getProperty("selectReviewList");
		
		try {
			pstmt = conn.prepareStatement(sql);	
			pstmt.setInt(1, recipeNo);
			rset = pstmt.executeQuery();
			while(rset.next()) {
				list.add(new Review(
						rset.getInt("REVIEW_NO")
						,rset.getString("NICKNAME")
						,rset.getString("REVIEW_CONTENT")
						,rset.getDouble("STAR")
						,rset.getString("IMG_NAME")
						,rset.getDate("ENROLL_DATE")
						,rset.getString("PROFILE_IMG")
						));
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			close(rset);
			close(pstmt);
		}
		
		return list;
		
	}

 

조회하기 기능이기 때문에 ResultSet에 실행한 결과들을 먼저 담아주고, 반복문을 이용해서 커서를 움직여줍니다.

SQL에서 필요했던 7가지 정보들을 Review VO 클래스에 매개변수 생성자를 이용해서 값을 담아주었습니다.

이때도 마찬가지로 조회되는 매개변수의 순서와 SQL 구문의 순서를 일치시켜야 합니다.

 

그리고 list를 Service단으로 반환했습니다.

 

 

---