[JSP MVC2] 강의 정리 5 - 관리자 페이지: 필요 메소드 적어놓기

별의개발자커비·2023년 7월 5일

JSP

목록 보기

23/31

강좌 85,6 - Index, Admin 페이지를 위한 서비스 목록 추가하기

1. 만들 페이지 모양: 예시

2. 만들 페이지 모양: 내 버전

admin/index.jsp 가 관리자 홈

3.내가 추가할 함수

getProductNewestList()
pubProductAll(ids)
insertProduct(Product)
removeProductAll(productId)
deleteProduct(productId) // 삭제되면 삭제된 개수인 1을 반환, 아니면 0 반환
updateProduct(productId)

4. ProductService에 위의 함수 추가

01. ProductService.java

public class ProductService {
	public int removeProductAll(int [] ids) {
	
		return 0 ;
	}
	
	public int pubProductAll(int [] ids) {
		
		return 0 ;
	}
	
	public int insertProduct(Product product) {
		return 0 ;
	}
	
	
	public int deleteProduct(String productId) {	// 삭제되면 삭제된 개수인 1을 반환, 아니면 0 반환 
		return 0 ;
	}
	
	
	public int updateProduct(Product product) {	// 삭제되면 삭제된 개수인 1을 반환, 아니면 0 반환 
		return 0 ;
	}
	
	public List<Product> getProductNewestList(){
		return null;
	}
 // 생략 //   
}

강좌 87 -admin/index 페이지 추가하기

admin/index.jsp

<%@ page contentType="text/html; charset=utf-8"%>

<html>
<head>
<head>
	<title>관리자홈</title>
	<!--  CSS  -->
	<link rel="stylesheet" href="../../resources/css/styles.css"/>
	<link rel="stylesheet" href="../../resources/css/bootstrap.min.css" />
	<!--   JS-->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

	<jsp:include page="../../../menu.jsp" />
	
	<header class="bg-dark py-5">
		<div class="container px-4 px-lg-5 my-5">
			<div class="text-center text-white">
				<h1 class="display-4 fw-bolder">관리자 페이지</h1>
			</div>
		</div>
	</header>
	
	<div class="container">
		<div class="text-center">
		
		</div>
	</div>	
		<hr>
	
	<jsp:include page="../footer.jsp" />
</body>
</html>

IndexController.java

package controller.admin;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/admin/index")
public class IndexController extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
	request.getRequestDispatcher("/WEB-INF/view/admin/index.jsp").forward(request, response);	

	
	}
}

강좌 88 -admin/notice/list 페이지 추가하기

관리자 메뉴 토글의 - 상품 수정을 누르면 상품 목록 수정 페이지로 가게

controller 파일 실행시 이클립스 버그

현재 패키지, 파일 구조

view/admin/product/list

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<html>
<head>
<link href="../../resources/css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="../../resources/css/bootstrap.min.css" />
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../resources/js/scripts.js"></script>


