Posts

Showing posts from March, 2020

Form dan Filtering Vue.js

Image
Form dan Filtering Vue.js Hallo teman-teman, kali ini saya akan membahas mengenai form input menggunakan  vue.js . Form ini nantinya akan menampilkan setiap inputan dan mengirimkan data ke server php. Form Input Pertama kita buat file baru dengan nama  form.html , seperti biasa import terlebih dahulu library vue js nya pada tag script di header. Dalam mendesign form ini kita buat tampilannya agar terlihat lebih menarik dengan menggunakan library bootstrap, agar tidak perlu mendownload terlebih dahulu kita import saja librarynya via link cdn yang bisa di dapat pada dokumentasi bootstrap. Tambahkan pada tag header project kita seperti berikut (dengan catatan harus terkoneksi internet). Pada form input kali ini kita akan mencoba semua tipe inputan seperti text, number, textarea, checkbox, selectbox, radio button, dan file. Design tampilan form nya seperti berikut. Ketika form input di inputkan, maka akan menampilkan setiap teks yang di bungkus di dapal tag ...

Community Cloud Pada Data kepolisian Republik Indonesia

Image
Community Cloud Pada Data Kepolisian RI      Di kesempatan kali ini saya akan membahas mengenai kasus deployment model cloud computing. Deployment model pada cloud computing dibagi 4, yaitu public cloud, private cloud, community cloud, dan hybrid cloud. Pada tutorial kali ini akan dibahas contoh kasus untuk Community Cloud . Apa itu public cloud ?      Public Cloud adalah layanan Cloud Computing yang disediakan untuk masyarakat umum. Pengguna bisa langsung mendaftar ataupun memakai layanan yang ada. Banyak layanan Public Cloud yang gratis, dan ada juga yang perlu membayar untuk bisa menikmati layanannya. Contoh Public Cloud yang gratis: GoogleMail, Facebook, Twitter, Live Mail, dsb. Contoh Public Cloud yang berbayar: Sales Force, Office365, GoogleApps, dsb. Apa itu private cloud ?      Private Cloud Adalah layanan cloud computing yang disediakan untuk memenuhi kebutuhan internal dari organisasi/perusahaan. Biasanya departeme...

Directive dan List Vue.js

Image
Directive dan List Vue.js Hallo teman-teman, kali ini kita akan membahas directive dan list pada  vue.js . Masih dalam project yang sama, buatlah sebuah file baru dengan nama  directive.html  dan tuliskan codenya seperti berikut. v-if Sekarang jalankan pada brosernya maka akan muncul tampilan berikut. Sekarang coba ganti data jumlahnya. Lalu jalankan kembali browsernya, maka akan muncul tampilan berikut. Directive ini juga tetap memiliki sifat reactive. Sebagai contoh, jika pada saat runtime, kemudian variable jumlahnya diubah menjadi ’75’ dengan cara menulis perintah  vm.nilai  = ’75’, maka view akan dirender ulang. v-on Kali ini kita akan mencoba event v-on, ada banyak seklai event-event di dalam  vue.js  ini, kali ini kita hanya mencoba event onclick. Masih dalam file yang sama, tambahkan script berikut. Ketika button di klik akan memunculkan alert konfirmasi, silahkan jalankan pada browser dan lihat hasilny...

Dasar - Dasar Vue.js

Image
   Hallo teman-teman bukan ngoding kembali lagi bersama kami dalam tutorial  Vue.js , kali ini akan membahas dasar-dasar siklus dari  vue.js  seperti create, mount, update, dan destroy. langsung aja ke tutorial. Siklus  Vue.Js Langsung saja buka project sebelumnya, dan buat file baru dengan nama  dasar-vue.html  dan tambahkan script berikut. Jalankan filenya di browser, lalu klik kanan inspect element, dan buka tab console, maka akan menampilkan hasil berikut. Selanjutnya kita akan mencoba pada siklus mount, buat script berikut. Jalankan kembali di browser maka akan muncul tampilan berikut pada console. Berikutnya tambahkan siklus update, buat script berikut. Jika dijalankan pada browser maka tidak akan tampil apapun pada consolenya. Untuk mengujinya kita tambahkan satu baris code pada consolenya seperti berikut. Selanjutnya buat siklus destroy seperti berikut. Lalu buka pada browser dan cek consolenya. Me...