Creating Web Client

It is time to create a web client or, in other words, the user interface for the application service we’ve created previously.
We will use AngularJs as JavaScript framework and CSS bootstrap to style our UI.

Setup Application Entry Script

Entry script is a script that handles all application requests. In our case it will be index.html
file contained in the web directory.

Define Angular App

Add ng-app attribute to html tag. As an example, we’ll use spaApp as the value.

  1. <!DOCTYPE html>
  2. <!-- define angular app -->
  3. <html ng-app="spaApp">
  4. <head>
  5.   <!-- CSS -->

Define Default Angular Controller

Add ng-controller attribute to body tag. Controller name is index.

  1. </head>
  2. <!-- define angular controller -->
  3. <body ng-controller="index">

Create Main Menu

Add the following content inside body tag:

  1. <body ng-controller="index">
  2.   <nav class="navbar navbar-default">
  3.     <div class="container">
  4.       <div class="navbar-header">
  5.         <a class="navbar-brand" href="#/">Single Page Application</a>
  6.       </div>      
  7.       <ul class="nav navbar-nav navbar-right">
  8.         <li><a href="#/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
  9.         <li><a href="#/site/about"><i class="glyphicon glyphicon-tag"></i> About</a></li>
  10.         <li><a href="#/site/contact"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li>
  11.       </ul>
  12.     </div>
  13.   </nav>
  14.   <div id="main" class="container"> 
  15.     <!-- angular templating -->
  16.         <!-- this is where content will be injected -->
  17.     <div ng-view></div>    
  18.   </div>
  20.   <footer class="text-center">
  21.     <p>Yii 2.0.3 + AngularJs 1.3.15</p>
  22.   </footer>

Navbar is used for menu, main is page container. Footer is, obviously, a footer.

Important thing here is an id of in div with container class: 

  1. <div id="main" class="container"> 
  2.   <!-- angular templating -->
  3.     <!-- this is where content will be injected -->
  4.   <div ng-view></div>    
  5. </div>

Dynamic content from other files or page views will be placed into <div ng-view></div>.

Create Main Module and Sub Module

The main module is intended to control other scripts such as sub module. We name it app.js and
place it into the webroot of the web client:

  1. 'use strict';
  2. // adjust to the your url of web service
  3. var serviceBase = 'http://127.0.0.1/web-service/web/'
  4. // declare app level module which depends on views, and components
  5. var spaApp = angular.module('spaApp', [
  6.   'ngRoute',
  7.   'spaApp.site',
  8. ]);
  9. // sub module declaration
  10. var spaApp_site = angular.module('spaApp.site', ['ngRoute'])
  12. spaApp.config(['$routeProvider', function($routeProvider) {
  13.   // config default route
  14.   $routeProvider.otherwise({redirectTo: '/site/index'});
  15. }]);

Default route is /site/index. This route will handled by spaApp.site sub module.

Create Sub Module Definition

After creating spaApp.site sub module we need to define what that sub module does. Create a file
site.js in controllers directory. 

  1. 'use strict';
  2. spaApp_site.config(['$routeProvider', function($routeProvider) {
  3.   $routeProvider
  4.     .when('/site/index', {
  5.         templateUrl: 'views/site/index.html',
  6.         controller: 'index'
  7.     })
  8.     .when('/site/about', {
  9.         templateUrl: 'views/site/about.html',
  10.         controller: 'about'
  11.     })
  12.     .when('/site/contact', {
  13.         templateUrl: 'views/site/contact.html',
  14.         controller: 'contact'
  15.     })
  16.     .otherwise({
  17.         redirectTo: '/site/index'
  18.     });
  19. }])
  20. .controller('index', ['$scope', '$http', function($scope,$http) {
  21.     // create a message to display in our view
  22.     $scope.message = 'Everyone come and see how good I look!';
  23. }])
  24. .controller('about', ['$scope', '$http', function($scope,$http) {
  25.     // create a message to display in our view
  26.     $scope.message = 'Look! I am an about page.';
  27. }])
  28. .controller('contact', ['$scope', '$http', function($scope,$http) {
  29.     // create a message to display in our view
  30.     $scope.message = 'Contact us! JK. This is just a demo.';
  31. }]);

This file is sub module to handle site views. It is very similar to Yii’s SiteController:

  1. spaApp_site.config(['$routeProvider', function($routeProvider) {
  2.   $routeProvider
  3.     .when('/site/index', {
  4.         templateUrl: 'views/site/index.html',
  5.         controller: 'index'
  6.     })
  7.     ...
  8.     ...
  9.     .otherwise({
  10.         redirectTo: '/site/index'
  11.     });
  12. }])

