[JSP MVC2] 강의 정리 0 - MVC model1 vs 2

별의개발자커비·2023년 6월 25일
MVCjsp
0

JSP

목록 보기
18/31
post-thumbnail

- 사전정리

  1. MVC 모델 1 과 MVC 모델 2

    Model - Controller - View

■ Model 영역
애플리케이션에 비즈니스 로직과 사용되는 데이터를 다루는 영역이다. 일반적으로 비즈니스 데이터는 데이터베이스에 의해 관리되고, 그 데이터를 다루는 연산은 SQL문을 통해서 구현된다.

■ View 영역
최종 사용자에게 보여줄 프리젠테이션 로직을 담당하는 영역이다.일반적으로 자바 웹 애플리케이션에서는 JSP를 통해서 구현된다.

■ Controller 영역 ==> servlet
컨트롤러는 흐름을 관리하는 역할을 하며, 모델과 뷰 영역간의 조정 역할을 한다. 사용자의 요청을 받아 이를 수행하기 위한 비즈니스 로직을 선택하고 호출하며, 수행한 비즈니스 로직의 결과를 보여주기 위해 뷰를 선택하여 포워드 해주는 역할을 한다.


https://sky17777.tistory.com/96

참고글1, 참고글2, 참고글3

55 - MVC model2 방식으로 변경하기

  • model2 방식: jsp(x), java controller(o) 파일 실행!
  • root 폴더는 WebContent
image.jpg1image.jpg2

0. 순서

  1. @WebServlet("jsp폴더/파일명")
  2. extends HttpServlet
  3. doGet 메소드
  4. jsp 파일의 <% %> 가져와서 붙이기
  5. foward 처리
request.getRequestDispatcher("/welcome.jsp").forward(request, response);
  • welcome.jsp를 foward 호출해서 welcome.jsp와 request, response를 공유할 것이다.
  1. 변수 request(저장소 역할 하기도)에 setAttribute 처리
String greeting = "환영합니다";
request.setAttribute("greeting", greeting);
  1. action=".jsp?id="에서 jsp 지우기
---변경 전---
<p><form name="addForm" action="./addCart.jsp?id=<%=product.getProductId()%>" method="post">

---변경 후---
<p><form name="addForm" action="./addCart?id=<%=product.getProductId()%>" method="post">

2. Model 데이터를 구조화하기

데이터 이름 명명시 다른 데이터 이름과 충돌해서 이름을 길게 가져가야하는 경우 등 발생 -> 낱개로 하지 말고 묶어서 표현

0. 간단 설명

---변경 전---
request.setAttribute("greeting", greeting);
request.setAttribute("tagline", tagline);
      
---변경 후---
// 묶어서 담고
request.addAttribute("welcome", welcome);

---jsp페이지---
// 사용
<h1 class="display-4 fw-bolder">${welcome.greeting}</h1> 	// = .getGreeting()
public class Welcome{
String greeting = "웹 쇼핑몰에 오신 것을 환영합니다";
String tagline = "Welcome to Web Market!";

public String getGreeting(){
	return greeting;
	}
}

2. 순서

01.entity 객체 만들기: WelcomeNotice()

  1. entity 객체: 변수들만 빼서 class 만들기
  2. 생성자, 기본생성자, getter, setter, toString 추가
  • @@이 때 생성자, 기본 생성자 왜?

02. controller에 entity 객체 세팅

  • 넣고: new WelcomeNotice(greeting, tagline);
  • 담기: request.setAttribute("w", welcomeNotice);

03. view에서 가져오기

  • ${w.greeting} : = .getGreeting

welcome

원래: welcome.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.Date"%>
<html>
<head>
<head>
	<title>Welcome</title>
	<!-- Favicon-->
	<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
	<!-- Bootstrap icons-->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
	<!-- Core theme CSS (includes Bootstrap)-->
	<link href="./resources/css/styles.css" rel="stylesheet" />
	<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
	<!-- Bootstrap core JS-->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
	<!-- Core theme JS-->
	<script src="./resources/js/scripts.js"></script>
