Seok_In

Spring으로 Web프로젝트 만들기(4) 본문

Spring/Spring으로 Web연습하기

Spring으로 Web프로젝트 만들기(4)

Seok_IN 2022. 4. 18. 01:32

주문 처리하기

1. index.html 수정

<div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
              <a href="#"><img class="card-img-top" src="img/americano.png" alt="" height="300"></a>
              <div class="card-body">
                <h4 class="card-title">
                  <a href="#" class="orderForm" name="아메리카노">아메리카노</a>
                </h4>
                <h5>1500원</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
              <a href="#"><img class="card-img-top" src="img/cafelatte.png" alt="" height="300"></a>
              <div class="card-body">
                <h4 class="card-title">
                  <a href="#" class="orderForm" name="카페라떼">카페라떼</a>
                </h4>
                <h5>2500원</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur! Lorem ipsum dolor sit amet.</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
              <a href="#"><img class="card-img-top" src="img/cafemocha.png" alt="" height="300"></a>
              <div class="card-body">
                <h4 class="card-title">
                  <a href="#" class="orderForm" name="카페모카">카페모카</a>
                </h4>
                <h5>2800원</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
              </div>
            </div>
          </div>

2. 상품의 이름을 클릭 시에 장바구니에 상품이 추가되게 처리 my.js 코드 추가

$("#orderBtn").click(function(){
		
		let confirm_data=confirm("다음과 같이 주문하시겠습니까?\n"+items);		
		if(confirm_data){
			alert("주문완료");
		}
		window.close();
	});

	$("#anotherBtn").click(function(){		
		window.close();
	});

	$("#cancelBtn").click(function(){
		alert("장바구니를 모두 비웁니다");		
		$.removeCookie("basket", { path: '/' });// 장바구니 쿠키 삭제
		window.close();
	});

	$(".orderForm").click(function(event){
		let choice_product_name=event.target.name;
		//alert(choice_product_name);
		let basket=$.cookie("basket");
		let obj=null;
		if(basket){ //쿠키에 장바구니가 있으면
			obj=JSON.parse(basket);//json을 javascript 객체로 바꿔서
			let flag=true;
			obj.product.forEach(function(item){ // 하나씩의 아이템(품목)을 꺼내서
				
				if(item.name==choice_product_name){//품목 이름이 클릭한 상품의 이름과 같으면
					item.quantity +=1; //상품의 수량을 1증가
					//alert("if:"+item.name+":"+item.quantity);
					flag=false;
				}
			});
			if(flag){//품목 이름이 클릭한 상품의 이름과 다르면
					obj.product.push({name:choice_product_name,quantity:1});//새 품목 추가
					//alert("else:"+obj.product[obj.product.length-1].name+":"+obj.product[obj.product.length-1].quantity);
			}
		}else{ //쿠키에 장바구니가 없으면 
			obj={
				product:[{name:event.target.name,quantity:1}] //첫 품목 추가
			};
		}
		basket=JSON.stringify(obj); //자바스크립트 객체를 json 형식으로 바꿔서
		$.cookie("basket",basket, { path: '/' });// 장바구니 쿠키 저장
		window.open('html/orderForm.html', '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=500,width=600,height=350');
	
});

3. html/orderForm.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/my.js"></script>

</head>
<body>
	<article class="container">
            <div class="page-header">
                <div class="col-md-6 col-md-offset-3">
                <h3>주문 Form</h3>
                </div>
            </div>
            <div class="col-sm-6 col-md-offset-3">
                <form role="form">
                    
             		<div id="itemDiv"  class="form-group text-center"></div>

                    <div class="form-group text-center">                        
                        <input type="button" id="anotherBtn" class="btn btn-info" 
                        value="다른 상품 추가 주문하기"> 
                        <input type="button" id="orderBtn" class="btn btn-warning"
                        value="주문하기">
                      	<input type="button" id="cancelBtn" class="btn btn-primary"
                        value="장바구니 비우기"> 
                    </div>
                </form>
            </div>

        </article>
</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script>
		var basket=$.cookie("basket");
		//alert(basket);
		var obj=null;
		if(basket){ //쿠키에 장바구니가 있으면
			obj=JSON.parse(basket);//json을 javascript 객체로 바꿔서
			let item_html="";
			var items="";
			obj.product.forEach(function(item){ // 하나씩의 아이템(품목)을 꺼내서				
				
				item_html += '<label for="inputName"> 품목 </label>';
				item_html += '<input size="8" type="text"  id="name" value="'+item.name+'" disabled="disabled">';				
				item_html += '<label for="InputEmail"> 수량 </label>';
				item_html += '<input type="number" min="1"  max="100" step="1" value="'+item.quantity+'" id="number"/>';
				item_html += '<br>';
				
				items += item.name +" : "+ item.quantity +"개\n";
			});
			$("#itemDiv").html(item_html);
		}
		
		
	</script>

4. 주문을 받기 위한 DB 생성

drop table orders;

create table orders(
orderno int primary key auto_increment,
orderdate date,
ordermethod varchar(10),
memberid varchar(20),
prodcode varchar(10),
quantity int,
prodname varchar(20),
ORDER_GROUP_NO int default 0
);

5. OrderVO 만들기

package my.jes.web.vo;

import java.util.Date;

public class OrderVO {
	private long orderno;
	private Date orderdate;
	private String ordermethod;
	private String memberid;
	private String prodcode;
	private String prodname;
	private long quantity;
	private long order_group_no;	
	
	public OrderVO(String ordermethod, String prodname, long quantity, long order_group_no) {
		this(ordermethod,prodname,quantity);
		setOrder_group_no(order_group_no);
	}
	public OrderVO(String ordermethod, String prodname, long quantity) {
		super();
		setOrdermethod(ordermethod);
		setProdname(prodname);
		setQuantity(quantity);
		
	}
	public OrderVO() {
		super();
		// TODO Auto-generated constructor stub
	}
	public long getOrderno() {
		return orderno;
	}
	public void setOrderno(long orderno) {
		this.orderno = orderno;
	}
	public Date getOrderdate() {
		return orderdate;
	}
	public void setOrderdate(Date orderdate) {
		this.orderdate = orderdate;
	}
	public String getOrdermethod() {
		return ordermethod;
	}
	public void setOrdermethod(String ordermethod) {
		this.ordermethod = ordermethod;
	}
	public String getMemberid() {
		return memberid;
	}
	public void setMemberid(String memberid) {
		this.memberid = memberid;
	}
	public String getProdcode() {
		return prodcode;
	}
	public void setProdcode(String prodcode) {
		this.prodcode = prodcode;
	}
	public String getProdname() {
		return prodname;
	}
	public void setProdname(String prodname) {
		this.prodname = prodname;
	}
	public long getQuantity() {
		return quantity;
	}
	public void setQuantity(long quantity) {
		this.quantity = quantity;
	}
	public long getOrder_group_no() {
		return order_group_no;
	}
	public void setOrder_group_no(long order_group_no) {
		this.order_group_no = order_group_no;
	}
	@Override
	public String toString() {
		return "OrderVO [orderno=" + orderno + ", orderdate=" + orderdate + ", ordermethod=" + ordermethod
				+ ", memberid=" + memberid + ", prodcode=" + prodcode + ", prodname=" + prodname + ", quantity="
				+ quantity + ", order_group_no=" + order_group_no + "]";
	}	
}

6. OrderDAO 만들기

package my.jes.web.dao;

import java.util.ArrayList;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import my.jes.web.vo.OrderVO;

@Repository
public class OrderDAO {
	@Autowired
	SqlSession sqlSession;
	
	public long ordersInsert(ArrayList<OrderVO> list) {
		//System.out.println(list.size());
		long order_group_no=getOrder_group_no();
		for(OrderVO orderVO:list) {		
			orderVO.setOrder_group_no(order_group_no);
			//System.out.println(">>>"+orderVO);
			sqlSession.insert("mapper.order.insert",orderVO);
		}
		return order_group_no+1;
	}
	
//Oracle
	private long getOrder_group_no() {
		long order_group_no=sqlSession.selectOne("mapper.order.order_group_no");
		//System.out.println(order_group_no);
		return order_group_no;
	}

//MySQL
public long getOrder_group_no() {
		long order_group_no=sqlSession.selectOne("mapper.order.order_group_no");
		//System.out.println(order_group_no);
		return order_group_no;
	}

}

