thaoha

Drupal, theo như các bạn đã biết Drupal là một CMS Framework rất flexible, ngoài ứng dụng CMS, Drupal còn có thể được dùng làm RESTful API với đầy đủ các chức năng, bài viết này mình hướng dẫn các bạn dùng Drupal kết hợp module Restws, Services để xây dựng RESTful API. Ở Client, mình sử dụng Angularjs để tương tác với Drupal thông qua RESTful API

Các bước chuẩn bị:

1. Đối với site Drupal

Download và cài đặt module Restws, Services, Rest_service (module con của Services)
Cài đặt plugin Poster cho trình duyệt FireFox – Tool này dùng để test việc lấy dữ liệu thông qua Restws

2. Đối với Client

Tạo thư mục blog, trong thư mục tạo file blog.html dùng để hiển thị dữ liệu được lấy từ Drupal.

Các bước thực hiện

Đối với site Drupal

Việc đầu tiên sau khi cài đặt phải đọc file README.txt của module Restws để xem URL path tương tác với Drupal.

Ví dụ: file Json trả về nội dung của node như sau: http://example.com/node/1.json
Xem chi tiết file README.txt ở http://cgit.drupalcode.org/restws/plain/README.txt?id=HEAD

2. Vào Admin->Structure->Services, tạo endpoint với thông tin như sau

3. Click qua Server tab, chọn các thông tin sau

4. Click tạo Resource, click chọn thông tin CRUD Node (trong ví dụ này, mình chỉ tương tác với content của Drupal)

Bây giờ, ta test thử xem cấu hình Restws có hoạt động không? Bằng cách sau khi cài đạt add on Poster ở firebox, ở đây ta sẽ test 2 trường hợp

Lấy 1 content được chỉ định trực tiếp . Ví dụ: node/1
Tạo node thông qua tool Poster.

1. Mở Firefox -> Tool->Poster -> Nhập các thông tin sau

2. Click Get, sẽ thấy thông tin file XML được hiển thị.

Như vậy, bước đầu đã thành công khi lấy dữ liệu thông qua module Restws bằng addon của Firefox.

Đối với Client

Tạo file blog.html lấy tất cả dữ liệu content của Drupal với node type là angular

 <head>
        <title> Blog List via Angular</title>
        <script src="js/jquery-1.7.2.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="blog.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/angular-resource.js"></script>
        <script type="text/javascript" src="js/angular-route.js"></script>

  </head>
<body id="content" ng-app="crudBlog" >
    <div ng-controller="PostsCtrl">
        <div class="container" ><a href="http://vietjs.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-20-at-8.40.54-PM.png"><img src="http://vietjs.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-20-at-8.40.54-PM.png" alt="Screen Shot 2014-09-20 at 8.40.54 PM" width="904" height="621" class="alignnone size-full wp-image-131" /></a>
            <div class="row">
                <div class="col-md-9">
                    <table class="table table-striped">
                        <thead>
                        <th>Title</th>
                        <th>Description</th>
                        </thead>
                        <tbody>
                            <tr ng-repeat="post in posts">
                                <td> <a href="#" title="{{post.title}}" ng-click="view(post.nid)" > {{post.title}} </a></td>
                                <td> {{post.body.value}} </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
</body>

blog.js

var crudBlog = angular.module('crudBlog', ['ngResource']);
crudBlog.controller("PostsCtrl", ['$scope', '$http', 'NodeService', function($scope, $http, NodeService) {
        $http.get("http://27.3.156.40/restws/node.json?type=article")
                .success(function(data, status, headers, config) {
                    console.log(data);
                    $scope.posts = data.list;
                }).error(function(data, status, headers, config) {
            alert("No data");
        });

}]);

Refresh lại blog.html, ta sẽ có kết quả sau:

Theo đoạn code trên, đã lấy được giá trị content có node type là angular từ site của Drupal. Bây giờ, bổ sung thêm ví dụ, thay đổi content từ client và cập nhật lại dữ liệu cho site Drupal.
Ở ví dụ này, ta thay đổi tiêu đề của 1 bài viết sau đây từ site Drupal (bài viết có nid: 2)