</head>
<body>

	<%@ include file="menu.jsp"%>
	<!-- @@@여기까 -->
	<%!String greeting = "웹 쇼핑몰에 오신 것을 환영합니다";
	String tagline = "Welcome to Web Market!";%>

	<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"><%=greeting%></h1>
				<p class="lead fw-normal text-white-50 mb-0"><%=tagline%></p>
			</div>
		</div>
	</header>
	
	<div class="container">
		<div class="text-center">
			<%-- <%
				response.setIntHeader("Refresh", 1);
				Date day = new java.util.Date();
				String am_pm;
				int hour = day.getHours();
				int minute = day.getMinutes();
				int second = day.getSeconds();
				if (hour / 12 == 0) {
					am_pm = "AM";
				} else {
					am_pm = "PM";
					hour = hour - 12;
				}
				String CT = hour + ":" + minute + ":" + second + " " + am_pm;
				out.println("현재 접속  시각: " + CT + "\n");
			%> --%>
		</div>
		<hr>
	</div>	
	<%@ include file="footer.jsp"%>
</body>
</html>

변경

WelcomeController.java

// controller
package controller;

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;

import entity.WelcomeNotice;


@WebServlet("/welcome")
public class WelcomeController extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String greeting = "웹 쇼핑몰에 오신 것을 환영합니다";
		String tagline = "Welcome to Web Market!";
		
		WelcomeNotice welcomeNotice = new WelcomeNotice(
				greeting, tagline
				);
				
		request.setAttribute("w", welcomeNotice);
		
		
		// foward
		request.getRequestDispatcher("/welcome.jsp").forward(request, response);	
		// welcome을  호출해서 req,rep를 공유할 것이다
		
	}
}

WelcomeNotice.java

// entity
public class WelcomeNotice {
	private String greeting  ;
	private String tagline  ;
	
	public WelcomeNotice() {
	}
	
	public WelcomeNotice(String greeting, String tagline) {
		this.greeting = greeting;
		this.tagline = tagline;
	}

	public String getGreeting() {
		return greeting;
	}

	public void setGreeting(String greeting) {
		this.greeting = greeting;
	}

	public String getTagline() {
		return tagline;
	}

	public void setTagline(String tagline) {
		this.tagline = tagline;
	}

	@Override
	public String toString() {
		return "WelcomeNotice [greeting=" + greeting + ", tagline=" + tagline + "]";
	}
	
	
}

welcome.jsp

//view
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<head>
	<title>Welcome</title>
	<!--  CSS  -->
	<link href="./resources/css/styles.css" rel="stylesheet" />
	<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>

	<%@ include file="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">${w.greeting}</h1>
				<p class="lead fw-normal text-white-50 mb-0">${w.greeting}</p>
			</div>
		</div>
	</header>
	
	<div class="container">
		<div class="text-center">
		</div>
		<hr>
	</div>	
	<%@ include file="footer.jsp"%>
</body>
</html>

3. View(products.jsp)에서 반복문 제거하기

01. 순서

controller

  • 코드에 주석으로 설명

view

  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 추가
  2. <c:forEach var="p" items="${plist}"> 추가
  3. <h5>${p.pname}</h5> 로 꺼내쓰기

02. products

원래

<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="dto.Product"%>
<%@ page import="dao.ProductRepository"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>


<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>


<script type="text/javascript">
	function addToCart() {
		if (confirm("상품을 장바구니에 추가하시겠습니까?")) {
			document.addForm.submit();
		} else {
			document.addForm.reset();
		}
	}
</script>

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

	<header class="bg-dark py-5" style="margin-bottom: 50px">
		<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>
	<%
	ProductRepository dao = new ProductRepository();
	ArrayList<Product> listOfProducts = dao.getAllProducts();
	%>
	<!-- @@ 이미지 적용 했을 때 뭔가 안 맞는 거부터@ -->
	<section class="py-5">
		<div class="container px-4 px-lg-5 mt-5">
			<div class="row gx-4 gx-lg-5 row-cols-3 justify-content-center">
				<!-- 이건 왜 들어있던 거지? : row-cols-md-3 row-cols-xl-4 
				https://getbootstrap.kr/docs/5.0/layout/grid/?  -->

				<%
				for (int i = 0; i < listOfProducts.size(); i++) {
					Product product = listOfProducts.get(i);
				%>
				<div class="g-col-3 mb-5">
					<div class="card h-100">
						<img class="card-img-top" src="/img/<%=product.getFilename()%>"
							alt="..." style="width: 100%" />


						<div class="card-body p-4">
							<div class="text-center">
								<!-- Product name-->
								<h5 class="fw-bolder"><%=product.getPname()%></h5>
								<!-- Product price-->
								<fmt:formatNumber value="<%=product.getUnitPrice()%>"
									pattern="#,###,###" />
								원
							</div>
						</div>

						<!-- Product actions-->
						<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
							<div class="text-center">
								<form name="addForm"
									action="./addCarts.jsp?id=<%=product.getProductId()%>"
									method="post">
									<a class="btn btn-outline-dark mt-auto"
										href="./product.jsp?id=<%=product.getProductId()%>">상세정보</a> <a
										class="btn btn-outline-dark mt-auto" href="#"
										onclick="addToCart()">장바구니</a>
								</form>
							</div>
						</div>

					</div>
				</div>
				<%
				}
				%>


			</div>
		</div>
	</section>
	<hr>



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

