부트스트랩 시작
https://getbootstrap.kr/docs/5.2/getting-started/introduction/
// welcome
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>welcome</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
</head>
<%!String greeting = "쇼핑몰에 오신 것을 환영합니다.";
String tagline = "즐거운 쇼핑되세요.";%>
<body>
<!-- 내비게이션 -->
<jsp:include page="menu.jsp"></jsp:include>
<!-- 본문 내용 -->
<div class="container" >
<h1 class="display-3"><%=greeting%></h1>
</div>
<div class="container">
<h2 class="text-center"><%=tagline%></h2>
</div>
<div class="text-center">
<jsp:include page="timer_js.jsp"></jsp:include>
</div>
<!-- 푸터 -->
<jsp:include page="footer.jsp"></jsp:include>
</body>네비게이션 바(menu), 푸터 추가
https://llnote.tistory.com/581
https://stackoverflow.com/questions/37499821/good-jsp-code-structure-for-header-and-footer
https://bootstrapshuffle.com/kr/classes/typography/display-3
https://ninearies.tistory.com/71
class = "text-center"
// menu
<%@page import="dao.Product"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 내비게이션 -->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="hello.jsp">Home</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="./products.jsp">상품정보</a>
<a class="nav-link" href="#">other2</a> <a class="nav-link"
href="#">other3</a> <a class="nav-link disabled">other4</a>
</div>
</div>
</div>
</nav>// footer
<footer class="container">
<p>© WebMarket</p>
</footer>상품 목록 페이지 products
- btn-secondary
https://getbootstrap.com/docs/4.0/components/buttons/
- class="col-md-4"
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
- »
특수문자 »
- div class="row " align="center"
- role = button
<a> tag에서 role = "button" 과 type = "button" 차이가 있나요
안녕하세요. 특별한 이유는 없습니다.
단지, bootstrap 웹사이트에서 보여준 예제가 그렇게 되어 있어서 사용했습니다.
제가 role="button"을 그대로 사용했던 이유는 <button> 태그를 사용하지 않고 <a>태그를 사용했을 때, 이 요소가 버튼임을 알릴 수 있다고 생각했기 때문입니다.
role="?"에 관한 내용은 아래 링크 글을 참고해보시기 바랍니다.
https://abcdqbbq.tistory.com/76// products
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="dao.ProductRepository"%>
<%@page import="dao.Product"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품목록</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<jsp:useBean id="productDAO" class="dao.ProductRepository"
scope="session"></jsp:useBean>
<%
List<Product> listofProduct = productDAO.getAllProducts();
%>
</head>
<body>
<jsp:include page="menu.jsp"></jsp:include>
<div class="container">
<h1 class="display-3">상품 목록</h1>
</div>
<div class="container">
<div class="row " align="center">
<%
for (int i = 0; i < listofProduct.size(); i++) {
Product p = listofProduct.get(i);
%>
<div class="col-md-4">
<h3><%=p.getPname()%></h3>
<p><%=p.getDescription()%></p>
<p><%=p.getUnitPrice()%>원</p>
<p><a href="product.jsp?id=<%=p.getProduceId()%>" role="button" class="btn btn-secondary">상세정보 » </a>
</div>
<%
}
%>
</div>
</div>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>// product
<%@page import="dao.ProductRepository"%>
<%@page import="dao.Product"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세정보</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<jsp:useBean id="pro" class="dao.ProductRepository" scope="session"></jsp:useBean>
<%
String id = request.getParameter("id");
%>
</head>
<body>
<jsp:include page="menu.jsp"></jsp:include>
<div class="container">
<h1 class="display-3">상품 정보</h1>
</div>
<div class="container">
<div class="row" align="center">
<div class="col-md-6">
<% Product p = pro.getProductById(id); %>
<p> 상품코드: <%= p.getProduceId() %> </p>
<p> 상품명: <%=p.getPname()%> </p>
<p> 상품가격: <%= p.getUnitPrice()%></p>
<p> 설명: <%=p.getDescription() %> </p>
<p> 제조사: <%= p.getManufacturer() %> </p>
<p> 분류: <%= p.getCategory() %> </p>
<p> 재고수: <%= p.getUnitInStock() %> </p>
</div>
</div>
</div>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>// ProductRepository
package dao;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
public class ProductRepository {
private List<Product> listofProduct = new ArrayList<>();
// 왜 private이지? 얘는 private인데 아래에서 return listo 여기서는 되나보네?
public ProductRepository() {
listofProduct.add(new Product("p001", "iphone", 1000000, "아이폰 최신", "Apple", "SP", 100, "new"));
listofProduct.add(new Product("p002", "galexy", 900000, "갤럭시 최신", "Samsung", "SP", 200, "new"));
listofProduct.add(new Product("p003", "LG gram", 1500000, "노트북 최신", "LG", "NOTEBOOK", 500, "new"));
}
// 전체상품 조회
public List<Product> getAllProducts(){
return listofProduct;
}
// 상품 아이디로 조회
public Product getProductById(String productId) {
for (Product product : listofProduct) {
if (product.getProduceId().equals(productId)) {
return product;
}
}
return null;
}
}// Product
package dao;
// 6
import java.io.Serializable;
public class Product implements Serializable {
private static final long serialVersionUID = 1L;
private String produceId ;
private String pname;
private Integer unitPrice;
private String description ;
private String manufacturer;
private String category ;
private long unitInStock;
private String condition ;
public Product() {}
public Product(String produceId, String pname, Integer unitPrice, String description, String manufacturer,
String category, long unitInStock, String condition) {
super();
this.produceId = produceId;
this.pname = pname;
this.unitPrice = unitPrice;
this.description = description;
this.manufacturer = manufacturer;
this.category = category;
this.unitInStock = unitInStock;
this.condition = condition;
}
public String getProduceId() {
return produceId;
}
public void setProduceId(String produceId) {
this.produceId = produceId;
}
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 getUnitInStock() {
return unitInStock;
}
public void setUnitInStock(long unitInStock) {
this.unitInStock = unitInStock;
}
public String getCondition() {
return condition;
}
public void setCondition(String condition) {
this.condition = condition;
}
public static long getSerialversionuid() {
return serialVersionUID;
};
}질문? 근데
<p><a href="product.jsp?id=<%=p.getProduceId()%>" role="button" class="btn btn-secondary">상세정보 » </a> 여기서 id=<%=p.getProduceId()
1) request로 넘기는 id에 저 결과를 지정하는 효과도 있는 건가?
2) 저 결과인 http://localhost:8099/PBookStore/shoppingmall/product.jsp?id=p001
이게 어떻게 product 중에서 id가 p001인 경우의 페이지를 지정할 수 있는 거지? 응 그럼
비전공자 독학러. 일단 쌔린다. 개발 공부👊