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

Pengenalan Vue.js

kali ini kita akan melakukan pengenalan pada vue.js, Vue.js merupakan framework javascript yang digunakan untuk membangun tampilan antarmuka pengguna dari suatu aplikasi berbasis web. Vue awalnya di desain untuk kebutuhan web, namun seiring perkembangan teknologi yang mendukung javascript, maka saat ini vue juga mulai dapat digunakan untuk mengembangkan aplikasi desktop dan mobile.

Kali ini kita akan mencoba untuk menampilkan data diri, namun dimanipulasi dari vue.js. Pertama kita buat dulu sebuah folder dengan susunan seperti berikut.

Pada file vue.js copykan script dari link berikut
https://vuejs.org/js/vue.js

Lalu tambahkan file dengan nama profil.html dan tambahkan scriptnya sebagai berikut.

Jalankan pada browser maka hasilnya akan seperti berikut.

PENJELASAN

Pertama kita tambahkan terlebih dahulu library dari vue.jsnya pada tag script.

Lalu kita definisikan id nya pada div agar bisa dipanggil pada script vue.js nantinya.

Untuk mendefinisikan vue.js kita gunakan script new Vue({  }), di dalam kurung kurawal tersebut kita tuliskan scriptnya seperti berikut.

Parameter el: untuk mendifinisikan element id, dan data: untuk mendefinisikan data yang akan dimanipulasi.

Kesimpulannya adalah Vue.js ini adalah sebuah library javascript untuk memudahkan para developer dalam menuliskan syntax javascript menjadi lebih singkat. sekian untuk pengenalan vue.js kali ini.

PHP Lumen Service Docs

Dalam tutorial kali ini saya akan bahas tentang Lumen Service Docs. Saat ini API yang kita buat belum memiliki dokumentasi. Kita akan membuat dokumentasi bagaimana cara mengakses API yang telah kita buat.

Mempersiapkan Docs Generator

Untuk membuat docs generator kita akan menggunakan swagger-ui
( https://swagger.io/tools/swagger-ui/ ). Untuk membuatnya, silahkan ikuti langkah-langkah dibawah ini:

Install swagger-php plugins di projek lumen-service kalian. Pada terminal/CommandPrompt ketik command dibawah ini.

composer require zircote/swagger-php

Jika sudah selesai selanjutnya buat artisan command file. Buat file di app/Console/Commands/SwaggerDocScanner.php. Lalu masukan kode di bawah ini.

Buka file app/Console/Kernel.php, tambahkan code dibawah ini.

Untuk menjalankan artisan command SwaggerDocScanner dan menggenerate docs, pada terminal/CommandPrompt jalankan command dibawah. Command ini akan membuat file public/swaggerdoc.json. Saat ini kalau dijalankan, command ini bakal error, karena kita belum mendefiniskan anotasi docs nya.

php artisan swaggerdoc:scan

Untuk tampilan User Interface nya kita perlu mebuat file html di public folder. Buat file: public/api-docs.html, code nya seperti dibawah ini.

Run Lumen Server

Pada browser buka http://localhost:8000/api-docs.html

Membuat Dokumentasi API (Get Request)

Kita akan membuat API dokumentasi untuk endpoint /post/public. Untuk membuat dokumentasi API mengenai get Request, silahkan ikuti langkah-langkah dibawah ini:
Buka file app/Http/Controllers/Controller.php, tambahkan code dibawah ini.

Buka file app/Http/Controllers/Public/PostsController.php, tambahkan code dibawah ini.

Pada terminal/CommandPrompt jalankan command di bawah ini. Setiap kali anda mengubah anotasi docs, harus menjalankan command di bawah ini supaya bisa update docs nya.

php artisan swaggerdoc:scan

Pada browser buka http://localhost:8000/api-docs.html

Kalau anda click pada button GET, tampilanya seperti ini.

SIlahkan anda melakukan Try it out.

Membuat Dokumentasi API (Post Request)
Kita akan membuat API dokumentasi untuk endpoint /register. Untuk membuat dokumentasi API mengenai Post Request, silahkan ikuti langkah-langkah dibawah ini:
Buka file app/Http/Controllers/AuthController.php, tambahkan code dibawah ini.

Pada terminal/CommandPrompt jalankan command di bawah ini. Setiap kali anda mengubah anotasi docs, harus menjalankan command di bawah ini supaya bisa update docs nya

php artisan swaggerdoc:scan

Pada browser buka http://localhost:8000/api-docs.html

Silakan coba Try it out.

Membuat dokumentasi untuk semua endpoint

Pertama kita akan membuat untuk endpoint login user.
Tambahkan kode berikut di App\Http\Controllers\AuthController.php

Pada terminal/CommandPrompt jalankan command di bawah ini untuk update docsnya

php artisan swaggerdoc:scan

Pada browser buka http://localhost:8000/api-docs.html, dan akan muncul menu login

Silakan klik post login, dan klik Try it out, dan masukan user yang ada di database.

Jika berhasil responnya seperti ini:

Tambahkan kode berikut ke App\Http\Controllers\Controller.php
untuk menambahkan fitru authorization agar semua endpoint post jika kita akses maka membutuhkan token.

Pada terminal/CommandPrompt jalankan command di bawah ini untuk update docsnya

php artisan swaggerdoc:scan

Pada browser buka http://localhost:8000/api-docs.html

Selanjutnya tambahkan kode berikut untuk membuat endpoint show di App\Http\Controllers\PublicController\PostsController.php

Pada terminal/CommandPrompt jalankan command di bawah ini untuk update docsnya

php artisan swaggerdoc:scan

Pada browser buka http://localhost:8000/api-docs.html

Membuat dokumentasi untuk endpoint /posts

Sebelumnya kita telah membuat endpoint untuk /public/posts. sekarang kita akan membuat dokumentasi endpoint /posts.
Tambahkan kode-kode berikut di setiap function di App\Http\Controllers\PostsController.php

Pada terminal/CommandPrompt jalankan command di bawah ini untuk update docsnya

php artisan swaggerdoc:scan

Pada browser buka http://localhost:8000/api-docs.html

Sekarang kita coba di setiap endpoint.
Pertama kita perlu login terlebih dahulu untuk mendapat token agar bisa mengakses semua endpointnya.
Klik POST /auth/login dan klik Try it out

Masukan email dan passwordnya. jika berhasil maka akan keluar token seperti pada gambar berikut:

Selanjutnya klik tombol Authorize dan masukan token yang tadi:

Lanjut kita coba yang get posts, klik Try it out dan klik Execute

Jika berhasil seperti pada gambar berikut:

Selanjutnya kita akan mencoba Create new Posts, klik Try it out, masukan valuenya dan klik Execute

Jika berhasil akan seperti pada gambar

Selanjutnya kita akan mencoba Get Post By id, klik Try it out, masukan id dan klik Execute

Jika berhasil akan seperti pada gambar

Selanjutnya kita akan mencoba Update Posts, klik Try it out, masukan valuenya dan klik Execute

Jika berhasil akan seperti pada gambar

Selanjutnya kita akan mencoba Delete Posts, klik Try it out, masukan id yang akan dihapus dan klik Execute

Jika berhasil akan seperti pada gambar

Selesai.