본문 바로가기
ICIA 수업일지

2021.09.03 수업일지 (Servlet, Spring, MySQL, Template)

by 주성씨 2021. 9. 3.

- 프로젝트 설계

1. 스토리보드 그리기

2. 테이블 설계

3. 프로그램 작성

4. 테스트

 

- 쇼핑몰 만들기를 해보도록 하자.

- 스토리보드는 이미 있으니 데이터베이스부터 만들도록 하겠다.

- MySQL

#2021.09.03
# 이전에 있었떤 동일한 이름의 DB를 지우겠다.
use shopdb;
drop table product;
drop database shopdb;

create database shopdb;
grant all privileges on shopdb.* to 'shop'@'localhost';

ㄴ user는 이전에 있었던 것을 그대로 쓰겠다.

 

- 업체 테이블을 만들고 데이터를 넣겠다.

/*업체테이블*/
CREATE TABLE mall (
    mall_id NCHAR(4) NOT NULL, /*업체코드*/
    mall_name NVARCHAR(50) NOT NULL, /*업체이름*/
    manager NVARCHAR(15), /*업체관리자*/
    address NVARCHAR(100), /*업체주소*/
    tel NVARCHAR(15), /*업체전화번호*/
    email NVARCHAR(20), /*업체이메일*/
    detail NVARCHAR(100), /*업체정보*/
    PRIMARY KEY (mall_id)
);

DESC MALL;

/* 업체 데이터 */
insert into mall(mall_id,mall_name,manager,address,tel,email)
values('M101','에몬스 가구','이병렬','서울 강서구 대치동 561번지','02-522-6898','Bllee@hanmail.net');
insert into mall(mall_id,mall_name,manager,address,tel,email)
values('M102','벨라지오 퍼니처','이재광','서울 강북구 수유동 134번지', '02-897-6690','Jglee@netian.com');
insert into mall(mall_id,mall_name,manager,address,tel,email)
values('M103','까사미아','서연우','인천 부평구 계산동 104번지','032-502-9599','Ywshu@netian.com');
insert into mall(mall_id,mall_name,manager,address,tel,email)
values('M104','레이디 가구','김성철','서울 강남구 압구정동 456번지','02-602-9876','Sigang@netian.com');
insert into mall(mall_id,mall_name,manager,address,tel,email)
values('M105','가구 나라','이원구','인천 남동구 만수동 567번지','032-503-9021','Wglee@hanmail.net');

/* 확인 */
SELECT * FROM MALL;

확인

 

- 상품 테이블을 생성한다.

/* 상품 테이블 생성 */
CREATE TABLE product (
    prod_id NCHAR(4) NOT NULL,
    prod_name NVARCHAR(50) NOT NULL,
    mall_id NCHAR(4),
    company NVARCHAR(50),
    price1 INT,
    price2 INT,
    detail NVARCHAR(3000),
    image NVARCHAR(100),
    prod_del NCHAR(1) DEFAULT '0',
    PRIMARY KEY (prod_id),
    FOREIGN KEY (mall_id)
	REFERENCES mall (mall_id)
);

DESC PRODUCT;

/* 상품 테이블 데이터 */
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P101','아모라 아쿠아텍스 이지클린 침대','M101','가구나라',2200000,2300000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P102','모던 라운지 낮은 퀸 침대','M101','삼익 가구나라',2100000,2200000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P103','도로시 아쿠아텍스 기능성 퀸 침대','M102','한샘가구',3000000,3200000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P104','모리엘 호텔형 침대','M102','한샘가구',1500000,1600000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P105','글로리 모던 서랍장 와이드','M101','한샘가구',600000,650000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P106','카밀라 4인용 극세사가죽 소파','M102','까사미아',2500000,2600000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P107','루진 6인 원목 식탁세트 (벤치형)','M101','까사미아',300000,320000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P108','베스트 10.5자 장롱 시리즈','M103','동서가구',400000,420000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P109','줄리아 화이트 10자/12자 장농 ','M104','동서가구',520000,550000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P110','글로리 모던 서랍장 830','M105','가구나라',100000,120000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P111','리트머스 1500 거실장','M102','한샘가구',120000,130000);
insert into product(prod_id,prod_name,mall_id,company,price1,price2)
values('P112','엘린 4인용 카우치 가죽쇼파','M102','가구나라',1500000,1670000);

SELECT * FROM product;

 

확인

 

- 구매 테이블 생성

/* 구매테이블 생성 */
CREATE TABLE purchase (
    order_id CHAR(4) NOT NULL,
    name VARCHAR(15) NOT NULL,
    address VARCHAR(100),
    email VARCHAR(20),
    tel VARCHAR(15),
    pdate DATE,
    payType CHAR(1), /* 결제수단 */
    status CHAR(1) DEFAULT '0',
    PRIMARY KEY (order_id)
);

DESC PURCHASE;

