Pengenalan Tools untuk pengembangan web 2.0
Development Tools (Vue.js)
- Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
- Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
- Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).
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 mode development (filenya tidak dikompres) dan 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:
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.
Uji Coba Vue
1. Masih pada folder project sebelumnya, buka file hello.html. Kemudian tambahkan kode berikut:
2. Kemudian jalankan pada 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 di atas akan menghasilkan tampilan yang sama dengan hello.html.
Penjelasan Kode
1. Pada contoh di atas memang tidak ada kelebihannya, bahkan tidak disarankan untuk menggunakan kode ini jika hanya untuk menampilkan teks statis pada browser. Namun dari kode sederhana ini, kita akan belajar tentang bagaimana Vue tersebut bekerja.
2. Pertama, kita butuh HTML untuk menjalankan kode-kode Vue, karena Vue hanyalah sebuah library Javascript yang tugasnya memanipulasi tampilan HTML.
3. Kedua, Kita perlu menambahkan (include) library Vue ke HTML sebagaimana yang telah dijelaskan pada bagian Instalasi karena Vue merupakan library Javascript.
4. Ketiga, Kita perlu membuat kontainer (mount point) berupa elemen HTML, untuk menandai bahwa di dalam elemen tersebut nantinya hasil kompilasi Vue akan ditampilkan atau dimuat. Sebagai penanda, kita perlu tambahkan atribut id pada tag tersebut yang nantinya akan didefinisikan pada saat inisiasi objek Vue.
5. Keempat, 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.
6. Kelima, Kita perlu membuat instance/objek baru untuk class Vue, yang tentunya ditulis dengan menggunakan Javascript.
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).
Uji Reaktifitas
1. Jalankan hellovue.html pada browser, kemudian klik kanan pada mouse, dan pilih inspect.
2. Masuk pada tab console, kemudian ketik perintah berikut : vm.message="Uji Reaktifitas" , lalu klik enter.
3. Pada tampilan browser, kalimat hello world akan berubah menjadi uji Reaktifitas.
4. Tanpa perlu melakukan refresh, saat itu juga teks yang muncul di halaman browser berubah sesuai dengan teks yang kita sematkan pada variabel message di console.
5. Pada kondisi nyata, tentu perubahan data tidak dilakukan dengan menggunakan console pada browser melainkan melalui cara-cara yang natural yaitu menggunakan perintah Javascript yang dijalankan misalnya
melalui event onclick button, input dari user, dsb.
Selanjutnya kita akan membuat data diri.
buat file html dengan nama datadiri.html dan masukan kode berikut:
Selanjutnya cek pada browser maka hasilnya akan seperti ini
Komentar
Posting Komentar