Angular JS apa itu

Angular JS apakah itu? Suatu framework java script yang dikembangkan pertama kali oleh google. Konsep utama framework ini adalah menciptakan "single page transaction" yang secara bahasanya pak "Bambang" maksudnya membuat transaksi dalam satu halaman web base. Anda yang pernah belajar web, pastilah paham bahwa setiap tekan tombol selalu pindah halaman baru. Nah beda dengan aplikasi desktop , yang selalu dalam satu form / page setiap transaksinya. Oleh karena java script adalah library untuk pengembangan UI, user interface maka angular JS pun mengelola sisi client. Sedangkan sisi server masih ditangani oleh php, java, asp dan turunan ketiganya, termasuk python, dan .net.

Perkembangan angularjs sendiri untuk kemudian hanya disebut angular versi 1, untuk versi 2, 4 dan seterusnya, angular berkembang menjadi framework web develop, tidak sekedar framework javascript saja.

Bagaimana masa depan angularjs itu sendiri? jangan kuatir... google masih support dengan LTS nya Long Term Support, sila baca di https://angularjs.org/ sebagai web resmi dari angularjs.

Jadi jika ingin membuat aplikasi web yang mirip aplikasi desktop silakan pelajari angularjs. Dengan single page aplication, tidak berpindah halaman tiap submit baik itu POST atau GET. semua karena memakai teknologi AJAX yang dibundle dengan angularjs.

Web aplikasi front end angularjs dan back end php mysql

Inilah saatnya, ketika web aplikasi sudah ke arah "windows like" , maka segeralah menuju ke sana. Sebagai seorang developer aplikasi, yang saya tahu selama ini, kelemahan web aplikasi adalah pindahnya halaman, tiap melakukan "klik".

KLIK INI  atau ketik  http://retail.satufokus.com

Disamping boros bandwith saat harus loading tiap file; baik itu file html, css, js dan file pendukung lainnya seperti image(gambar) dan lainnya. Yang pasti sebagai user, terlalu lama untuk transaksinya.

Web teknologi sudah menjawab dengan hadirnya framework antar muka (UI) yang ada sekarang; Vue, Reactjs, Ember, Jquery dan Angular. Ke depan pilihan ada di Angularjs, oleh karena dibackup oleh Google.

silakan trial Dashboard online KLIK INI  atau ketik  http://retail.satufokus.com dengan user: rumahkode@gmail.com dan password: rumahkode. Untuk ke depan akan saya jelaskan mengenai Angularjs itu sendiri dan implementsinya.

 

Aplikasi Online Retail Otomatis Harga Jual tiap Customer RK retail web1

Dalam aplikasi berbasis web ini, sudah menggunakan konsep (single page application). Artnya adalah semua transaksi hanya di satu halaman, tidak pindah-pindah, sehingga lebih cepat dan menghemat bandwith ( kuota internet ).

Secara garis besar fitur aplikasi ini adalah penjualan yang dapat secara otomatis membedakan harga jual barang setiap customer yang berbelanja. Para customer mempunyai jenis yang bebeda; yaitu UMUM, AGEN dan MASTER.

UMUM, diartikan sebagai pembeli biasa sehingga jarang ada transaksi yang menimbulkan piutang.

AGEN, sebagai pembeli yang akan menjual lagi barangnya, atau reseller.

MASTER, sebagai pembeli loyal sehingga mempunyai histori transaksi yang banyak.

Tiap jenis customer ini, tentunya dibedakan dalam penentuan harga jualnya. Berikut ini adalah screen shoot modul Customer

 

cara input: data baru

1. input kotak isian kode hingga Jenis.

2. khusus jenis, cukup memilih dari pilihan yang ada : UMUM, AGEN atau MASTER

3. tekan tombol Simpan dan otomatis data baru akan muncul di tabel sebelah kanan nya.

Cara ubah :

1. isi kotak Kode, sama persis dengan data yang akan diganti

2. isi kotak isian lainnya yang sudah benar atau direvisi

3. tekan tombol Simpan untuk mengakhiri dan otomatis data baru akan update.

RK Web 01 instalasi angularjs di projek seting projek

RK.Web 01 instalasi angularjs di projek , seting projek

Secara ringkas, jika pembaca sudah pernah membangun atau setidaknya belajar web aplikasi, tentunya juga sudah mengenal css.

Ibarat kata sayur tanpa garam, jika HTML tanpa css. File css mendukung tampilan web dan hampir semua pengembang web sekarang ini fokus pada proses bisnis, oleh karena sudah didukung oleh bootstrap. Bootstrap sendiri adalah framework css yang dikembangkan oleh twitter, dan sudah di ‘publish’ kan.

Instalasi angularjs, salah satunya sama dengan cara instlasi framework css ini.

Tahap pertama, unduhlah file angularjs.js ke situs https://angularjs.org/

Tekan tombol Download Angularjs , pilih lah salah satu file akhir min, adalah versi minimized (ukuran kecil).

Pindahkan ke folder js di sub direktori projek

Gambar utk lebih jelas.

+*****+

Pada tahap ini, sudah selesai dan tahap selanjutnya adalah coding di projek kita.

RK Web 02 memanggil file angularjs di projek, agar berfungsi