/* 구매테이블 데이터 생성 */
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R101', '김수정', '서울 강남구 대치1동', 'Sjkim@netian.com', '02-503-9090','2014/08/10', '1', '1');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R102', '박혜경', '인천 부평구 부평5동', 'Hkpark@hanmail.net', '032-609-9987','2014/08/10', '1', '1');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R103', '임미숙', '인천 서구 청라2동', 'mslim@hanmail.net', '02-688-7703','2014/08/13', '1', '1');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R104', '김연호', '서울 종로구 관훈동 관훈빌딩', 'Yhkim@yahoo.com', '02-688-7703','2014/08/13', '1', '0');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R105', '한보연', '서울 종로구 인사동', 'byhan@yahoo.com', '02-230-2044','2014/08/13', '1', '1');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R106', '김수정', '서울 강남구 대치1동', 'Sjkim@netian.com', '02-503-9090','2014/08/13', '0', '0');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R107', '이준호', '인천 계양구 효성동', 'Jhlee@hanmil.net', '032-522-5678','2014/08/14', '0', '1');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R108', '김연호', '서울 종로구 관훈동 관훈빌딩', 'Yhkim@yahoo.com', '02-688-7703','2014/08/15', '1', '1');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R109', '김수정', '서울 강남구 대치1동', 'Sjkim@netian.com', '02-503-9090','2014/08/15', '1', '1');
insert into purchase(order_id, name, address, email, tel, pdate, payType, status)
values('R110', '이준호', '인천 계양구 효성동', 'Jhlee@hanmil.net', '032-522-5678','2014/08/15', '0', '0');

SELECT * FROM purchase;

 

확인

 

- 주문 상품 테이블 생성

/* 주문 테이블 생성 */
CREATE TABLE orders (
    order_id CHAR(4) NOT NULL,
    prod_id CHAR(4) NOT NULL,
    price INT,
    quantity INT,
    PRIMARY KEY (order_id , prod_id),
    FOREIGN KEY (order_id)
        REFERENCES purchase (order_id),
    FOREIGN KEY (prod_id)
        REFERENCES product (prod_id)
);

DESC orders;

insert into orders(order_id, prod_id, price, quantity) values('R101', 'P109', 520000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R101', 'P112', 150000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R101', 'P107', 300000, 2);
insert into orders(order_id, prod_id, price, quantity) values('R102', 'P106', 2500000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R102', 'P112', 150000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R103', 'P107', 300000, 2);
insert into orders(order_id, prod_id, price, quantity) values('R103', 'P103', 3000000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R104', 'P109', 520000, 2);
insert into orders(order_id, prod_id, price, quantity) values('R104', 'P107', 300000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R104', 'P111', 120000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R105', 'P110', 100000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R105', 'P103', 3000000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R106', 'P112', 150000, 2);
insert into orders(order_id, prod_id, price, quantity) values('R107', 'P112', 150000, 4);
insert into orders(order_id, prod_id, price, quantity) values('R107', 'P103', 3000000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R108', 'P104', 1500000, 2);
insert into orders(order_id, prod_id, price, quantity) values('R109', 'P103', 3000000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R110', 'P109', 520000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R110', 'P111', 120000, 1);
insert into orders(order_id, prod_id, price, quantity) values('R110', 'P112', 150000, 1);

SELECT * FROM orders;

 

확인

- EED 만들기

- menu -> database -> reverse engineer -> db 선택 -> pass 입력 -> next...

확인

 

 

 

- 새로운 프로젝트를 만들자.

- create new dwp shop

- 서버 루트를 해당 프로젝트로 지정하고

- 이미지를 가지고 오기위해 servers->server.xml에 이미지를 저장하기 위한 루트를 지정해준다.

<Context docBase="c:/image" path="/image" reloadable="true"/>

 

- 서버를 시작한후 stop 해보자.

 

- 메인페이지를 만들고 꾸며보자.

- create new main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/functions"%>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이주성의 쇼핑관리 시스템</title>
<style>
@font-face {
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'SpoqaHanSansNeo-Regular';
	background: white;
}

#container {
	width: 960px;
	margin: 0 auto;
	padding: 20px;
	background: white;
}

#header {
	border-top: 5px solid gray;
	border-bottom: 5px solid gray;
	background: rgb(246, 246, 246);
	-webkit-transition: width 2s, height 2s, background-color 2s,
		-webkit-transform 2s;
	transition: width 2s, height 2s, background-color 2s, transform 2s;
	padding: 20px;
}

#center {
	margin-top: 30px;
	margin-bottom: 30px;
}

#footer {
	border-top: 5px solid gray;
	border-bottom: 5px solid gray;
	color: gray;
	background: rgb(246, 246, 246);
	padding: 20px;
}

#menu {
	overflow: hidden;
	border-bottom: 3px solid gray;
	background: rgb(246, 246, 246);
}

#menu h4 {
	float: left;
	width: 80px;
	margin-left: 10px;
	margin-right: 10px;
	text-align: center;
}

h1, h3 {
	text-align: center;
}

#content {
	margin-top: 10px;
}

