Form dan Filtering Vue.js

Kali ini saya akan melanjutkan tentang Vue.Js dan akan membuat tutorial membuat form dan filtering. Form ini nantinya akan menampilkan inputan ker server.

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

Selanjutnya masukan kode berikut untuk membuat form yang sudah terhubung dengan variable-variable dari fungsi vuenya.

 maka hasilnya akan  tampil seperti pada gambar berikut:

Lanjut tambahkan kode berikutnya dari gambar di bawah ini.
kode di bawah ini adalah untuk output yang terpilih dari inputan form di atas

Jika berhasik maka hasilnya akan seperti gambar dibwah ini.

Selanjutya tambahkan kode dibwah ini. Kode dibawah ini adalah untk penginputan ke kode output, dan pengiriman ke server.

Selanjutnya buat file baru dengan nama proes.php dan masukan kode berikut:

sekarang kita lohat hasilnya, jalankan pada browser maka tampilannya akan seperti berikut

kemudian jika form tersebut kita isi secara manual maka akan terinput secara otomatis seperti gambar dibawah ini

Selanjutnya klik kanan dan pilih inspect dan di tab console. Lanjut kira klik kirim di form dan hasilnya akan terkirim ke server seperti pada gambar berikut:


Filtering

Selanjutnya kita akan membuat filtering, dimana ada inputan berupa searching produk-produk yang ada.

Seperti sebelumnya diatas kita juga menggunakan Boostrap untuk tampilan kita, masukan kode berikut untuk tampilan card.

Selanjutnya masukan kode berikut untuk mengisi data-data dari tampilan card tersebut dengan kode vuenya.

jika sudah, maka hasilnya akan seperti berikut

sekian untuk tutorial kali ini, semoga bermanfaat !!!!!

Penerapan Hybrid Cloud Pada Proses Institusi Perguruan Tinggi

Hello teman-teman kali ini kita akan membahas sedikit tentang studi kasus Deployment model cloud computing. kita ulas dulu apa itu Cloud Computing

Cloud Computing merupakan layanan jasa TI yang dilakukan oleh perusahaan lain, dimana pengguna layanan tidak perlu menyiapkan perangkat atau infrastruktur sendiri karena sudah disiapkan perusahaan tersebut. 

Cloud merupakan layanan berbasis internet, jadi seluruh kebutuhan pengguna akan dilayani melalui koneksi internet. Disebut sebagai “komputasi awan”, karena layanan diakses melalui internet dan digambarkan seolah-olah disimpan di awan. 

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

Private Cloud merupakan layanan cloud yang aman dimana hanya bisa diakses oleh satu organisasi dan melalui jaringan private. Sementara Public Cloud merupakan layanan cloud yang dapat diakses oleh banyak pengguna melalui jaringan publik. Sedangkan Hybrid Cloud merupakan layanan cloud yang mengintegrasikan baik Private Cloud dan juga Public Cloud untuk menghadirkan fungsi yang beragam pada organisasi yang sama.

Implementasi Model Hybrid Cloud

• Memisahkan penyedia Cloud untuk menyediakan kedua layanan Private dan Public Cloud sebagai layanan terintegrasi.
• Penyedia cloud individu menawarkan paket hybrid yang lengkap.
• Organisasi yang mengelola Private Cloud mereka sendiri, dan juga berlangganan layanan Public Cloud , kemudian mereka mengintegrasikannya ke dalam infrastruktur mereka.

Penerapannya pada institusi perguruan tinggi dapat mengimplementasikan hybrid cloud hosting contohnya untuk menyimpan data mahasiswa serta data penting lainnya pada perguruan tinggi tersebut dalam Private Cloud, dimana lebih aman dan dapat dikembangkan.

kita ambil contoh http://siakad.poltektedc.ac.id/ situs ini bersivar Private kenapa? karena hanya bisa di akses oleh pihak admin akademik sendiri priahal CRUD nya dan mahasiswa yang dapat melihat nilai sendiri sebagai user mahasiswa dengan cara login NIM, seperti gambar dibawah ini

Sedangkan website informasinya disimpan pada Public Cloud agar dapat terlihat oleh publik secara umum, cara mengaksesnya pun mudah dengan cara masuk ke situs resmi perguruan tinggi tersebut, seprti cotoh dibawah ini

