반응형
학원에서 만든 스터디그룹은 아직도 꾸준히 하고있다.
나를 제외한 모든사람들이 정말 잘하는 사람들이라 나도 동기부여를 받으며
악으로 깡으로 만들어보고 있다.
이 스터디는 무언가를 배우는것보다는 직접 만들어보고 피드백을 받는것이 주 목적이다.
당연히 모르는것이 있으면 주위사람들에게 물어볼수도 있으니 나에게는 득밖에 없는 그룹이다.
그럼 이번에 만든 키오스크 홈페이지를 설명해 보려고한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="sales.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<c:set var="dao" value="${SalesDAO.getInstance() }" />
<c:set var="juice" value="${Juice.getInstance() }" />
<%@page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% request.setCharacterEncoding("UTF-8"); %>--------------------------------------------------------header.jsp--------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="header.jsp"%>
<style>
.main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
table.box {
position: absolute;
width: 800px;
height: 550px;
left: 60%;
top: 50%;
transform: translate(-50%, -50%);
/*요소의 중심을 기준으로 수평 및 수직으로 -50%만큼 이동 */
border-radius: 20px;
border-collapse: collapse;
}
.box tr,
.box th{
width: 25%;
padding: 10px;
text-align: center;
border:2px solid black;
}
.box th img {
max-width: 100%;
max-height: 100%;
}
.basket {
position:absolute;
width:20%;
height:100%;
margin-left:0;
border:2px solid black;
}
.basket .top-name{
position:absolute;
top:0%;
width:100%;
border:1px solid black;
}
.basket .top-name h2 {
text-align:center;
}
.basket .total {
position:absolute;
bottom:0%;
height:29%;
width:100%;
border:1px solid black;
}
.basket .content th{
width:100%;
}
.basket .content table{
position:absolute;
top:11%;
width:100%;
border-collapse: collapse;
}
.con-box th{
width:100%;
}
#remove-basket {
position:absolute;
right:0;
bottom:30%;
width:40%;
right:0;
}
.wrap {
display:flex;
margin-top:8px;
}
.wrap #product {
margin-left:0px;
}
.wrap #price {
position:absolute;
right:10px;
}
#buy-btn {
position:absolute;
bottom:5%;
left:27%;
width:50%;
height:30px;
border-radius:10px;
}
</style>
<c:set var="list" value="${dao.productlist() }" />
<c:set var="item" value="${juice.getList() }" scope="session" />
<c:set var="sum" value="0" />
<c:forEach items="${item }" var="salesDTO">
<c:set var="value" value="${salesDTO.getPrice() }" />
<c:set var="sum" value="${sum + value * salesDTO.getCnt() }" />
</c:forEach>
<div class="main">
<%--${status.index < 8}는 인덱스가 4의 배수일때 즉 인덱스가 0,4일때 tr을 생성 --%>
<%-- <c:if test="${(status.index + 1) % 4 == 0 || status.last}">
이걸로 현재 인덱스가 3,7,11인 인덱스만 마지막인덱스로 정의, 위 조건이 참이면 한줄을 끝낸다 --%>
<div class="basket">
<div class="top-name">
<h2>구매리스트</h2>
</div>
<div class="content">
<table cellspacing="0" class="con-box">
<c:forEach var="bas" items="${item}">
<tr>
<th>
<div class="wrap">
<div id="product">${bas.product} X ${bas.cnt}</div>
<div id="price">₩${bas.price}</div>
</div>
</th>
</tr>
</c:forEach>
</table>
<a href="${cpath}/remove-basket.jsp"><button id="remove-basket">전체삭제</button></a>
</div>
<div class="total">
<h2>지불금액: ₩${sum}</h2>
<a href="purchase.jsp"><button id="buy-btn">구매확인</button></a>
</div>
</div>
<table cellspacing="0" class="box">
<c:forEach var="dto" items="${list}" varStatus="status">
<c:if test="${status.index < 8}">
<c:if test="${status.index % 4 == 0}">
<tr>
</c:if>
<th><a href="${cpath }/idx.jsp?idx=${dto.idx}">
<img src="${dto.filepath}">
</a>
<div class="cnt">${dto.product}<br>상품가격: ${dto.price}</div>
</th>
<c:if test="${(status.index + 1) % 4 == 0 || status.last}">
</tr>
</c:if>
</c:if>
</c:forEach>
</table>
</div>
</body>
</html>--------------------------------------------------------index.jsp--------------------------------------------------------
상품을 표시해주는 index.jsp파일에서는 DAO에서 불러온 db의 값을 표시해주고
상품을 클릭하면 idx값을 idx.jsp로 보낸다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="header.jsp"%>
<c:set var="dto" value="${dao.selectOne(param.idx) }" />
<c:if test="${not empty dto }" >
${juice.basket(dto) }
</c:if>
<c:redirect url="index.jsp" />
</body>
</html>--------------------------------------------------------idx.jsp--------------------------------------------------------
idx.jsp에서는 index.jsp에서 보낸 idx값을 싱글톤 인스턴스가 있는 Juice.java로 값을 보낸다.
package sales;
import java.util.ArrayList;
// 싱글톤을 사용하여 값을 list에 넣어서 계속 보존할 수 있다.
public class Juice {
private ArrayList<SalesDTO> list = new ArrayList<SalesDTO>();
private static Juice instance = new Juice();
public static Juice getInstance() {
return instance;
}
public ArrayList<SalesDTO> getList(){
return list;
}
// 값을 받아서
public void basket(SalesDTO dto) {
boolean found = false;
// list에 값이 비어있으면 Cnt = 1하고 list에 값 추가
if(list.isEmpty()) {
dto.setCnt(1);
list.add(dto);
} else {
for(SalesDTO tmp : list) {
if(tmp.getIdx() == dto.getIdx()) {
tmp.setCnt(tmp.getCnt() + 1);
found = true;
break;
}
}
if(!found) {
dto.setCnt(1);
list.add(dto);
}
}
}
public void remove() {
list.clear();
}
}--------------------------------------------------------------Juice.java---------------------------------------------------------
여기서는 싱글톤을 적용하여 List에 값을 넣고 계속 값을 유지시킨다.
package sales;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;
public class SalesDAO {
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
private DataSource ds;
private Context init;
private static SalesDAO instance = new SalesDAO();
public static SalesDAO getInstance() {
return instance;
}
private SalesDAO() {
try {
init = new InitialContext();
ds = (DataSource) init.lookup("java:comp/env/jdbc/oracle");
}catch(NamingException e) {
System.out.println("DAO 생성자 생성오류 " + e);
e.printStackTrace();
}
}
private void close() {
try { if(rs != null) rs.close(); } catch(Exception e) {}
try { if(pstmt != null) pstmt.close(); } catch(Exception e) {}
try { if(conn != null) conn.close(); } catch(Exception e) {}
}
public List<SalesDTO> productlist() {
ArrayList<SalesDTO> list = new ArrayList<SalesDTO>();
String sql = "select idx,product,price,explain,filepath from sales order by product";
try {
conn = ds.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
SalesDTO dto = new SalesDTO();
dto.setIdx(rs.getInt("idx"));
dto.setProduct(rs.getString("product"));
dto.setPrice(rs.getInt("price"));
dto.setExplain(rs.getString("explain"));
dto.setFilepath(rs.getString("filepath"));
list.add(dto);
}
}catch(SQLException e) {
e.printStackTrace();
}finally {
close();
}
return list;
}
public SalesDTO selectOne(int idx) {
SalesDTO dto = null;
String sql = "select idx,product,price from sales where idx = ?";
try {
conn = ds.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, idx);
rs = pstmt.executeQuery();
if(rs.next()) {
dto = new SalesDTO();
dto.setIdx(rs.getInt("idx"));
dto.setProduct(rs.getString("product"));
dto.setPrice(rs.getInt("price"));
}
}catch(SQLException e) {
e.printStackTrace();
}finally {
close();
}
return dto;
}
}이 부분은 특별한 것이 없어서 생략하겠다.
이번에는 간단히 코드를 공개해 보았다.
아직 디자인을 적용시키진 못해서 다음주에 디자인과 개별삭제도 적용시켜서 다시 업로드 해보도록 하겠다.
반응형
'학원 스터디그룹 과제' 카테고리의 다른 글
| HTML로그인 페이지 제작 (0) | 2023.05.01 |
|---|