a {
	text-decoration: none;
	color: black;
	padding: 10px;
	border-radius: 10px;
	-webkit-transition: width 0.5s, height 0.5s, background-color 0.5s,
		-webkit-transform 1s;
	transition: width 0.5s, height 0.5s, background-color 0.5s, transform
		0.5s;
}

a:hover {
	cursor: pointer;
	text-decoration: none;
	background: rgb(226, 157, 29);
	color: black;
	padding: 10px;
	border-radius: 10px;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

a:VISITED {
	color: black;
}

#pagination {
	text-align: center;
}

#prev, #next {
	padding: 5px 20px 5px 20px;
	font-size: 15px;
	font-weight: bold;
	color: white;
	border-radius: 5px 5px 5px 5px;
}

#condition {
	margin: 0px 20px 10px 20px;
}

#key, #perPage, #order, #desc {
	height: 25px;
}

#word {
	height: 20px;
}
</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1 onClick="location.href='/'" style="cursor: pointer;" >
				<img src="https://www.hanssem.com/resources/pc/images/common/logo_hs.png" />
			</h1>
		</div>
		<div id="center">
			<div id="menu">
				<h4>
					<a href="/">Home</a>
				</h4>
				<h4>
					<a href="">업체목록</a>
				</h4>
				<h4>
					<a href="">상품목록</a>
				</h4>
				<h4>
					<a href="">상품등록</a>
				</h4>
				<h4>
					<a href="">주문목록</a>
				</h4>
				<h4>
					<a href="">장바구니</a>
				</h4>
			</div>
			<div id="content">
			<jsp:include page="${pageName}"></jsp:include>
			</div>
		</div>
		<div id="footer">
			<img src="https://www.hanssem.com/resources/pc/images/common/ci_footer.png" />
			<h3>Copyright © 2019 HANSSEM Co. Ltd. All rights reserved</h3>
		</div>
	</div>
</body>
</html>

 

출력물

 

- create new controller\MainServlet.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/")
public class MainServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
		request.setAttribute("pageName", "/about.jsp");
		dis.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}

}

 

- create new about.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h2>기업소개</h2>
<h4>지난 40년간 우리나라 주거 환경 변화를 주도해 온 한샘은 부엌, 침실, 거실, 욕실 등 주택의 각 공간에
	가구와기기, 소품, 조명, 패브릭 등을 제공하는 토탈 홈 인테리어 기업입니다. 1970년 부엌가구 전문 회사로 출발한 한샘은
	입식 부엌의 개념조차 낯설었던 우리 가정에 새로운 현대식 부엌을 소개하면서 국내 시장을 이끄는 선두 기업으로 자리 잡았습니다.
	싱크대라 통칭되던 부엌가구 시장에 ‘시스템 키친’, ‘인텔리전트 키친’이라는 용어를 처음 도입하면서 비효율적인 부엌을 편리하고
	아름다운 공간으로, 주부만이 아닌 가족 모두를 위한 제 2의 거실로 제안하는 등 부엌 문화의 새로운 장을 열었습니다. 치열한
	경쟁 속에서 살아가는 현대인에게 집은 휴식과 재충전을 할 수 있는 공간입니다. 또한, 사랑하는 가족들과 화목한 대화를 나눌 수
	있는 공간이기도 합니다. 이러한 집이란 공간이 세상에서 가장 가고 싶은 곳이 될 때, 현대인들은 진정한 휴식과 행복을얻을 수
	있게 됩니다. ‘주거 환경 개선을 통해 인류 발전에 공헌한다’는 사명 아래 실내 공간 중 가장 어렵고 복잡한 부엌 분야 사업을
	통해 확보한 인테리어 디자인 역량을 바탕으로 침실, 거실, 서재, 자녀방, 욕실 등 주택 내 여러 공간으로 사업 영역을
	확장하면서 차별화된 비즈니스 모델을 선보였습니다. 한샘은 미국, 중국, 일본에 현지 법인을 두고 해외 시장을 확대할 준비를 하고
	있습니다. 최근에는 친환경 신소재 개발, 맞벌이 한 자녀 가정을 위한 자녀방 개발, 건자재 사업 등 21세기 정보화 사회의 가족
	공동체를 위한 새로운 개념의 주거 환경을 제공하는 데 자원을 투입하고 있습니다. 부엌가구는 물론 종합 가구-인테리어 분야에서도
	1위기업으로서 업계를 선도하고 있으며, 특히 부엌가구 부문의 경쟁력은 이미 세계적인 수준으로 평가 받고 있습니다. 앞으로 한샘은
	e-비즈니스 체계 구축과 각종 경영 혁신 활동을 통해 경쟁력을 더욱 강화함으로써 ‘주거 환경 부문 세계 최강 기업’이라는 비전을
	달성해 나갈 것입니다.</h4>

 

출력물

 

- pl/sql

