Installing SASS di Windows

Nginstallnya pake ruby yg bisa didownload https://rubyinstaller.org/downloads/

Setelah diinstall buka cmd windows... trs bisa kek gini :

Naah...terus klu pengen install SASSnya tinggal ngerun command "gem install sass"

Klu udah slese... kita bisa cek versi sass-nya kek gini :

Siiipss daaaah... selanjutnya terserah kita.... :D

Dokumentasi resmi sass bisa dilihat disini untuk pembelajaran lebih jaoh...

Sekilas SelectBox Binding di Vuejs

Dinamic components vuejs

Checkbox binding vuejs

Sekilas Cerita Seorang Anak Jepang Yang Payah

Di Jepang, ada anak laki-laki, tidak Pintar, sakit-sakitan ...tidak Ganteng juga.

Di kelas, duduknya paling belakang karena takut disuruh maju ke depan oleh Guru.

Tiap hari nemani Ayahnya di bengkel reparasi mesin pertanian di desa Kamyo distrik 
Shizuko.

Di usia 8 tahun dia mampu mengayuh sepeda sejauh 14 km hanya untuk melihat Pesawat Terbang.

Usia 15 tahun putus sekolah dan bekerja di bengkel mesin di Hary Shokai Company.

Usia 21 tahun diserahi buka cabang .... karena rajin, bengkelnya maju pesat.

Tapi dia tak puas dan memutuskan jadi wirausaha dg membuka bengkel sendiri.

Dan memproduksi Ring Piston .... Sayang ... TOYOTA menolak karyanya karena dianggap jauh dari Standar .... Dia dibully dan diejek teman-temannya ..... dia sedih dan jatuh sakit.

Setelah sembuh, dia putuskan kuliah untuk cari ilmu ... Namun dia Drop out tidak bisa meneruskan kuliah .... Dia berusaha dan mencoba dan selalu gagal berkali-kali.

Tahun 1947, Jepang porak poranda .... Hidupnya makin parah ... Semua dijual untuk kebutuhan sehari hari termasuk mobil kesayangannya dia jual.

Dari kondisi inilah Titik balik kehidupannya, berubah ...!

Dia punya sepeda kayuh satu-satunya ... Dia pasang motor kecil di sepedanya .... Dan tanpa disangka ... "Sepeda yg ada Motor kecil nya itulah yg merubah hidupnya".

Banyak yg mau membeli, akhirnya dia memproduksi banyak hasil karyanya itu.

Usahanya berkembang pesat hingga merambah produksi Mobil ..... dan menggurita di seluruh dunia.

Termasuk Indonesia, dia menjadi Founding Father yg melegenda.

Dia adalah *SOICHIRO HONDA*
Pemilik Perusahaan Honda dari Jepang, apa yg dia ucapkan:

*Tidak ada sukses tanpa perjuangan.

*Orang hanya melihat saat ini di saat aku berdiri dengan deretan Mobil dengan segala Kesuksesanku.

*Ketahuilah ... Itu cuma 1% keberhasilanku .... 99% adalah kegagalanku ....jarang orang yang mau melihatnya.

*Orang lebih silau dengan hasil kesuksesan.

*Tanpa mau melihat bagaimana kesuksesan itu dibentuk melalui sebuah proses yg berat, susah payah, jatuh bangun, dicaci, diejek, dibully, dikhianati, diremehkan.

*Sukses butuh semangat pantang menyerah, perjuangan dan doa, bahkan darah dan air mata.

Semoga bermanfaat... 👍

Belajar Dasar Mutations di Vuex

Dipostingan sebelumnya kita udah liad gimana cara make getters. Nah disini akan dilanjutkan ke mutations... :)
Pertama-tama kita set dl strict:true di store biar state storenya g' bisa diubah diluar store. Jadi statenya hanya bisa diubah lewat mutations atau lewat actions yeeah...

eeemm... trs kita ganti layout templatenya ajjah biar action itu klihatan bingit contohnya...hehe.. so layout yg baru kyk gini :

Naah... disitu kita ada input text yg punya ref="power_value". Nanti nilai inputnya dipake sama method changePower_main pake refs.value. Jadi tampilannya skrg kek gini :

Siiipss... skrg kita tambain methods changePower_main kek gini :

Nah... var temp itu nantinya nyimpen isi dari <input> tag html kita. Terus  di berikutnya yang this.$store.commit, naah itu caranya manggil mutations di vuex. Jadi changeMainPower itu nama mutations-nya, terus temp itu variabel input buat changeMainPower. changeMainPower sendiri dibuat di file store kita kyk gini :

So kliatan changeMainPower itu manggil state dari store kita, trus variabel angka itu inputan dari yg diisi sama temp di this.$store.commit('changeMainPower', temp); siiipsss... sy pikir kek gitu ajjah... Naah... misalkan kita masukin nilai 6 di inputnya kyk gini :

Setelah itu kita pencet change power hasilnya kyk gini :

Naah.... powernya berkurang 6...trs vue devtollsnya ngedetek mutations yg dipanggil..trs kliatan jg perubahan data2nya... yeaaah... awesome... ckup sekian dl untuk yg mutations... semoga bermanfaat... :)

Perubahan kode program yg lengkap bisa dilihat di github Hisoka disini...
Terus informasi official buat mutations bisa dilihat disitus vuexnya disini....

Belajar Dasar Event di Vuejs

Jadi disini kita punya kerangka vuejs kek gini :

Tampilannya :

Selengkapnya bisa dilihat di github disini
Naah... jadi dalam kode diatas kita punya 2 biji button trs 1 biji div buat nampilin angka. Dari title buttonya udh klihatan klu button yg add itu nantnya buat nambah/naikin angka, trs subtract buat ngurangin angkanya daan buat ngelakui itu semua kita butuh ngedetect event pas ngeklik button di vuejs. Carana kek gini ajjah :

