ProAngularJS Ch.08 쇼핑 – 결재하기

※ 실행결과: http://study.jeju.onl/sportsstore/app.html

본 단원에서는 결재 기능을 구현하였다.

결재를 위해서는 배송정보가 작성되어야 하며,
결재 후 결재 완료 메시지와 함께
DB에 정보를 저장하고, 장바구니를 초기화 하는 단계가 필요하다.

결재 정보는 Deployd 데이터베이스의 orders 테이블에 저장한다.
ProAngularJS-ch08-orderComplete-DB_properties

결재 처리를 위한 배송 정보 입력에는 폼 체크 기능이 들어갔다.
예제에서는 required 옵션을 이용하였고, style을 통해 입력이 안된 input-box를 구별토록 해서 사용자가 반드시 작성하도록 유도한다.
* 더 구체적인 폼 체크 기능은 뒷부분에서 설명한다고..

배송정보 입력 화면이다.
빈칸을 모두 채울 때까지 버튼이 비활성 상태로 유지된다.
ProAngularJS-ch08-orderComplete-ShippingDetails

배송 정보를 모두 입력하고, 활성화된 ‘Complete order’ 버튼을 누르면
Deployd의 Ajax API를 통해 POST로 주문 정보가 order 테이블에 저장된다.

저장되는 Attribute 중에는 주문상품 리스트인 products가 배열로 들어가 있다.ProAngularJS-ch08-orderComplete_DB_products

다음은 작성된 주요 코드이다.

1) views/placeOrder.html

<style type="text/css">
  .ng-invalid { background-color: lightpink; }
  .ng-valid { background-color: lightgreen; }
  span.error { color: red; font-weight: bold; }
</style>


  $scope.test = function() {
    console.log("clicked");
    alert('clicked!');
  };
  $scope.test();



<h2>Check out now</h2>
<p>Please enter your details, and we'll ship your goods right away!</p>

<form name="shippingForm" novalidate>
  

Ship to

Name Please enter a name
<h3>Address</h3>
Street Address Please enter a street address
City Please enter a city
Country Please enter a country
State Please enter a state
Zip Code Please enter a zip code
<h3>Options</h3>
Gift wrap these items
--> Complete order
</div> </form>

2) views/thankYou.html

Error ({{ data.orderError.status }}). The order could not be placed. Click here to try again

Thanks!

Thanks for placing your order. We'll ship your goods as soon as possible. If you need to contact us, use reference [{{ data.orderId }}].

3) controllers/sportsStore.js (추가)

$scope.sendOrder = function(shippingDetails) {
  // console.log("shippingDetails="+shippingDetails);

  // 애플리케이션의 다른 부분에 영향을 주지 않고
  // 안전하게 객체를 조작하기 위해서 복사함
  var order = angular.copy(shippingDetails);
  // 주문한 상품 리스트를 products에 담아 DB에 전송
  order.products = cart.getProducts();
  // Deployd의 post API를 호출하여 주문정보를 DB에 입력
  $http.post(orderUrl, order)
    .success( function(data) {
      // Deployd DB의 orders 테이블에 저장후 생성된 id를 받아온다
      $scope.data.orderId = data.id;
      // 장바구니를 비운다. (Array 길이를 0로 만듦)
      cart.getProducts().length = 0;
    })
    .error( function(error) {
      $scope.data.orderError = error;
    })
    .finally( function() {
      // 모든 작업을 처리하고 complete 페이지로 이동
      $location.path("/complete");
    });
};

 

코드를 작성했지만, 실제 웹앱에 나타나지 않아 test() 함수를 작성하여 확인했다.
이유는 모르겠지만, 웹서버에 로딩된 내용이 expire되지 않아
예전 코드가 실행되어 바뀐 내용이 적용되지 않은듯 하다.

* 기존 코드를 변경할 경우에는 웹서버를 재시작하는게 좋겠다!

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: