DAY 55 - 이미지 목록보기 HOMEWORK ( 2024.09.23 )

/imageboard/imageboardList.do=imageboard.service.ImageboardListService

 

1페이지당 3개씩 뿌린다.

단가, 개수, 합계는 3자리마다 ,를 찍는다.

번호 이미지 상품명 단가 개수 합계

 

---

imageboardMenu.java

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="nav">
	<h3>
		<p>
			<a href="${ pageContext.request.contextPath }/imageboard/imageboardWriteForm.do">
				이미지 등록</a></p>
			<a href="${ pageContext.request.contextPath }/imageboard/imageboardWriteAJaxForm.do">
				이미지 등록 AJax</a></p>
		<p><a href="${ pageContext.request.contextPath }/imageboard/imageboardList.do">이미지 목록</a></p>
	</h3>
</div>

---

command.properties

/imageboard/imageboardList.do=imageboard.service.ImageboardListService

---

ImageboardListService.java

package imageboard.service;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.control.CommandProcess;

import imageboard.bean.ImageBoardPaging;
import imageboard.bean.ImageboardDTO;
import imageboard.dao.ImageboardDAO;

public class ImageboardListService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
		int pg = 1;
		if(request.getParameter("pg") != null)
			pg = Integer.parseInt(request.getParameter("pg"));
		
		//1페이지당 3개씩
    	int endNum = pg * 3;
    	int startNum = endNum - 2;
    	
		//DB
    	ImageboardDAO imageboardDAO = ImageboardDAO.getInstance();
	    List<ImageboardDTO> list = imageboardDAO.imageboardList(startNum, endNum);
    	
	    //페이징 처리
	    int totalA = imageboardDAO.getTotalA();
	    
	    ImageBoardPaging imageboardPaging = new ImageBoardPaging();
	    imageboardPaging.setCurrentPage(pg);
	    imageboardPaging.setPageBlock(3);
	    imageboardPaging.setPageSize(3);
	    imageboardPaging.setTotalA(totalA);
	    
	    imageboardPaging.makePagingHTML();
	    
	    request.setAttribute("list", list);
	    
	    request.setAttribute("pg", pg);
	    request.setAttribute("imageboardTotalA", imageboardPaging.getTotalA());
	    request.setAttribute("imageboardPagingHTML", imageboardPaging.getPagingHTML());
	    
	    return "/imageboard/imageboardList.jsp";
	}

}

---

ImageBoardPaging.java

package imageboard.bean;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class ImageBoardPaging {
	private int currentPage; //현재페이지
	private int pageBlock; //[이전][1][2][3][다음]
	private int pageSize; //1페이지당 5개씩
	private int totalA; //총글수
	private StringBuffer pagingHTML;
	
	public void makePagingHTML() {
		pagingHTML = new StringBuffer();
		
		int totalP = (totalA + pageSize-1) / pageSize;
		
		int startPage = (currentPage-1) / pageBlock * pageBlock + 1;
		int endPage = startPage + pageBlock - 1;
		if(endPage > totalP)
			endPage = totalP;
		
		if(startPage != 1)
			pagingHTML.append("<span id='paging' onclick='imageboardPaging(" + (startPage-1) + ")'>이전</span>");
		
		for(int i=startPage; i<=endPage; i++) {
			if(i == currentPage)
				pagingHTML.append("<span id='currentPaging' onclick='imageboardPaging(" + i + ")'>" + i + "</span>");
			else
				pagingHTML.append("<span id='paging' onclick='imageboardPaging(" + i + ")'>" + i + "</span>");
		}//for
		
		if(endPage < totalP)
			pagingHTML.append("<span id='paging' onclick='imageboardPaging(" + (endPage+1) + ")'>다음</span>");
	}
}

---

ImageboardDAO.java

	public List<ImageboardDTO> imageboardList(int startNum, int endNum) {
		Map<String, Integer> map = new HashMap<>();
		map.put("startNum", startNum);
		map.put("endNum", endNum);
		
		SqlSession sqlSession = sqlSessionFactory.openSession(); //생성
		List<ImageboardDTO> list = sqlSession.selectList("imageboardSQL.imageboardList", map);
		sqlSession.close();
		return list;
	}


	public int getTotalA() {
		SqlSession sqlSession = sqlSessionFactory.openSession(); //생성
		int totalA = sqlSession.selectOne("imageboardSQL.getTotalA");
		sqlSession.close();
		return totalA;
	}

