728x90
반응형
웹 쇼핑몰 만들기
[웹 쇼핑몰] 시작 페이지 만들기
1. 시작 페이지 작성하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%!
String greeting = "Welcome to Web Shopping Mall";
String tagline = "Welcome to Web Market!";
%>
<h1><%= greeting %></h1>
<h3><%= tagline %></h3>
</body>
</html>
2. 부트스트랩 CSS 적용하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel = "stylesheet"
href = "https:maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Welcome</title>
</head>
<body>
<nav class = "navbar navbar-expand navbar-dark bg-dark">
<div class = "container">
<div class = "navbar-header">
<a class = "navbar-brand" href="./welcome.jsp">Home</a>
</div>
</div>
</nav>
<%! String greeting = "Welcome to Web Shopping Mall";
String tagline = "Welcome to Web Market!";
%>
<div class = "jumbotron">
<div class = "container">
<h1 class = "display-3">
<%= greeting %>
</h1>
</div>
</div>
<main role = "main">
<div class ="container">
<div class = "text-center">
<h3>
<%= tagline %>
</h3>
</div>
</div>
</main>
<footer class = "container">
<p>© WebMarket</p>
</footer>
</body>
</html>
3. 한글 출력 및 페이지 모듈화 하기
한글 및 현재 접속 시각 출력
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %> <<<<<<<< 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel = "stylesheet"
href = "https:maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Welcome</title>
</head>
<body>
<nav class = "navbar navbar-expand navbar-dark bg-dark">
<div class = "container">
<div class = "navbar-header">
<a class = "navbar-brand" href="./welcome.jsp">Home</a>
</div>
</div>
</nav>
<%! String greeting = "Welcome to Web Shopping Mall";
String tagline = "Welcome to Web Market!";
%>
<div class = "jumbotron">
<div class = "container">
<h1 class = "display-3">
<%= greeting %>
</h1>
</div>
</div>
<main role = "main">
<div class ="container">
<div class = "text-center">
<h3>
<%= tagline %>
</h3>
<%-- 시간 출력 --%> <<<<<< 추가 (여기부터)
<%
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>
</main>
<footer class = "container">
<p>© WebMarket</p>
</footer>
</body>
</html>
4. 상품 목록 표시하기
상품 표시하기
- 상품 클래스 생성하기:
- 멤버 변수 선언하기:
-
기본 생성자 작성하기:
-
모든 멤버 변수의 Setter/Getter( ) 메소드 작성하기:
java.class 만들고 작
package dto;
import java.io.Serializable;
public class Product implements Serializable {
private static final long serialVeersionUID = -4274700572038677000L;
private String productId; // 상품 아이디
private String pname; // 상품명
private Integer unitPrice; // 상품 가격
private String description; // 상품 설명
private String manufacturer; // 제조사
private String category; // 분류
private long unitsInStock; // 재고 수
private String condition; // 신상품 or 중고품 or 재생품
public Product() {
super();
}
public Product(String productId, String pname, Integer unitPrice) {
this.productId = productId;
this.pname = pname;
this.unitPrice = unitPrice;
}
public String getProductId() {
return productId;
}
public void setProductId(String productId) {
this.productId = productId;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
public Integer getUnitPrice() {
return unitPrice;
}
public void setUnitPrice(Integer unitPrice) {
this.unitPrice = unitPrice;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getManufacturer() {
return manufacturer;
}
public void setManufacturer(String manufacturer) {
this.manufacturer = manufacturer;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
public long getUnitsInStock() {
return unitsInStock;
}
public void setUnitsInStock(long unitsInStock) {
this.unitsInStock = unitsInStock;
}
public String getCondition() {
return condition;
}
public void setCondition(String condition) {
this.condition = condition;
}
}
[자바빈즈로 사용할 상품 데이터 접근 클래스 만들기]
- 자바빈즈로 사용할 클래스 만들기:
- 멤버 변수와 기본 생성자 만들기:
-
상품 목록을 가져오는 메소드 만들기:
package dao;
import java.util.ArrayList;
import dto.Product;
public class ProductRepository {
private ArrayList<Product> listOfProducts = new ArrayList<Product>();
public ProductRepository() {
Product phone = new Product("P1234", "iPhone 6s", 800000);
phone.setDescription("4.7-inch, 1334X750 Rentina HD display, 8-megapixel iSight Camera");
phone.setCategory("Smart Phone");
phone.setManufacturer("Apple");
phone.setUnitsInStock(1000);
phone.setCondition("New");
Product notebook = new Product("P1235", "LG PC 그램", 1500000);
phone.setDescription("13.3-inch, IPS LED display, 5rd Generation Intel Core processors");
phone.setCategory("Notebook");
phone.setManufacturer("LG");
phone.setUnitsInStock(1000);
phone.setCondition("Refurbished");
Product tablet = new Product("P1236", "Galaxy Tab S", 900000);
phone.setDescription("212.8*125.6*6.6mm, Super AMOLED display, Octa-Core processor");
phone.setCategory("Tablet");
phone.setManufacturer("Samsung");
phone.setUnitsInStock(1000);
phone.setCondition("Old");
listOfProducts.add(phone);
listOfProducts.add(notebook);
listOfProducts.add(tablet);
}
public ArrayList<Product> getAllProducts() {
return listOfProducts;
}
}
DTO : Data Transfer Object는 계층 간 데이터 교환을 하기 위해 사용하는 객체
DTO는 로직을 가지지 않는 순수한 데이터 객체(getter & setter만 가진 클래스)
DAO : Data Access Object는 데이터베이스의 data에 접근하기 위한 객체
DataBase에 접근하기 위한 로직 & 비즈니스 로직을 분리하기 위해 사용
[상품 목록 표시하기]
- 상품 목록 출력 웹 페이지 만들기:
// products.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dto.Product" %>
<jsp:useBean id="productDAO" class="dao.ProductRepository" scope="session" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>상품 목록</title>
</head>
<body>
<jsp:include page="menu.jsp" />
<div class="jumbotron">
<div class="container">
<h1 class="display-3">상품 목록</h1>
</div>
</div>
<%
ArrayList<Product> listOfProducts = productDAO.getAllProducts();
%>
<div class="container">
<div class="row" align="center">
<%
for(int i=0; i<listOfProducts.size(); i++) {
Product product = listOfProducts.get(i);
%>
<div class="col-md-4">
<h3><%=product.getPname() %></h3>
<p><%=product.getDescription() %>
<p><%=product.getUnitPrice() %>원
</div>
<%
}
%>
</div>
</div>
<jsp:include page="footer.jsp" />
</body>
</html>
5. 상품 상세 정보 표시하기
[상품 상세 정보 표시하기]
[상품 데이터 접근 클래스 만들기]
- 상품 상세 정보를 가져오는 메소드 만들기
package dao;
import java.util.ArrayList;
import dto.Product;
public class ProductRepository {
(생략 )
....
listOfProducts.add(phone);
listOfProducts.add(notebook);
listOfProducts.add(tablet);
}
<<<< 여기부터 추가
public ArrayList<Product> getAllProducts() {
return listOfProducts;
}
public Product getProductById(String productId) {
Product productById = null;
for (int i=0; i<listOfProducts.size(); i++) {
Product product = listOfProducts.get(i);
if(product != null && product.getProductId() != null && product.getProductId().equals(productId)) {
productById = product;
break;
}
}
return productById;
}
}
- 상품 상세 정보 버튼 만들기
// products.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
(생략) .....
<div class="col-md-4">
<h3><%=product.getPname() %></h3>
<p><%=product.getDescription() %>
<p><%=product.getUnitPrice() %>원
// 추가
<p><a href="./product.jsp?id=<%=product.getProductId()%>"
class="btn btn-secondary" role="button"> 상세 정보 »></a>
</div>
(생략) ...- 출력 -
버튼 생김.
- 상품 상세 정보 버튼 만들기
// product.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dto.Product" %>
<jsp:useBean id="productDAO" class="dao.ProductRepository" scope="session" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>상품 목록</title>
</head>
<body>
<jsp:include page="menu.jsp" />
<div class="jumbotron">
<div class="container">
<h1 class="display-3">상품 목록</h1>
</div>
</div>
<%
ArrayList<Product> listOfProducts = productDAO.getAllProducts();
%>
<div class="container">
<div class="row" align="center">
<%
for(int i=0; i<listOfProducts.size(); i++) {
Product product = listOfProducts.get(i);
%>
<div class="col-md-4">
<h3><%=product.getPname() %></h3>
<p><%=product.getDescription() %>
<p><%=product.getUnitPrice() %>원
<p><a href="./product.jsp?id=<%=product.getProductId()%>"
class="btn btn-secondary" role="button"> 상세 정보 »></a>
</div>
<%
}
%>
</div>
</div>
<jsp:include page="footer.jsp" />
</body>
</html>- 출력 -
시작 페이지의 접속 시각 자동 갱신하기
// welcome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
...(생략)...
<%
response.setIntHeader("Refresh", 5); <<< 추가
Date day = new java.util.Date();
String am_pm;
int hour = day.getHours();
int minute = day.getMinutes();
...(생략)...
이 다음 부터 연결 >>> 웹 쇼핑몰만들기 02
밑에 링크 참고
https://rogi221.tistory.com/101
728x90
반응형
'JSP' 카테고리의 다른 글
| JSP 웹 프로그래밍 - 액션 태그 01 (0) | 2023.02.27 |
|---|---|
| JSP 웹 프로그래밍 - 디렉티브 태그 (0) | 2023.02.27 |
| JSP 웹 프로그래밍 - 스크립트 태그 (0) | 2023.02.27 |
| JSP 웹 프로그래밍 - JSP 개발 환경 구축 (0) | 2023.02.27 |
| JSP 웹 프로그래밍 - JSP 프로그래밍 이해 (0) | 2023.02.27 |