Pencarian

Sabtu, 10 November 2018

Bagian-1 Belajar Vue JS dengan Vuetify

Seri 1 Vue + Vuetify

Ditengah kesibukan di kampus akhirnya saya sempat2kan untuk belajar vue js.
Sebenarnya sebelum ini saya sudah pernah coba2 fitur vue menggunakan cdn, namun ya itu, tidak dicatat dan akhirnya lupa. (memang ilmu itu mesti di ikat dengan menulis :p)

Kali ini, biar lebih menarik dan semangat belajarnya, maka saya mencoba vue js dengan vuetify yang memiliki banyak komponen dengan tampilan waow (ntar saja penjelasannya terkait vuetify).

Setelah npm terinstall dengan baik, jangan lupa install juga vue-cli.
Eh ya, saya jelasin dulu npm itu apa sih ?
npm atau node package manager merupakan aplikasi untuk menginstall modul-modul javascript seperti jquery, chart, momentjs dan lain-lain (mirip2 composer untuk php). aplikasi npm dijalankan menggunakan command line dengan perintah.


Ø  npm install nama_library

Contohnya :
Ø  npm install jquery

Perintah diatas akan membuat folder dengan nama node_modules dan jquerynya akan diletakkan di folder tersebut.

Kalo npm belum ada, maka silahkan download nodejs di sini https://nodejs.org/dist/v10.13.0/node-v10.13.0-x64.msi , kalo pake windows ya mestinya nginstall nya tinggal klik lalu next next saja.

Setelah npm berjalan dengan baik, berikutnya kita akan menginstall vue-cli, vue-cli bisa di install pake npm atau yarn, contohnya saya menggunakan npm :

Ø  npm install @vue/cli -g

Lalu menginstall webpack untuk pemaketan atau membuat struktur folder dari vuetify :

Ø  vue init vuetifyjs/webpack my-project

Nanti akan ditanya nama project, enter-enter saja atau kalau saya seperti berikut :


Kalo prosesnya sudah selesai, masuk ke folder my-project lalu install library yang dibutuhkan oleh template webpack ini (optional).

Ø  cd my-project
Ø  npm run install
Perintah npm install akan melakukan pengecekkan ke file package.json dan akan menginstall semua library oleh template. Lalu jalankan dengan perintah run dev.

Ø  npm run dev


Kalo sudah selesai maka akan muncul seperti gambar dibawah, dan buka browser di port 8080.



Dan jreng... jadi deh layout menggunakan vuetify,


Vuetify menggunakan webpack memiliki struktur folder berikut :

Di folder src terdapat file dengan nama App.vue, di file inilah kode-kode layout dari vuetify diletakkan, coba saja tambahi sembarang kode html, ntar keliatan kok di tampilannya.

Lalu di src juga ada main.js, di file ini kita dapat mengatur komponen yang akan saya bahas di tulisan saya berikutnya.

Coba buka App.vue dan di bagian paling bawah dalam tag script,coba ganti dengan kode berikut :
export default {  data () {    return {      clipped: false,      drawer: true,      fixed: false,      items: [        {icon: 'dashboard',title: 'Home'},        {icon: 'bubble_chart',title: 'Inspire'}      ],      miniVariant: false,      right: true,      rightDrawer: false,      title: 'Vuetify.js'    }  },  name: 'App'}
Pada kode diatas, saya menambahkan items array dengan menu Home dan icon dashboard.
Jika sudah oke, silahkan gunakan perintah
> npm run build
perintah itu akan membuat folder namanya dist, copy file dist dan file index.html di folder utama, lalu gunakan.

Senin, 05 November 2018

SSL di Proxmox

Proxmox RapidSSL
pvecm updatecerts -f
cp certname.pem /etc/pve/local/pve-ssl.pem
cp private-key.key /etc/pve/local/pve-ssl.key
systemctl restart pveproxy
Restart pveproxy : services pveproxy restart

file .pem itu gabungan dari :
—–BEGIN CERTIFICATE—–
csr file
—–END CERTIFICATE—–
—–BEGIN CERTIFICATE—–
(Intermediate certificate)
—–END CERTIFICATE—–
—–BEGIN CERTIFICATE—–
(Root certificate)
—–END CERTIFICATE—–

Jumat, 02 November 2018

Engkau dan hartamu milik orang tuamu

Dalam ceramahnya ustadz yang semoga allah merahmati beliau bercerita :
Ada seorang pemuda datang kepada syaikh dan kemudian pemuda itu bertanya,
"Ya syaikh, aku ingin bertanya, ini tentang masalah keluarga, ibuku ini kan menumpang sama aku ?", belum selesai pemuda ini bertanya, Syaikh kemudian berkata "tolong diulangi lagi pertanyaanmu",
Pemuda itu kemudian mengulangi "begini syaikh, ibuku ini kan menumpang sama aku",
syaikh pun berkata lagi "tolong pertanyaanmu diulangi lagi",
Pemuda itu mengulangi lagi "begini ya syaikh, ibuku ini kan menumpang sama aku",
Syaikh masih memotong pertanyaan pemuda itu dengan berkata "tolong ulangai lagi pertanyaanmu",
Sang pemuda pun merasa bingung kemudian berkata "wahai syaikh tolong, dengarkan dulu aku bicara, biarkan aku menyelesaikan pertanyaanku",
Syaikh kemudian berkata :
"Bukan itu, pertanyaanmu itu salah, seharusnya yang engkau katakan bahwa aku yang menumpang sama ibuku", sang pemuda kemudian terdiam sejenak kemudian berkata "kalau begitu masalahku sudah selesai ya syaikh".
---------------------------------------------------------
Nabi shallallahu alaihi wa sallam bersabda "Engkau dan hartamu milik orang tuamu. Sesungguhnya anak-anakmu adalah sebaik-baik hasil usahamu. Makanlah dari hasil usaha anak-anakmu." (HR. Abu Daud)