CREATE DEFINER=`shop`@`localhost` PROCEDURE `list`(
   in i_table varchar(1000),
    in i_key varchar(50),
    in i_word varchar(50),
    in i_order varchar(50),
    in i_desc varchar(5),
    in i_page int,
    in i_perPage int
)
BEGIN
   SET @v_word = concat('%', i_word ,'%');
    SET @v_order = concat(i_order,' ', i_desc);
    SET @v_start=(i_page-1)*i_perPage;
    SET @v_perPage = i_perPage;
   SET @v_sql=concat('select * from ',i_table,' where ', i_key,' like ? order by ',@v_order,' limit ?,?');
    PREPARE ps from @v_sql;
    EXECUTE ps using @v_word, @v_start, @v_perPage;
    
    SET @v_sql=concat('select count(*) from ',i_table, ' where ',i_key,' like ?');
    PREPARE ps from @v_sql;
    EXECUTE ps using @v_word;
END

 

call list('product','prod_id','','prod_name','',1,5);

 

출력물

 

- 이전에 사용했던 model\database.java, SqlVO.java를 가지고 오도록 한다.

package model;

import java.sql.Connection;
import java.sql.DriverManager;

public class Database {
	public static Connection CON;
	static {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			CON = DriverManager.getConnection("jdbc:mysql://localhost:3306/shopdb", "shop", "pass");
			System.out.println("접속성공");
		} catch (Exception e) {
			System.out.println("접속실패:" + e.toString());
		}
	}
}

 

package model;

public class SqlVO {

	private String table;
	private String key;
	private String word;
	private String order;
	private String desc;
	private int page;
	private int perPage;

	public String getTable() {
		return table;
	}

	public void setTable(String table) {
		this.table = table;
	}

	public String getKey() {
		return key;
	}

	public void setKey(String key) {
		this.key = key;
	}

	public String getWord() {
		return word;
	}

	public void setWord(String word) {
		this.word = word;
	}

	public String getOrder() {
		return order;
	}

	public void setOrder(String order) {
		this.order = order;
	}

	public String getDesc() {
		return desc;
	}

	public void setDesc(String desc) {
		this.desc = desc;
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public int getPerPage() {
		return perPage;
	}

	public void setPerPage(int perPage) {
		this.perPage = perPage;
	}

	@Override
	public String toString() {
		return "SqlVO [table=" + table + ", key=" + key + ", word=" + word + ", order=" + order + ", desc=" + desc
				+ ", page=" + page + ", perPage=" + perPage + "]";
	}

}

 

- 라이브러리도 가지고 오도록 하자.

 

- create new ProductDAO.java

- 상품 목록 리시트를 가지고 오는 메서드를 jsonobject를 통해서 가지고 오도록 하겠다.

package model;

import java.sql.CallableStatement;
import java.sql.ResultSet;
import java.text.DecimalFormat;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;

public class ProductDAO {
	// 1. 상품목록 출력 메서드
	public JSONObject list(SqlVO vo) {
		JSONObject object = new JSONObject();
		try {
			String sql = "call list(?,?,?,?,?,?,?)";
			CallableStatement cs = Database.CON.prepareCall(sql);
			cs.setString(1, vo.getTable());
			cs.setString(2, vo.getKey());
			cs.setString(3, vo.getWord());
			cs.setString(4, vo.getOrder());
			cs.setString(5, vo.getDesc());
			cs.setInt(6, vo.getPage());
			cs.setInt(7, vo.getPerPage());
			cs.execute();
			
			ResultSet rs = cs.getResultSet();
			JSONArray array = new JSONArray();
			while(rs.next()){
				JSONObject obj = new JSONObject();
				obj.put("image", rs.getString("image"));
				obj.put("prod_id", rs.getString("prod_id"));
				obj.put("prod_name", rs.getString("prod_name"));
				DecimalFormat df = new DecimalFormat("#,###");
				String price = df.format(rs.getInt("price1"));
				obj.put("price", price);
				array.add(obj);
			}
			object.put("array", array);
			
			cs.getMoreResults();
			rs=cs.getResultSet();
			if(rs.next()){
				object.put("totel", rs.getInt("count(*)"));
			};
			
		} catch (Exception e) {
			System.out.println("ProductDAO list : "+e.toString());
		}
		return object;
	}
}

 

- 페이지 생성 서블릿, 데이터 get 서블릿을 나눠서 생성하도록 하겠다.

- create new ProdRESTServlet.java

package controller;

import java.io.IOException;
import java.io.PrintWriter;

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 model.ProductDAO;
import model.SqlVO;


@WebServlet(value={"/product.json"})
public class ProdRESTServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	ProductDAO dao = new ProductDAO();
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		SqlVO vo = new SqlVO();
		vo.setTable("product");
		vo.setKey(request.getParameter("key"));
		vo.setWord(request.getParameter("word"));
		vo.setOrder(request.getParameter("order"));
		vo.setDesc(request.getParameter("desc"));
		vo.setPage(Integer.parseInt(request.getParameter("page")));
		vo.setPerPage(Integer.parseInt(request.getParameter("perPage")));
		switch (request.getServletPath()) {
		case "/product.json":
			out.println(dao.list(vo));
			break;
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

}

 

- about.jsp 에 있던 내용을 지우고 여기에 목록을 가지고 오도록 하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
.row:hover {
	cursor: pointer;
	background: rgb(242, 242, 242);
	color: black;
}

div #products {
	overflow: hidden;
	margin-bottom: 20px;
}