<title>상품 수정</title>
</head>
<body>
	<jsp:include page="../../../../menu.jsp" />

	<header class="bg-dark py-5"  >
		<div class="container px-4 px-lg-5 my-5">
			<div class="text-center text-white">
				<h1 class="display-4 fw-bolder">상품 수정</h1>
			</div>
		</div>
	</header>




	<section class="py-5">
		<div class="container px-4 px-lg-5 mt-5">
		
			<!-- 일괄 버튼, 검색창 row -->
			<div class="d-flex justify-content-between">
			
				<!-- 일괄 버튼 -->
				<div >
					<form class="row g-3">
						<div class="col-auto">
							<input type="submit" class="btn btn-primary mb-3" value="상품 등록"></input>
							<input type="submit" class="btn btn-secondary mb-3" value="선택 공개"></input>
							<input type="submit" class="btn btn-dark mb-3" value="선택 삭제"></input>
						</div>
					</form>
				</div>
			
				<!-- 검색창 -->
				<div class="d-flex flex-row-reverse">
					<form class="row g-3">
						<div class="col-auto" style="padding-right: 0px">
							<select name="f" class="form-select form-select" > <!-- 키:f, 값: pname, des -->
								<!-- <option selected>선택</option> -->
								<option  ${(param.f == "pname")? "selected" : ""} value="pname">상품명</option>
								<option  ${(param.f == "descriptions")? "selected" : ""} value="descriptions">상품설명</option>
							</select>
						</div>
						
						
						<div class="col-auto" style="padding-right: 0px">
							<label for="search" class="visually-hidden">search</label> 
							<input name="q" type="text" class="form-control" value="${param.q}"  placeholder="search">
						</div>	 <!-- list?f=pname&q=갤럭시 -->
						<div class="col-auto">
							<input type="submit" class="btn btn-dark mt-auto" value="search"></input>
						</div>
					</form>
				</div>
			</div>

			<!-- 상품 카드 -->
			<div class="row gx-4 gx-lg-5 row-cols-3 justify-content-center">
				<c:forEach var="p" items="${plist}">
					<div class="g-col-3 mb-5">
						
						<!-- 체크 -->
						<div class="form-check" style="margin-left: 5px">
						  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="..." style="margin-right: 10px">
						</div>
						
						<div class="card h-100">
							<img class="card-img-top" src="/img/${p.filename}" alt="..."
								style="width: 100%" />


							<div class="card-body p-4">
								<div class="text-center">
									<!-- Product name-->
									<h5 class="fw-bolder">${p.pname}</h5>
									<!-- Product price-->
									<p><fmt:formatNumber value="${p.unitPrice}" />원</p>
									
									<p style="color: gray; font-size: small;" >리뷰 ${p.cmtCount}</p>
								</div>
							</div>

							<!-- 버튼들 -->
							<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
								<div class="text-center">
									<form name="addForm" action="./addCarts?id=${p.productId}"
										method="post">
										<a class="btn btn-outline-dark mt-auto"
											href="./product?id=${p.productId}">수정</a> <a
											class="btn btn-outline-dark mt-auto" href="#"
											onclick="addToCart()">삭제</a>
									</form>
								</div>
							</div>

						</div>
					</div>


				</c:forEach>
				

			</div>
			
			<!-- 페이징 스타일-->
			<style>
				.page-link {
					color: #000;
					background-color: #fff;
					border: 1px solid #ccc;
				}
				
				.page-item.active .page-link {
					z-index: 1;
					color: #555;
					font-weight: bold;
					background-color: #f1f1f1;
					border-color: #ccc;
				}
				
				.page-link:focus, .page-link:hover {
					color: #000;
					background-color: #fafafa;
					border-color: #ccc;
				}
			</style>

			<!-- 페이징 -->
			<nav aria-label="Page navigation example">

				<c:set var="page" value="${ (empty param.p)?1 : param.p}" />
				<c:set var="startNum" value="${page-(page-1)%5}" />
				<c:set var="lastNum" value="${fn:substringBefore(Math.ceil(count/6), '.') }" />

				<ul class="pagination justify-content-center">

					<c:if test="${startNum-5>=1}">
						<li class="page-item"><a class="page-link"
							href="?p=${startNum-5}&t=&q=">Previous</a></li>
					</c:if>
					<c:forEach var="i" begin="0" end="4">
						<c:if test="${startNum+i <=lastNum }">
							<li class="page-item ${ (page == (startNum+i))?  'active' : '' } ">
							<a class="page-link" 
							href="?p=${startNum+i}&f=${param.f}&q=${param.q}">${startNum+i}</a></li>
						</c:if>
					</c:forEach>
					<c:if test="${startNum+5<=lastNum}">
						<li class="page-item"><a class="page-link"
							href="?p=${startNum+5}&t=&q="">Next</a></li>
					</c:if>

				</ul>
			</nav>

		</div>
	</section>

	<hr>

	<jsp:include page="../../footer.jsp" />