03. 변경

ProductsController.java

package controller;

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 dto.Product;
import entity.ProductDetail;

@WebServlet("/products")
public class ProductsController extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// 1. for 결과 담을 plist 만들기
		List<ProductDetail> plist = new ArrayList<ProductDetail>();
		
		ProductRepository dao = new ProductRepository();
		ArrayList<Product> listOfProducts = dao.getAllProducts();
		
		// 2. for 문 돌려서 
		for (Product product : listOfProducts) {
			String filename =  product.getFilename() ;
			String pname=  product.getPname() ;
			String description = product.getDescription() ;
			String productId = product.getProductId() ;
			String manufacturer = product.getManufacturer() ;
			String category = product.getCategory(); 
			long unitsInStock = product.getUnitsInStock() ;
			Integer unitPrice = product.getUnitPrice() ;
		
		// 3. 나온 결과 productDetail에 각각 저장하고
			ProductDetail productDetail = new ProductDetail(filename, pname, description, productId, manufacturer, category, unitsInStock, unitPrice);
		// 4. plist에 for 결과로 나온 ProductDetail 객체들 담기
			plist.add(productDetail);
		}
		
		// 5. "plist" 에 그대로 setAttribute 해주기
		request.setAttribute("plist", plist);
		
		// foward
		request.getRequestDispatcher("/WEB-INF/view/products.jsp").forward(request, response);	
		
	}
}

products.jsp

<%@page import="dto.Product"%>
<%@page import="entity.ProductDetail"%>
<%@page import="java.util.List"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>



<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>


<script type="text/javascript">
	function addToCart() {
		if (confirm("상품을 장바구니에 추가하시겠습니까?")) {
			document.addForm.submit();
		} else {
			document.addForm.reset();
		}
	}
</script>

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

	<header class="bg-dark py-5" style="margin-bottom: 50px">
		<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">
			<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="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-->
								<fmt:formatNumber value="${p.unitPrice}"
									pattern="#,###,###" />
								원
							</div>
						</div>

						<!-- Product actions-->
						<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
							<div class="text-center">
								<form name="addForm"
									action="./addCarts.jsp?id=${p.productId}"
									method="post">
									<a class="btn btn-outline-dark mt-auto"
										href="./product.jsp?id=${p.productId}">상세정보</a> <a
										class="btn btn-outline-dark mt-auto" href="#"
										onclick="addToCart()">장바구니</a>
								</form>
							</div>
						</div>

					</div>
				</div>
			</c:forEach>


			</div>
		</div>
	</section>
	<hr>



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

4. View 페이지 은닉하기

  • WEB-INF/view/ 폴더 만들어서 넣기
// ProductsController.java
request.getRequestDispatcher("/WEB-INF/view/products.jsp").forward(request, response);

5. forEach 응용

01. begin, end

<c:forEach var="p" items="${plist}" >
---
<c:forEach var="p" items="${plist}" begin="0" end="1">
image.jpg1image.jpg2

02. varStatus 속성들

- ${st.index}

<h5 class="fw-bolder">${st.index} / ${p.pname}</h5>
profile
별의개발자커비
비전공자 독학러. 일단 쌔린다. 개발 공부👊
이전 포스트

JSP JSTL이란?

다음 포스트

[JSP MVC2] 강의 정리 1: JSTL

0개의 댓글