div .item {
	float: left;
	padding: 5px;
	width: 215px;
	height:250px;
	margin: 5px;
	background: white;
	border: 1px solid rgb(230, 230, 230); 
}

div .prod_name {
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

</style>
<h1>HANSSEM mall</h1>

<div id="condition">
	<select id="key">
		<option value="prod_id">상품코드</option>
		<option value="prod_name">상품이름</option>
		<option value="company">제조사</option>
	</select> <input type="text" id="word" placeholder="검색어 입력" /> <select
		id="perPage">
		<option value=4>4개</option>
		<option value=8>8개</option>
		<option value=12>12개</option>
		<option value=16>16개</option>
	</select> 검색수 : <span id="total"></span> <select id="desc" style="float: right;">
		<option value="">오름차순</option>
		<option value="desc">내림차순</option>
	</select> <select id="order" style="float: right; margin-right: 5px;">
		<option value="prod_id">상품코드</option>
		<option value="prod_name">상품이름</option>
		<option value="company">제조사</option>
	</select>
</div>

<div id="products"></div>
<div id="pagination">
	<button id="prev">&lt;</button>
	<span id="page"></span>
	<button id="next">&gt;</button>
</div>
<script id="temp" type="text/x-handlebars-template">
{{#each array}}
<div class="item">
	<img src="/image/product/{{image}}" width=210/>
	<div class="prod_id">{{prod_id}}</div>
	<div class="prod_name">{{prod_name}}</div>
	<div class="price">{{price}}</div>
</div>
{{/each}}
</script>
<script>
	var page = 1;
	$("#prev").on("click", function() {
		page--;
		getList();
	});
	$("#next").on("click", function() {
		page++;
		getList();
	})
	$("#word").on("keypress", function(e) {
		if (e.keyCode == 13) {
			page = 1;
			getList();
		}
	});
	$("#perPage, #order, #desc").on("change", function() {
		page = 1;
		getList();
	});

	getList();
	function getList() {
		var key = $('#key').val();
		var word = $('#word').val();
		var perPage = $('#perPage').val();
		var order = $('#order').val();
		var desc = $('#desc').val();
		$.ajax({
			type : 'get',
			url : '/product.json',
			dataType : 'json',
			data : {
				"key" : key,
				"word" : word,
				"page" : page,
				"perPage" : perPage,
				"order" : order,
				"desc" : desc
			},
			success : function(data) {
				var temp = Handlebars.compile($('#temp').html());
				$('#products').html(temp(data));
				$('#total').html(data.total);
				var lastPage = Math.ceil(data.total / perPage)
				$('#page').html("[ " + page + "/" + lastPage + " ]");
				if (page == 1) {
					$('#prev').attr('disabled', true);
					$('#prev').css('background', 'gray')
				} else {
					$('#prev').attr('disabled', false);
					$('#prev').css({'background':'rgb(246, 246, 246)','color':'black'});
				}
				if (page == lastPage) {
					$('#next').attr('disabled', true);
					$('#next').css('background', 'gray');
				} else {
					$('#next').attr('disabled', false);
					$('#next').css({'background':'rgb(246, 246, 246)','color':'black'});
				}
			}
		})
	}
</script>

 

출력물

 

- 상품등록 해보도록 하겠다.

- main.jsp

				<h4>
					<a href="/product/insert">상품등록</a>
				</h4>

 

- create new ProductServlet.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(value = { "/product/insert", "/product/read", "/product/update", "/product/delete" })
public class ProductServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		switch (request.getServletPath()) {
		case "/product/insert":
			request.setAttribute("pageName", "/product/insert.jsp");
			break;
		}
		RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
		dis.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	}

}

 

- create new insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
table {
	border-collapse: collapse;
	margin: 0px auto;
	margin-bottom: 10px;
}

.title {
	background: rgb(246, 246, 246);
	color: dark-gray;
	text-align: center;
}

tr, td {
	border: 1px solid black;
	padding: 10px;
}
.btnbox input{
	padding: 5px 20px 5px 20px;
	font-size: 15px;
	font-weight: bold;
	color: black;
	border-radius: 5px 5px 5px 5px;
}
</style>
<h1>상품등록</h1>
<form name="frm">
	<table>
		<tr>
			<td class="title" width=100>상품코드</td>
			<td width=120><input type="text" name="prod_id" placeholder="상품코드를 입력하세요." /></td>
			<td class="title" width=100>제조원/수입원</td>
			<td width=120><input type="text" name="company" placeholder="제조사를 입력하세요." /></td>
			<td class="title" width=100>판매가격</td>
			<td width=120><input type="text" name="price" placeholder="가격를 입력하세요." /></td>
		</tr>
		<tr>
			<td class="title">업체코드</td>
			<td colspan=3>
			<input type="text" name="mall_id" placeholder="코드를 입력하세요." />&nbsp;
			<input type="text" name="mall_name" placeholder="판매자를 입력하세요." />
			</td>
			<td class="title">일반가격</td>
			<td><input type="text" name="price" placeholder="가격를 입력하세요." /></td>
		</tr>
		<tr>
			<td class="title">상품이름</td>
			<td colspan=5>
			<input type="text" name="prod_name" placeholder="상품이름을 입력하세요." />
			</td>
		</tr>
		<tr>
			<td class="title">상품이미지</td>
			<td colspan=5>
			<img src="http://placehold.it/200/200"/>
			</td>
		</tr>
		<tr>
			<td class="title">상품설명</td>
			<td colspan=5>
			<textarea rows="15" cols="110"></textarea>
			</td>
		</tr>
	</table>
</form>
<div style="text-align: center;" class="btnbox">
      <input type="submit" value="상품등록"/>
      <input type="reset" value="등록취소"/>
</div>

 

출력물

 

- 상품설명에서 글 편집을 하고 싶으면 ckeditor라는 기능을 이용할 수 있다.

<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

ㄴ 사용하고 싶은곳 어디에나 넣어주면 된다.

 

	<div style="text-align: center;" class="btnbox">
		<input type="submit" value="상품등록" /> <input type="reset" value="등록취소" />
	</div>
</form>
<script>
	var ckeditor_config = {
		resize_enable : false, //editor 사이즈를 변경하지 못한다.
		enterMode : CKEDITOR.ENTER_BR,
		shiftEnterMode : CKEDITOR.ENTER_P,
		filebrowserUploadUrl : "/ckupload",
		height : 300
	};
	CKEDITOR.replace('editor', ckeditor_config)
</script>

ㄴ textarea 부분에 적용하여 위와 같이 속성으로 크기 조절등을 할 수 있다.

 

적용후

 

- 상품코드 최대값을 구해서 신규등록시 사용할 수 있도록 하겠다.

- productdao

	// 2. 신규상품 등록에 이용될 상품코드 최대값
	public String getCode() {
		String code = "";

		try {
			String sql = "select max(prod_id) from product";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ResultSet rs = ps.executeQuery();
			if (rs.next()) {
				code = rs.getString("max(prod_id)");
			}
		} catch (Exception e) {
			System.out.println("ProductDAO getCode : " + e.toString());
		}

		return code;
	}

 

- productservlet.java

- 가지고온 데이터를 추출하여 string 과 int를 분해한 후 +1하는 작업을 하여 다시 합쳐주는 작업을 하겠다.

@WebServlet(value = { "/product/insert", "/product/read", "/product/update", "/product/delete" })
public class ProductServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	ProductDAO dao = new ProductDAO();
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		switch (request.getServletPath()) {
		case "/product/insert":
			String code = dao.getCode(); // new,4
			String strCode = code.substring(1);
			int intCode = Integer.parseInt(strCode);
			code = "P"+(intCode+1);
			request.setAttribute("code", code);
			request.setAttribute("pageName", "/product/insert.jsp");
			break;
		}
		RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
		dis.forward(request, response);
	}

 

