※ 실행결과: http://study.jeju.onl/sportsstore/admin.html
상품과 주문을 관리하기 위한 관리자 기능을 구현한다.
이 기능은 관리자만 사용할 수 있으므로 ‘admin’ 사용자에 대한 인증기능도 요구된다.
필요한 화면은..
- 로그인 시도와 결과 페이지
- 상품 관리 화면
- 주문 관리 화면
Deployd에서 users 테이블을 생성한다. (* 주의: 일반 Collection이 아니다!)
Deployd의 테이블 event 기능을 사용하면
get/post/put/delete 등에 대한 사용권한을 javascript로 제어할 수 있다.
users 테이블에 대한 login 기능은 Deployd에서 제공한다.
authUrl을 통해 호출을 하고 있는데, post 요청으로 username과 password를 넘긴다.
.constant("authUrl", "http://localhost:5500/users/login")
로그인 화면이다.
로그인 화면을 통과하면 기본적으로 상품관리 화면을 보여준다.
$resource를 통해 수정과 삭제가 가능하다.
상품의 신규 등록도 가능하다.
다음은 주문관리 화면이다.
주문상세를 볼 수 있다.
다음은 주요 코드이다.
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 authenticateAuthentication Failed ({{ authenticationError.status }}). Try again.<form name="authForm" novalidate>UsernamePasswordLog In</form> </div>5) views/adminMain.html
</div>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>
Name Description Category Price {{ item.name }} {{ item.description }} {{ item.category }} {{ item.price | currency }} Edit Delete Create Save Cancel 7) views/adminOrders.html
Name City Value {{ order.name }} {{ order.city }} {{ calcTotal(order) | currency }} Details </div>Order Details
Name Count Price {{ item.name }} {{ item.count }} {{ item.price || currency }}
Deployd 예제에서 login 기능에 대한 부분을 찾아봐야한다.
업뎃 예정!
