Minggu, 03 September 2017

Tutorial RESTFul Web Service menggunakan NodeJS dan AngularJS

By Berbagi Ilmu • September 03, 2017 • 0 Comments

RESTFul Web Service menggunakan NodeJS dan AngularJS

Pada contoh ke-2 tutorial RESTFul Web Service menggunakan NodeJS Murni dengan operasi CRUD (Create, Read, Update, Delete) dengan menggunakan database MongoDB. 

Langkah-langkah yang dilakukan hampir sama dengan contoh sebelumnya (Hello World Wildan!), hanya ada beberapa perbedaan pada kode program yang harus dituliskan. Berikut adalah langkah-langkah lanjutan yang harus dilakukan.

SERVER

1.      Pada tutorial ini, langkahnya sama dengan tutorial awal (pada nomor 1-3 dan 5-7).
2.      Selanjutnya, kita buat file baru dengan nama server.js.
a.       Buka notepad / notepad++
b.      Ketikan kode program berikut :

// Dependencies
var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');

// MongoDB

mongoose.connect('mongodb://localhost:27017/db_wildan');
// mongoose.connection.on('error', function(){});

// Express
var app = express();

app.use(express.static(__dirname + '/public'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Routes
app.use('/api', require('./routes/api'));

// Start server
var port = process.env.PORT || 3000;
app.listen(port);
console.log('Server http://localhost:' + port);

Perbedaan dengan project sebelumnya adalah terletah pada app.use(express.static(__dirname + '/public')); Dimana hal ini berfungsi untuk membaca file Client nantinya.

3.      Kita buat file api.js. di dalam forlder routes/ . Kegiatan ini kita men-setting routes yang akan digunakan.
4.      Tuliskan kode program berikut ini pada file api.js:


// Dependencies
var express = require('express');
var router = express.Router();

//user
var User = require('../models/user');
User.methods(['get', 'put', 'post', 'delete']);
User.register(router, '/wildan');

// Return router
module.exports = router;

Kode tersebut mendefinikan method yang akan kita gunakan untuk menjalankan REST Api dengan operasi CRUD.

5.      Selanjutnya, kita akan membuat sebuah model yang akan digunakan untuk pengelolaan data kita nantinya. Kita buat file dengan nama user.js di dalam folder models/. Tuliskan kode program berikut :


// Dependencies
var restful = require('node-restful');
var mongoose = restful.mongoose;

// Schema
var productSchema = new mongoose.Schema({
    name: String,
    email: String,
    password: Number
});

// Return model
module.exports = restful.model('Users', productSchema);

·        Kode tersebut berfungsi untuk membuat atribut database pada mongoDB.
·        Ada 3 atribut, yaitu name, email dan password.

6.      Lalu kita membuat Controller yang digunakan untuk menghendel fungsi pengolahan data CRUD.
7.      Kita buat file baru dengan nama users.js didalam folder public/app/. Dan tuliskan kode program berikut ini :

app.controller('UsersCtrl', function($scope, User, ngProgress, toaster) {

$scope.user = new User();

var refresh = function() {
  $scope.users = User.query();
  $scope.user ="";
}
refresh();

$scope.add = function(user) {
  User.save(user,function(user){
    refresh();
  });
};

$scope.update = function(user) {
  user.$update(function(){
    refresh();
  });
};

$scope.remove = function(user) {
  user.$delete(function(){
    refresh();
  });
};

$scope.edit = function(id) {
  $scope.user = User.get({ id: id });
}; 

$scope.deselect = function() {
  $scope.user = "";
}

})

8.    Langkah terakhir adalah menjalankannya.
Buka cmd baru, lalu masuk ke folder yang telah kita bikin sebelumnya (D:\mongodb\data>)dan tambahkan node server.js. Enter.
Setelah itu, buka postman dan masukan ke url : http://localhost:3000/api/wildan/ dan pilih GET. Klik Send.


Akan ditampikan data yang ada didalam database mongoDB.

Masukan ke url : http://localhost:3000/api/wildan/ dan pilih PUSH. Klik Send.


Masukan ke url : http://localhost:3000/api/wildan/[_id] dan pilih PUT. Klik Send.


Masukan ke url : http://localhost:3000/api/wildan/[_id] dan pilih DELETE. Klik Send.


Pencarian data berdasarkan ID

Masukan ke url : http://localhost:3000/api/wildan/[_id dari data yg dicari] dan pilih GET. Klik Send.

CLIENT
1.   Langkah pertama, kita harus download boostrap (http://getbootstrap.com/) dan dwonload moment.js (https://momentjs.com/), ngProgress.js serta css nya (https://github.com/VictorBjelkholm/ngProgress). File ini digunakan untuk kita mendesain tampilan interface client.
2.      Selain itu kita juga harus download AngularJS (https://angularjs.org/). Angular adalah client framework.
3.      Unzip file Bootstrap yang kita download serta pindahkan folder css dari ke folder public/.
4.      Kemudian pindahkan isi dari angular.zip ke dalam folder public/js/
Sehingga, akan terdapat 3 folder didsalam folder public/
5.      Langkah selanjutnya, kita buat file baru didalam folder public/app/. Beri nama file tersebut app.js. Tuliskan kode program berikut : 
var app = angular.module('myApp', ['ngResource', 'ngProgress', 'ngAnimate', 'toaster']);
app.config(function ($httpProvider) {
  $httpProvider.interceptors.push('myHttpInterceptor');
});

// Tangani kesalahan server http
app.factory('myHttpInterceptor', function ($q,toaster) {
    return {
        responseError: function (response) {
          console.log(response);
          if(response.data){
            if(response.data.message)
            toaster.error("Error: ", response.data.message);
            else
            toaster.error("Error: ", response.data);
          }
          return $q.reject(response);
        }
    };
});

// Menampilkan indikator data yg diminta dari database
app.directive('loading',   ['$http', 'ngProgress', function ($http, ngProgress)
{
    return {
        restrict: 'A',
        link: function (scope, elm, attrs)
        {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };

            scope.$watch(scope.isLoading, function (v)
            {
                if(v){
                    ngProgress.start();
                }else{
                    ngProgress.complete();
                }
            });
        }
    };
}]);

// membuat sumber daya untuk mengakses tabel user dari database
app.factory('User', function($resource) {
  return $resource('/api/wildan/:id', { id: '@_id' }, {
    update: { // We need to define this method manually as it is not provided with ng-resource
      method: 'PUT'
    }
  });
});

·        Kode tersebut digunakan untuk menghubungkan database mongoDB dengan HTML yang akan kita buat untuk tampilan client di browser.

      6.      Langkah terakhir adalah membuat desain tampilan interface Client di browser dengan html.
    7.      Buat file baru dengan nama index.html. file tersebut diletakkan pada folder public/. Tuliskan kode program berikut :

<!DOCTYPE>
<html ng-app="myApp">
<head>
  <title>Daftar Akun</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/ngProgress.css">
<link rel="stylesheet" href="css/toaster.css">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-cloak>
  <div class="container" ng-controller="UsersCtrl">
    <form name="Codenx" novalidate>
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Password</th>
          <th>Action</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" ng-model="user.name" required="" placeholder="UserName"></td>
          <td><input class="form-control" ng-model="user.email" placeholder="User Email"></td>
          <td><input class="form-control" ng-model="user.password" placeholder="User Password"></td>
          <td><button class="btn btn-primary" ng-click="add(user)" ng-if="!user._id" type="submit" ng-disabled="!Codenx.$valid">Tambah Data</button>
            <div class="btn-group">
              <button class="btn btn-info" ng-click="update(user)" ng-if="user._id" type="submit">Edit</button>
              <button class="btn" ng-click="deselect()" ng-if="user._id">Bersihkan</button>
            </div>
          </td>
        </tr>
        <tr ng-repeat="user in users">
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.password}}</td>
          <td>
            <div class="btn-group">
              <button class="btn btn-danger" ng-click="remove(user)">Hapus</button>
              <button class="btn btn-warning" ng-click="edit(user._id)">Edit</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </form>

  </div>

<div data-loading></div>
<toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'animation-class': 'toast-top-center'}"></toaster-container>

<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/ngProgress.min.js"></script>
<script src="js/toaster.js"></script>
<script src="app/app.js"></script>
<script src="app/users.js"></script>
</body>
</html>
8.      Dan jalankan.
9.      Perlu Diperhatikan, sebelumnya pada file server.js kita telah men-setting PORT (localhost:3000) dan express.static(__dirname + '/public')

............app.use(express.static(__dirname + '/public'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Routes
app.use('/api', require('./routes/api'));

// Start server
var port = process.env.PORT || 3000;
app.listen(port);
console.log('Server http://localhost:' + port);

Sehingga untuk menjalankan Client, kita ketikan pada browser dengan URL :
http://localhost:3000/
10.  Selanjutnya akan ditampikan halaman Client di browser.

11.  Pada tampilan tersebut, Client dapat menjalankan operasi CRUD dengan mudah.

Selesai J Alhamdulillah...........


0 komentar:

Posting Komentar