Sedangkan Hybrid Cloud merupakan layanan cloud yang mengintegrasikan baik Private Cloud dan juga Public Cloud untuk menghadirkan fungsi yang beragam pada organisasi yang sama.

Konfigurasi Hybrid Cloud Dapat Memberikan Pengguna Fitur Ini:

• Skalabilitas: Dengan memindahkan banyak fungsi yang tidak sensitif sebanyak mungkin ke Public Cloud, memungkinkan organisasi mendapatkan manfaat dari skalabilitas Public Cloud, sambil mengurangi permintaan akan Private Cloud.
• Efisiensi Biaya: Hybrid Cloud memungkinkan organisasi mendapatkan penghematan biasa dari Public Cloud, sambil tetap menjaga operasi yang sensitif tetap aman di Private Cloud.
• Keamanan: Fitur keamanan dari Private Cloud tetap dibawa, yang dibutuhkan oleh operasi yang sensitif.
• Fleksibiltas: Ketersedian baik itu dari sumber daya yang aman dan juga sumber daya publik yang lebih hemat biaya. Sehingga menyediakan organisasi lebih banyak kesempatan untuk mengeksplorasi cara oeprasional yang berbeda.

sekian pembahasan blog kali ini semoga bermanfaat !!!!

Derective & List Collection

kali ini lanjutan dari pembahasan sebelumny!!!

v-if  

directive yang digunakan untuk merender atau tidak merender suatu elemen DOM (conditional rendering)

buatlah sebuah file baru dengan nama directive.html dan tuliskan codenya seperti berikut

 jika selesai coba jalankan pada brosernya maka akan muncul tampilan berikut.

hasil diatas kenapa keluar angka "B" karena nilai nya lebih dari 70 perhatihan pada gambar sebelumnya pada line 17, jika kita rubah nilai nya dengan angaka lain seperti dibawah ini

dari gambar diata apabila nilainya  67 karena ketentuannya jika dibwah 50 maka hasilnya seperti dibawah ini

v-on

Directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue. Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue.

kita akan mencoba event v-on, ada banyak seklai event-event di dalam vue.js ini, kali ini kita hanya mencoba event onclick.

Buat file .html baru dan masukan kode berikut:

Dan coba buka di browser dan hasilnya sebagai berikut:
Klik tombol tambah maka nilai pada gambar berikut akan bertambah 1

Jika kita Klik button seperti pada gambar, maka responnya seperti berikut

Selanjutnya klik link seperti pada gambar maka akan redirect ke link tersebut, disni akan link ke Google

List Collection

Selanjutnya membuat data list collection dengan design sederhana seperti menu pada Eleectronic Shopp yang sudah di bantu dengan boostrap.

Buat file .html dan masukan kode berikut:

kemudian kita tambahkan gambar yang kita perlukan, seperti gambar betrikut

ketika dijalankan pada browser maka hasilnya seperti berikut

selesai!!!

pembelajaran Dasar Vue

kembali lagi!!!
masih dalam pembahasan tentang Vue.js kali ini akan membahas dasar-dasar siklus dari vue.js seperti create, mount, update, dan destroy.


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, tambahkan script berikut.

Jalankan kembali di browser maka akan muncul tampilan berikut pada console.

Berikutnya tambahkan siklus update, tambahkan script berikut.

Jika dijalankan pada browser maka tidak akan tampil apapun pada consolenya.

Selanjutnya tambahkan siklus destroy seperti berikut.

Lalu buka pada browser dan cek consolenya.

Menggabungkan Property Template, Data Raw, dan Data Attribute

Kali ini kita akan menggabungkan property template, data raw, dan data attribute. Masih dalam file yang sama, rubahlah kodenya menjadi berikut.

Lalu jalankan code tersebut pada browser, maka tampilannya adalah seperti berikut.

Kalkulator Sederhana

Kali ini kita akan membuat sebuah kalkulator sederhana menggunakan vue.js, pertama kita buat terlebih dahulu tampilan kalkulatornya seperti berikut.

Edit juga sedikit untuk css nya seperti berikut.

Ketika dijalankan pada browser maka tampilannya akan seperti berikut.

Test programnya pada browser, input angka pada kedual kolom inputan, lalu test semua buttonnya. Pertama test button penjumlahan.


button kali



button bagi




cukup sekian untuk tema kali ini
semoga bermanfaat!!!!