Jadi klu pengen ngedetek event di vuejs kita cuma make 'v-on:event_yg_mau_didetect'. Karena kita pengen yg click button berarti 'v-on:click'. Trs v-on:click = add itu maksdnya pas diklik kita manggi fungsi 'add' seperti yg terlihat pada property methods, disitu ada fungsi add() {this.myInt++;} yg intinya naikin 1 biji angka buat myInt. Selse daaah... :D
v-on itu sebenarnya bisa diganti pake @ ajjah biar lbih simpel. So untuk yg substract kita pake @ ajjah daah... :D kek gini...

Hasilnya :

Trs event lain yg bisa dicoba yg double click. Kodenya kek gini :

Siipss... sy pikir sama ajjah kekna sm yg sebelumnya... :D
Naah... event berikutnya yg pengen dicoba adalah hover mouse. Pertama-tama kita bikin div kosong dl sama style cssnya kek gini :

Hasilnya :

Di dalam div ini kita akan ngedetek posisi mouse hover terus nampilin koordinatnya ketengah2...

Hasilnya :

Siiipss.. cukup demikian contoh2 event di vuejs. Untuk event event yg lain silahkan liad official dokumentasinya disini....

v-bind & v-html di vuejs

Contoh v-bind kek gini :

atau bisa jg kek gini :

Hasilnya :

Klu v-html kek gini :

Github here...

Vuejs devtools

Link 
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

Getter di Vuex

Dipostingan sebelumnya kita udah ngebuat store yg kita akses lngsung datanya lewat state. Naah..sebenarnya ada cara lain yaitu pake getters, contohnya kek gini :

Naah... di bagian getters kita bikin 2 biji getters masing-masing buat main dan biju teams, cmn yg biju team blom dilengkapin. Trs yg getter buat main_teams tuh ngambil state (state =>) trs dari state access ke main_teams (state.main_teams), nah karena main_teams berupa array berarti kita bisa ngeloop ke element2nya lewat map (main_teams.map). Dari map ini kita kembaliin lagi nilai arraynya tapi dengan sedikit modifikasi kyk object di return itu (line 25 smpe 27).
Siipss... klu kita pengen akses gettersnya di vue component, caranya mirip2 ajjah sama akses state kek gini

Siipss... hasilnya

Siiipss... cara yg sama bisa kita aplikasiin ke bijuu_teamss yeeaah... :D
Kode selengkapnya bisa dilihat disini.....


Postingan berikutnya tentang mutations, bisa dilihat disini...

Membuat List Member Menggunakan Vuex

Disini kita akan membuat list member menggunakan vuex. So silahkan ikuti postingan ini untuk settingan awalnya...
Pertama-tama kita udah punya webpack-simple yg hanya menggunakan vuejs yang tampilan webnya kek gini..

Naah... Karena kita g' butuh tampilan layout diatas, jadi pertama-tama kita delete dl element2 yg digunain di App.vue seperti terlihat pada gambar di bawah... (lbih jelasnya silahkan liad commitnya di sini...)

Klu udah diremove... berarti tampilan layout utama kita sekarang jadi kosong... :D
Siiipss... berikutnya kita buat 2 biji file .vue yg baru.... Kita buat directory baru ajjah namanya 'components' terus didalem folder components ini kita bikin 2 biji file.vue kek gini :

Siipss...berikutnya kita isiin kode berikut untuk kedua file vuenya...

Lebih jelasnya bisa dilihat diisini...
Siiipss... berikutnya kita masukin kedua file vue tadi ke app.vue. Carana kek gini ajjah...

Lebih lengkapnya bisa dlihat disini....
So jadi dalam kode diatas kita import main_team_member.vue dan bijuu_team.vue trs dimasukin ke variabel components. Naah.. didalam variabel component ini MainTeam diassign ke main-team & bijuu-team. Akhirnya main-team & biju-team dapat dikenali oleh template sehingga dipanggil kyk <main-team> & <bijuu-team>. Trs klu liad isi dari main-team sama bijuu-team itu cuma <h1> ajjah kegini :

Makanya tampilan web kita sekarang menjadi seperti ini ...

Naaah... berikutnya baru kita tambain store yg diambil dari vuex. Store ini nantinya nyimpen beberapa item kyk state, getters, actions, mutations dan modules....
So... mari kita install vuexnya dl
npm install vuex --save

Trs kita bikin folder baru namanya 'store' trs didalem folder ini kita bikin file javascript namanya 'store.js', trs taroin kek gini :

Naaah... itu kerangka utama store di vuex. Trs di line ke-4, itu maksudnya biar vuex dipake didalem vue. Klu misalkan kita pengen pake plugin yg lain kyk firebase, nah berarti tar firebasenya jg diadd diistu kyk Vue.use(firebase) naah... gitu gitu laah... :D
Terus biar storenya bisa diakses sama komponent2 kita, kita harus nambain store ini ke main.js kek gini :

Siiipss... klu udah ditambain kyk diatas, komponen apapun yg kehubung ke App.vue bakalan bisa akses store yg baru kita bikin....Siipss... berikutnya kita tambain data dummy dl ke state distore kita kek gini :

trs didalem komponen main_team_member.vue kita akses dan tampilin isi statenya kek gini :

Perubahan kode selengkapnya bisa dilihat disiniiii....
Hasilnya...

Siiipss... Trs statenya berikutnya yg tambain adalah yg buat bijuu_team kek gini daah...

Selengkapnya bisa dilihat disini...
Hasilnya...

Siiipss... sampai disini kita baru make STATE di storenya vuex.... daaan... ckup sampai disini dlu ehehe... :D

Postingan berikutnya ttg getters bisa dilihat disini...