This is routing configuration of this sub module only. Every route has may templateUrl and controller.

  • templateUrl is an external HTML file that is used as partial content. Quite similar to Yii views.
  • controller is a name of controller that prepares template data such as variables. It is simlar to what Yii controller does.

.otherwise tells the application what to do if no route matches.

  1. .controller('index', ['$scope', '$http', function($scope,$http) {
  2.     // create a message to display in our view
  3.     $scope.message = 'Everyone come and see how good I look!';
  4. }])

$scope is a scope that can be handled by the angular app in this case is all the tags under the tag which is marked with ng - app

$scope.message, message is variabel in file templateUrl, let say views/site/index.html, point to {{message}}

Include Main Module and Sub Module

After creating main module app.js and sub module site.js, we must include it in an entry script of app index.html:

  1.   <script src="assets/angular/angular-animate.min.js"></script>
  2.   <!-- Include this js -->
  3.   <script src="app.js"></script>
  4.   <script src="controllers/site.js"></script>
  5. </body>

Create Template File

Create a template file to be used by controller in views directory. The file name would be
site/index.html:

  1. <div class="jumbotron text-center">
  2.     <h1>Home Page</h1>
  4.     <p>{{ message }}</p>
  5. </div>

Create site/contact.html:

  1. <div class="jumbotron text-center">
  2.     <h1>Contact Page</h1>
  4.     <p>{{ message }}</p>
  5. </div>

Create site/about.html:

  1. <div class="jumbotron text-center">
  2.     <h1>About Page</h1>
  4.     <p>{{ message }}</p>
  5. </div>

These views are simple placeholders for now.

Test your application

http://localhost/web-client

Create Web Client - 图1

Modify app.js

Add global JavaScript varable serviceBase that refers to your Yii 2.0 web service. Then add a sub module called spaApp.book:

  1. 'use strict';
  2. var serviceBase = 'http://127.0.0.1/web-service/web/'
  3. // Declare app level module which depends on views, and components
  4. var spaApp = angular.module('spaApp', [
  5.   'ngRoute',
  6.   'spaApp.site',
  7.   'spaApp.book',
  8. ]);
  9. var spaApp_site = angular.module('spaApp.site', ['ngRoute'])
  10. var spaApp_book = angular.module('spaApp.book', ['ngRoute']);
  12. spaApp.config(['$routeProvider', function($routeProvider) {
  13.   $routeProvider.otherwise({redirectTo: '/site/index'});
  14. }]);

Create book.js in models directory

book.js will handle CRUD data provided by REST service is is pretty much what models are doing in Yii.

  1. 'use strict';
  2. spaApp_book.factory("services", ['$http','$location','$route', 
  3.     function($http,$location,$route) {
  4.     var obj = {};
  5.     obj.getBooks = function(){
  6.         return $http.get(serviceBase + 'books');
  7.     }    
  8.     obj.createBook = function (book) {
  9.         return $http.post( serviceBase + 'books', book )
  10.             .then( successHandler )
  11.             .catch( errorHandler );
  12.         function successHandler( result ) {
  13.             $location.path('/book/index');            
  14.         }
  15.         function errorHandler( result ){
  16.             alert("Error data")
  17.             $location.path('/book/create')
  18.         }
  19.     };    
  20.     obj.getBook = function(bookID){
  21.         return $http.get(serviceBase + 'books/' + bookID);
  22.     }
  24.     obj.updateBook = function (book) {
  25.         return $http.put(serviceBase + 'books/' + book.id, book )
  26.             .then( successHandler )
  27.             .catch( errorHandler );
  28.         function successHandler( result ) {
  29.             $location.path('/book/index');
  30.         }
  31.         function errorHandler( result ){
  32.             alert("Error data")
  33.             $location.path('/book/update/' + book.id)
  34.         }    
  35.     };    
  36.     obj.deleteBook = function (bookID) {
  37.         return $http.delete(serviceBase + 'books/' + bookID)
  38.             .then( successHandler )
  39.             .catch( errorHandler );
  40.         function successHandler( result ) {
  41.             $route.reload();
  42.         }
  43.         function errorHandler( result ){
  44.             alert("Error data")
  45.             $route.reload();
  46.         }    
  47.     };    
  48.     return obj;   
  49. }]);

There are multiple functions such as obj.getBooks, obj.createBook, etc. which are passing data to RESTful endpoints.
For example, the following will get a list of the books using GET.
See this guide. 

  1. obj.getBooks = function(){
  2.         return $http.get(serviceBase + 'books');
  3.     }

