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

Angular Tutorial Bahasa Indonesia ; framework web dev : tahap pertama persiapan

Perkembangan IT dalam teknologi programming web, sudah banyak sekali. Terutama sejak javascript atau JS, sudah bisa digunakan hampir di segala sisi web development. JS untuk sisi server, sudah dikenalkan dengan nodejs, sedangkan sisi pengguna ada react, vue , .. , dan angular.

Untuk angular merupakan kerangka kerja membuat web, sudah ada struktur file dan folder tertentu dengan fungsinya dalam projek angular. Yaitu sejak tahun 2016, angularjs 1.x diganti dengan suatu framework dengan basis TS, typecript. Adapun untuk versi 1.x belum suatu framework, masih berupa library yang didaftarkan seperti menggunakan file javascript JS lainnya, biasanya di atas penutup tag body  </body>. Mengapa berada di bawah script list code ? Kenapa tidak jadikan satu baris dengan file css, yang berada di tag header ?

Jawabnya, agar loading time web tidak terlalu lama,karena dibanding dengan file css yang lebih kecil, penempatan file JS di header akan mempengaruhi kecepatan web untuk tampil penuh.

Mengenai produk RK atau satufokus.com dalam web app, menggunakan salah satu library javascript angularJS utk versi 1.x dan framework angular utk produk selanjutnya.

Untuk menggunakan angular yang sekarang sudah versi 13, mula pertama harus instal dulu nodeJS. Silakan KLIK link ini https://nodejs.org/en/download/

Unduh file setup sesuai dengan kebutuhan operating system yang dipakai. Jika sudah selesai akan bisa dicek melalui, CMD utk windows. Atau command prompt , dengan ketik command prompt di bagian “type here to search”.

Pada CMD ketikkan: node –v ; akan muncul versi nodejs yang digunakan. Untuk punya penulis mempunyai versi V12.22.7 Tahap kedua , saya sarankan menginstal Visual Studio Code (VSC) ada yang versi community alias free atau yang berbayar, silakan memilih.

Adapun link unduhnya bisa di sini https://code.visualstudio.com/download Mengapa saya sarankan VSC ? disamping mempunyai terminal ( command prompt yang ada di fitur VSC ), juga mempunyai theme yang menarik, serta fitur autocorrect fitur lainnya

Tahap ketiga, installah Xampp untuk sisi server nya, yaitu php dan mysql nya. Silakan ke halaman ini https://www.apachefriends.org/download.html

 

contoh produk web app ;

http://digprint.satufokus.com    , untuk usaha digital printing dan advertising

{ { mempunyai fitur pengiriman pesan Whatsapp ke HP customer, nilai order sesuai transaksi.

mempunyai modul order yang bisa pembayaran tunai dan non tunai dalam 1 nota, mempunyai modul dan monitoring progress SPK -surat perintah kerja, mempunyai fitur export ke Excel tiap laporan} }

http://eadmin.satufokus.com  , untuk  usaha retail umum

{{ fitur idem }}

 

Angular Tutorial Bahasa Indonesia ; framework web dev : tahap kedua node package manager , npm

Tahap lanjutan untuk membangun web app adalah menggunakan angular command line interface, biasa disebut angular CLI. Apabila membangun web app menggunakan tool develop selain VSC (visual studio code), maka gunakan command prompt ( CMD ) di windows dan editor text utk codingnya, misal Sublime Text, notepad++ dan lainnya.

CMD digunakan untuk menjalankan perintah angular, mulai membuat folder projek, inisiasi, menambah komponen, service sampai dengan build projek itu sendiri.

Tahap menggunakan angular CLI, sebagai berikut;  (menggunakan command prompt )

Pertama,  buka CMD di windows anda

Kedua, ketik     npm install -g @angular/cli setelah itu enter untuk eksekusi perintah

                Perintah ini berfungsi untuk meng instal angular CLI agar bisa dijalankan di PC

Ketiga, arahkan path di CMD ke folder web server, apabila anda menggunakan xampp, letaknya ada di folder  ...\xampp\htdocs .  ( gunakan perintah cd )

Keempat, ketiklah perintah  ng new NamaProjek

Fungsinya adalah membuat folder NamaProjek , yang sekaligus sebagai nama web. Perintah ng new akan membuat juga semua folder dan file sesuai struktur kerangka kerja (framework ) angular.

Perintah keempat ini mensyaratkan koneksi internet, karena akan unduh  folder node_modules dan semua file pendukungnya, sebagai syarat dasar persiapan membangun web app.

Folder:  e2e, node_modules, src

File-file: .browserslistrc , .editorconfig, .gitignore, angular.json,..., tslint.json

Kelima, ketiklah ng s –o

Fungsinya adalah untuh membuka projek dengan live servernya. Artinya setiap ada perubahan di coding html, Ts, scss nya maka langsung ada perubahan tanpa refresh browser.

 

Menggunakan Visual Studio Code

Aktifkan atau tampilkan fitur  Terminal sebagai  pengganti CMD diwindows, sehingga tidak perlu buka CMD lagi. Semua tersedia di VSC, yaitu klik menu Terminal > new Terminal

Tahap membuat projek web app

Pertama, buka VSC dan klik open folder, arahkan ke folder ...\xampp\htdocs

Kedua, dan seterusnya sama dengan cara perintah di CMD