Tahap 01 seting file angularjs.js ke projek sudah selesai. Sekarang siapkan text editor favoritmu, bisa notepad, notepad++, sublime , atom dan lainnya. Jika belum mempunyai text editor yang dimaksud, silakan minta bantuan google untuk download dan instal.

KLIK INI  atau ketik  http://retail.satufokus.com

Untuk keperluan web develop, penulis menggunakan Sublime Text. Silakan unduh di https://www.sublimetext.com/download

secara garis besar projek web base mempunyai coding sebagai berikut:

<!doctype html>
<html lang="en" >
     <head>
          <title>ini judul projek</title>
     </head>
<body>
</body>
</html>

 

Untuk memanggil file angularjs.js ketiklah code berikut

<script src="js/angular.min.js"></script>

File angular.min.js disimpan di folder js pada sub direktori projek. Letakkan coding tersebut di bagian <body> bagian bawah. Kenapa di bagian bawah ? agar tidak memberatkan aplikasi saat transaksi yang mengharuskan ‘load’ file-file yang belum semua diperlukan. Sehingga cuplikan coding seperti ini:

     <script src="js/angular.min.js"></script>
</body>
</html>

 

Coding berikutnya adalah memberi penanda suatu aplikasi bisa berjalan file angularjs.js nya dengan memberi ‘ng-app=”namaAppKita” ‘ di tag <html>

Sehingga tampak seperti ini:

<!doctype html>
<html lang="en" ng-app="namaAppKita" >
     <head>
          <title>ini judul projek</title>
     </head>
<body>
     script src="js/angular.min.js"></script>
</body>
</html>

Silakan kunjungi link ini atau ketik http://retail.satufokus.com untuk melihat produk dengan angularjs.

  • Respon cepat, tiap simpan atau ubah data, langsung tampak data disampingnya.
  • Pencarian data lebih cepat, tidak refresh page
  • Klik tabel, bisa mengisi form input pada kotak isiannya.
  • Sajian data histori transaksi

 

 

RK Web 03 menulis code di HTML agar fungsi angularjs berjalan

Setelah menulis code sebagai berikut:

<!doctype html>
<html lang="en" ng-app="namaAppKita" >
     <head>
          <title>ini judul projek</title>
     </head>
<body>
     script src="js/angular.min.js"></script>
</body>
</html>

 

Tahap berikutnya adalah memberi penanda ng-controller="namaKontroler" pada bagian element HTML yang akan dikendalikan atau dikontrol. Nah konsep MVC di framework javascript ini hampir mirip dengan framework php yang sudah ada, misal codeigniter, YII, laravel dan lainnya. Meski pun tidak sama persis !. untuk konsep ini kita obrolkan dilain waktu.

Kembali ke laptop.....

Coding HTML akan menjadi seperti ini, setelah tag kontroler ditambahkan

<!doctype html>
<html lang="en" ng-app="namaAppKita" >
     <head>
          <title>ini judul projek</title>
     </head>
<body ng-controller=" namaKontroler ">
     script src="js/angular.min.js"></script>
</body>
</html>

Dan seterusnya kita mesti siapkan file javascript dari angularjs yang berbentuk fungsi-fungsi yang akan digunakn untuk mengontrol halaman yang sudah ada tag ng-controller

Silakan kunjungi link ini atau ketik http://retail.satufokus.com untuk melihat produk dengan angularjs.

  • Respon cepat, tiap simpan atau ubah data, langsung tampak data disampingnya.
  • Pencarian data lebih cepat, tidak refresh page
  • Klik tabel, bisa mengisi form input pada kotak isiannya.
  • Sajian data histori transaksi
RK Web POST dan GET dalam angularjs

Sebuah aplikasi web, selalu ada action POST atau GET. Dalam web konvensional atau biasa, setiap melakukan action tersebut akan pindah ‘page’ atau halaman, yang artinya akan ‘load’ lagi semua file css, js, html dan file image (foto) akan dapatnya halaman lebih lama refresh.

Dengan teknologi ‘front end’ kekinian, angularjs, menggunakan konsep json dalam semua transaksinya, baik POST atau GET. Setiap data yang akan dikelola harus menyediakan link URL yang berbentuk json.

KLIK INI  atau ketik  http://retail.satufokus.com

Ya benar, semua transaksi di angularjs menggunakan AJAX, dengan coding secara konsep sebagai berikut:

$http({
        method: 'GET',
        url: 'php/get_jual.php'
    }).then(function (response) {
        // success
        $scope.juals = response.data;
    }, function (response) {
        // error
        console.log(response.data,response.status);
    });

 

Script di atas, adalah potongan dari fungsi di angularjs yang disimpan dalam file *.js

Sedangkan file get_jual.php suatu file php yang digunakan untuk menyediakan format data json.

Silakan kunjungi link ini atau ketik http://retail.satufokus.com untuk melihat produk dengan angularjs.

  • Respon cepat, tiap simpan atau ubah data, langsung tampak data disampingnya.
  • Pencarian data lebih cepat, tidak refresh page
  • Klik tabel, bisa mengisi form input pada kotak isiannya.
Cara ambil data API informasi covid-19 dengan angularjs

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