</body>
</html>

/admin/product/ListController

package controller.admin.product;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.ProductRepository;
import entity.Product;
import entity.ProductView;
import service.ProductService;

@WebServlet("/admin/product/list")
public class ListController extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// list?f=pname&q=갤럭시
		
		String field_ = request.getParameter("f");
		String query_ = request.getParameter("q");
		String page_ = request.getParameter("p");
		// null 일수도있기때문에 string 
		
		String field = "pname";
		if(field_ != null && !field_.equals(""))
			field = field_;
		
		String query = "";
		if(query_ != null && !query_.equals(""))
			query = query_;
		
		int  page = 1;
		if(page_ != null && !page_.equals(""))
			page = Integer.parseInt(page_) ;
		
		
		ProductService productsService = new ProductService();
		List<ProductView> listOfProducts = productsService.getProductList(field, query, page);
		
		int count = productsService.getProuductCount(field, query);
		request.setAttribute("count", count);
		
		request.setAttribute("plist", listOfProducts);
		
		// foward
		request.getRequestDispatcher("/WEB-INF/view/admin/product/list.jsp").forward(request, response);	
			
		
	}
}

강좌 89 - 다중 선택 값 POST 하기

일괄 공개는 나중에: 삭제만 구현하고, 공개는 구현하고 주석처리해놓고 나중에 필요하면 쓰기
근데 삭제랑 선택 체크박스 하나로 못 합치나? 대부분 그러던데

@ 막혔다. 체크 폼

상품카드위 체크박스에서 체크된걸 상단의 일괄버튼에서 submit 하는,
그러니까 두개를 묶는 form이 필요한데,
두개가 서로 다른 div들에 묶여있기도 하고 그 사이에 다른 form들도 있고 해서 안됨.. 어떻게 하지...

해결
푹 자고 다음날 다시 코드를 보니,
일괄삭제 버튼을 div 밖으로 꺼내서 단일로 div로 놓고
걔부터 개별카드 div 덩어리(이 안에는 submit form이 없음)를 쭉 form으로 묶으니까 해결!

1. view/admin/product/list

01. form 감싸기

02. doPost 추가

문자열로 오는데 openid, delid들이 같이 오니까 키가 다 같아,근데 값은 다 다름 -> list가 아니라 배열

강좌 90 - 다중 Submit 요청 구분하기

일괄공개 버튼으로 왔다하면 openId만 실행하고
일괄삭제 버튼으로 왔다하면 delId만 실행하게

버튼 처리 준비 끝

but, 공개를 위한 colunm 추가해야함

이전에 하지 않았음. db, entity, 역할 수정해야해서

강좌 91 - 일괄삭제 구현하기

서비스 로직이 삭제하도록 구현하기

1. 구현

2. controller 파일 실행시 이클립스 버그: 편법 해결

ListController를 잡고 실행하게 되면 이 파일 경로 url이 들어가서 우선 실행되게 됨?
root에 admin/product 폴더에, list 가짜 파일을 넣어주면
-> 저 가짜 list를 실행하고
-> 이클립스는 root의 list의 방금 그 경로를 주소창에 넣어주게 됨.

같은 url 매핑이 우선시되게 되어서?

결과

@ 근데, db connect에 close Service 각 함수에 넣어줘야하려나?

일단 당장 구현 중인 getProduct 함수에만 넣어줬음

		rs.close();
		pstmt.close();
		con.close();

나중에 추가할 메뉴: 공지사항(이벤트) 페이지 추가

removeNoticeAll(ids)
pubNoticeAll(ids)
insertNotice(notice)
deleteNotice(id)
updateNotice(notice)
getNoticeNewestList() - 진행중인 이벤트

별의개발자커비

비전공자 독학러. 일단 쌔린다. 개발 공부👊

이전 포스트

[JSP MVC2] 강의 정리 4 - 상세 페이지, 목록

다음 포스트