부트스트랩 include 시간 나타내기 예제
welcome.jsp
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스토어</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<jsp:include page="menu.jsp"/>
<%
String greating = "스토어에 오신것을 환영합니다.";
String welcome = "Welcome to the Store!";
%>
<div class="jumbotron">
<div class="container">
<h1 class="display-3"><%=greating %></h1>
</div>
</div>
<div class="container">
<div class="text-center">
<h3><%=welcome %></h3>
<%
Calendar calendar = Calendar.getInstance();
int hour = calendar.get(Calendar.HOUR_OF_DAY);
int minute = calendar.get(Calendar.MINUTE);
int second = calendar.get(Calendar.SECOND);
int am_pm = calendar.get(Calendar.AM_PM);
String ampm = null;
if(am_pm==0){
ampm = "오전";
}
else {
ampm = "오후";
}
String connectionTime = hour +":"+ minute +":"+ second +":"+ ampm;
out.println("현재 접속 시간 : " +connectionTime+ "\n");
%>
</div>
<hr>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>
menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<nav class="navbar navbar-expand navbar-dark bg-dark"><!-- 네비게이션 바를 만듬 -->
<div class="container"> <!-- container라는 클래스부터 내용을 표시함 -->
<div class="navbar-header"> <!-- 네비게이션 헤더 -->
<a class="navbar-brand" href="./welcome.jsp">홈</a>
</div>
</div>
</nav>
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<div class="text-center">
<footer class="container">
<p><b>저작권 copyRight TheStore</b></p>
<p><b>Since 2021 by TheStore Dev Team</b></p>
</footer>
</div>
*자바 빈(bean)을 이요한 정보 조회
1.자바 빈
1) Java EE 프로그래밍시 여러 객체를 거치면서 만들어지는 데이터를 저장하거나 전달하는데 사용되는 클래스.
2) 자바의 DTO(Data Transfer Object, 데이터 전송 객체)클래스, VO(Value Object, 값객체) 클래스와
같은 개념.
2.자바 빈 특징
1) 속성의 접근 제한자는 private이다.
2) 각속성(attribute, property)은 각각의 setter/getter를 가진다.
3) 인자 없는 생성자를 반드시 가지며 다른 생성자도 추가할수 있다.
물건 표현 페이지
DTO DAO
products.jsp
<%@page import="kr.gov.dto.Product"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean id="productDAO" class="kr.gov.dao.productRepository" scope="session"/>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품목록</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="jumbotron">
<div class="contaner">
<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>
<h3><%=product.getDescription() %></h3>
<h3><%=product.getUnitprice() %></h3>
</div>
<%
}
%>
</div>
<hr>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>
kr.gov.dto
product.java
package kr.gov.dto;
/*
* *자바 빈(bean)을 이요한 정보 조회
* 1.자바 빈
* 1) Java EE 프로그래밍시 여러 객체를 거치면서 만들어지는 데이터를 저장하거나 전달하는데 사용되는 클래스.
* 2) 자바의 DTO(Data Transfer Object, 데이터 전송 객체)클래스, VO(Value Object, 값객체) 클래스와
* 같은 개념.
* 2.자바 빈 특징
* 1) 속성의 접근 제한자는 private이다.
* 2) 각속성(attribute, property)은 각각의 setter/getter를 가진다.
* 3) 인자 없는 생성자를 반드시 가지며 다른 생성자도 추가할수 있다.
*/
//Product라는 클래스 => 자바빈의 객체가 되는 것.
public class Product {
private String productId; //상품 아이디
private String pname; //상품
private Integer unitprice; //상품가격
private String description; //상품 설명
private String menufecturer; //제조사
private String category; //분류
private long numberOfstock; //재고 수
private String condition; //신상품 or 중고품 or 재생품
public Product() {
}
//생성자 오버로드
public Product(String productId, String pname, Integer unitprice) {
super();
this.productId = productId;
this.pname = pname;
this.unitprice = unitprice;
}
//getter, setter
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 getMenufecturer() {
return menufecturer;
}
public void setMenufecturer(String menufecturer) {
this.menufecturer = menufecturer;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
public long getNumberOfstock() {
return numberOfstock;
}
public void setNumberOfstock(long numberOfstock) {
this.numberOfstock = numberOfstock;
}
public String getCondition() {
return condition;
}
public void setCondition(String condition) {
this.condition = condition;
}
}
kr.gov.dao
productRepository,java
package kr.gov.dao;
import java.util.ArrayList;
import kr.gov.dto.Product;
public class productRepository {
private ArrayList<Product> listOfProducts = new ArrayList<>();
// 생성, add 생성자
public productRepository() {
//DB 연동만 임시데이터로 활용
Product phone = new Product("iPhone13,4", "iPhone 12 Pro Max", 1490000);
phone.setDescription("6.7-unch, 2778*1284-pixel, OLED Super Retina XDR display, cameras");
phone.setCategory("Smart Phone");
phone.setMenufecturer("Apple");
phone.setUnitprice(1490000);
phone.setCondition("New");
Product notebook = new Product("15U70N-PA70K", "LG 울트라 기어", 1930000);
notebook.setDescription("15-unch, 1920*1080-pixel, IPS LED display, 10세대 인텔 코어 i7-10510U 프로세서");
notebook.setCategory("notebook");
notebook.setMenufecturer("LG");
notebook.setUnitprice(1930000);
notebook.setCondition("Refurbished");
Product tablet = new Product("SM-T970NZKEKOO", "갤럭시 탭 S7+", 1149500);
tablet.setDescription("12-unch, 2800*1752-pixel, Super AMOLED display, Octa-Core 프로세서");
tablet.setCategory("Tablet");
tablet.setMenufecturer("SAMSUNG");
tablet.setUnitprice(1149500);
tablet.setCondition("Old");
listOfProducts.add(phone);
listOfProducts.add(notebook);
listOfProducts.add(tablet);
}
//항목을 리턴해주는 객체 추가
public ArrayList<Product> getAllProducts() {
return listOfProducts;
}
}
부트스트랩 WebStorm 사용
WebStorm 사용 부트스트랩
BS = Web Frontend develop framework ==> 반응형 웹 만들기
트위터 부트스트랩은 웹디자인을 쉽게하기 위해서
CSS의 클래스 선택자에 정의된 스타일시트와
자바스크립트 플러그인의 라이브러리이다.
CSS vs BS
-일반적인 CSS : <style>속성을 직접 작성
-BS : 미리 정의된 <style>을 'class'로 적용
핵심요소
1.CSS
2.GRID SYSTEM
3.컴포넌트
4.JAVASCRIPT PLUGIN
GRID SYSTEM
- 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템(총 12분할) : Magic Number 12
- 한요소가 차지할 크기를 1칸에서 12칸까지 설정해줄수 있다.
intro.html
<!--
BS = Web Frontend develop framework ==> 반응형 웹 만들기
트위터 부트스트랩은 웹디자인을 쉽게하기 위해서
CSS의 클래스 선택자에 정의된 스타일시트와
자바스크립트 플러그인의 라이브러리이다.
CSS vs BS
-일반적인 CSS : <style>속성을 직접 작성
-BS : 미리 정의된 <style>을 'class'로 적용
핵심요소
1.CSS
2.GRID SYSTEM
3.컴포넌트
4.JAVASCRIPT PLUGIN
GRID SYSTEM
- 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템(총 12분할) : Magic Number 12
- 한요소가 차지할 크기를 1칸에서 12칸까지 설정해줄수 있다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
그리드 설명 사이트
CSS · 부트스트랩
에 약간의 패딩과 수평 구분선이 있는 기본 스타일의 .table 클래스를 추가하세요. 그건 매우 불필요해 보이지만, 캘린더와 날짜선택기 같은 플러그인들을 위해 테이블이 널리 사용되는 것을 감
bootstrapk.com
JSP | Bootstrap 웹스토어 예제 2 | MVC model 1
kjh95.tistory.com/246 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 스토어.." data-og-host="kjh95.tistory.com" data-og-source-url="https://kj..
kjh95.tistory.com