---

imageboardMapper.xml

	<!-- 글목록 -->
	<select id="imageboardList" parameterType="java.util.Map" resultType="imageboard">
	    <![CDATA[
	    	select * from (
	        select rownum rn, tt.* from (
	            select * from imageboard order by seq desc
	        ) tt
	    	)where rn >= #{startNum} and rn <= #{endNum}
	    ]]>
	</select>
	
	<!-- 총글수 -->
    <select id="getTotalA" resultType="int">
        select count(*) from imageboard
    </select>

---

imageboardList.jsp

<body>
   <div id="header">
		<h1>
			<img alt="하트" src="${ pageContext.request.contextPath }/image/free-icon-love-4096198.png" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'">
			MVC를 활용한 미니프로젝트
		</h1>
   </div>
    <input type="hidden" id="pg" value="${pg }" />
    <table>
        <thead>
            <tr>
                <th>번호</th>
                <th>이미지</th>
                <th>상품명</th>
                <th>단가</th>
                <th>개수</th>
                <th>합계</th>
            </tr>
        </thead>
        <tbody>
        	<c:if test="${list != null}">
        		<c:forEach var="imageboardDTO" items="${list}">       		
        		 <tr> 
                     <td>${imageboardDTO.getSeq()}</td>
					<td>
					    <img src="${pageContext.request.contextPath}/storage/${imageboardDTO.getImage1()}" alt="이미지" width="100" height="100" />
					</td>

                     <td>${imageboardDTO.getImageName()}</td>
                     <td>${imageboardDTO.getImagePrice()}</td>
                     <td>${imageboardDTO.getImageQty()}</td>
                     <td>
                         <fmt:formatNumber value="${imageboardDTO.getImagePrice() * imageboardDTO.getImageQty()}" pattern="#,###" /> 
                     </td>
                 </tr>
                 </c:forEach>
        	  </c:if> 	
        </tbody>
    </table>
	<div style="margin-top: 15px;">
		${imageboardPagingHTML}
	</div>

<script type="text/javascript">
function imageboardPaging(pg){
	location.href = "/projectMVC/imageboard/imageboardList.do?pg=" + pg;
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
</html>

 

 

강사님 답

<body>
   <div id="header">
		<h1>
			<img alt="하트" src="${ pageContext.request.contextPath }/image/free-icon-love-4096198.png" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'">
			MVC를 활용한 미니프로젝트
		</h1>
   </div>
   	<jsp:include page="../main/imageboardMenu.jsp" />
    <input type="hidden" id="pg" value="${pg }" />
    <table>
        <thead>
            <tr>
                <th>번호</th>
                <th>이미지</th>
                <th>상품명</th>
                <th>단가</th>
                <th>개수</th>
                <th>합계</th>
            </tr>
        </thead>
        <tbody>
        	<c:if test="${list != null}">
        		<c:forEach var="imageboardDTO" items="${list}">       		
        		 <tr> 
                     <td>${imageboardDTO.getSeq()}</td>
					<td>
					    <a href="#">
					    	<!-- src="가상폴더의 위치" -->
					    	<img src="/projectMVC/storage/${imageboardDTO.getImage1()}" alt="${imageboardDTO.getImageName()}" width="100" height="100" />
					    </a>
					</td>

                     <td>${imageboardDTO.getImageName()}</td>
                     <td>
                         <fmt:formatNumber value="${imageboardDTO.getImagePrice()}" pattern="#,###" /> 
                     </td>
                     <td>${imageboardDTO.getImageQty()}</td>
                     <td>
                         <fmt:formatNumber value="${imageboardDTO.getImagePrice() * imageboardDTO.getImageQty()}" pattern="#,###" /> 
                     </td>
                 </tr>
                 </c:forEach>
        	  </c:if> 	
        </tbody>
    </table>
	<div style="margin-top: 15px;">
		${imageboardPagingHTML}
	</div>

<script type="text/javascript">
function imageboardPaging(pg){
	location.href = "/projectMVC/imageboard/imageboardList.do?pg=" + pg;
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
</html>