Seok_In

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

Spring/Spring으로 Web연습하기

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

Seok_IN 2022. 4. 18. 02:13

주문에 결제기능 추가하기

1. DB 만들기

create table KB_BANK(
accountNo varchar(20) primary key,
name varchar(20),
balance int);

insert into KB_BANK(accountNo,name,balance) 
values ('10-111-111', '홍길동', 10000000);



create table SHINHAN_BANK(
acc varchar(20) primary key,
cust_name varchar(20),
amount int);

insert into SHINHAN_BANK(acc,cust_name,amount) 
values ('1234567-123-12', '전은수', 0);

SELECT * FROM cafe.kb_bank;

SELECT * FROM cafe.shinhan_bank;

2. bank.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>계좌 이체</h3>
                </div>
            </div>
            <div class="col-sm-6 col-md-offset-3">
                <form role="form">
                    <div class="form-group">
                        <label for="inputName">보내는 분 이름</label>
                        <input type="text" class="form-control" id="bank_name" value="홍길동">
                    </div>
                    <div class="form-group">
                        <label for="inputBank">은행</label>
                        <select name="bank" id="bank">
						  <option value="KB">국민은행</option>						  
						</select>
                    </div>
                    <div class="form-group">
                        <label for="InputAccount">계좌번호</label>
                        <input type="text" class="form-control" id="bank_accountNo" value="10-111-111">
                    </div>
                    <div class="form-group">
                        <label for="inputPrice">이체금액</label>
                        <input type="number" class="form-control" id="bank_price" placeholder="이체금액을 입력해주세요">
                    </div>
                    
                    <hr>
                    
                    <div class="form-group">
                        <label for="inputName">받는 분 이름</label>
                        <input type="text" class="form-control"  value="전은수" readonly="readonly">
                    </div>
                    <div class="form-group">
                        <label for="inputBank">은행</label>
                        <select name="bank" >
						  <option value="ShinHan">신한은행</option>						  
						</select>
                    </div>
                    <div class="form-group">
                        <label for="InputAccount">계좌번호</label>
                        <input type="text" class="form-control" value="1234567-123-12" readonly="readonly">
                    </div>
                   
                    

                    <div class="form-group text-center">
                        <input type="button" id="bank_remitBtn" class="btn btn-primary"
                        value="이체">
                        <button type="submit" class="btn btn-warning">
                            	취소<i class="fa fa-times spaceLeft"></i>
                        </button>
                    </div>
                </form>
            </div>

        </article>


</body>
</html>

3. my.js에 관련이벤트 추가

$("#bank_remitBtn").click(function(){
		const name=$("#bank_name").val();
		const bank=$("#bank").val();
		const accountNo=$("#bank_accountNo").val();
		const remitAmount=$("#bank_price").val();
		let message="보내는 분:"+name+"\n은행:"+bank+"\n계좌번호:"+accountNo+"\n이체금액:"+remitAmount;
		let confirm_data=confirm("다음과 같이 이체하시겠습니까?\n"+message);		
		if(confirm_data){
			
			$.post('../remit.jes',{name,bank,accountNo,remitAmount},function(data){						  	
			  	alert(data);			  	
			  	window.close();
			});			
		}		
	});

4. KB_VO 만들기

package com.ssafy.web.vo;

public class KB_VO {
	
	private String accountNo,name,bank;
	private long balance, remitAmount;
	
	public String getAccountNo() {
		return accountNo;
	}
	public void setAccountNo(String accountNo) {
		this.accountNo = accountNo;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public long getBalance() {
		return balance;
	}
	public void setBalance(long balance) {
		this.balance = balance;
	}
	public long getRemitAmount() {
		return remitAmount;
	}
	public void setRemitAmount(long remitAmount) {
		this.remitAmount = remitAmount;
	}
	public String getBank() {
		return bank;
	}
	public void setBank(String bank) {
		this.bank = bank;
	}
	
}

5. ShinHanVO 만들기

package com.ssafy.web.vo;

public class ShinHanVO {
	private String acc,cust_name;
	private long amount;
	
	
	
	public ShinHanVO() {
		super();
		// TODO Auto-generated constructor stub
	}
	public ShinHanVO(String acc, String cust_name, long amount) {
		super();
		this.acc = acc;
		this.cust_name = cust_name;
		this.amount = amount;
	}
	public String getAcc() {
		return acc;
        }
	public void setAcc(String acc) {
		this.acc = acc;
	}
	public String getCust_name() {
		return cust_name;
	}
	public void setCust_name(String cust_name) {
		this.cust_name = cust_name;
	}
	public long getAmount() {
		return amount;
	}
	public void setAmount(long amount) {
		this.amount = amount;
	}
}

6.modelConfig.xml에 typeAlias 추가

<typeAlias type="com.ssafy.web.vo.KB_VO" alias="kb_VO"/>
<typeAlias type="com.ssafy.web.vo.ShinHanVO" alias="shinHanVO"/>

7. mappers 에 kb.xml 추가

<?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.kb">

	<select id="selectBalance" parameterType="kb_VO" resultType="long">
		select balance from KB_BANK where accountNo=#{accountNo} and name=#{name}
	</select>
	