Vào file blog.html, bổ sung vào phần hiển thị form để thay đổi content :

  <head>
        <title> Blog List via Angular</title>
        <script src="js/jquery-1.7.2.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="blog.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/angular-resource.js"></script>
        <script type="text/javascript" src="js/angular-route.js"></script>

    </head>
    <body id="content" ng-app="crudBlog" >
        <div ng-controller="PostsCtrl">
            <div class="container" >
                <form name="editNode">
                    <div class="title">
                        <label>Title</label>
                        <div class="text">
                            <input size="30" type="text" name ="title" ng-model="newnode.title">
                        </div>
                    </div>
                    <div class="body">
                        <label>Body</label>
                        <div class="content">
                            <textarea name="body" ng-model="newnode.body"  ng-maxlength="500" rows="10" cols="50" >Body</textarea>
                        </div>
                    </div>
                    <input type="hidden" name="nid" ng-model="newnode.nid" />
                    <input type="button" value="Save" ng-click="edit()" />
                </form>
                <div class="row">
                    <div class="col-md-9">
                        <table class="table table-striped">
                            <thead>
                            <th>Title</th>
                            <th>Description</th>
                            </thead>
                            <tbody>
                                <tr ng-repeat="post in posts">
                                    <td> <a href="#" title="{{post.title}}" ng-click="view(post.nid)" > {{post.title}} </a></td>
                                    <td> {{post.body.value}} </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </body>

Cập nhật lại file blog.js, thêm phần xử lý hiển thị content và cập nhật lại giá trị cho server:


varcrudBlog = angular.module('crudBlog', ['ngResource']);
crudBlog.service('NodeService', ['$http', function($http) {
        this.get = function(data) {
            var newnode = {
                title: data.title,
                body: data.body.value,
                nid: data.nid,
            };
            return newnode;
        }

        this.save = function(data) {
            var id = data.id;
            return $http({
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                method: "PUT",
                url: "http://27.3.156.40/restws/rest/node/" + id + ".json",
                data: "title=" + data.title + "&body[und][0][value]=" + data.body,
            }).success(function(data) {
                alert("Content has been updated successfully")
            }).error(function(data) {
                alert("Can not uptdated node!Opps");
            });
        }
    }]);

crudBlog.controller("PostsCtrl", ['$scope', '$http', 'NodeService', function($scope, $http, NodeService) {
        $http.get("http://27.3.156.40/restws/node.json?type=article")
                .success(function(data, status, headers, config) {
                    $scope.posts = data.list;
                }).error(function(data, status, headers, config) {
            alert("No data");
        });
        $scope.view = function(id) {
            $http.get("http://27.3.156.40/restws/rest/node/" + id + ".json").
                    success(function(data, status, headers, config) {
                        //console.log(data.body.value);
                        $scope.newnode = angular.copy(NodeService.get(data));
                    })
        };
        $scope.edit = function() {
            var node = {
                title: $scope.newnode.title,
                body: $scope.newnode.body,
                id: $scope.newnode.nid,
            };
            NodeService.save(node);
        }
    }]);

Click vào title của bất kỳ content nào bạn muốn thay đổi. Ở ví dụ này, ta muốn thay đổi content có title
Bene Facilisis Neque

Thay đổi title của content với nội dung: Update Content via Angular.js

Vào site Drupal kiểm tra nội dung đã được cập nhật chưa (ở ví dụ trên ta cập nhật node 2)

Woa, cập nhật thành công rồi ^^.

Như vậy, mình đã trình bày phần cấu hình và cách lấy dữ liệu, cập nhật dữ liệu từ một client khác. Phần còn lại xoá và tạo khi nào rảnh mình update nữa nhé :p.

Lấy dữ liệu và tạo/thêm/xoá/sửa nội dung Drupal bằng Angularjs thông qua Restws

Các bước chuẩn bị:

1. Đối với site Drupal

2. Đối với Client

Các bước thực hiện

Đối với site Drupal

Đối với Client

Chat với VietJS trên Slack

Chuyên mục

Đọc nhiều

Bài viết mới

Phản hồi gần đây

Thông báo qua email

Liên kết

Lưu trữ

VietJS fan page