- insert.jsp

		<tr>
			<td class="title" width=100>상품코드</td>
			<td width=120><input type="text" name="prod_id"
				value="${code}" /></td> <!-- new -->
			<td class="title" width=100>제조원/수입원</td>
			<td width=120><input type="text" name="company"
				placeholder="제조사를 입력하세요." /></td>
			<td class="title" width=100>판매가격</td>
			<td width=120><input type="text" name="price"
				placeholder="가격를 입력하세요." /></td>
		</tr>

 

결과물

 

- 이미지 미리보기를 할 수 있게 하겠다.

<h1>상품등록</h1>
<form name="frm">
	<table>
		<tr>
			<td class="title" width=100>상품코드</td>
			<td width=120><input type="text" name="prod_id" value="${code}"
				readonly /></td>
			<!-- new -->
			<td class="title" width=100>제조원/수입원</td>
			<td width=120><input type="text" name="company"
				placeholder="제조사를 입력하세요." /></td>
			<td class="title" width=100>판매가격</td>
			<td width=120><input type="text" name="price1"
				value=0 /></td>
		</tr>
		<tr>
			<td class="title">업체코드</td>
			<td colspan=3><input type="text" name="mall_id"
				placeholder="코드를 입력하세요." />&nbsp; <input type="text"
				name="mall_name" placeholder="판매자를 입력하세요." /></td>
			<td class="title">일반가격</td>
			<td><input type="text" name="price2" value=0 /></td>
		</tr>
		<tr>
			<td class="title">상품이름</td>
			<td colspan=5><input type="text" name="prod_name"
				placeholder="상품이름을 입력하세요." size=100% /></td>
		</tr>
		<tr>
			<td class="title">상품이미지</td>
			<td colspan=5><img src="http://placehold.it/200/200" id="image" />
				<input type="file" name="image" style="visibility: hidden;"
				accept="image/*" /></td>
		</tr>
		<tr>
			<td class="title">상품설명</td>
			<td colspan=5><textarea rows="15" cols="110" id="editor" name="detail"></textarea></td>
		</tr>
	</table>
	<div style="text-align: center;" class="btnbox">
		<input type="submit" value="상품등록" /> <input type="reset" value="등록취소" />
	</div>
