ProAngularJS Ch.08 쇼핑 – 관리기능

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

상품과 주문을 관리하기 위한 관리자 기능을 구현한다.
이 기능은 관리자만 사용할 수 있으므로 ‘admin’ 사용자에 대한 인증기능도 요구된다.

필요한 화면은..

  • 로그인 시도와 결과 페이지
  • 상품 관리 화면
  • 주문 관리 화면

Deployd에서 users 테이블을 생성한다. (* 주의: 일반 Collection이 아니다!)
ProAngularJS-ch09-admin-DB_users

Deployd의 테이블 event 기능을 사용하면
get/post/put/delete 등에 대한 사용권한을 javascript로 제어할 수 있다.
ProAngularJS-ch09-admin-DB_events

users 테이블에 대한 login 기능은 Deployd에서 제공한다.
authUrl을 통해 호출을 하고 있는데, post 요청으로 username과 password를 넘긴다.

.constant("authUrl", "http://localhost:5500/users/login")

ProAngularJS-ch09-admin-DB_login

로그인 화면이다.ProAngularJS-ch09-admin-login

로그인 화면을 통과하면 기본적으로 상품관리 화면을 보여준다.
$resource를 통해 수정과 삭제가 가능하다.
ProAngularJS-ch09-admin-products

상품의 신규 등록도 가능하다.
ProAngularJS-ch09-admin-products_new

다음은 주문관리 화면이다.
주문상세를 볼 수 있다.
ProAngularJS-ch09-admin-orders

다음은 주요 코드이다.

1) controllers/adminCtrl.js

angular.module("sportsStoreAdmin")
.constant("authUrl", "http://localhost:5500/users/login")
.constant("ordersUrl", "http://localhost:5500/orders")
.controller("authCtrl", function($scope, $http, $location, authUrl) {

  $scope.authenticate = function(user, pass) {
    //console.log("Try to login: "+user+"/"+pass);

    $http.post(authUrl, {
      username: user,
      password: pass
      },{
      withCredentials: true
    }).success( function(data) {
      $location.path("/main");
    }).error( function(error) {
      $scope.authenticationError = error;
    });
  };

})
.controller("mainCtrl", function($scope) {

  $scope.screens = ["Products", "Orders"];
  $scope.current = $scope.screens[0];

  $scope.setScreen = function(index) {
    $scope.current = $scope.screens[index];
  };

  $scope.getScreen - function() {
    return ($scope.current == "Products")
        ? "views/adminProducts.html" : "views/adminOrders.html";
  };

})
.controller("ordersCtrl", function($scope, $http, ordersUrl) {

  $http.get(ordersUrl, {withCredentialsL: true})
    .success( function(data) {
      $scope.orders = data;
    })
    .error( function(error) {
      $scope.error = error;
    });

  $scope.selectedOrder;

  $scope.selectOrder = function(order) {
    $scope.selectedOrder = order;
  };

  $scope.calcTotal = function(order) {
    var total = 0;
    for (var i=0; i<order.products.length; i++) {
      total += order.products[i].count * order.products[i].price;
    }
    return total;
  };	

})
;

2) controllers/adminProductCtrl.js

angular.module("sportsStoreAdmin")
.constant("productUrl", "http://localhost:5500/products/")
.config( function($httpProvider) {
  $httpProvider.defaults.withCredentials = true;
})
.controller("productCtrl", function($scope, $resource, productUrl) {

  $scope.productsResource = $resource(productUrl + ":id", { id: "@id" });

  $scope.listProducts = function() {
    $scope.products = $scope.productsResource.query();
  };

  $scope.deleteProduct = function(product) {
    product.$delete().then(function () {
      $scope.products.splice($scope.products.indexOf(product), 1);
    });
  };

  $scope.createProduct = function(product) {
    new $scope.productsResource(product).$save().then( function(newProduct) {
      $scope.products.push(newProduct);
      $scope.editedProduct = null;
    });
  };

  $scope.updateProduct = function(product) {
    product.$save();
    $scope.editedProduct = null;
  };

  $scope.startEdit = function(product) {
    $scope.editedProduct = product;
  };

  $scope.cancelEdit = function() {
    $scope.editedProduct = null;
  };

  $scope.listProducts();
  
});

3) admin.html

<!DOCTYPE html>
<html ng-app="sportsStoreAdmin">
<head>
  <title>Administration</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  /node_modules/angular/angular.js
  /node_modules/angular/angular-route.js
  /node_modules/angular/angular-resource.js
  
    angular.module("sportsStoreAdmin", ["ngRoute", "ngResource"])
      .config( function($routeProvider) {

        $routeProvider.when("/login", {
          templateUrl: "views/adminLogin.html"
        });
        $routeProvider.when("/main", {
          templateUrl: "views/adminMain.html"
        });
        $routeProvider.otherwise({
          redirectTo: "login"
        });

      });
  
  http://controllers/adminCtrl.js
  http://controllers/adminProductCtrl.js
</head>
<body>
  <ng-view />
</body>
</html>

4) views/adminLogin.html

Enter your username and password and click Log In to authenticate
Authentication Failed ({{ authenticationError.status }}). Try again.
<form name="authForm" novalidate>
Username
Password
Log In
</form> </div>

5) views/adminMain.html

6) views/adminProducts.html

<style>
  #productTable { width: auto; }
  #productTable td { max-width: 150px; text-overflow: ellipsis; 
            overflow: hidden; white-space: nowrap; }
  #productTable td input { max-width: 125px; }
</style>

NameDescriptionCategoryPrice
{{ item.name }} {{ item.description }} {{ item.category }} {{ item.price | currency }} Edit Delete
Create Save Cancel

7) views/adminOrders.html

NameCityValue
{{ order.name }} {{ order.city }} {{ calcTotal(order) | currency }} Details

Order Details

NameCountPrice
{{ item.name }} {{ item.count }} {{ item.price || currency }}
</div>

 

Deployd 예제에서 login 기능에 대한 부분을 찾아봐야한다.
업뎃 예정!

 

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중

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