	<update id="updateBalance" parameterType="kb_VO">
		update KB_BANK set balance=#{balance} where accountNo=#{accountNo} and name=#{name}
	</update>	

</mapper>

8. mappers에 shinhan.xml 추가

<?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.shinhan">

	<select id="selectAmount" parameterType="shinHanVO" resultType="long">
		select amount from SHINHAN_BANK where acc=#{acc} and cust_name=#{cust_name}
	</select>
	
	<update id="updateAmount" parameterType="shinHanVO">
		update SHINHAN_BANK set amount=#{amount} where acc=#{acc} and cust_name=#{cust_name}
	</update>

</mapper>

9. KB_DAO 작성

package com.ssafy.web.dao;

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

import com.ssafy.web.vo.KB_VO;

@Repository
public class KB_DAO {
	@Autowired
	SqlSession sqlSession;
	
	public long selectBalance(KB_VO vo) {
		return sqlSession.selectOne("mapper.kb.selectBalance", vo);
	}
	
	public void updateBalance(KB_VO vo) {
		sqlSession.update("mapper.kb.updateBalance", vo);
	}
}

10. ShinHanDAO 작성

package com.ssafy.web.dao;

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

import com.ssafy.web.vo.KB_VO;
import com.ssafy.web.vo.ShinHanVO;

@Repository
public class ShinHanDAO {
	@Autowired
	SqlSession sqlSession;
	
	public long selectAmount(ShinHanVO vo) {
		return sqlSession.selectOne("mapper.shinhan.selectAmount", vo);
	}
	
	public void updateAmount(ShinHanVO vo) {
		sqlSession.update("mapper.shinhan.updateAmount", vo);
	}
}

11. BankService 작성

package com.ssafy.web.service;

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

import com.ssafy.web.dao.KB_DAO;
import com.ssafy.web.dao.ShinHanDAO;
import com.ssafy.web.vo.KB_VO;
import com.ssafy.web.vo.ShinHanVO;

@Service
public class BankService {
	
	@Autowired
	KB_DAO kbDAO;
	
	@Autowired
	ShinHanDAO sDAO;

	public String remit(KB_VO kbvo) throws Exception {
		long balance=kbDAO.selectBalance(kbvo);
		balance-=kbvo.getRemitAmount();
		if(balance>0) {
			kbvo.setBalance(balance);
			kbDAO.updateBalance(kbvo);
			
			ShinHanVO svo=new ShinHanVO("1234567-123-12","전은수",0);
			svo.setAmount(sDAO.selectAmount(svo)+kbvo.getRemitAmount());
			sDAO.updateAmount(svo);
			return "ok";
		}
		return "fail";	
		
	}
}

12. BankController작성

package com.ssafy.web;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ssafy.web.service.BankService;
import com.ssafy.web.vo.KB_VO;


@Controller
public class BankController {
	
	@Autowired
	BankService bankService;
	
	@RequestMapping(value = "remit.jes", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")			
	@ResponseBody
	public String remit(KB_VO vo){
		try {
			return bankService.remit(vo);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return "fail";
		}		
	}

}

* 트랜잭션이 필요함

13. servlet-context.xml에 다음 내용추가

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.1.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />
    <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<context:component-scan base-package="com.ssafy.web" />
	<context:component-scan base-package="com.ssafy.web.dao" />
	<context:component-scan base-package="com.ssafy.web.service" />
	
	<beans:bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<beans:property name="dataSource" ref="dataSource"></beans:property>
	</beans:bean>
	
	<tx:annotation-driven transaction-manager="txManager"/>

15. BankService remit메소드에 @Transactional어노테이션 선언

 

16. OrderBtn 클릭시 결제 페이지 이동(my.js수정)

$("#orderBtn").click( function() {
		let confirm_data = confirm("다음과 같이 주문하시겠습니까?\n"+ items);
		if (confirm_data) {
			$.cookie("order",true);
			$(location).attr('href','./bank.html', '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=500,width=400,height=750');
		}
});

 

17. 결제가 완료시에 주문요청 완료

$("#bank_remitBtn").click(function(){
	const name=$("#bank_name").val();
	const bank=$("#bank").val();
	const accountNo=$("#bank_accountNo").val();
	const remitAmount=$("#bank_price").val();
	let message="보내는 분:"+name+"\n은행:"+bank+"\n계좌번호:"+accountNo+"\n이체금액:"+remitAmount;
	let confirm_data=confirm("다음과 같이 이체하시겠습니까?\n"+message);		
	if(confirm_data){							
	$.post('../remit.hcafe',{name,bank,accountNo,remitAmount},function(data){
	if($.cookie("order")==null){//송금한경우
	if(data=="ok"){
		const basket = $.cookie("basket");									
		$.post("../order.hcafe", basket, function(data, status) {
				console.log(data);
				const obj = JSON.parse(data);
				if (obj.order_group_no) {
                	alert("주문완료:[주문번호]"+ obj.order_group_no);
					$.removeCookie("order");
					$.removeCookie("basket", {
						path : '/'
					});// 장바구니 쿠키 삭제
				} else {
						alert(obj.msg);
						}
						window.close();
						});// end post()
					}
		}
		else{
			alert("송금 실패");
			}							  	
		});			
	}		
					});

 

18. 성공시 주문완료가 되는데 결과확인

저작자표시 (새창열림)

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

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