</form>
<script>
	// 이미지 클릭했을때
	$('#image').on('click', function() {
		$(frm.image).click();
	})

	// 미리보기
	$(frm.image).on('change', function() {
		var reader = new FileReader();
		reader.onload = function(e) {
			$("#image").attr("src", e.target.result);
		}
		reader.readAsDataURL(this.files[0]);
	});

미리보기

 

- 업체를 선택할 수 있는 페이지를 팝업으로 뜰 수 있게 하겠다.

- create new MallDAO.java

package model;

import java.sql.PreparedStatement;
import java.sql.ResultSet;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;;

public class MallDAO {
	// 1. 업체 전체 목록
	public JSONArray search(String mall_name) {
		JSONArray array = new JSONArray();

		try {
			String sql = "select * from mall where mall_name like ?";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ps.setString(1, "%" + mall_name + "%");
			ResultSet rs = ps.executeQuery();
			while (rs.next()) {
				JSONObject obj = new JSONObject();
				obj.put("mall_id", rs.getString("mall_id"));
				obj.put("mall_name", rs.getString("mall_name"));
				obj.put("tel", rs.getString("tel"));
				array.add(obj);
			}

		} catch (Exception e) {
			System.out.println("MallDAO search : " + e.toString());
		}

		return array;
	}
}

 

- ProductRESTServlet.java

@WebServlet(value={"/mall_search.json","/product.json"})
public class ProdRESTServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	ProductDAO dao = new ProductDAO();
	MallDAO mdao = new MallDAO();
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		switch (request.getServletPath()) {
		case "/mall_search.json":
			out.println(mdao.search(request.getParameter("mall_name")));
			break;
		case "/product.json":
			SqlVO vo = new SqlVO();
			vo.setTable("product");
			vo.setKey(request.getParameter("key"));
			vo.setWord(request.getParameter("word"));
			vo.setOrder(request.getParameter("order"));
			vo.setDesc(request.getParameter("desc"));
			vo.setPage(Integer.parseInt(request.getParameter("page")));
			vo.setPerPage(Integer.parseInt(request.getParameter("perPage")));
			out.println(dao.list(vo));
			break;
		}
	}

 

웹에서 위와 같이 json 데이터를 확인 할 수 있다.

 

- search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>업체목록</title>
<style>
h2{
text-align: center;
}
table {
	border:1px solid black;
	border-collapse: collapse;
	margin: 0px auto;
	margin-bottom: 10px;
}

th {
	border:1px solid black;
	background: rgb(246, 246, 246);
	color: dark-gray;
	text-align: center;
}

