국비 교육 82일차 - oracle index 활용

728x90

이번 시간에는 데이터를 검색해서 빠르게 값을 가져올 수 있는 방법 중 하나인 oracle index 검색방법을 포스팅해보고자 한다.

sqldeveloper에 검색을 실제로 해보면 그 시간이 엄청 단축된 것을 확인할 수 있다.

select /*+index asc(recipe recipe_no_pk) */ no, poster from recipe;

이렇게 조회할 컬럼의 인덱스명을 주고 같이 검색을 하면 데이터를 가져오는 속도가 ORDER BY를 썼을때보다 더 빨라진다.

그리고 저번에도 배웠던 BLOCK 페이징 기법

final int BLOCK=10;
	   int startPage=((curpage-1)/BLOCK*BLOCK)+1; //curpage=1~10 => 1 블록 시작위치 
	   // [1][2]...[9]
	   int endPage=((curpage-1)/BLOCK*BLOCK)+BLOCK;
	   
	   int allPage=totalpage;
	   if(endPage>allPage)
		   endPage=allPage;

1-10까지는 전부 시작페이지가 1이고,

11-20까지는 시작페이지가 11,

21-30까지는 시작페이지가 21 이런식으로 나갈 수 있다. (저번에도 한번 포스팅했다)

 <div class="row">
      <div class="text-center">
        <ul class="pagination pagination-lg">
         <%-- startPage : 1,11,21,31... --%>
         <%--
             11 => 10 ==> startPage=1
          --%>
         <c:if test="${startPage>1 }">
		  <li><a href="list.do?page=${startPage-1 }">&lt;</a></li>
		 </c:if>
		  <c:forEach var="i" begin="${startPage }" end="${endPage }">
		   <c:if test="${curpage==i }">
		    <c:set var="type" value="class=active"/>
		   </c:if>
		   <c:if test="${curpage!=i }">
		     <c:set var="type" value=""/>
		   </c:if>
		   <li ${type }><a href="list.do?page=${i }">${i }</a></li>
		  </c:forEach>
		 <%-- 10,20,30,40... --%>
		 <c:if test="${endPage<allPage }">
		  <li><a href="list.do?page=${endPage+1 }">&gt;</a></li>
		 </c:if>
		</ul>
      </div>
    </div>

그리고 실제로 VIEW단에서 적용해본 코드

STARTPAGE가 1보다 클때만 이전 페이지 버튼이 생길수 있게, ENDPAGE가 토탈페이지보다 작을때만 다음페이지 버튼이 생길 수 있게 만들어 준다.

그리고 그 사이에 foeEach로 블록 숫자들을 전부 출력하되, 현재페이지와 출력되는 블럭의 페이지 숫자가 같은 경우 버튼의 색깔을 다르게 줘서 표시를 해준다.

<div class="row">
     <c:forEach var="vo" items="${list }">
             <div class="col-md-3">
			    <div class="thumbnail">
			        <img src="${vo.poster }" alt="Lights" style="width:100%" class="recipe_img" value="${vo.no }">
			        <div class="caption">
			          <p style="font-size: 8px">${vo.title }</p>
			        </div>
			    </div>
		      </div>
     </c:forEach>
    </div>

그리고 이건 카드로 레시피 그림이 출력되는 코드.

중요시 봐야할건 여기서 detail 출력을 페이지를 이동시켜서 하는게 아니라, dialog 창을 띄워서 화면 이동 없이 ajax로 띄우고 있다는 것이다.

구분할 수 있도록 class name을 주고,

 <div id="dialog" title="레시피 만드는 방법" style="display:none">

일단 가장 아래에 dialog 창을 띄울 코드를 작성해둔다.

$(function(){
	$('.recipe_img').css("cursor","pointer");
	$('.recipe_img').click(function(){
		let no=$(this).attr("value");
		$.ajax({
			type:'GET',
			url:'detail.do',
			data:{"no":no},
			success:function(result)
			{
				$('#dialog').html(result);
				$('#dialog').dialog({
					autoOpen:true,
					width:1300,
					height:900,
					modal:true
				})
				$('#dialog').show()
			}
		})
		
	})
});

ajax에서 결과값을 detial.do로 보내주고 있기 때문에, 먼저 컨트롤러에서 해당하는 부분을 확인한다

 @GetMapping("recipe/detail.do")
   public String recipe_detail(int no,Model model)
   {
	   // DAO => RecipeDetailVO 
	   RecipeDetailVO vo=dao.recipeDetailData(no);
	   model.addAttribute("vo", vo);
	   return "detail";
   }

여기서 결과를 성공적으로 수행하면, success 아래 부분을 실행하고 들어오게 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row{
  margin: 0px auto;
}
h1 {
  text-align: center;
}
</style>
</head>
<body>
   <div style="height:50px"></div>
   <div class="container">
     <div class="row">
       <table class="table">
        <tr>
          <td class="text-center">
           <img src="${vo.poster }" width=100%>
          </td>
        </tr>
        <tr>
          <td class="text-center">${vo.title }</td>
        </tr>
        <tr>
          <td class="text-center">${vo.content }</td>
        </tr>
       </table>
       <table class="table">
         <tr>
          <td class="text-center">${vo.info1 }</td>
          <td class="text-center">${vo.info2 }</td>
          <td class="text-center">${vo.info3 }</td>
         </tr>
         <tr>
           <td colspan="3">레시피 만드는 방법</td>
         </tr>
         <tr>
           <td colspan="3">
            <c:forTokens items="${vo.food_make }" delims="\n" var="s">
              ${s }
            </c:forTokens>
           </td>
         </tr>
         <tr>
           <td colspan="3" class="text-center">
             <img src="${vo.chef_poster }"><br>
             ${vo.chef }(${vo.chef_info })
           </td>
         </tr>
       </table>
     </div>
   </div>
</body>
</html>

detail.jsp의 내용은 위와 같다.

728x90

'programming > Gukbi' 카테고리의 다른 글

국비 교육 84일차 - spring tiles (0)	2021.04.26
국비 교육 83일차 - AJAX 검색 기능 활용 (0)	2021.04.26
국비 교육 81일차 - annotation service (0)	2021.04.21
국비 교육 81일차 - xml, json 파싱 (0)	2021.04.21
국비 교육 80일차 - spring file upload, spring5개발 (0)	2021.04.21

hardworking

국비 교육 82일차 - oracle index 활용

'programming > Gukbi' 카테고리의 다른 글

티스토리툴바

국비 교육 82일차 - oracle index 활용

'programming > Gukbi' 카테고리의 다른 글

'programming/Gukbi' Related Articles

티스토리툴바