7. order.xml 을 mappers에 만들어주기

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="mapper.order">
	<resultMap type="orderVO" id="orderResult">
		<result property="orderno" column="orderno" />
		<result property="orderdate" column="orderdate" />
		<result property="ordermethod" column="ordermethod" />
		<result property="memberid" column="memberid" />
		<result property="prodcode" column="prodcode" />
		<result property="prodname" column="prodname" />
		<result property="quantity" column="quantity" />
		<result property="order_group_no" column="order_group_no" />
	</resultMap>


	<insert id="insert" parameterType="orderVO">
		<![CDATA[
			insert into orders(orderdate,ordermethod,memberid,prodname,quantity,order_group_no) 
			values(SYSDATE,#{ordermethod},#{memberid},#{prodname},#{quantity},#{order_group_no})
		]]>
	</insert>
	<select id="order_group_no" resultType="long">
		select max(order_group_no) from orders
	</select>
</mapper>

8. src/main/resources/mybatis/model/modelConfig.xml에 다음과 같이 alias를 추가한다.

<configuration>

	<typeAliases>
		<typeAlias type="my.jes.web.vo.MemberVO" alias="memberVO"/>
		<typeAlias type="my.jes.web.vo.OrderVO" alias="orderVO"/>
	</typeAliases>	

</configuration>

9. WebService.java 생성

import java.util.ArrayList;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import my.jes.web.dao.MemberDAO;
import my.jes.web.dao.OrderDAO;
import my.jes.web.vo.MemberVO;
import my.jes.web.vo.OrderVO;

@Service
public class OrderService {
	@Autowired
	OrderDAO orderDAO;
	
	public long ordersInsert(ArrayList<OrderVO> list) throws Exception{
		return orderDAO.ordersInsert(list);
	}
}

10. HomeController에 주문 메서드 추가

 @Autowired OrderService orderService;
	
	
	///////////// 주문 처리 //////////////////
	@RequestMapping(value = "order.jes", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")			
	@ResponseBody
	public String order(HttpServletRequest request,
			HttpServletResponse response){
		JSONObject json=null;
		try {
			BufferedReader br=request.getReader();
			JSONParser parser=new JSONParser();
			json=(JSONObject) parser.parse(br);
			JSONArray array=(JSONArray) json.get("product");
			
			Object []array2=array.toArray();
			
			ArrayList<OrderVO> list=new ArrayList<OrderVO>();
			for(Object o : array2) {
				
				JSONObject j=(JSONObject) o;
				String prodname=(String) j.get("name");
				long quantity=(Long) j.get("quantity");
				OrderVO orderVO=new OrderVO("web",prodname,quantity);
				HttpSession session=request.getSession();
				MemberVO memberVO=(MemberVO) session.getAttribute("member");
				if(memberVO!=null) {//로그인 된 사용자라면 id를 추가해준다
					orderVO.setMemberid(memberVO.getId());
				}else {
					orderVO.setMemberid("");
				}
				
				list.add(orderVO);
			}
			
			System.out.println("총 "+list.size()+"개 품목을 주문합니다");
			long order_group_no=orderService.ordersInsert(list);
			
			json=new JSONObject();			
			
				
				
				json.put("order_group_no", order_group_no);
				
		}catch(Exception e) {
			e.printStackTrace();
			json.put("msg", e.getMessage());
		}	
		return json.toJSONString();		
	}

11. my.js 수정

$("#orderBtn").click(function(){
		
		let confirm_data=confirm("다음과 같이 주문하시겠습니까?\n"+items);		
		if(confirm_data){
			const basket = $.cookie("basket");

			$.post("../order.jes",
				  basket,
				  function(data, status){	
				  	console.log(data);
				  	const obj=JSON.parse(data);
				  	if(obj.order_group_no){	
				  		alert("주문완료:[주문번호]"+obj.order_group_no);	
				  		$.removeCookie("basket", { path: '/' });// 장바구니 쿠키 삭제	
				  	}else{
				  		alert(obj.msg);
				  	}
				  	window.close();			   
				  }
			);//end post() 			
		}		
	});

12. 주문이 잘 되었는지 결과 확인

 

저작자표시 (새창열림)

'Spring > Spring으로 Web연습하기' 카테고리의 다른 글

SpringBoot로 Web 만들기(1)  (0) 2022.04.20
Spring으로 Web 프로젝트 만들기(5)  (0) 2022.04.18
Spring으로 Web프로젝트만들기(3)  (0) 2022.04.17
Spring으로 Web프로젝트 만들기(2)  (0) 2022.04.17
Spring으로 Web 프로젝트 만들기(1)  (0) 2022.04.17
'Spring/Spring으로 Web연습하기' Related Articles more