td {
	border: 1px solid black;
	padding: 10px;
}
</style>
</head>
<body>
	<h2>업체검색</h2>
	<table id="tbl"></table>
	<script id="temp" type="text/x-handlebars-template">
		<tr>
			<th width=100>업체코드</th>
			<th width=200>업체명</th>
			<th width=200>전화번호</th>
		</tr>
		{{#each .}}
		<tr>
			<td>{{mall_id}}</td>
			<td>{{mall_name}}</td>
			<td>{{tel}}</td>
		</tr>
		{{/ each}}
	</script>
</body>
<script>
	getList();
	function getList() {
		$.ajax({
			type : 'get',
			url : '/mall_search.json',
			data : {
				'mall_name' : ''
			},
			dataType : 'json',
			success : function(data) {
				var temp = Handlebars.compile($('#temp').html());
				$('#tbl').html(temp(data));
			}
		})
	}
</script>
</html>

 

- insert.jsp

	// frm mall_id click
	$(frm.mall_id).on(
			'click',
			function() {
				window.open('/mall/search.jsp', 'mall',
						'width=400,height=300,top=200,left=900');
			})

 

- search 페이지의 row를 클릭하면 업체 코드와 업체명이 넘어가도록 하자.

	$('#tbl').on('click','.row',function(){
		var mall_id=$(this).find('.id').html();
		var mall_name=$(this).find('.name').html();
		$(opener.frm.mall_id).val(mall_id);
		$(opener.frm.mall_name).val(mall_name);
		window.close();
	})

 

출력물

 

- insert를 위한 VO를 만들도록 하겠다.

- create new ProductVO.java

package model;

public class ProductVO {
	private String prod_id;
	private String prod_name;
	private String mall_id;
	private String company;
	private int price1;
	private int price2;
	private String detail;
	private String image;
	private String prod_del;

	public String getProd_id() {
		return prod_id;
	}

	public void setProd_id(String prod_id) {
		this.prod_id = prod_id;
	}

	public String getProd_name() {
		return prod_name;
	}

	public void setProd_name(String prod_name) {
		this.prod_name = prod_name;
	}

	public String getMall_id() {
		return mall_id;
	}

	public void setMall_id(String mall_id) {
		this.mall_id = mall_id;
	}

	public String getCompany() {
		return company;
	}

	public void setCompany(String company) {
		this.company = company;
	}

	public int getPrice1() {
		return price1;
	}

	public void setPrice1(int price1) {
		this.price1 = price1;
	}

	public int getPrice2() {
		return price2;
	}

	public void setPrice2(int price2) {
		this.price2 = price2;
	}

	public String getDetail() {
		return detail;
	}

	public void setDetail(String detail) {
		this.detail = detail;
	}

	public String getImage() {
		return image;
	}

	public void setImage(String image) {
		this.image = image;
	}

	public String getProd_del() {
		return prod_del;
	}

	public void setProd_del(String prod_del) {
		this.prod_del = prod_del;
	}

	@Override
	public String toString() {
		return "ProductVO [prod_id=" + prod_id + ", prod_name=" + prod_name + ", mall_id=" + mall_id + ", company="
				+ company + ", price1=" + price1 + ", price2=" + price2 + ", detail=" + detail + ", image=" + image
				+ ", prod_del=" + prod_del + "]";
	}

}

 

- 상품 등록 메서드를 만들겠다.

- ProductDAO.java

	// 3. 신규상품 등록을 위한 메서드
	public void insert(ProductVO vo) {
		try {
			String sql = "insert into product(prod_id,prod_name,mall_id,company,price1,price2,detail,image)
			values(?,?,?,?,?,?,?,?)";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ps.setString(1, vo.getProd_id());
			ps.setString(2, vo.getProd_name());
			ps.setString(3, vo.getMall_id());
			ps.setString(4, vo.getCompany());
			ps.setInt(5, vo.getPrice1());
			ps.setInt(6, vo.getPrice2());
			ps.setString(7, vo.getDetail());
			ps.setString(8, vo.getImage());
			ps.execute();
		} catch (Exception e) {
			System.out.println("ProductDAO insert : " + e.toString());
		}
	}

 

- submit전에 누락된 정보가 있는지 확인하는 작업을 하겠다.

	// submit을 클릭했을 경우
	$(frm).on('submit',function(e){
		e.preventDefault();
		var prod_name=$(frm.prod_name).val();
		var mall_id=$(frm.mall_id).val();
		var image=$(frm.image).val();
		var company=$(frm.company).val();
		
		if(company==""){
			alert("제조업체를 입력하세요.");
			$(frm.company).focus();
			return;
		}
		if(prod_name==""){
			alert("상품 이름을 입력하세요.");
			$(frm.prod_name).focus();
			return;
		}
		if(mall_id==""){
			alert("업체 크드를 등록하세요.");
			$(frm.mall_id).focus();
			return;
		}
		if(image==""){
			alert("상품 이미지를 등록하세요.");
			$(frm.image).focus();
			return;
		}
		if(!confirm("해당 상품을 등록하시겠습니까?")) return;

		frm.action = "/product/insert";
		frm.method = "post";
		frm.submit();
		
	})

 

확인

 

- frm submit을 위해서 다음과 같이 추가한다.

<h1>상품등록</h1>
<form name="frm" enctype="multipart/form-data">
	<table>
		if(!confirm("해당 상품을 등록하시겠습니까?")) return;

		frm.action = "/product/insert";
		frm.method = "post";
		frm.submit();
		
	})

 

- 이미지 업로드를 해보겠다.

- 우선 라이브러리를 추가한다.

cos.jar
0.05MB

 

- ProductServlet.java

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		MultipartRequest multi = new MultipartRequest(request, "c:/image/product", 1000 * 1000 * 10, "UTF-8",
				new DefaultFileRenamePolicy());
		String strImage = multi.getFilesystemName("image");
		
		ProductVO vo = new ProductVO();
		vo.setProd_id(multi.getParameter("prod_id"));
		vo.setProd_name(multi.getParameter("prod_name"));
		vo.setCompany(multi.getParameter("company"));
		vo.setMall_id(multi.getParameter("mall_id"));
		vo.setPrice1(Integer.parseInt(multi.getParameter("price1")));
		vo.setPrice2(Integer.parseInt(multi.getParameter("price2")));
		vo.setDetail(multi.getParameter("detail"));
		vo.setImage(strImage);
		dao.insert(vo);
		response.sendRedirect("/");
	}

 

출력물

 

shop_ver0903.zip
1.10MB

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.09.07 수업일지(Servlet, Mysql, jstl)  (0) 2021.09.07
2021.09.06 수업일지(Mysql, Servlet, JSTL)  (0) 2021.09.06
2021.09.02 수업일지(Mysql, Servlet, pl/sql)  (0) 2021.09.02
2021.09.01 수업일지(Servlet, Mysql, pl/sql, Template)  (0) 2021.09.01
2021.08.31 수업일지(Spring, Servlet, MVC, Mysql, PL/SQL, JAVA)  (0) 2021.08.31

관련글

티스토리툴바