TOOLS UNTUK PENGEMBANGAN WEB 2.0 MENGGUNKAN VUE.JS

Maret 01, 2020

TOOLS UNTUK PENGEMBANGAN WEB 2.0 MENGGUNKAN VUE.JS

A. Development Tools (Vue.js)
Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.

B. Instalasi & Konfigurasi (Vue.js)
1.Sebagai sebuah library Javascript, maka kita perlu menambahkannya ke dalam halaman HTML sebelum menggunakaannya. Untuk melihat versi terbaru dan sebelumnya, silahkan cek pada tautan berikut https://github.com/vuejs/vue/releases.

2. Library Vue terbagi menjadi dua, yaitu :
1. mode development (filenya tidak dikompres)
2. mode production (file dikompres).
Sangat disarankan menggunakan mode development saat mengembangkan aplikasi menggunakan Vue karena semua informasi umum (warning) jika terjadi kesalahan kode akan dimunculkan.

3. File Vue yang akan ditambahkan ke dalam halaman HTML bisa diunduh ke lokal (sehingga tidak membutuhkan koneksi internet) atau ditautkan langsung dengan server library Vue (CDN). Kita bisa mengunduh pustaka Vue versi development pada tautan berikut https://vuejs.org/js/vue.js , Adapun versi production bisa kita lihat pada tautan berikut ini https://vuejs.org/js/vue.min.js.

4. Buatlah struktur folder seperti berikut.

5. Copy code dari link berikut https://vuejs.org/js/vue.js, kemudian paste pada file lib/vue.js

6. Sebagaimana umumnya library javascript, untuk menambahkan ke halaman HTML maka cukup dengan kode berikut : <script src="lib/vue.js"></script>

7. Untuk mengembangkan aplikasi skala besar, maka instalasi Vue disarankan dengan menggunakan package manager seperti NPM. Disamping itu, Vue membuat tools CLI https://cli.vuejs.org yang akan memudahkan kita dalam membuat scaffolding projek aplikasi (manajemen kode & tools serta konfigurasi saat pengembangan aplikasi).

C. Uji Coba Vue
1. Masih pada folder project sebelumnya, buka file hello.html. Kemudian tambahkan kode berikut :

2. Kemudian jalankan di browser. Akan muncul tulisan Hello world

3. Selanjutnya buat file baru, dengan nama hellovue.html

4. Kemudian tambahkan kode berikut :

5. Kemudian jalankan kode tersebut pada browser. Kode dengan hasil di atas akan memunculkan tampilan yang sama dengan hello.html.

D. Penjelasan Kode Bagaimana Vue Bekerja.

1. Kita butuh HTML untuk menjalankan kode-kode Vue. karena Vue sebuah library Javascript yang tugasnya hanya untuk memanipulasi tampilan HTML.

2. Kita perlu menambahkan (include) library Vue ke HTML sebagaimana yang telah dijelaskan pada bagian Instalasi karena Vue merupakan library Javascript.

3.Kita perlu membuat kontainer (mount point) berupa elemen HTML, yang berfungsi menandai bahwa di dalam elemen tersebut nantinya hasil kompilasi Vue yang akan ditampilkan atau dimuat. Sebagai penanda juga perlu ditambahkan atribut id pada tag tersebut yang nantinya akan didefinisikan pada saat inisiasi objek Vue.

4. Kita perlu menggunakan double kurung kurawal untuk menandai bahwa teks tersebut merupakan variabel yang akan dimanipulasi oleh Vue, model seperti ini telah umum digunakan diberbagai template engine.

5. Kita perlu membuat instance/objek baru untuk class Vue, yang tentunya ditulis dengan menggunakan Javascript.

6. Objek Vue yang dibuat ini disimpan ke dalam variabel bernama vm (nama bebas) untuk memudahkan kita nantinya dalam mengakses objek ini. Objek Vue pada kode di atas menggunakan dua properti yaitu el dan data. Properti el menunjukkan id dari elemen HTML yang akan dijadikan sebagai target atau tempat ditampilkannya hasil manipulasi data dan template.

7. Properti berikutnya adalah data yang berbentuk objek, dimana di dalamnya terdapat key message dengan nilai ‘Hello world!’ yang merupakan representasi dari variabel. Key atau variabel dalam properti data inilah yang akan mengubah kode template {{ message }} menjadi teks “Hello world!”. Dengan kata lain, jika kita mengubah nilai dari variabel message ini menjadi misalnya “Hello Vuejs!” maka tentu tampilan yang kita lihat pada browser juga akan berubah sesuai teks tersebut.

8. Kita bisa mengakses properti dan variabel dalam objek vm tersebut, misalnya untuk mengakses properti el atau data maka kita bisa gunakan perintah vm.$el atau vm.$data. Adapun untuk mengakses variabel message dalam properti data kita bisa gunakan perintah vm.$data.message atau langsung vm.message (tanpa tanda dollar).

Sekarang kita akan membuat latihan halaman yang menampilkan data diri sendiri, menggunakan vue.js. Contoh yang ditampilkan pada browser seperti berikut: