posted by aryo tejo w on April 10, 2020

Update informasi suatu peristiwa bisa diperoleh dengan mudah. Internet dengan situs yang tersebar, dengan bantuan JSON sekarang ini bisa saling mendapatkan data. JSON adalah Javacript Object Notation, "notasi objek JavaScript", suatu format ringkas pertukaran data komputer.  wikipedia 

Angularjs dengan pustaka yang berbasis javascript, menggunakan JSON sebagai tulang punggung untuk komunikasi data. Format data JSON ini mesti disediakan oleh web service yang akan diperoleh datanya. yang kemudian dikenal dengan istilah API (aplication prgramming interface)

sebagai contoh penggunaan JSON ini adalah data corona virus disease-19 yang mewabah.Adalah situs kawalcorona.com yang menyediakan API data yang menyediakan informasi. Silakan KLIK LINK ini atau ketik http://covid19.satufokus.com/ di browser untuk melihat data.

 

bagaimana cara membuatnya, berikut langkah-langkahnya

  1. siapkan dahulu file-file pendukung, misal file angularjs: angular.min.js  dan angular-route.min.js.  kunjungi angularjs.org
  2. siapkan file pendukung css, untuk desain dan tampilan yang cantik: silakan kunjungi getboostrap.com untuk melihat desain dan copas dari sana , unduh file: album.css , bootstrap.min.css dan  glyphicons.css
  3. buat file HTML ,  untuk lebih ringkasnya hanya bagian capture data API yang ditulis;

<table class="table">

            <thead class="thead-dark">

              <tr>

                  <th>Positif</th>

                  <th>Sembuh</th>

                  <th>Meninggal</th>

              </tr>

            </thead>

           <tr ng-repeat="n in nasional  "> 

              <td>{{n.positif}}</td>

              <td>{{n.sembuh}}</td>

              <td>{{n.meninggal}}</td>

           </tr>

            </table>

 

            <table class="table table-striped" >

                    <tr>

                        <th>Propinsi</th>

                        <th>Positif</th>

                        <th>Sembuh</th>

                        <th>Meninggal</th>

                    </tr>

         

                  <!--  <tr ng-repeat="pr in mypropinsi  track by $index "> -->

                    <tr ng-repeat="pr in mypropinsi | orderBy:'pr.attributes.Provinsi' "> 

                        <td>{{pr.attributes.Provinsi}}</td>

                        <td>{{pr.attributes.Kasus_Posi}}</td>

                        <td>{{pr.attributes.Kasus_Semb}}</td>

                        <td>{{pr.attributes.Kasus_Meni}}</td>

                    </tr>

                  </table> <!-- wadahtabel  -->

 

4.Buatlah file app.js

var app = angular.module('myApp', []); //'ngRoute', 'ngAnimate'

app.controller('MukaCtrl', function ($scope,  $http) {

$scope.propinsi;

$scope.mypropinsi;

$scope.nasional;

 

                $scope.getPropinsi = function() {

          $http({

              method: 'GET',

              url: 'https://api.kawalcorona.com/indonesia/provinsi/'

          }).then(function (response) {

              // success

                  $scope.mypropinsi =response.data;

            console.log($scope.mypropinsi);

          }, function (response) {

              // error

              console.log(response.data,response.status);

          });

    };

 $scope.getPropinsi();

  $scope.getNasional = function() {

          $http({

              method: 'GET',

              url: 'https://api.kawalcorona.com/indonesia/'

             // url: 'http://retail.satufokus.com/php/get_stok.php'   // ini proven

          }).then(function (response) {

              // success

               $scope.nasional=response.data;

            console.log($scope.nasional);

          }, function (response) {

              // error

              console.log(response.data,response.status);

          });

    };

 $scope.getNasional();

});

 

Saat kita arahkan browser ke covid19.satufokus.com akan terlihat data API dari kawalcorona.com sebagai berikut:


 

bagi pembaca yang baru belajar angularjs mungkin masih bingung ya? baik, silakan unduh projek di atas atau ketik https://github.com/1sfgdkiwo/covid19_ang, smoga bermanfaat

Leave a Comment

Fields with * are required.

Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.