Create a book using POST:

  1. obj.createBook = function (book) {
  2.         return $http.post( serviceBase + 'books', book )

Update a book using PUT:

  1. obj.updateBook = function (book) {
  2.         return $http.put(serviceBase + 'books/' + book.id, book )

Create a controller for Site Sub Module

Create book.js in controllers directory. It will handle book views like Yii controller
does:

  1. 'use strict';
  2. spaApp_book.config(['$routeProvider', function($routeProvider) {
  3.   $routeProvider
  4.     .when('/book/index', {
  5.         templateUrl: 'views/book/index.html',
  6.         controller: 'index'
  7.     })
  8.     .when('/book/create', {
  9.         templateUrl: 'views/book/create.html',
  10.         controller: 'create',
  11.         resolve: {
  12.             book: function(services, $route){
  13.                 return services.getBooks();
  14.             }
  15.         }
  16.     })
  17.     .when('/book/update/:bookId', {
  18.         templateUrl: 'views/book/update.html',
  19.         controller: 'update',
  20.         resolve: {
  21.           book: function(services, $route){
  22.             var bookId = $route.current.params.bookId;
  23.             return services.getBook(bookId);
  24.           }
  25.         }
  26.     })
  27.     .when('/book/delete/:bookId', {
  28.         templateUrl: 'views/book/index.html',
  29.         controller: 'delete',
  30.     })
  31.     .otherwise({
  32.         redirectTo: '/book/index'
  33.     });
  34. }]);
  36. spaApp_book.controller('index', ['$scope', '$http', 'services', 
  37.     function($scope,$http,services) {
  38.     $scope.message = 'Everyone come and see how good I look!';
  39.     services.getBooks().then(function(data){
  40.         $scope.books = data.data;
  41.     });    
  42.     $scope.deleteBook = function(bookID) {
  43.         if(confirm("Are you sure to delete book number: " + bookID)==true && bookID>0){
  44.             services.deleteBook(bookID);    
  45.             $route.reload();
  46.         }
  47.     };
  48. }])
  49. .controller('create', ['$scope', '$http', 'services','$location','book', 
  50.     function($scope,$http,services,$location,book) {
  51.     $scope.message = 'Look! I am an about page.';
  52.     $scope.createBook = function(book) {
  53.         var results = services.createBook(book);
  54.     }  
  55. }])
  56. .controller('update', ['$scope', '$http', '$routeParams', 'services','$location','book', 
  57.     function($scope,$http,$routeParams,services,$location,book) {
  58.     $scope.message = 'Contact us! JK. This is just a demo.';
  59.     var original = book.data;
  60.     $scope.book = angular.copy(original);
  61.     $scope.isClean = function() {
  62.         return angular.equals(original, $scope.book);
  63.     }
  64.     $scope.updateBook = function(book) {    
  65.         var results = services.updateBook(book);
  66.     } 
  67. }]);

Create Template File for Book Sub Module

Create template file that is pointed by controller in book sub module in views directory.
The name is book/index.html:

  1. <div>
  2.     <h1>BOOK CRUD</h1>    
  3.     <p>{{ message }}</p>
  4.     <div ng-show="books.length > 0">
  5.     <a class="btn btn-primary" href="#/book/create">
  6.         <i class="glyphicon glyphicon-plus"></i> Create
  7.     </a>
  8.     <table class="table table-striped table-hover">
  9.     <thead>
  10.     <th>Title</th>
  11.     <th>Author</th>
  12.     <th>Publisher</th>
  13.     <th>Year</th>
  14.     <th style="width:80px;">Action&nbsp;</th>
  15.     </thead>
  16.     <tbody>
  17.         <tr ng-repeat="data in books">
  18.             <td>{{data.title}}</td>
  19.             <td>{{data.author}}</td>
  20.             <td>{{data.publisher}}</td>
  21.             <td>{{data.year}}</td>
  22.             <td>
  23.             <a class="btn btn-primary btn-xs" href="#/book/update/{{data.id}}">
  24.                 <i class="glyphicon glyphicon-pencil"></i>
  25.             </a> 
  26.             <a class="btn btn-danger btn-xs" ng-click="deleteBook(data.id)">
  27.                 <i class="glyphicon glyphicon-trash"></i>
  28.             </a>
  29.             </td>
  30.         </tr>
  31.     </tbody>
  32.     </table>
  33.     </div>
  34.     <div ng-show="books.length == 0">
  35.         Empty
  36.     </div>
  37. </div>

Create book/create.html:

  1. <div>
  2.     <h1>BOOK CRUD</h1>
  4.     <p>{{ message }}</p>
  5.     <form role="form" name="myForm">
  6.         <div class= "form-group" ng-class="{error: myForm.title.$invalid}">
  7.             <label> Title </label>
  8.             <div>
  9.             <input name="title" ng-model="book.title" type= "text" class= "form-control" placeholder="Title" required/>
  10.             <span ng-show="myForm.title.$dirty && myForm.title.$invalid" class="help-inline">Title Required</span>
  11.             </div>
  12.         </div>
  13.         <div class= "form-group">
  14.             <label> Description </label>
  15.             <div>
  16.             <textarea name="description" ng-model="book.description" class= "form-control" placeholder= "Description"></textarea>
  17.             </div>
  18.         </div>
  19.         <div class= "form-group" ng-class="{error: myForm.author.$invalid}">
  20.             <label> Author </label>
  21.             <div>
  22.             <input name="author" ng-model="book.author" type= "text" class= "form-control" placeholder="Author" required/>
  23.             <span ng-show="myForm.author.$dirty && myForm.author.$invalid" class="help-inline">Author Required</span>
  24.             </div>
  25.         </div>
  26.         <div class= "form-group" ng-class="{error: myForm.publisher.$invalid}">
  27.             <label> Publisher </label>
  28.             <div>
  29.             <input name="publisher" ng-model="book.publisher" type= "text" class= "form-control" placeholder="Publisher" required/>
  30.             <span ng-show="myForm.publisher.$dirty && myForm.publisher.$invalid" class="help-inline">Publisher Required</span>
  31.             </div>
  32.         </div>
  33.         <div class= "form-group" ng-class="{error: myForm.year.$invalid}">
  34.             <label> Year </label>
  35.             <div>
  36.             <input name="year" ng-model="book.year" type= "text" class= "form-control" placeholder="Year" required/>
  37.             <span ng-show="myForm.year.$dirty && myForm.year.$invalid" class="help-inline">Year Required</span>
  38.             </div>
  39.         </div>
  41.         <a href="#/book/index" class="btn btn-default">Cancel</a>
  42.         <button ng-click="createBook(book);" 
  43.                 ng-disabled="myForm.$invalid"
  44.                 type="submit" class="btn btn-default">Submit</button>
  45.     </form>
  46. </div>

Create book/update.html:

  1. <div>
  2.     <h1>BOOK CRUD</h1>
  4.     <p>{{ message }}</p>
  5.     <form role="form" name="myForm">
  6.         <div class= "form-group" ng-class="{error: myForm.title.$invalid}">
  7.             <label> Title </label>
  8.             <div>
  9.             <input name="title" ng-model="book.title" type= "text" class= "form-control" placeholder="Title" required/>
  10.             <span ng-show="myForm.title.$dirty && myForm.title.$invalid" class="help-inline">Title Required</span>
  11.             </div>
  12.         </div>
  13.         <div class= "form-group">
  14.             <label> Description </label>
  15.             <div>
  16.             <textarea name="description" ng-model="book.description" class= "form-control" placeholder= "Description"></textarea>
  17.             </div>
  18.         </div>
  19.         <div class= "form-group" ng-class="{error: myForm.author.$invalid}">
  20.             <label> Author </label>
  21.             <div>
  22.             <input name="author" ng-model="book.author" type= "text" class= "form-control" placeholder="Author" required/>
  23.             <span ng-show="myForm.author.$dirty && myForm.author.$invalid" class="help-inline">Author Required</span>
  24.             </div>
  25.         </div>
  26.         <div class= "form-group" ng-class="{error: myForm.publisher.$invalid}">
  27.             <label> Publisher </label>
  28.             <div>
  29.             <input name="publisher" ng-model="book.publisher" type= "text" class= "form-control" placeholder="Publisher" required/>
  30.             <span ng-show="myForm.publisher.$dirty && myForm.publisher.$invalid" class="help-inline">Publisher Required</span>
  31.             </div>
  32.         </div>
  33.         <div class= "form-group" ng-class="{error: myForm.year.$invalid}">
  34.             <label> Year </label>
  35.             <div>
  36.             <input name="year" ng-model="book.year" type= "text" class= "form-control" placeholder="Year" required/>
  37.             <span ng-show="myForm.year.$dirty && myForm.year.$invalid" class="help-inline">Year Required</span>
  38.             </div>
  39.         </div>
  41.         <a href="#/book/index" class="btn btn-default">Cancel</a> 
  42.         <button ng-click="updateBook(book);" 
  43.                 ng-disabled="isClean() || myForm.$invalid"
  44.                 type="submit" class="btn btn-default">Submit</button>
  45.     </form>
  46. </div>

Modify Main Menu

Don’t forget to add link to book CRUD.

  1. <li><a href="#/book/index"><i class="glyphicon glyphicon-book"></i> Book</a></li>

Test it

Create Web Client - 图2

Back To Index

01. Introduction

02. Preparation

03. Create Web Service

04. Create Web Client

05. Customization

06. Conclusion