Dalam menjalankan bisnis, yang konvensional pastilah ada jam kerja masuk dan pulang. Oleh karena masih bersifat peralihan usaha offline ke online, maka untuk mencegah terjadinya transaksi diluar rentang  jam kerja dibuatlah fitur pengaturan jam kerja.

Pengaturan jam kerja berada di modul pengaturan, berada di paling bawah navigasi vertikal. Mengatur jam mulai kerja dan jam akhir kerja. Tekan simpan. Sesimpel itu.

Dalam proses bisnis ini, user yang login selain sebagai supervisi, dilarang melakukan transaksi diluar jam kerja. Semisal penjualan, akan mengurangi jumlah stok dan diterima sejumlah uang. Meskipun dalam pencatatan online di aplikasi ini, waktu yang digunakan adalah waktu di server. Artinya tidak bisa dikendalikan oleh user yang transaksi, meski sudah mengubah control panel di bagian waktu.

Sehingga saat di laporan penjualan akan tercatat tanggal dan waktu diluar jam kerja.

Akan tetapi menjadi tidak valid jumlah barang tersisa dan uang yang diterima.

Untuk itulah fitur pengaturan ini digunakan untuk antisaipasi transaksi selain supervisi di luar jam kerja. User tidak bisa akses tombol simpan di luar jam kerja itu.

Minat mencoba fitur ini ? silakan trial di https://satufokus.com/BSA

Email: admin@gmail.com pwd: admin  untuk admin

Email: rumahkode@gmail.com pwd: rumahkode untuk supervisi

Kontak WA 085228129375

Angular adalah framework pembuatan web aplikasi. Disebut framework atau kerangka kerja, oleh karena mempunyai struktur folder dan file yang sudah baku dan standar.

Folder utama meliputi: dist,node_modules ; app

Folder dist akan terbentuk saat dibuatkan projek jadi hasil build

Folder node_modules  adalah folder yang berisi file2 library hasil instal, melalui terminal atau console lainnya

Folder app adalah folder yang berisi semua file projek web yang dibuat

Salah satu cirinya adalah setiap komponen yang dibuat akan mempunyai nama folder. Dalam folder itu akan terisi 4 file.

File berekstensi HTML , SCSS , Spec.ts dan TS.

Setiap akan membuat form atau page atau halaman, dalam angular disebut COMPONENT .  Ketika lah dalam terminal ( visual studio code  ) atau CMD window : ng component path_file.

ng adalah kata kunci untuk memulai perintah

component adalah suatu bentuk page atau file html yang akan dibuat

path_file adalah letak file-file yang akan dibuat disimpan

contoh:  ng component login

perintah ini akan menghasilkan folder login, yang berisi 4 file di atas dan disimpan di bawah folder utama  yaitu app.

Untuk selanjutnya saat pembuatan web, hampir semua berada di folder app

Perkembangan web teknologi di tahun 2022 ini, sudah sampai ke campuran instal aplikasi di android ( dominasi gadget ) dengan web memakai browser secara umum. Hampir semua teknologi javascript yang melatar belakangi perkembangan web di area User Interface sudah support ke Progressive Web Application ini. Kebetulan di sini memakai framework angular sebagai sarana pembuatan web. Pemilihan angular karena keluaran dari google sehingga pasti akan mendukung juga ke android dan aplikasi lainnya.

Untuk mencoba web yang sudah PWA :

1. silakan ketik https://satufokus.com/BSA ke browser CHROME , maka setelah beberapa detik kemudian, akan muncul informasi di bagian bawah.

2. klik tombol OK

3. akan dikeluar pemberitahuan untuk instal di android 

4. setelah selesai instal akan diperoleh icon angular di layar HP anda.

Teknologi PWA ada sebuah file manifest.webmanifest yang akan bisa dijalankan di https. 

Oleh karena web PWA adalah serverless maka letak database bisa ditaruh di web lain atau pun di localhost. Akan tetapi perlu diperhatikan apabila berjalan di localhost, maka PWA tidak berjalan.

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

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 }}

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;

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

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.

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

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.

Setelah menulis code sebagai berikut:

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

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

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.

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:

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:

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:

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 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.

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.

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".

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.

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.